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.
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 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.