• responsive design, kleiner Bericht...

    ...von einem leicht Beschränkten an die Schlauen oder Interessierten.

    Seit einiger Zeit bin ich euch hier auf die Nerven gegangen mit meinen Fragen zum responsiven Webdesign (z.B. hier [macfix.de]).

    Die Lage war:
    Ich hatte hunderte eigene Seiten in Tabellenform gemacht (mit Golive CS), auch für andere. Meine eigenen Seiten wollte ich komplett neu anlegen. Ich dachte, ich schaffe das in diesem Leben nicht mehr.

    Die Richtung:
    1. Ich werde es nie schaffen mich in Codeschreiben einzuarbeiten.
    2. Also brauche ich ein (altersgerechtes...) Programm, mit dem ich einigermassen intuitiv arbeiten kann.
    4. Perfektion strebe ich nicht an, aber Seiten, die man auf dem Smartphone ansehen kann.
    5. Also müssen die Seiten so einfach wie möglich sein.

    Als Erstes habe ich eine Menge Programme ausprobiert, hier eine kleine Auswahl:

    e Quick 'n Easy Web Builder 30 Euro im App Store
    d Webacappella responsive 80
    e Blocs 70
    e Macaw 0 nicht mehr weiterentwickelt
    d Sparkle 70 nur teilweise responsive
    e Pinegrow 45 komplex, aber interessant
    d Goldfish 50 / prof. 100 - naja
    d everweb 80 mobile Version wird separat erstellt
    d Sandvox ca 70 extrahiert alte Site, Templates

    Und Einführungsseiten gelesen. Eine gute Übersicht zum Thema bietet diese Seite:
    https://www.andersundsehr.com/blog/design/responsive-webdesign-potential-patrick-lobacher

    *

    Dann habe ich eine Weile mit dem Quick 'n Easy Web Builder rumprobiert. Nicht schlecht, das Programm und ziemlich funktionsreich, nur intuitiv finde ich den nicht.

    Dan kam die Wende: Danke Erbse!

    Dein Vorschlag von neulich mit MOBIRISE war nämlich ein Treffer. Kannte ich nicht. Das Programm ist simpel und intuitiv, und man ist sofort drin. Wenn man mehr will, kann man In-App-Käufe tätigen. Habe ich aber nicht gemacht, weil ich statische Seiten wollte. Die vielen Möglichkeiten mit Videohintergründen habe ich nicht genutz, obwohl das auch schon in der kostenlosen Basisversion geht. Mobirise ist spartanisch. Es zwingt dich in vorgegebene Strukturen, die man aber teilweise durch workarounds überreiten kann. Diese Askese ist beim Gestalten nicht unbedingt ein Nachteil: Content first.

    WYSIWYG funktioniert sehr überzeugend. Wenn man eine Seite lokal hat, dann läuft die responsiv, so wie sie im Programm aussieht, auch auf dem Handy oder Tablett. Interessant nebenbei die Funktion im Firefox (Tastenkombi alt+cmd+m), mit der man verschiedene Breakpoints testen kann. War mir neu.

    Die URL reiche ich demnächst mal nach, falls jemand fragt.

    Danke auch an ich.wars, svenne, Schlaefer, macvet und andere, dass ihr mir damals das alte Tabellenlayout ausgeredet habt.

    a.

    • ich frage..

      .. natürlich nach der URL

      • ich sage..

        .. natürlich die URL [bfy.tw]
        ----------
        Christian, MacFix.

        • wir reden..

          .. aber von der Seite von Apfelsaft? Nein?
          Du traust mit hoffentlich zu mobirise zu googeln?
          (was im ersten, oben verlinkten macfix Beitrag ja auch aufgeführt

          • Oops! ;-) n/t

          • sehr schön! - aber -

            ich glaube ich hätte drei Seiten in der jeweiligen Sprache gemacht, so wird das doch überladen mit 2/3 Text den man nicht liest

            • Nix aber ..

              gut strukturiert und übersichtlich, alles andere als überladen
              gefällt mir für dieses Thema gerade sehr gut
              im Gegenteil fände ich 3 separate Seiten hier falsch

              • Danke. Ich hatte kurz über 3 Sprachversionen nachgedacht.

                Ich möchte aber eine Seite schnell ändern können und schreibe die Texte gleich in den drei Sprachen (und nehme notgedrungen Fehler in Kauf). Die Seite gleich dreimal zu erstellen ist mir zuviel.

                a.

                • Du macht dir das leicht, das ist gut so...

                  Falls es dir trotzdem wichtig ist, kannst du ja an irgend einer passenden Stelle dezent darum bitten, das falls jemand einen Fehler in einer der anderen Sprachen findet, man dich darauf hinweisen darf.
                  Oder so ...

                  Bei dem Satz musste ich gerade laut lachen:
                  Diese Seiten verwenden keine Cookies. Wenn Sie unbedingt welche möchten, gehen Sie zur nächsten Bäckerei.

                  Dort wäre dann auch der richtige Platz, dem Leser zu sagen das er eventuelle Fehler nicht für sich behalten soll...

                  • Das mit den Fehler fiel mir auch ein.

                    Wäre aber ein Plagiat aus dem Forum. Hat mir gefallen, ist das deine Sig?
                    Die Cookies-Idee ist aber von mir.

                    Klar, wem was auffällt, dem wäre ich über eine Mitteilung dankbar. Noch ein Problem bei Mobirise: ich schaffe es nicht, einfach was zu korrigieren und hochzuladen. Irgendwie zerschiesst es mir immer wieder die Dateistruktur auf dem Server, wenn ich nur einzelne Sachen lade mit Cyberduck oder FileZilla. Mit der Mobilise-Ladefunktion geht es erst recht nicht, obwohl die anbietet "publish changes only". Ich will nicht die ganzen Assets mit allen Bildern jedesmal neu laden.

                    a.

          • Wunderbar...

            ... allerdings scheinen mir die Bilder zu groß zu sein. Obwohl sie ja sehr klein sind, kann man ihnen beim Laden zusehen. Verkleinere sie auf die Pixelgröße, die tatsächlich nötig ist und platziere sie erst dann.

            • Da hast du recht. Die Bilder sind riesig.

              Ich hatte anfangs gedacht, Mobirise rechnet sie automatisch runter. Was für eine Bildgrösse würdest du nehmen?

              Noch ein Nachteil: die Bildergalerie ist sehr hakelig, man kann leider die Bilder nur einzeln ins Programm laden. Ausserdem überdeckt der Bildtitel in der Galerievorschau das Thumbnail. Ganz blöd, die grösste Schwachstelle von dem Programm. Also habe ich die Titel als Teil des JPG eingefügt und hoffe, es gibt mal ein Update, was das ändert. Dafür würde ich sofort was zahlen, muss ja nicht alles umsonst sein.
              Wenn man nur eine kleine Site mit ein paar Bildern baut, fällt das nicht so ins Gewicht.

              a.

                • Da kann man noch was verbessern. Sowieso.

                  Wenn man einmal anfängt, hört es nie auf. Ein Abstand hier ist zu klein, ein Komma da fehlt, und überhaupt... Zweifel an der gesamten Konzeption. Ist wahrscheinlich mein Schicksal. Am Anfang hatte ich sogar sowas wie ein Punk-Layout im Sinn. Dann fiel mir ein, ich bin ja gar kein Punk.

                  a.

              • Ich würde die Größe nehmen...

                ...die auch abgebildet ist, also ein paar hundert Pixel im Quadrat. Jetzt scheinen es ein paar tausend zu sein, die dann nur noch skaliert werden. Bei einer Galerie habe ich 1000x1000 genommen, nur bei schirmfüllenden Bildern 2000x2000.

                • darüber hinaus

                  würde ich die Bilder vor dem Verwenden noch durch folgendes Programm jagen: https://imageoptim.com/mac . Damit werden sie nochmal optimiert und verkleinert. Weitere Optionen die Sinn machen würden wären zum Einen bei deinem Hoster Gzip zu aktivieren sollte es bei deinem gewählten Packet dabei sein (dann ist es einfach über das Admininterface zu erreichen). Zum Anderen würde ich an deiner Stelle kucken die Zahl der Schriften und vor allem der geladenen Font-weights zu reduzieren. Aktuell hast du Lora in vier Varianten, Montserrat in zweien und dann noch Raleway in achtzehn. Das macht das Laden langsam in der Summe.

                    • hmmm

                      ich kenn das mobirise nicht aber wenn du dir z.b. den head deiner startseite ankuckst dann hast du dort die links zu den fontfamilien lora, montserrat und raleway... innerhalb der css datei mbr-additional.css wird dann noch open sans und roboto importiert. wenn du dir aber deine seite direkt mittels der chrome extension "whatfont" ankuckst wird dort nur die opensans verwendet. sprich es kuckt auf den ersten blick eher nicht so aus dass die anderen fonts irgendwo verwendet werden. eher dass sie einzig umsonst importiert und geladen werden.

                      • Sehe ich auch gerade im HTML.

                        Macht Mobirise vielleicht immer, dass die Standardschriften vorab geladen werden. Naja, trotzdem laden die Seiten bei mir relativ schnell. Demnächst mache ich mal die Bilder kleiner.

                        a.

                        • ja

                          das mit den Bildgrößen solltest du auf jeden Fall noch machen. Alles in allem ist die Ladezeit ok. Würde aber trotzdem wie schon geschrieben zudem noch gzip aktivieren um html, css und js files zu komprimieren. Und falls in Mobirise möglich würde ich kucken auch die restlichen css und js files zu minifizieren.

                          • Minifizieren! Dafür kriegst du einen Preis.

                            Danke, dass du noch mitliest. Scheint wirklich so zu sein, das MR die Bilder runterrechnet. Aber nicht mehr rückwirkend. Was schon gross auf dem Server liegt, bleibt gross. Ist ja kein Drama, man kann ja jederzeit die ganze Site neu hochladen. Geht aber irgendwie, ich bin hier oft mit Edge unterwegs und selbst da laden die Seiten sozialverträglich.

                            a.

                            • Minifizieren! Dafür kriegst du einen Preis.

                              naja minifizieren und komprimieren sind aber zwei paar stiefel und sollte man beides machen. hier zum veranschaulichen http://www.whatsmyip.org/http-compression-test/?url=aHR0cDovL3d3dy5wZXRlcnBldHJpLmRlL2Fzc2V0cy90aGVtZS9jc3Mvc3R5bGUuY3Nz . mit aktiviertem gzip könntest du 83,8% der zu übertragenden menge an daten einsparen. gleiches gilt für die restlichen html, css und js files.
                              und bzgl der ladegeschwindigkeit ist sozialverträglich relativ. ich vermute mal du testet das ganze via dsl. der gradmesser ist eigentlich auf einem mobilen endgerät (und nicht so etwas wie einem iphone oder pixel) und einer langsamen 3g verbindung. da wirds dann aber schon ein stück weit zu technisch. aber die reinen daten wären:

                              1) via dsl modem:
                              https://www.webpagetest.org/result/170409_VX_XHN/

                              ist absolut ok, mit den änderungen bzgl bildgröße, optimierung der bilder mit imageoptim, minifizierung von css und js und der verwendung von gzip sollte das ganz unter dem szenario wirklich relativ flott werden

                              2) mit einem moto g4 und einer normalen 3G verbindung.
                              https://www.webpagetest.org/result/170410_TF_GY/

                              hier ist das ganze schon ein klein wenig langsamer und behäbiger (eigentlich nimmt man 3g slow zum testen oder emerging markets). aber mit den unter punkt 1 genannten punkten sollte es auch hier um einiges besser werden. dann mal gutes feilen.

                              • Ich teste zeitweise auch mit Edge.

                                Und mit extrem langsamem DSL, weil Router weit weg. Danke für die Hinweise, schaue ich mir alles mal an, Hab im Moment keine Zeit mehr für Details.
                                Ich dachte, "minimieren" hast du erfunden, dabei gibt's das ja schon. Tolles neues Wort.

                                a.

                                • erm nein

                                  nicht erfunden. du siehst doch bei manchen js files ein min.js diese sind "minifiziert". d.h. unnötige zeichen, vornehmlich leerzeichen, werden entfernt. sprich alles in einer zeile. da hast du dann nur noch einen langen block an zeichen.

    • Dazu dann mal eine Frage:

      Habe mir das mal kurz angesehen und es sieht so aus, als könnte es eine Lösung auch für mich sein.
      Ich suche eine Möglichkeit, eine kleine Website in aktuellem und ansprechendem Design zu bauen.
      Allerdings soll der Inhalt teilweise dynamisch sein. Mit MySQL und PHP komme ich klar, bin aber gestalterisch eher eine Niete. Grundkenntnisse in HTML sind vorhanden, von CSS habe ich eine Idee aber kaum Ahnung.
      Webspace mit PHP und MySQL ist vorhanden und per FTP zu beladen.
      Könnte dieses Mobirise eine Lösung für mich sein?
      Vielen Dank!
      ----------
      Gruß

      Skipper

      • Probier es doch einfach aus. Allerdings...

        ...das Einbinden von Bildern und diese mit Text (Titel oder sonstige Angaben) zu verbinden, ist zwar einfach, aber umständlich (s.o.).
        Das Programm selbst verstehst du quasi sofort. Bastele dir doch einfach eine Probeseite mit einer kleinen Bilderstrecke.

        a.

        • Ja, bin schon dabei...

          Sieht ja alles recht einfach aus. Die HTML-Dateien, die generiert werden sind auch recht übersichtlich. Ich denke, da kann ich etwas mit anfangen.
          Ich könnte z.B. in Mobirise nur Platzhalter-Texte einbauen. Dann werden nicht die originalen HTML-Dateien vom Webserver geliefert, sondern ein PHP-Script liest die ein, ersetzt die Platzhalter und liefert dann die vollständige Seite als HTML aus.
          Das ginge wohl recht einfach z.B. mit einer RewriteRule in der .htaccess-Datei.
          Klingt auf jeden Fall spannend. Vielen Dank für den Tip! Jetzt bräuchte ich nur noch etwas Zeit...
          ----------
          Gruß

          Skipper

          • Hier ist sie, die Zeit, gebe ich dir.

            Und schicke dir demnächst meine Kontonummer.
            Im Ernst, du hast mehr Ahnung von HTML als ich, also könnte das so klappen. Aber erstelle wirklich mal eine Bildergalerie, das ist der springende Punkt. In den In-App-Angeboten habe ich nichts gefunden, was besser ist als die Normalversion.

            a.

            • Mir geht es nicht um eine eigene Bildergalerie, sondern mehr um eine kleine Seite, die als "Hub" dienen soll.

              Also mehr eine Start-Platform mit Kontaktmöglichkeit und kurzen Seiten mit Verweisen zu anderen Websites.
              Und dann habe ich da noch so eine Leiche im Keller, die ich im Jahr 2000 mal "von Hand" in BBEdit Lite als HTML geschrieben habe (Ich war jung und hatte kein Geld ). Da ist noch nichts mit CSS, sondern nur plain HTML. Die braucht eigentlich auch mal ein Update - aber die ist etwas umfangreicher.
              ----------
              Gruß

              Skipper

              • Na klar, das passt doch alles.

                Du kannst mit Mobirise auch viel komplexere Sachen machen als ich auf meiner Seite habe, zum Beispiel animiertes Scrollen und sowas. Ein Klick auf den blauen Pinsel rechts unten genügt.

                a.

                • Nur mal so als Rückmeldung: Vielen Dank für den Tip! Ich habe die Leiche aus dem Keller. ;-)

                  Mit Rewrite-Engine und PHP hielt sich der Aufwand auch in grenzen. Es sind nur 7 HTML-Dateien, die dynamisch mit Inhalt versorgt werden - sogar eine Umschaltung für zwei Sprachen konnte ich realisieren.
                  Bin eigentlich ganz zufrieden mit dem Relaunch - OK, man sieht den Seiten an, dass ich Ingenieur und nicht Webdesigner/Gestalter/Künstler bin - aber was soll's
                  wer einen Blick in die Genealogie meiner Familie werfen möchte (nicht sehr spannend): www.ravenshoern.de [ravenshoern.de]
                  ----------
                  Gruß

                  Skipper

                  • Mir gefällt der Minimalismus.

                    Da wird nicht suggeriert, dass in der Site 10 tolle Ostereier versteckt sind, die du erst findest, wenn du 10 Werbeinhalte gesehen hast.
                    You get what you are looking for.
                    Das Grau ist bei mit etwas dunkel.
                    Die Seite ist öffentlich, Gudrun kenne ich nicht, woher auch als Externer, würde ich anders formulieren.
                    Ein paar alte s/w-Bilder aus der Familiengeschichte wären vielleicht auch nicht verkehrt.
                    Kunst oder Nichtkunst, egal, Ingenieure haben vielleicht was, das manchen Künstlern fehlt: Strukturiertheit. Ist ja kein Mangel.

                    a.

    • Ich halte – nur meine unmaßgebliche Meinung – den Ehrgeiz, eine Website händisch responsiv gestalten zu wollen für einen Irrweg.

      Wordpress & Co. bieten mannigfaltige Lösungen – incl. freier oder bezahlbarer Template – als CMS verläßlichere Lösungen.

      Ich habe mich von Dreamweaver & Co (also alle anderen Offline-Editoren) verabschiedet und bin glücklich damit. Die Hoheit liegt nun beim Content und nicht mehr beim mühsamen Coding.

      Jede laienhafte Umsetzung kann nicht einmal im Ansatz das bewerkstelligen, was ich in der individuellen Einstellung eines Themes nicht verlässlicher darstellen möchte.

      Aber wer mag, darf ja gerne zu Fuß machen, was er oder sie möchte. Ist aber ein Anachronismus.
      ----------
      „Vielleicht gibt es schönere Zeiten, aber diese ist die unsere.“
      (Jean Paul Satre)

      • Hast du das auch richtig verstanden?

        Hier wird nichts händisch oder zu Fuß gemacht, das "responsive" funktioniert ganz von selbst, ohne jedes Zutun.

        • Aber sicher habe ich das verstanden.

          Der gestalterische Willen scheitert oft genug am Können und später dann an der Weiterentwicklung. Ich würde nur heute keine Website mehr ohne CMS machen oder in Auftrag geben wollen.

          Insbesondere dann, wenn ich mir Optionen offen halten möchte, später Inhalte über Plug-Ins einbinden zu wollen.

          Es kann ja jeder seine Homepage zusammenfrickeln wollen und können mit dem Editor nach Wahl – doch diese Webseite bleibt im Anachronismus des Printdesigns verhaftet – so responsiv sie auch sein mag – wenn ich mir keinen Gedanken um die Aktualisierung und Weiterentwicklung der Möglichkeiten machen will.

          Mal so auf die schnelle eine singuläre Darstellung ins Web zu bringen – klasse, gute Lösung mit mobirise oder anderen - aber auch Sackgasse. Und auch am grundsätzlichen Gedanken von »Webdesign« heute komplett vorbei agiert.
          ----------
          „Vielleicht gibt es schönere Zeiten, aber diese ist die unsere.“
          (Jean Paul Satre)

            • "frequently updated"

              Nichts gegen den Autor Anders Norén, aber er schreibt:

              "All of my WordPress themes are completely free, fully responsive, retina ready, thoroughly tested and frequently updated."

              Und:

              "Are you a fan of my WordPress themes?
              By making a PayPal donation, you support their continued development*. Thank you!"

              Da sehen wir das Dilemma.

              a.

          • Da bin ich nicht sicher...

            ... mobirise ist für Viele einfach die einzige Möglichkeit selbst etwas zu schaffen und zu gestalten was sie sonst eben nur machen lassen könnten oder gar nicht bekämen. Es ist nicht so, dass man bewusst und aus nicht nachvollziehbaren Gründen auf etwas verzichten würden, was man hätte oder könnte. Genau das ist der Punkt. Und genau deshalb gibt es sowas wie mobirise. Die Wahl, das so beurteilen zu können, haben nunmal nicht alle. Und selbst wenn es für dich eine Sackgasse ist, die am Gedanken des Webdesigns vorbei geht, ist das immer noch besser (wesentlich sogar) als nix. Ich glaube, den eigentlichen Grund, warum es sowas wie mobirise gibt, hast du nicht verstanden.

            • Hinzu kommt der Aufwand

              Ich betreue ein paar Webseiten, die meisten habe ich geerbt und ich bin immer erstaunt, was für ein Aufwand da für quasi nichts betrieben wird.

              Typo3-, WordPress-, Drupal-Installationen mit einem Traffic von 30Mb im Monat, hatte alles eine irre Kohle gekostet. Für was?

              Wenn ich mir den ganzen Spam anschaue, das meiste sind geknackte Wordpress-, Drupal- und Joomla-Installationen wo die Rechte auf dem Server verkehrt eingestellt sind, keine Updates gemacht werden - fürchterlich.

              Zur Installation von CMS-Systemen gehört, dass man Updates macht - fertig!

              Wenn man weiss was man will und nur selten einen Update der Inhalte hat, ist HTML einfach das beste.