Webdesign
Donnerstag18. Juni 2009

Fast auf den Tag genau vor einem Jahr habe ich bei Dr. Web und im Smashing Magazine einen längeren Essay über “Flexible Layouts als die Herausforderung der Zukunft” veröffentlicht.

Schon damals – lange bevor mit dem IE8 und dem Safari 4 die letzten beiden Browsergrößen auf den Seitenzoom-Zug aufsprungen – war ich der Meinung, dass die von Opera 9 und Firefox 3 eingeführte Technik nicht das Allheilmittel für die zahlreichen Limitierungen pixelbasierter Layouts, bzw. der Sargnagel für flexible Layouts sein wird und hatte dies in den beiden Artikeln mit der immer weiter aufklaffenden Schere von Bildschirmauflösungen und der verstärkten Nutzung von Smartphones und Netbooks begründet. Seinerzeit entbrannte eine heiße Diskussion, danach war aber eigentlich die Luft raus und kaum jemand widmete sich mehr diesem Thema.

Umso erstaunter war ich heute über drei aktuelle, englischsprachige Beiträge (Danke Angar, für den Hinweis), die sich erneut dem Thema widmen und weitere gute Argumente für elastische und fluide (oder allg. flexible) Layouts liefern.

Der Beitrag auf 456bereastreet.com bringt ein sehr interessantes Argument: die Mehrsprachigkeit. Allein aufgrund der Sprache, in der Inhalte ausgegeben werden, verändert sich die Textmenge, bzw. deren Platzbedarf. Flexible Layouts können sich hier deutlich besser anpassen als fixe Konstrukte. Der Beitrag von Zoe Mickley Gillenwater geht noch deutlich tiefer ins Detail und bringt sechs weitere, gut durchdachte Argumente pro elastischem bzw. flexiblen Layout. Besonders interessant dabei ist der Punkt “Preserve design proportions”. Genau dies wird aktuell sehr gern als Grund angeführt, warum elastische Layouts in Zeiten eines funktionierenden Seitenzooms praktisch keine Relevanz mehr hätten (noch dazu, da sie sehr aufwändig in der Erstellung seien). Das überzeugende Argument pro elastischem Layout ist wieder einmal der User mit seiner Möglichkeit, die Standardschriftgröße seines Browsers/Betriebssystems beliebig nach oben oder unten anzupassen. Ein fixes Layout - Seitenzoom hin oder her - kann sich derartigen Gegebenheiten nicht anpassen, die Laufweiten der Texte ändern sich zwangsläufig und die schönste Typografie kann den Bach runter gehen.

Ich möchte hier nicht alle Punkte wiederholen. Die Beiträge sind hervorragend geschrieben, also lest selbst. Der sehr schön formulierten Zusammenfassung von Zoe Mickley Gillenwater schließe ich mich hiermit aus ganzem Herzen an.

Again, I have to stress that zooming is a great function for browsers to include. Also, fixed-width layouts are not evil—they are ideal in certain situations. But liquid and elastic layouts have a lot of benefits that fixed-width layouts in combination with browser zoom can’t necessarily match. ... Don’t use browser zooming as a reason to stop—or never start—making flexible layouts.

“Why browser zoom shouldn’t kill flexible layouts”, Zoe Mickley Gillenwater


Samstag07. März 2009

Im letzten Sommer habe ich in meinem Essay zu flexiblen Layouts (deutsch / englisch) ja für einigen Diskussionsstoff gesorgt. Im Rahmen dieses Beitrags hatte ich mir die Display-Statistiken von w3schools.com herangezogen, um darauf hinzuweisen, dass eine “Optimierung” von Webseiten auf eine feste Breite von 1024 Pixel Breite nicht wirklich Sinn macht, denn die absoluten Auflösungen und die damit verbundene Vielfalt steigen immer weiter an. Auf Basis der Statistik hatte ich damals eine Prognose für die Verteilung im Januar 2009 vorgestellt und diese gilt es nun, da die aktuellen Zahlen verfügbar sind, zu überprüfen.

Das Diagramm zeigt drei Graphen für Auflösungen von 800x600, 1024x768 Pixeln und alle darüberliegenden Auflösungen (Higher) als Volllinien. Die gestrichelten Linien entsprechen meiner Prognose für die Entwicklung bis Januar 2009 vom Juni letzten Jahres.

Wie man sieht, liege ich ganz schön daneben – im positiven Sinne. Denn der Anteil der höheren Auflösungen hat exponentiell zugelegt, während ich damals vorsichtig herangegangen war und damals nur eine lineare Zunahme angenommen habe. Dementsprechend ist auch der Anteil für die 1024x768 Auflösung kräftiger gefallen als vermutet. Während ich eine Abnahme auf ca. 42% geschätzt hatte, weist die Statistik aktuell nur noch 36% aus.

Das Gesamtbild verdeutlicht, wie vielfältig und nicht vorhersagbar die Randbedingungen sind, mit der Webseiten im Browser betrachtet werden. Zumal noch hinzukommt, dass der Browser selten im Vollbildmodus betrieben wird, sodass die noch ein weiterer Unsicherheitsfaktor (die Größe des Viewports) hinzu kommt. Ich selbst arbeite mittlerweile sowohl dienstlich als auch privat nur noch in Auflösungen von 1680x1080 oder darüber, der Brower lasse ich ausschließlich in einem Fenster laufen, ziehe jedoch das Fenster meist sehr weit auf, um beim Surfen nicht von anderen Applikationan abgelenkt zu werden. Die Viewportbreite meines Browserfensters liegt daher gewohnheitsmäßig (je nach dem, an welchem Rechner ich gerade sitze) zwischen 1400 und 1600 Pixeln. Das war auch der Grund, weshalb ich das Layout dieser Seite flexibel gestaltet und für große Auflösungen entwickelt habe.

In diesem Zusammenhang auch spannend, die aktuelle Display-Statisik von YAML.de, eine Seite mit recht ordentlichem internationalen Besucherverkehr. Wie man sieht, ist der Anteil der 1024er Auflösung mit 12% bereits deutlich niedriger. Den größten Einzelposten kann die 1280er Auflösung für sich beanspruchen mit 43%. Zusammen mit der 1024er sind das knapp über die Hälfte aller User. Das zeigt zum einen, dass der allgemeine Focus für die Breite einer Webseite sich in diesem Bereich bewegen sollte (alles andere hätte auch verwundert). Aber man sieht auch wie kräftig 1440, 1680 und die HD-Auflösung mit 1920 Pixeln Breite mittlerweile vertreten sind. Und für diese drei Auflösungen prognostiziere ich für Januar 2010 einen weiteren deutlichen Anstieg, während die kleineren Auflösungen, einschließlich der 1280er Breite stark federn lassen werden.

Egal, für welche Breite man letztlich sein Layout auslegt. In jedem Fall sollte die Zentrierung einer linksbündigen Anordnung vorgezogen werden. Denn bei einer fixen Breite von 760px bedeutet das schon bei der 1280er Auflösung, dass 40 Prozent der Viewportbreite ungenutzt bleiben. Steigt die Auflösung beim User - oder werden Inhalte innerhalb des Layout nicht über die volle Breite darsgestellt (typisch für Mehrspaltenlayouts), verschiebt sich das Verhältnis im Regelfall noch weiter in die Richtung, dass der ungenutzte Raum dominiert.
 


Dienstag20. Januar 2009

Seit kurz nach Mitternacht steht YAML 3.1, die neueste Version meines CSS-Frameworks zum Download bereit. Die zugehörige Releasemeldung findet ihr im ebenfalls frisch eröffneten YAML Development Blog, in welchem zukünftig Nachrichten aus dem Dunstkreis des Frameworks veröffentlicht werden, also füttert Eure Feedreader.

Das Blog wird vollständig in englisch geführt werden. Der Grund hierfür ist einfach: YAML hat eine stetig wachsende weltweite Community, die schon lange die Grenzen der deutschen Sprache überwunden hat. Es war also längst an der Zeit, dieser Entwicklung Rechnung zu tragen. Zum zweiten erleichtert es die Arbeit, wenn nicht jede kleine Nachricht zeitlich synchron zweisprachig erscheinen muss. Ich habe vor, dieses Entwicklerblog mittelfristig auch für Drittentwickler zu öffnen, sodass hier ein neuer Informationspool mit Links und Tutorials entsteht.

Und damit zurück zu YAML. Volle 6 Monate Entwicklung stecken in der neuen Version - mit einigen größeren Pausen. Der Versionssprung von 3.0.6 auf 3.1 mag gering erscheinen. Für mich und ich denke auch für alle Anwender ist es dennoch ein großer Meilenstein, denn die zahlreichen neuen Features machen das Framework nun endgültig zu einem Werkzeug, welches den Webentwickler über den gesamten Erstellungsprozess einer Webseite begleitet und unterstützt. Das beginnt beim Screenlayout, über die Gestaltung der Inhalte, der Erstellung von Formularen mit Hilfe des nagelneuen Formularbaukastens bis hin zu einer perfekten Druckversion der Webseite. In allen Bereichen sorgt das Framework dafür, dass sich der Entwickler auf das Wesentliche - seinen Layoutentwurf - konzentrieren kann und der Internet Explorer (ebenso wie zahlreiche CSS-Bugs anderer Browser) weitgehend seinen Schrecken verloren hat.

Ich werde im Verlauf der nächsten Tage an dieser Stelle noch im Detail auf die interessantesten neuen Funktionen von YAML 3.1 eingehen. Im Rahmen dieser Kurzmeldung will ich es bei der Verlinkung der interessantesten neuen Layoutbeispiele belassen, die einen guten Eindruck von der stark erweiterten Leistungsfähigkeit des Systems vermitteln.

Daneben gibt es zahlreiche weitere kleine Verbesserungen über die in Summe wie immer das Changelog Auskunft gibt. Sowohl das “Simple Project” als auch der YAML-Builder wurden bereits auf YAML 3.1 aktualisiert, wobei der Builder natürlich noch nicht die neuen Gestaltungsmöglichkeiten unterstützt (so schnell bin ich nun auch wieder nicht) aber zumindest zu YAML 3.1 kompatiblen Code generiert.

Damit wünsche ich allen Anwendern viel Spaß mit der neuen Version.


Freitag05. Dezember 2008

Heute morgen um 8:00 Uhr ging mein erster Beitrag zum diesjährigen Adventskalender der Webkrauts online. Wie der Titel “Grundregeln für zugängliches JavaScript” bereits verrät, geht es um einige wichtige grundlegende Verhaltensregeln bei der Anreicherung von Webseiten mit JavaScript.

Der Artikel ist nicht gerade kurz geraten, hat aber gerade deswegen nach all den CSS- und Framework-Diskussionen der letzten Zeit besonders viel Spaß gemacht.


Donnerstag27. November 2008

Auch in diesem Jahr bieten die Webkrauts ihren Lesern wieder einen Adventskalender. Ab dem kommenden Montag geht es dieses Mal rund um «Best Practice» in allen Webbereichen. Hinter den 24 Türchen stecken Beiträge zu Performance, JavaScript, Suchfunktionen, Barrierefreiheit, nützliche Tools, den Umgang mit Kunden, Navigationen oder auch Suchmaschinenoptimierung, um nur ein paar Themen zu nennen. Ihr dürft gespannt sein, es lohnt sich.


Seite 5 von 13 Seiten

« Erste  <  3 4 5 6 7 >  Letzte »