Kategorien
Design Responsive Design Webdesign

Responsive Images: Das Picture-Element ist endlich da!

Was lange währt, wird endlich gut. Die viel diskutierte Lösung für die Umsetzung von Bildern in responsiven Designs ist tatsächlich in der Realität angekommen. Und es ist tatsächlich das Picture-Element des W3C geworden, nachdem sich die WhatWG zuletzt für das Srcset-Attribut am Img-Element ausgesprochen hatte. Von wegen, die W3C würde nur einen statischen Schnappschuss verwalten, während die WhatWG diejenige wäre, die HTML5 als lebenden Standard, als Work in Progress betrachten.

html5-logo

Responsive Images: Ein steiniger Weg mit vielen aufgeschlagenen Knien

Ich will an dieser Stelle nicht wieder die Diskussion zu Gehör bringen, die sich in den letzten zwei Jahren intern abgespielt hat. Der Streit um die richtige Lösung für Responsive Images und andere wichtige Fragen kommender Standards hatte bekanntlich sogar dazu geführt, dass sich die Web Hypertext Application Technology Working Group (WHATWG) als einflussreichste Arbeitsgruppe innerhalb des W3C von diesem abgespalten hatte, um HTML5 künftig als lebenden Standard weit schneller fortzuentwickeln als unter der Ägide des W3C vermeintlich möglich. Wir berichteten am 23. Juli 2012 darüber.

Erst wenige Tage vorher hatte sich eben diese WhatWG auf Srcset als Lösung für Responsive Images festgelegt, wir berichteten auch darüber. Im Nachhinein wenig verwunderlich, wollte sich das W3C in Form seiner HTML Working Group mit Unterstützung der W3C Community Group so gar nicht mit diesem nassforschen Vorgehen einverstanden erklären und stellten im Herbst 2012 klar, dass das Picture-Element mitnichten tot, sondern vielmehr sehr lebendig und genau die Stoßrichtung des W3C sei. Hier berichteten wir darüber.

Dann passierte nur wenig Plakatives, wenn auch hinter den Kulissen fleißig gewerkelt wurde. Im Februar 2014 gingen wir bei Dr. Web sogar so weit eine neue JavaScript-Lösung zu empfehlen, anstelle noch länger auf Picture oder Srcset zu warten.

Responsive Images: Chrome Canary hat es schon, andere fast

Und jetzt also ist es tatsächlich so weit. In einem brandaktuellen Beitrag auf A List Apart gab Mat Marquis, der umtriebige Kopf der Responsive Images Community Group, ehemaliger Mitarbeiter im jQuery Mobile Team und hauptberuflicher Designer/Developer bei der nicht unbekannten Filament Group, die erste Browser-Implementation des Picture-Elements bekannt.

Es ist Chrome Canary, die Developer-Version des Chrome-Browsers, der ab sofort für erste Tests des Elements herangezogen werden kann, wozu Marquis naheliegenderweise direkt auffordert. Chrome Canary gibt es übrigens hier. Nach der Installation pasten Sie folgende Zeile in die URL-Leiste

chrome://flags/#enable-experimental-web-platform-features 

bestätigen mit der Enter-Taste und klicken im folgenden Fenster auf "Aktivieren". Sie brauchen sich übrigens nicht zu sorgen. Die Änderungen, die Sie im Canary vornehmen, wirken sich nicht auf eine etwa vorhandene, reguläre Chrome-Installation aus. Beide werden separat gehalten.

Als Startpunkt für eigene Tests empfiehlt Marquis die Picturefill-Demos, welche bekanntlich so ausgelegt sind, dass das Polyfill nur da einspringt, wo die nativen Browserfähigkeiten nicht ausreichen.

Ausweislich der diversen Roadmaps ist ersichtlich, dass der Firefox ebenfalls kurz vor der Implementation von Picture steht, ebenso das Webkit-Projekt. Microsoft ziert sich wie stets und führt das Picture-Element, neben dem Srcset-Attribut gleichberechtigt als "Under Consideration". Na ja, der IE ist bei mir ohnehin nur "Under Consideration", wenn er sich nicht vermeiden lässt.

So, Kämpen des Netzes. Dann mal ran. Was haltet ihr von der Umsetzung?

Übrigens funktioniert das Picture-Element in der jetzigen Implementation noch nicht voll responsiv bei Änderungen des Viewport. Also, nach Änderungen einmal kurz einen Refresh machen.

Kategorien
Webdesign

Kostenloses Ebook: „Tablet Web Design Best Practices“ mit vielen guten Tipps

Man wird den Damen und Herren bei Mobify in Kanada keineswegs die Expertise in Sachen mobiles Webdesign absprechen wollen, auch wenn man sich möglicherweise mit dem Cloud-basierten Konzept Mobifys nicht so recht anfreunden kann. Vor einiger Zeit ließen besagte Damen und Herren ihrer Expertise freien Lauf und stellten ein Ebook mit 30 Tipps, ein besonderes Nutzererlebnis auf Tablets zu schaffen, zusammen. Sie nennen es "Tablet Web Design Best Practices". Das 25-seitige Heftchen gibt es völlig gratis gegen die Bekanntgabe einer E-Mail-Adresse.

tabelt-web-design-best-practices-page

Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets

Den größten Nachteil des ansonsten liebevoll gestalteten und mit nutzwertigen Informationen versehenen Heftchens will ich gleich zu Beginn erwähnen, denn es ist sicherlich für manch Interessenten ein Showstopper. Man kann es sich anhand des Titels und des Herkunftslandes an sich schon denken, dennoch sei deutlich darauf hingewiesen: Tablet Web Design Best Practices ist in englischer Sprache verfasst. Nicht in schwierigem, technischen Englisch, sondern eher so auf Mittelschul-Niveau, aber immerhin.

Stellt diese Hürde für Sie kein Problem dar, erhalten Sie einen kompakten Ratgeber, der vielfach auf der Basis von Ergebnissen einer oder mehrerer Studien Design-Tipps gibt, die Hand und Fuß haben. Mobify greift dabei nach eigenen Angaben auf die Erfahrungen aus dem erfolgreichen Umsetzen einiger großer Websites, darunter Starbucks, aber auch auf diejenigen der rund 75.000 Designer und Developer, die mit den Mobify-Tools arbeiten, zurück.

So verwundert es nicht, dass unter den Tipps solche sind, auf die man bei intensivem Nachdenken auch selber kommen würde und andere, mit denen zumindest ich nicht sofort um die Ecke gekommen wäre.

Tablet Web Design Best Practices: Two Parts to Rule Them All

In zwei Teile gliedert sich das Ebook. Im ersten Teil werden Tipps gegeben, wie man bestehende Desktop-Websites so verändern kann, dass sie auch auf Tablets sinnvoll nutzbar werden. Im zweiten Teil wird der nächste Schritt getan. Hier geht es darum, wie man vorgehen sollte, um tatsächlich auf Tablets optimierte Websites zu erhalten. Zumindest der erste Teil ist für jeden Seitenbetreiber relevant und sollte auf jeden Fall bearbeitet werden.

tablet-web-design-book-bottom

Die Gründe dafür sind durchschlagend. Mit erwarteten Verkäufen von einer halben Milliarde Tablets weltweit in 2013 und 2014 ist es fahrlässig, deren Nutzer nicht zumindest sinnvoll zu bedienen. Das umso mehr, als Tablet-Nutzer bei Online-Einkäufen 20 Prozent mehr Umsatz bringen als der durchschnittliche Desktop-Besucher.

Auf der anderen Seite dieser Chance steht das typische Website-Layout mit seinen 12 Pixel-Schriften und den nicht auf Touch ausgerichteten Schaltflächen und Formularen. Jeder Tablet-Nutzer wird zustimmen: Auf den allermeisten Websites macht das Surfen keinen Spaß. Dabei ist der Anwendungsfall des Internet-Surfens mit Abstand der wichtigste auf Tablets. Sind wir uns einig, dass es Handlungsbedarf gibt?

Und so beginnt das Ebook in seinem Teil 1 ganz praxisorientiert, fast schon hemdsärmelig und empfiehlt

  • Touch-Targets, also Elemente, die per Finger angewählt werden können, stets mindestens 44 x 44 Pixel groß zu machen,
  • auf durchgängige Touch-Bedienungsmöglichkeiten zu achten,
  • dafür zu sorgen, dass der Nutzer möglichst wenig schreiben muss,
  • kontext-sensitive Eingabemöglichkeiten zu schaffen und Auto-Correct oder automatische Großschreibung in Formularen auszuschalten,
  • die Standard-Textgröße und den Zeilenabstand zu erhöhen,
  • Icons als Font und Bilder auch in Retina-Auflösung einzubinden,
  • und vieles mehr.

In Teil 2 des Ebooks geht es dann darum, Web-Apps so zu gestalten, wie man das auch mit nativen Apps auf den jeweiligen Plattformen tun würde. Mit voller Optimierung auf die speziellen Möglichkeiten und Limitierungen eines Tablets.

Dazu gehören beispielsweise

  • dafür zu sorgen, dass Bilder in Seiten zoombar bleiben, ohne dass die komplette Seite zoomt,
  • die Navigation fest zu verankern, um sie persistent verfügbar zu halten,
  • ortsbasierte Möglichkeiten zu nutzen, um etwa logistische Fragestellungen leichter zu beantworten,
  • Schriftgrößen durch den Nutzer anpassbar zu gestalten,
  • viel mit Bildern zu arbeiten,
  • die Navigation absolut tablet-gerecht zu gestalten, etwa durch Auto-Hide oder Off-Canvas-Varianten,
  • besonders auf die sog. Hot Zones zu achten, diejenigen Bereiche, die man mit den Fingern besonders leicht erreichen kann auf einem Tablet,
  • und vieles mehr.

tablet-web-design-book-hot-zones

Natürlich, und wer würde das auch anders tun, verweisen die Autoren an vielen Stellen auf die entsprechenden Tools aus dem Hause Mobify und verlinken Tutorials, die zeigen, wie das Mobify-Konzept die entsprechende Umsetzung vorsieht.

Dennoch ist das Ebook nicht auf das Mobify-Konzept limitiert, sondern bietet durchaus allgemeingültige, dabei gute Tipps, die sicherlich den erfahrenen mobilen UI-Entwickler nicht aus den Socken hauen, aber Otto Durchschnittsseitenbetreiber und Feld-, Wald und Wiesen-Designer ein gutes Stück nach vorne bringen können – auf dem Weg in das Netz der Zukunft.

Abschließend will ich nochmal auf den Bezugsweg zurück kommen. Das Ebook steht, wie bereits erwähnt, kostenlos unter dem weiter unten genannten Link zur Verfügung. Um den Download zu ermöglichen, ist lediglich die Eingabe einer syntaktisch korrekten E-Mail-Adresse erforderlich, das ebenfalls vorhandene Feld "Name" kann ignoriert werden. Der Download wird zwar auch als Link per E-Mail zugeschickt, jedoch können Sie das Ebook schon unmittelbar nach Klick auf "Get the Guide Now" herunterladen. Die Gültigkeit der eingegebenen E-Mail-Adresse ist somit nicht Voraussetzung für den Download.

Links zum Beitrag

  • Downloadseite zum Ebook | Mobify
  • Startseite des Dienstes selber | Mobify
Kategorien
Design Responsive Design

Voll im Flow – 26 Beispiele für responsives Design, wie es sein soll

Responsives Webdesign ist ein Trend, um den man nicht mehr herumkommt. Vor allem der sensationelle Erfolg mobiler Clients, wie Smartphones und Tablets lässt die Nachfrage nach Layouts, die auch mobil gut funktionieren, rasant steigen. Auch wenn die ganz großen Websites sich noch schwer tun, auf den mittlerweile schon rasenden Zug aufzuspringen, ist die Hoffnung berechtigt, dass selbst die großen Web-Dinosaurier in Kürze umsteigen werden. Das wiederum wird für einen weiteren Schub in Richtung Responsiveness sorgen. Die besten Vertreter responsiven Designs bieten nicht nur eine ausgezeichnete Nutzererfahrung auf mobilen Clients, sie definieren vielmehr das User Interface neu. Im folgenden zeige ich Ihnen eine Reihe der besten Beispiele für perfekt umgesetztes responsives Design. Lassen Sie mich wissen, was Sie davon halten…

1. Future of Web Design 2013

futureofwebdesign_london2013

Wie der Name vermuten lässt, handelt es sich hierbei um die Website zur Konferenz „Future of Web Design“ in London 2013. Um dem Anspruch der Konferenz gerecht zu werden, war es natürlich erforderlich, ein responsives Design zu bieten. Das gelang hier jedoch so gut, dass man durchaus von einem Benchmark, an dem sich alle anderen Tile-basierten Websites messen lassen müssen, sprechen darf. Die Website funktioniert mit drei verschiedenen Layouts für unterschiedliche Bildschirmauflösungen, verzichtet dabei aber an keiner Stelle auf Funktionalität. Sogar die Farben reagieren responsiv mit leichten Veränderungen, sobald die Anzeigebreite verändert wird.

2. Andersson Wise Architects

anderssonwise

(Noch) nicht viele responsive Designs verwenden offensiv großformatige Bilder. Die von Andersson Wise schon, und das sieht fantastisch aus. Die Übergänge zwischen den einzelnen Anzeigebreiten sind überaus gelungen. Andersson Wise muss man gesehen haben, bevor man selbst an das nächste responsive Design geht.

3. Shiny Demos

shinydemos

Mit den Mitgliedern des Opera Developer Relations Teams waren hier natürlich ausgewiesene und ausgewachsene Experten am Werk. Shiny Demos zeigt nicht nur die neuesten Open Web Standards, sondern tut das in einer Form, die beeindruckt. Leider sind nicht alle Browser in der Lage, den gesamten Designumfang der Shiny Demos zu rendern. Die responsiven Designs jedoch funktionieren sehr gut.

4. Kava Ruzova

kavaruzova

Kava Ruzova besteht nur aus einer einzelnen Seite. Die Website bindet Google Maps intelligent ein und zeigt, dass weniger mehr sein kann, auch und vor allem, wenn es um responsives Design geht.

5. Performance Marketing Awards 2013

performancemarketingawards2013

Auf den ersten Blick erscheint die Website nicht unbedingt als ein Musterbeispiel für responsives Layout. Sie werden jedoch überrascht sein, wenn Sie sie auf einem Tablet aufrufen. Hier steht dann ein Dropdown-Menü bereit und der gesamte Content wird intelligent restrukturiert. Hier steht klar der praktische Nutzen im Vordergrund.

6. William Csete

williamcsete

Naheliegenderweise gibt es einen ganzen Haufen brillianter, responsiver Websites von Webdesignern zur Darstellung der eigenen Leistungsfähigkeit. Diejenige von William Csete ist die erste in unserem kleinen Showcase hier. Was neben der modernen und schlanken Optik besonders auffällt, ist die Darstellung der Navigation. Die Usability des Menüs bedarf keiner weiteren Worte und wird intuitiv durch jedermann verstanden. Unabhängig von der Bildschirmauflösung steht die Navigation stets prominent bereit.

7. Stuff & Nonsense

stuffandnonsense

Diese Jungs wählten einen humoristischen Ansatz und verpassten ihrer Website eine Extra-Portion Spaß. Schon die großartige Verwendung von Illustrationen, der scrollende Hintergrund und die niedliche Logo-Animation machen was her. Besonders beeindruckend jedoch ist die Tatsache, dass der Mann auf dem Motorroller mit der Verjüngung des Viewports ebenfalls jünger wird. Auch der Roller geht diesen Weg mit…

8. Digital Atelier

digitalatelier

Diese Website darf in keinem Showcase über responsives Design fehlen. Immer, wenn ich dieses elegante und intelligente Design mit seinen nahtlosen Übergängen zwischen den Viewports sehe, wundere ich mich darüber, dass es bislang noch keine Awards für das Digital Atelier hagelte. Das textbasierte Menü verkleinert sich zu Icons, die Usability bleibt auf höchstem Level, egal bei welcher Auflösung.

9. Design made in Germany Issue 5

dmig5

Es wundert mich überhaupt nicht, dass diese Website die Massen begeistert. DMIG setzt eine scrollende Navigation vor einem fixen Hintergrund, der noch dazu perfekt für ein responsives Design geeignet ist, optimal um. Interessant zu sehen, wie das große „Dmig“ in kleineren Layouts ersetzt wird.

10. Forefathers Group

forefathersgroup

Sicherlich. Design, das nach Vergangenheit aussieht, ist nicht jedermanns Sache. Und Responsiveness scheint auf den ersten Blick sogar einen Widerspruch dazu zu bilden. Diese Website hier setzt den Widerspruch jedoch so schick in Szene, dass ich sie nicht aus dem Showcase herauslassen konnte. Richten Sie Ihr Augenmerk besonders auf die Navigation und das unauffällige Verschwinden von Design-Elementen.

11. TIME

time

TIME Magazine ist möglicherweise der bekannteste Name in Sachen Print-Medien, ein Dinosaurier der Branche. Gar nicht an Dinosaurier erinnert die Website im Magazin-Stil, die auf großartige Weise die Prinzipien des responsiven Webdesign umzusetzen versteht.

12. Lab Fiftyfive

labfiftyfive

Wenn das spontane „Ahh“ und „Ohh“ über die schicken Mouse-Over-Effekte nachlässt, werden Sie die Effektivität der dualen Navigation erkennen, ein Musterbeispiel in Sachen Usability. Suchen Sie auch mal nach dem Easter-Egg auf dieser Site!

13. Hicksdesign

hicksdesign

Hicksdesign liefert den Beweis dafür, dass kleinere Auflösung nicht notwendigerweise bedeutet, dass alle Elemente geschrumpft werden müssen.

14. Deren Keskin

derenkeskin

Es gibt verhältnismäßig wenige Designs, die sich ausschließlich auf Typographie verlassen. Das hängt sicherlich damit zusammen, dass die Verwendung imposanter Bilder leichter einen imposanten Gesamteindruck zu hinterlassen vermag. Deren Keskin interessiert das nicht. Er tritt an, zu beweisen, dass auch Typographie-basierte Websites grandios aussehen können. Achten Sie auf den großen responsiven Header-Text.

15. Seminal Responsive Web Design Example

seminalexample

Ich zögerte zunächst, diese Website in den Showcase aufzunehmen. Immerhin handelt es sich bloß um eine als Beispiel gedachte Seite. Sie eignet sich jedoch ausgesprochen gut, zu demonstrieren, wie responsives Design nicht auf bloße Viewport-Änderungen beschränkt wirken kann. Hier können Sie vielmehr ein erstaunlich präzises Fein-Tuning bei der Veränderung der dargestellten Inhalte erkennen. Sogar die Fläche zur Aktivierung von Links wird in kleinen Auflösungen vergrößert. Das ist nicht üblich, aber unter Usability-Aspekten natürlich großartig.

16. FortyOneTwenty

fourtyonetwenty

Das Einbetten von Videos ist eine ganz wichtige und an Bedeutung noch steigende Art, Inhalte darzustellen. Es ist allerdings auch eine der größten Schwierigkeiten, wenn es um responsives Layout geht. FortyOneTwenty fokussiert genau diese Funktionalität mit ihrer responsiven Website. Die von Vimeo zugelieferten Videos sehen auf allen unterstützten Clients in gleicher Weise perfekt aus.

17. Oliver Russell

oliverrussell

Unangestrengte Einfachheit – so würde ich meinen Eindruck von dieser Website beschreiben. Es ist offensichtlich, dass hier eine Menge Gehirnschmalz in eine effektive Nutzererfahrung, speziell mit Blick auf kleinere Auflösungen geflossen ist. Kein Wunder also, dass die Website auf kleineren Screens sogar besser aussieht, als auf größeren.

18. Siyelo

siyelo

Gehen Sie weiter. Hier gibt es nichts zu sehen. Na ja, in der Tat werden Sie auf dieser Website keine Zaubertricks oder sonstige schwer beeindruckenden Besonderheiten finden. Meiner Meinung nach liegt jedoch genau darin die besondere Schönheit. Siyelo bietet makelloses Layout ohne drastische Änderungen an User Interface oder Inhalten bei Größenänderungen.

19. The Next Web

thenextweb

Es ist noch relativ selten, dass Nachrichtenmagazine responsiv gelayoutet daherkommen. The Next Web jedoch gehört bereits dazu und ist ein sehr gutes und interessantes Beispiel dafür, wie auch inhaltsschwere Seiten mit ständig wechselndem Content von responsivem Design optisch profitieren können. The Next Web setzt letztlich auf drei verschiedene Layouts, die je nach Viewport eingesteuert werden. Auf allen drei Layouts steht der neueste Content deutlich im Vordergrund, bei den kleineren Auflösungen verschwinden als erstes die Werbeanzeigen. Das ist natürlich gut für die Leserschaft, weniger gut für die Monetarisierungsmöglichkeiten des Betreibers. Mal sehen, wie lange The Next Web das durchhält, wenn der Anteil kleinerer Auflösungen weiter so rasant steigt.

20. Kings Hill Cars

kingshillcars

„Meine Headergrafik muss rieesig bleiben!“. Auch Kunden, die sich in ihre eigenen Header verliebt haben, müssen nicht auf responsive Layouts verzichten. Diese Website mag als Beweis dienen. Achten Sie darauf, wie das große Bild des auffälligen Automobils über alle Auflösungen konsistent bleibt. Ebenso werden auch keine Kompromisse hinsichtlich des Banner-Texts eingegangen.

21. Ginger Whale

gingerwhale

Ginger Whale ist erdacht, um Kindern das Lesen schmackhaft zu machen. Entsprechend ist das Design sehr kindgerecht, mit niedlichen Animationen und altersgerechten Zeichnungen. Unter dem Aspekt des Webdesign beeindruckend ist aber vor allem, dass Ginger Whale sowohl in der Breite, wie auch in der Höhe responsiv reagiert. So bleibt die Website stets in gleicher Weise grafisch voll bedienbar, eine Seltenheit.

22. United Pixelworkers

unitedpixelworkers

Auch im E-Commerce kann man responsive designen. United Pixelworkers treten den Beweis an, dass auch Seiten mit einer extrem großen Zahl unterschiedlicher Produkte auf verschiedenen Auflösungen zufriedenstellend funktionieren können. Hier wird mit einem Kacheldesign gearbeitet, dem man zu Beginn gar nicht zutrauen würde, so nutzerfreundlich zu sein, wie es am Ende tatsächlich ist.

23. Treasure of FrontEnd Island

treasurefrontend

Ein visuell besonders imposantes Menü kann im responsiven Webdesign schnell zum Problem werden. Lassen Sie sich von dieser Website inspirieren, wenn Sie mal vor dem gleichen Problem stehen. Sie werden sehen, dass es keinen Widerspruch darstellt, visuell beeindruckend und zugleich responsiv zu designen.

24. Audio Vroom

audiovroom

Online Audio-Streaming ist, anders als Video-Streaming, kein grundsätzliches Problem, wenn man es unter dem Gesichtspunkt des responsiven Designs betrachtet. Audio Vroom steht jedoch für eine besonders gelungene Umsetzung. Hier werden einfache Regeln responsiver Layouts fehlerfrei umgesetzt.

25. Somewhat

somewhat

Das hier wird nicht jedem gefallen. Immerhin ist eine gängige Anforderung an responsives Design, dass die Seiten auf unterschiedlichen Clients so gleich wie möglich aussehen sollen. Somewhat zeigt das Gegenteil und bietet völlig verschiedene Optik je nach Auflösung. Kann man sich mit diesem Design-Prinzip anfreunden, eröffnet sich natürlich eine völlig neue Welt im Webdesign. Somewhat propagiert genau das, nämlich so zu designen, wie es für das jeweilige Endgerät am besten ist.

26. Lancaster University

lancasteruni

Im Grunde sehen wir hier eine mehr oder weniger typische Unternehmens-Website, die allerdings erstaunlich responsiv reagiert. Die Website der Lancaster University ist so gestaltet, dass sichergestellt ist, dass jegliche Funktionalität stets zur Verfügung steht, unabhängig von Auflösung und Client. Das sieht nicht besonders überwältigend aus, sondern funktioniert einfach.

Jetzt Sie!

Ich fand es ganz schön schwierig, 25 Muster-Beispiele responsiven Designs zu kuratieren und Ihnen vorzustellen. Deswegen entschied ich mich für 26 ;-) Welche gefallen Ihnen besonders? Habe ich sträflicherweise den absoluten Knüller übersehen? Lassen Sie es mich wissen…

Der Artikel wurde im Original geschrieben von Josh Chan und erschien zuerst in unserem Schwestermagazin Noupe.