Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 16. Juni 2017

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -ent­wick­lung haben sich in den ver­gan­ge­nen Jahren enorm geän­dert. Daran ist vor allem auch das mobi­le Internet ver­ant­wort­lich, was die Art und Weise, wann und wie wir das Internet nut­zen, ver­än­dert hat. Vieles, was vor zehn Jahren noch gän­gig war, gilt heu­te als über­holt. Selbst vie­les, was vor zwei bis drei Jahren noch völ­lig aktu­ell war, gilt heu­te als ver­al­tet. Welche Dinge soll­test bei der Gestaltung und Entwicklung moder­ner Websites lie­ber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du dei­ne Website nur für eine Ansicht ent­wi­ckelt hast, sind ja nun schon lan­ge vor­bei. Und man fin­det mitt­ler­wei­le nur noch weni­ge Websites, die ohne respon­si­ves Layout aus­kom­men.

Doch häu­fig wer­den beim respon­si­ven Layout nur zwei Geräte- bezie­hungs­wei­se Displaytypen berück­sich­tigt: der klas­si­sche Monitor und das Smartphone. Dabei erhält zumin­dest das Desktoplayout eine fes­te Breite, wäh­rend das mobi­le Layout häu­fig auf die gesam­te Breite des Browserfensters aus­ge­dehnt wird.

Die Unterscheidung nur zwi­schen Desktop und Smartphone ist mitt­ler­wei­le jedoch viel zu kurz gegrif­fen. Denn es gibt mit Tablets und Phablets mitt­ler­wei­le eine Vielzahl unter­schied­li­cher Geräte mit diver­sen Auflösungen. Die Unterscheidung zwi­schen nur zwei Typen wird die­ser Entwicklung nicht gerecht. Daher soll­test du dein Layout so fle­xi­bel hal­ten, dass es auf allen Auflösungen funk­tio­niert.

Auf gro­ßen Monitoren soll­te dein Layout kei­ne ver­schwen­de­risch gro­ßen Ränder links und rechts haben. Und auf Tablets soll­te nicht das Layout für Mobilgeräte dar­ge­stellt wer­den.

Eigene Mobilversion deiner Website

Bleiben wir beim mobi­len Webdesign. Als die Möglichkeiten respon­si­ver Websites noch sehr ein­ge­schränkt waren, wur­den eige­ne Mobilversionen für Websites ent­wi­ckelt. Noch heu­te haben vor allem gro­ße Newsportale immer noch eige­ne Mobilversionen, die meist über eine eige­ne Subdomain zugäng­lich sind.

Hier ergibt sich natür­lich das­sel­be Problem mit den Layouts. Darüber hin­aus sind immer zwei Versionen einer Website zu pfle­gen. Und häu­fig funk­tio­niert die Ausgabe der rich­ti­gen Version nicht. Da wird auf Tablets ger­ne mal die Mobilversion gela­den, obwohl die Auflösung eigent­lich pro­blem­los die Desktopversion anzei­gen könn­te.

Inhalte fürs mobile Internet verstecken

Websites wer­den zuneh­mend kom­ple­xer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken wer­den kom­bi­niert mit mehr­spal­ti­gen Texten und zusätz­li­chen Sidebars.

Und auch der Unterschied zwi­schen den Display- bezie­hungs­wei­se Monitorgrößen wird immer grö­ßer. So gilt es heut­zu­ta­ge, Websites zu gestal­ten, die auf gro­ßen Monitoren eben­so gut aus­se­hen wie auf klei­nen Smartphones.

Das ist durch­aus eine Herausforderung. Viele Webdesigner gehen da einen ein­fa­chen, aber nicht emp­feh­lens­wer­ten Weg. Angeblich ver­zicht­ba­re Inhalte wer­den auf Smartphones ein­fach ver­steckt. Das mag im ers­ten Moment sinn­voll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewähr­leis­ten.

Aber da Websites oft häu­fi­ger mobil besucht wer­den als über einen Desktoprechner, ist die­ses Vorgehen natür­lich nicht im Sinne des Besuchers. Daher soll­ten auf Smartphones kei­ne Inhalte vor­ent­hal­ten wer­den. Vielmehr soll­test du schau­en, wie du alle Inhalte platz­spa­rend und über­sicht­lich prä­sen­tierst. So kannst du Slider ein­set­zen oder Inhalte über eine Sidebar aus­blen­den und per Button ein­blen­den las­sen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regel­rech­ten Unsitte haben sich soge­nann­te „Modal Boxes“ ent­wi­ckelt, die beim augen­schein­li­chen Verlassen einer Seite über den gesam­ten Inhalt sel­bi­ger gelegt wer­den. In sol­chen Bereichen wird dann bei­spiels­wei­se auf den Newsletter oder auf irgend­wel­che Angebote hin­ge­wie­sen.

Wenn man tat­säch­lich dabei ist, eine Seite zu ver­las­sen, sind sie nicht stö­rend. Wer aber nur ver­se­hent­lich die Maus aus dem obe­ren Bereich der Seite hin­aus­be­wegt, wird bereits mit einem sol­chen Screen beläs­tigt.

Wer sei­ne Besucher also nicht ver­är­gern will, soll­te auf die­se Pop-ups des moder­nen Webdesigns ver­zich­ten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die unge­fragt den Inhalt einer Website ver­de­cken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobi­ler gewor­den; es ist auch hoch­auf­lö­sen­der gewor­den. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, son­dern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schär­fer.

Bei Bildern macht sich das zuneh­mend bemerk­bar. In ein­fa­cher Auflösung sieht ein Bild auf einem hoch­auf­lö­sen­dem Display ver­wa­schen und unscharf aus. Doch HTML5 und CSS3 erlau­ben es dir, Bilder für ver­schie­de­ne Pixeldichten zu hin­ter­le­gen.

Nutze die­se Möglichkeit, damit dei­ne Website auch auf neu­en Geräten nicht nur gut aus­sieht, son­dern auch gesto­chen scharf ist. Wähle zudem das rich­ti­ge Format für dei­ne Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vie­len Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzäh­li­ge kos­ten­lo­se und kos­ten­pflich­ti­ge Schriften, die du in dein Webprojekt über­neh­men kannst. Achte dar­auf, dass du es die­se Schriften im neu­en Format WOFF2 gibt. Dieses löst das bis­he­ri­ge Standardformat WOFF ab und ist dank bes­se­rer Komprimierung noch platz­spa­ren­der. Und das ist gera­de im mobi­len Internet ein gro­ßer Vorteil.

Achte zudem dar­auf, dass du Schriften nicht zu klein ein­setzt. Vor allem set­ze nicht auf eine ein­heit­li­che, fes­te Schriftgröße. Auf Smartphones soll­ten Schriften eine ande­re Größe haben als auf gro­ßen Monitoren.

Den Besucher warten lassen

Heutzutage erwar­tet man zurecht, dass Websites sich schnell auf­bau­en. Daher soll­test du dei­ne Website so ent­wi­ckeln, dass sie schnell gela­den wird. Optimiere Bilder und ver­wen­de das rich­ti­ge Format.

Nutze Techniken wie das „<picture>“-Element, um immer pas­send gro­ße Bilder aus­zu­lie­fern. Lade auf Smartphones Bilder in klei­ne­rer Auflösung und nicht in einer Auflösung, wie sie auf einem gro­ßen Monitor benö­tigt wird.

Achte dar­auf, dass JavaScript die Ausgabe von HTML nicht blo­ckiert oder ver­lang­samt und ver­si­che­re dich, dass extern ein­ge­bun­de­ne Dateien dei­ne Ladezeiten nicht nega­tiv beein­flus­sen.

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

10 Kommentare

  1. Hallo!

    Warum kei­ne Systemschriftarten ver­wen­den? Gerade die­se sind für das jewei­li­ge System opti­miert und sehen immer gesto­chen scharf aus. Außerdem hat man alle Varianten und Kombinationen aus nor­mal, fett und kur­siv bereits ver­füg­bar, wäh­rend die­se bei Webschriftarten die zu lade­nen Dateien erheb­lich ver­grö­ßern. Und damit die Ladezeit.

    Warum auf gro­ßen Bildschirmen kei­ne Ränder? Füllt man den gan­zen Bildschirm mit Inhalt, ver­liert sich der Besucher häu­fig. Da geben Ränder einen schö­nen abge­grenz­ten Raum, indem man sich zurecht fin­det.

    Warum kei­ne Inhalte für mobi­le Versionen ver­ste­cken? Ich fin­de, dass es hier stark auf die Webseite ankommt. Bei eini­gen Seiten wer­den bestimm­te Inhalte auf dem Smartphone ein­fach nicht benö­tigt oder nur von einer so gerin­gen Anzahl an Besuchern benö­tigt, dass sich die Anzeige für die ande­ren nicht lohnt.

    Warum kei­ne “ein­fa­chen Auflösungen”? Auch hier kommt es stark dar­auf an, was für eine Webseite erstellt wer­den soll. Bei einem Fotografen sind die Bilder natür­lich enorm wich­tig, wäh­rend man sich bei der “Durchschnittsseite” fra­gen soll­te, ob das den Aufwand wert ist, für zig ver­schie­de­ne Geräte und Auflösung unter­schied­li­che Bilder zur Verfügung zu stel­len. Das ist auch eine Frage des Geldes (des Kunden), ob er bereit ist, den Aufwand dafür zu bezah­len.

    Viele Grüße
    Heiko Mitschke

    • Warum kei­ne Systemschriftarten ver­wen­den? Es ist halt schö­ner, wenn Websites nicht alle die weni­gen mög­li­chen Systemschriften ver­wen­den. Und dank WOFF2 sind die Dateigrößen noch­mals klei­ner gewor­den.

      Warum auf gro­ßen Bildschirmen kei­ne Ränder? Im Idealfall soll­te ein Weblayout so auf­ge­baut sein, dass es den Platz des Browsers bzw. Displays opti­mal aus­nutzt. Gähnende Leere links und rechts sieht ein­fach nicht schön aus.

      Warum kei­ne Inhalte für mobi­le Versionen ver­ste­cken? Da immer öfter mobil gesurft wird, soll­te auf Mobilgeräten der­sel­be Inhalt zu fin­den sein wie auf Desktopgeräten. Ich möch­te jeden­falls nie­man­dem zumu­ten, extra auf einem Notebook oder so eine Website auf­zu­ru­fen, nur weil er in der Mobilansicht etwas nicht sieht.

      Warum kei­ne ein­fa­chen Auflösungen? Bilder in ein­fa­cher Auflösung sehen auf hoch­auf­lö­sen­den Displays ein­fach unscharf und mat­schig aus. Auch bei Durchschnittsseiten soll­te das berück­sich­tigt wer­den.

      Also: Wer Systemschriften, Ränder und ein­fa­che Auflösungen ver­wen­den will, kann das ja machen. Es spricht ja auch grund­sätz­lich nichts dage­gen. Aber in dem Artikel geht es ja dar­um, was man bei moder­nem Webdesign ver­mei­den soll­te.

      • Hallo!

        Danke für die Antwort. Das heißt aber, dass der Artikel nichts über “Modernes Webdesign” im Allgemeinen berich­tet, son­dern nur über den per­sön­li­chen Geschmack des Autors. Denn “schö­ner” ist rein sub­jek­tiv, oft ist es eben sinn­vol­ler, “effi­zi­en­te” und für das System opti­mier­te statt “schö­ne” Schriftarten zu ver­wen­den. Bestimmt gibt es auch vie­le, die Systemschriftarten schö­ner fin­den als Webschriftarten. Daher kann das für mich kei­ne all­ge­mein gül­ti­ge Aussage für “moder­nes Webdesign” sein, da für jedes Projekt ein­zeln ent­schie­den wer­den soll­te, was bes­ser ist.

        Mit den ande­ren Punkten ver­hält es sich genau­so. Ich per­sön­lich fin­de bspw. “gäh­nen­de Leere” links und rechts schön und Weißraum stei­gert die Übersichtlichkeit und Deutlichkeit enorm. Nur weil “Webdsigner” und Kunde den wich­ti­gen Inhalt und die wich­ti­ge Botschaft nicht her­aus­ar­bei­ten wol­len oder kön­nen, heißt das nicht, dass durch das Zumüllen der gan­zen Bildschirmbreite irgend­et­was bes­ser wahr­ge­nom­men wird.

        An dem Artikel hat mich gestört, dass fast nicht begrün­det oder mit irgend­wel­chen Studien, Zahlen oder woan­ders mit belegt wur­de. “Fenster über den Inhalt legen” fin­de ich per­sön­lich auch nicht schön, dass es damit aber vie­le Probleme gibt, wenn man die Maus “in den obe­ren Bereich der Webseite” bewegt, kann ich nicht bestä­ti­gen. In dem Fall wol­len ja zahl­rei­che Studien her­aus­ge­fun­den haben, dass sol­che Werbemaßnahman äußerst effi­zi­ent sein sol­len…

        Viele Grüße
        Heiko Mitschke

    • Zum Thema Schriftarten mag ich mich nicht äußern. Das hat viel mit Geschmack zu tun. Und eine Systemschriftart soll­te eh immer als Fallback defi­niert sein.

      Allerdings mag ich zum Thema Bilder in ver­schie­de­nen Größen etwas anmer­ken.
      Natürlich soll­ten Bilder in ange­pass­ten Größen zur Verfügung gestellt wer­den. Das Geld-Aufwand-Argument kann ich nicht gel­ten las­sen. Jeder Webserver dürf­te in der Lage sein ein Bild in belie­big ver­schie­de­nen Größen zu berech­nen und auch aus­zu­lie­fern.
      So etwas zu imple­men­tie­ren ist kei­ne Raketenwissenschaft und ohne danach zu suchen behaup­te ich mal, wird es min­des­tens 10 ver­schie­de­nen Implementierungen für die­sen Fall geben.

  2. Drweb könn­te beim Design für ultrab­rei­te Monitore auch noch eini­ges ver­bes­sern:
    http://i.imgur.com/109U1sT.png

    • Natürlich hät­te ich auch ein Design für ultrab­rei­te Monitore erstel­len kön­nen. Allerdings muss die­se Website durch Werbung Geld ver­die­nen. Deshalb haben wir eine Standardbreite gewählt, in der auch bei klei­ne­ren Monitoren die Werbeblöcke kor­rekt ange­zeigt wer­den. Davon abge­se­hen fin­de ich den Fliesstext auf flui­den, sehr breit ska­lie­ren­den Themes schlecht les­bar.

  3. Hmm, kei­ne Systemschriften ver­wen­den? Warum nicht? Für die Headlines geht natür­lich ein Google- oder was auch immer Font. Für den Fliesstext kann es nicht ver­kehrt sein eine Systemschrift zu ver­wen­den. Übrigens habe ich bei der Entwicklung die­ses Themes den Fliesstext in Arial gesetzt. Nur mal so. Und der lässt sich ver­dammt gut lesen.

  4. …“Auf gro­ßen Monitoren soll­te dein Layout kei­ne ver­schwen­de­risch gro­ßen Ränder links und rechts haben.”
    Doch, genau so wie die DRWEB-Seite – find ich gut! Schlecht fin­de ich z.B. Smashing Magazin – da sitzt man ggf. davor wie bei einem Tennisspiel: Augen/Kopf nach links – Augen/Kopf nach rechts – Augen/Kopf nach links…

    Maxx

  5. Ungefragte Fenster und lang­sa­me Ladezeiten ärgern am meis­ten.

  6. Und: ver­wen­de kei­ne hell­graue Schriftfarbe!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.