Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » HTML/CSS » Modernes Webdesign: Diese Fehler solltest du vermeiden

Modernes Webdesign: Diese Fehler solltest du vermeiden

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 11 Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 16. Juni 2017

Inhaltsverzeichnis

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine 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 vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Jocado Logo Texter München.

Jocado

Leipzig

pistis wordpress agentur logo

Philipp Pistis – WordPress Agentur

Zolling

Webdesign Doerrer Frankfurt.

Webdesign DOERRER

Frankfurt am Main

webtronix-media-laravel-agentur-frankfurt-hanau-logo-opt

Webtronix Media GmbH

Hanau

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

11 Antworten zu „Modernes Webdesign: Diese Fehler solltest du vermeiden“
— was ist Deine Meinung?

  1. Heiko Mitschke sagt:
    17. Juni 2017 um 20:43 Uhr

    Hallo!

    Warum keine Systemschriftarten verwenden? Gerade diese sind für das jeweilige System optimiert und sehen immer gestochen scharf aus. Außerdem hat man alle Varianten und Kombinationen aus normal, fett und kursiv bereits verfügbar, während diese bei Webschriftarten die zu ladenen Dateien erheblich vergrößern. Und damit die Ladezeit.

    Warum auf großen Bildschirmen keine Ränder? Füllt man den ganzen Bildschirm mit Inhalt, verliert sich der Besucher häufig. Da geben Ränder einen schönen abgegrenzten Raum, indem man sich zurecht findet.

    Warum keine Inhalte für mobile Versionen verstecken? Ich finde, dass es hier stark auf die Webseite ankommt. Bei einigen Seiten werden bestimmte Inhalte auf dem Smartphone einfach nicht benötigt oder nur von einer so geringen Anzahl an Besuchern benötigt, dass sich die Anzeige für die anderen nicht lohnt.

    Warum keine „einfachen Auflösungen“? Auch hier kommt es stark darauf an, was für eine Webseite erstellt werden soll. Bei einem Fotografen sind die Bilder natürlich enorm wichtig, während man sich bei der „Durchschnittsseite“ fragen sollte, ob das den Aufwand wert ist, für zig verschiedene Geräte und Auflösung unterschiedliche Bilder zur Verfügung zu stellen. Das ist auch eine Frage des Geldes (des Kunden), ob er bereit ist, den Aufwand dafür zu bezahlen.

    Viele Grüße
    Heiko Mitschke

    Antworten
    1. Denis Potschien sagt:
      18. Juni 2017 um 11:11 Uhr

      Warum keine Systemschriftarten verwenden? Es ist halt schöner, wenn Websites nicht alle die wenigen möglichen Systemschriften verwenden. Und dank WOFF2 sind die Dateigrößen nochmals kleiner geworden.

      Warum auf großen Bildschirmen keine Ränder? Im Idealfall sollte ein Weblayout so aufgebaut sein, dass es den Platz des Browsers bzw. Displays optimal ausnutzt. Gähnende Leere links und rechts sieht einfach nicht schön aus.

      Warum keine Inhalte für mobile Versionen verstecken? Da immer öfter mobil gesurft wird, sollte auf Mobilgeräten derselbe Inhalt zu finden sein wie auf Desktopgeräten. Ich möchte jedenfalls niemandem zumuten, extra auf einem Notebook oder so eine Website aufzurufen, nur weil er in der Mobilansicht etwas nicht sieht.

      Warum keine einfachen Auflösungen? Bilder in einfacher Auflösung sehen auf hochauflösenden Displays einfach unscharf und matschig aus. Auch bei Durchschnittsseiten sollte das berücksichtigt werden.

      Also: Wer Systemschriften, Ränder und einfache Auflösungen verwenden will, kann das ja machen. Es spricht ja auch grundsätzlich nichts dagegen. Aber in dem Artikel geht es ja darum, was man bei modernem Webdesign vermeiden sollte.

      Antworten
      1. Heiko Mitschke sagt:
        22. Juni 2017 um 23:33 Uhr

        Hallo!

        Danke für die Antwort. Das heißt aber, dass der Artikel nichts über „Modernes Webdesign“ im Allgemeinen berichtet, sondern nur über den persönlichen Geschmack des Autors. Denn „schöner“ ist rein subjektiv, oft ist es eben sinnvoller, „effiziente“ und für das System optimierte statt „schöne“ Schriftarten zu verwenden. Bestimmt gibt es auch viele, die Systemschriftarten schöner finden als Webschriftarten. Daher kann das für mich keine allgemein gültige Aussage für „modernes Webdesign“ sein, da für jedes Projekt einzeln entschieden werden sollte, was besser ist.

        Mit den anderen Punkten verhält es sich genauso. Ich persönlich finde bspw. „gähnende Leere“ links und rechts schön und Weißraum steigert die Übersichtlichkeit und Deutlichkeit enorm. Nur weil „Webdsigner“ und Kunde den wichtigen Inhalt und die wichtige Botschaft nicht herausarbeiten wollen oder können, heißt das nicht, dass durch das Zumüllen der ganzen Bildschirmbreite irgendetwas besser wahrgenommen wird.

        An dem Artikel hat mich gestört, dass fast nicht begründet oder mit irgendwelchen Studien, Zahlen oder woanders mit belegt wurde. „Fenster über den Inhalt legen“ finde ich persönlich auch nicht schön, dass es damit aber viele Probleme gibt, wenn man die Maus „in den oberen Bereich der Webseite“ bewegt, kann ich nicht bestätigen. In dem Fall wollen ja zahlreiche Studien herausgefunden haben, dass solche Werbemaßnahman äußerst effizient sein sollen…

        Viele Grüße
        Heiko Mitschke

    2. MFGSparka sagt:
      20. Juni 2017 um 17:43 Uhr

      Zum Thema Schriftarten mag ich mich nicht äußern. Das hat viel mit Geschmack zu tun. Und eine Systemschriftart sollte eh immer als Fallback definiert sein.

      Allerdings mag ich zum Thema Bilder in verschiedenen Größen etwas anmerken.
      Natürlich sollten Bilder in angepassten Größen zur Verfügung gestellt werden. Das Geld-Aufwand-Argument kann ich nicht gelten lassen. Jeder Webserver dürfte in der Lage sein ein Bild in beliebig verschiedenen Größen zu berechnen und auch auszuliefern.
      So etwas zu implementieren ist keine Raketenwissenschaft und ohne danach zu suchen behaupte ich mal, wird es mindestens 10 verschiedenen Implementierungen für diesen Fall geben.

      Antworten
  2. Patrick sagt:
    16. Juni 2017 um 21:51 Uhr

    Drweb könnte beim Design für ultrabreite Monitore auch noch einiges verbessern:
    http://i.imgur.com/109U1sT.png

    Antworten
    1. Andreas Hecht sagt:
      19. Juni 2017 um 12:29 Uhr

      Natürlich hätte ich auch ein Design für ultrabreite Monitore erstellen können. Allerdings muss diese Website durch Werbung Geld verdienen. Deshalb haben wir eine Standardbreite gewählt, in der auch bei kleineren Monitoren die Werbeblöcke korrekt angezeigt werden. Davon abgesehen finde ich den Fliesstext auf fluiden, sehr breit skalierenden Themes schlecht lesbar.

      Antworten
  3. Andreas Hecht sagt:
    16. Juni 2017 um 19:10 Uhr

    Hmm, keine Systemschriften verwenden? Warum nicht? Für die Headlines geht natürlich ein Google- oder was auch immer Font. Für den Fliesstext kann es nicht verkehrt sein eine Systemschrift zu verwenden. Übrigens habe ich bei der Entwicklung dieses Themes den Fliesstext in Arial gesetzt. Nur mal so. Und der lässt sich verdammt gut lesen.

    Antworten
  4. Maxx sagt:
    16. Juni 2017 um 15:22 Uhr

    …“Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben.“
    Doch, genau so wie die DRWEB-Seite – find ich gut! Schlecht finde 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

    Antworten
    1. Axel sagt:
      23. Januar 2023 um 4:39 Uhr

      Nehmen wir auch mal an, jemand hat einen sehr breiten Monitor, da könnte man mit dem Kopf schon „Tennis“ spielen. Ein nicht extrem zu breiter Inhalt, besonders mit Texten ist wohl OK, wobei es auch Seiten gibt, wo der Inhalt zu schmal ist…

      Antworten
  5. Olga Kulmann sagt:
    16. Juni 2017 um 9:48 Uhr

    Ungefragte Fenster und langsame Ladezeiten ärgern am meisten.

    Antworten
  6. Ede sagt:
    16. Juni 2017 um 9:05 Uhr

    Und: verwende keine hellgraue Schriftfarbe!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑