Get in touch

10 Responsive Designs, die wir lieben

geschrieben von Olga

Das Thema responsive Design wird von unseren Agentur-Kunden immer öfter nachgefragt: in den letzten Jahren haben wir diverse Webshops, Online-Plattformen und einfachen Webseiten in dem responsive Prinzip umgesetzt. Kein Wunder: laut der neusten Studie von Adobe (Quelle: Adobe Studie) kaufen 44% von Tablet-Nutzer und 22% der Smartphone-Nutzer über ihre mobilen Geräte ein. Immer wieder stellt man sich die Frage, was gutes responsive Design ausmacht. Am Beispiel von verschiedenen 10 responsive Webseiten möchte ich zeigen, was wir am responsive Design lieben und was uns inspiriert.

 

Indochino READY

http://www.indochino.com/ Was macht einen guten Klamotten-Shop aus? Gute Bilder. Indochino nutzt perfekt die Möglichkeiten, die responsive Deisgn bietet, um Akzent auf Visuelles zu setzen. Ein anderer Vorteil von diesem Shop ist die Side-Navigation, diese spart Platz und erleichtert die Orientierung im Webshop. In diesem Shop ist nicht nur die Startseite qualitativ und gut durchgedacht: auch Katalog, Warenkorb und Produktdetailseite sind für mobile- oder tablet-Nutzer ideal. Klare Struktur, große Buttons (was leider ganz oft vergessen wird), native-like Bilder-Slider und viel mehr.

 

yoke READY

http://thisisyoke.com/ Yoke ist eine Design-Agentur, die durch ihre responsive Webseite einen freundlichen und ganz persönlichen Eindruck macht. Mit insgesamt drei Breakpoints und drei Varianten der Navigation macht Yoke die User-Experience auf allen Geräten angenehmen. Für jede Version hat Yoke ein sauberes Design und eine verständliches Struktur zu bieten. “Take me to the top” Button ist ein netter Bonus, der sagt “wir haben an deinen Komfort und an deine Zeit gedacht”

 

 

Responsive Demoshop by bloopark READY

 

http://bloopark.de/ResponsiveShop
Basic Foot ist eine Demo-Webseite von bloopark, die zeigt, wie ein mobile-optimierter Onlineshop auf unterschiedlichen Geräten aussehen kann. Mit dem drei-spaltigen Raster wird die Produktdarstellung für 5 unterschiedliche Bildschirmgrößer optimiert. Auch Navigation, Warenkorb und Checkout sind responsive.

 

Food Sense READY

http://foodsense.is/ Sauberes Layout, leckere Bilder und klare Struktur verschaffen ein gutes Gefühl für Foodsense-Besucher. Auch wenn die Links in der Navigation auf manchen Geräten zu klein sind, finde ich die Lösung mit unterschiedlicher Navigation für unterschiedliche Browser-Größen einzigartig. Mit ganz viel Informationen in der größten (Desktop) Version ist im Gegensatz dazu die kleinste Version (Mobile Portait) ganz minimalistisch gehalten. Das zeigt mir, dass die Inhaltspriorisierung bei Foodsense gut funktioniert (das kann ich, als Konzepter sagen, das es keine einfache Aufgabe ist). Bravo, Foodsense, mein Appetit ist geweckt.

 

 

Maryland Beer is Good READY

http://mdcraftbeerfestival.com/ Die Webseite von Maryland Craft Beer Festival ist wirklich nur eine Seite. Neben gutem und professionelem Design bieten Craft Beer eine minimalistische Lösung für responsive Design. Ein Breakpoint und nur 2 Versionen: Mobile und Desktop mit allen Infos auf einer Seite – perfekt für überzeugende mobile-Benutzer, die sehr gerne sliden.

 

Ready to Inspire READY

http://2012.inspireconf.com/ Ready to Inspire ist eine Design-Konferenz, natürlich muss das Design der Webseite gut aussehen. Hochqualitative Grafiken, perfekte Darstellung und schöne Farbpallete. Durch das Layout, das die Informationen von oben nach unten präsentiert ist auch die mobile Version den anderen ähnlich.

 

United Pixelworkers READY

http://www.unitedpixelworkers.com/ United Pixel Workers ist ein Onlineshop, in dem man T-Shirts und Accessoires mit IT-Relevanten Logos kaufen kann. Für die IT-Thematische Webseite ist es selbstverständlich, an responsive Webdesign zu denken. Mit klaren Linien, Informationsboxen und großer einfachen Typographie ist es sehr einfach, die Seite für kleine und große Geräte zu optimieren. In der Mobile- und Tablet-Version sind Warenkorb und Navigation auch optimal für ein gutes Besucher-Erlebnis gestaltet.

 

Tattly™ READY

http://tattly.com/ Tattly verkauft temporäre Tattoos, die von Designern und Illustratoren kreiert wurden. Dieser Onlineshop nutzt ein einfaches Raster, was zusammen mit schwarz-weißer Farbpallette am meisten Aufmerksamkeit auf Produktbilder zieht. Die responsive Idee ist genau so einfach wie das Design-Konzept. Das Geniale ist so einfach!


Home | crayola.com READY

http://www.crayola.com/ Die Crayola responsive Seite ist ein gutes Beispiel dafür, wie man ganz viel Inhalt in einer mobilen Version zusammenfassen kann. Die Desktop-Version hat ganz viele Navigationsebenen und Tabs. In mobiler Version sind aber nur die wichtigsten Navigationselementen angezeigt und die Hauptnavi ist in einem freundlichen Accordion-Menu zusammengeklappt.

 

Starbucks Coffee Company READY

http://www.starbucks.com Für die Starbucks Webseite sind die Mobile-Besucher besonderes wichtig: wie Studien zeigen (http://www.go-globe.com/blog/mobile-commerce/), sind für 80% der Smartphone-Besitzer Standort-Relevante Informationen wichtig. Über 75% von ihnen reagieren darauf und unternehmen das, was sie auf ihrem Smartphone gefunden haben. Aus diesem Grund legt Starbucks sehr viel Wert auf reponsive Design: Die Webseite ist einfach zu navigieren und gut zu bedienen.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...

3 comments to 10 Responsive Designs, die wir lieben

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>