Neues, responsives Layout
Wenn es gerade zwei Webdesign-Trends gibt, dann sind das Webfonts und “responsive Webdesign”. Über Webfonts lassen sich Schriftarten auf Websites nutzen, selbst wenn sie auf den Systemen der Besucher nicht installiert sind. Auch wenn Arial, Verdana, Helvetica, Times New Roman und Georgia nicht der Vergangenheit angehören werden, werden derzeit immer mehr Nicht-Standard-Fonts verwendet. Responsive Webdesign, also reagierendes Webdesign, bezeichnet Layouts, die sich dem Umfeld der Besucher anpasst. Was auf dem 21-Zoll-Monitor gut aussieht, kann auf einem kleinen Netbook oder gar auf dem Smartphone unbrauchbar sein. Gerrit van Aaken hat vorgemacht, wie ein sich anpassendes Layout funktionieren muss. Egal wie breit das Fenster ist, es wird stets das passende Layout angezeigt.
Beide Trends will ich in diesem neuen Layout anwenden. Als Schriftarten kommen neben der altbekannten Arial für den Fließtext zwei Android-Fonts zum Einsatz: Droid Sans und Droid Serif. Das Layout passt sich in drei Stufen der Breite des Browser-Fensters an. Ab 1044 Pixel Breite wird ein (nicht zu) breites Layout angezeigt. Von 750 Pixel bis 1043 Pixel wird die Breite der Seitenleiste eingeschränkt, damit mehr Platz für den Inhalt bleibt. Der Fließtext wechselt von Block- zu Flattersatz, da sich bei geringer Breite sonst große Lücken ergeben. Unter 820 Pixel wird das Layout ein-spaltig. Bilder werden per max-width automatisch angepasst, damit kein vertikales Scrollen notwendig ist (zu testen z.B. mit der IrfanView-Anleitung).
Die Sidebar habe ich zudem sehr viel schlichter gehalten. Social-Media-Buttons, Kategorie-Links und ähnlichen Kram braucht eigentlich niemand. Die für verschiedene Posts/Seiten jeweils unterschiedliche Bebilderung im Header ist dagegen geblieben: Abwechslung muss sein!
22. July 2011 — webdesign — 0 Kommentare