Responsives Webdesign ist ein Thema, das in vielen Unternehmen ganz oben auf der Tagesordnung steht. Angesichts der immer weiteren Verbreitung internetfähiger mobiler Endgeräte besteht die Notwendigkeit, Design und Inhalte von Websites so anzupassen, dass sie auf allen Plattformen gute Nutzererlebnisse bieten.
Das ist unter User-Experience-Aspekten eine alles andere als triviale Aufgabe. Dementsprechend rege wird Responsive Design auch in der Fachwelt diskutiert. Einige interessante Aspekte und Ansätze sowie hilfreiche Beispiele möchten wir heute einfach mal mit Ihnen teilen. Hier ist unsere Linkliste.
Blog-Artikel zum Thema
Artikelsammlungen:
- Überblick über Artikel zum Thema im Smashing Magazine
- Sammlung von Responsive-Techniken und -Tools im Smashing Magazine
Responsive Grundlagen:
- Responsive Grundlagen von Jason Things: More Responsive Design, Please
- Kayla Knight mit Guidelines für Responsive Webdesign: Responsive Web Design: What It Is and How To Use It
Responsiver Arbeitsprozess:
- Zum Designprozess: Design Process in the Responsive Age
- Zum Arbeitsprozess: Better Client Participation in Responsive Design Projects
Media Queries:
- Media Queries: Techniques for Gracefully Degrading Media Queries
Responsive Content:
- Content Prototyping: Content Prototyping in Responsive Web Design
- Content Choreography
Responsive Wireframes, Mockups, Moodboards:
- Design-Mockups, Moodboard, Styletiles: Styletil.es
- Responsive Mockup-Beispiele: Responsive Design with Mockups
Responsive Typografie:
- Blog mit Artikeln zu responsiver Typografie: Informationarchitects.net
- Grundlagen: Responsive Typography: the Basics
Responsive Images:
- Bildauflösungen: Which Responsive Image Solution Should You Use?
- Bildotimierung: How Should we Handle Responsive Images?
Sonstiges:
- Und was kommt als nächstes? Präsentation: Patterns for Multiscreen Strategies
Beispiele
- Sammlung vieler Beispiele
- Beispiel für Skalierung
- W3C Media Queries
- Typografie
- Design in Kacheln, klares Raster, keine Skalierung
- Bild/Formular
- Bildverhalten, damit das Bild so groß wie der Textblock ist
- Breaking-Points
- Bildwechsel
- Raster/Typographie
- Fluid-Grids
- Flexible Slider (Karussell)
- WordPress-Themes:
- Breaking-Points:
- Websites mit CSS Media Queries für iPhone, iPad, Android & Co. optimieren
- Remodelista.com: Nur die linke Spalte ist fluid, die anderen beiden sind fix und verschwinden bei kleinformatigen Ausgabegeräten
- Fuzzco.com und Studionudge.com: viele Breaking-Points, kein Header-Bild in der Smartphone-Ansicht, Menüpunkte untereinander und nicht mehr nebeneinander
- Fluid inklusive:
- Viel Inhalt, textlastig und viele unterschiedliche Elemente:
- Umfließen bei schmalen Breiten: Mediaqueri.es
Im kommenden zweiten Teil unserer großen Linkliste zum Thema Responsive Webdesign bieten wir Ihnen Hinweise auf zahlreiche interessante und nützliche Tools.
Sie wollen Ihre Website optimieren? Wir sind Ihr Partner!
Möchten Sie Ihre Websites modernisieren und fit für die plattformübergreifende Nutzung machen? Dann sind wir Ihr Partner. Unsere fachübergreifenden agilen Teams aus Designern, Usability-Fachleuten und Entwicklern mit Erfahrungen aus unzähligen Web-Projekten unterstützen wir Sie bei Konzeption, Design und Umsetzung und finden mit Ihnen gemeinsam eine professionelle und zeitgemäße Lösung, die speziell auf Ihr Unternehmen und Ihre Zielgruppen zugeschnitten ist. Sprechen Sie uns einfach unverbindlich an und vereinbaren Sie beispielsweise einen initialen Website-Relaunch-Workshop mit uns.
Weiterführende Informationen
Unser Website-Orientierungsangebot mit unseren Dienstleistungen und Kalkulationsbeispielen
Umfangreiche Fallstudie eines Website-Relaunchs
Strategien für responsives Webdesign entwickeln
Das Plätschern des Mobile-Designs, das zum Tsunami anwächst
Website-Award: Der Auftritt von CCSP gehört zu den besten
Informationszusammenspiel: Design, Informationsarchitektur und Content
Mehr über die Creative-Commons-Lizenz erfahren
