HTML

Fluides Layout

Die Seite passt sich der zur Verfügung stehenden Breite an. Man will ja schließlich auch auf dem Mobiltelefon gut aussehen. Und Google bestraft Webseiten, die nicht für mobile Geräte angepasst sind.

Je nach Bildschirmbreite, nimmt die Webseite verschiedene Zustände an. Um die Übersicht nicht zu verlieren hilft es, die für die Zeit der Entwicklung, unterschiedlich einzufärben.

Einfärben und dann die breite des Browserfensters verändern.

Wird die Webseite im Mobil-Modus geöffnet, werden die grossen Hintergrundbilder und das ganze Javascript für das Auge und den mausverfolgenden Trabanten gar nicht geladen. Erst, wenn der Browser breit genug ist.

Raster

Sobald sich alle Elemente an einem Raster ausrichten, sieht die Seite gleich doppelt so aufgeräumt/professionell aus.

Schrift

DejaVu-Serif von mir sieht teilweise doof aus? DroidSans von GoogleFonts funktioniert auf anhieb besser und sieht besser aus.

Mehr

Hier werde ich noch mehr schreiben, aber ich will jetzt endlich die neue Seite online stellen. Was noch zu sagen ist, kann man an der ToDo/Done-Liste sehen.

Alte Versionen dieser Website

Die letzte Version dieser Seite hatte im Grunde das selbe Design, nur dass die Breite fix und der Header in Flash programmiert waren.

Um ein Hintergrundbild zu benutzen, das breiter als der Inhalt ist und auch breiter als viele schmale Bildschirme, war diese Anleitung sehr hilfreich.

Eine zweite Eigenschaft, die diese Website haben sollte betrifft den Footer. Der sollte auf keinen Fall auf halber Höhe des Bildschirms schwebt wenn nicht genug Inhalt vorhanden ist, sondern einen, der immer am unteren Rand klebt. Erreicht wird dieses Verhalten auch in alten Browsern am besten durch diese Sticky-Footer Technik.

Spannend fand ich ausserdem den Artikel über Textgrösse in CSS

noch andere Versionen

Da habe ich angefangen, Inhalte dynamisch nachzuladen. Im endeffekt habe ich daraus gelernt, dass man nicht einfach drauflosbasteln kann, das wird relativ schnell ganz schön kompliziert. Diesmal hab ich vorher mehr geplant und mich im Zuge dessen gegen eine Single-Page-App entschieden ;-)

Davor waren die Bildschirme kleiner und die Seite schmaler. Bildergalerien sollte man nicht mehr per Hand programmiern. Die zur Verfügung stehenden Bibliotheken sind auf jeden Fall besser getestet als alles, was man so zu Hause zusammenschustert. Das markanteste an dieser Version der Seite, war ihre Unübersichtlichkeit.