Responsive Design ist ein Trend der Stunde: Den Herausforderungen der wachsenden mobilen Internetnutzung müssen sich Unternehmen, die im Web aktiv sind, eher früher als später stellen und Design und Inhalte ihrer Websites so anpassen, dass sie auf allen Endgeräten gute Nutzererlebnisse bieten.

Im ersten Teil unserer Linksammlung zum Thema haben wir zahlreiche Fachartikel und Beispiele mit Ihnen geteilt. Ergänzend dazu verweisen wir Sie nun auf nützliche Tools für Webdesigner.

Grid

• CSS-Grid-System mit 1140 px, das perfekt auf 1280-px-Monitore passt und sich mit etwas Arbeit selbst an jedes Endgerät anpasst: CSS Grid
• Make Your Mockup in Markup
• Das 1140-px-Grid-System: Mit CSS3 Media Queries für mobile Geräte optimiert
• A folding grid for responsive design: Golden Grid System
• Resonsive Wireframes: Responsive Layouts, Responsively Wireframed
• Responsive Frontend Framework (Wireframing im Browser): Foundation 3
• Einfaches CSS-Framework für die Entwicklung responsiver Websites: Responsive Grid System
• Cross-Device-CSS-Grid-System: Less+ Framework
• Grid-Generatoren: GridPak, Gridinator
• Grid-Add-on: GridFox für Firefox

Tool-Sammlungen

• 8 Tools and Scripts for Responsive Web Design
• 50 Web Development Resources from2012

Typografie

• PX to EM conversion: PX to EM
• Plugin for inflating web-type: Fit Text

Responsive Testing Tools

• Responsive Design Bookmarklet
• Responsive Design Bookmarklet
• The Responsinator
• Responsive Design Testing Tool

Bilder/Icons

• Adaptive Bilder: Adaptive Images
• Responsive images approach: picturefill
• Responsive Icons (als Webfont):
  • IcoMoon
  • Free Icon Fonts for Web User Interfaces
  • Font Awesome
  • 180 Icons from the Pictos Packs
  • Fontello
• Responsive Typography mit WYSIWYG-Editor im Browser: typecast
• jQuery-Picture-Plugin: jQuery Picture

Sonstiges

• HTML5 and CSS3 boilerplate: Gridless
• Frontend-Framework: Bootstrap
• jQuery-Plugin für flexible Layouts: Isotope

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