Mit dem Online-Tool Responsify.it könnt ihr ein umfangreiches Template als Grundlage für eine responsive Website erstellen. Über die Eingabemaske lassen sich verschiedene Breakpoints sowie die Anzahl der Spalten und der Abstand zwischen den Spalten einstellen. Die Wahl zwischen einem prozent- und einem pixelbasierten Raster habt ihr allerdings nicht, das Raster basiert immer auf flexiblen Spalten (was ja auch die schönere Variante ist).

Integrierte Viewport-Testumgebung

Nachdem ihr die Basiseinstellungen vorgenommen habt und verschiedene Breakpoints erstellt wurden könnt ihr das Raster direkt online testen. Über einen Button im Footer der Seite lässt sich der Viewport auf die drei prominentesten Darstellungsgrößen skalieren. Dabei orientiert sich der Viewport an den Abmessungen 480px (iPhone im Querformat), 768px (iPad im Hochformat) und 1200px (Notebook, Desktop etc.).

Viewport-Test im Responsive-Grid-Generator

Download des Templates

Ihr könnt das gesamte Template als Download-Paket herunterladen. Das Paket enthält dann neben einer Grafik mit dem Raster auch eine index.html mit dem Basis-Quellcode und eine CSS-Datei mit den verschiedenen Media Queries. Zusätzlich enthält das Paket SCSS-Dateien und LESS-Dateien.

Der Workflow von Responsify.it

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. Stefan
    schrieb am 21.06.2012 um 08:03 Uhr:

    Interessant, vor allem für jemanden wie mich als Laien. Nur stellt sich mir nun die Frage, in weit das „leicht möglich“ ist für mich als Laien diesen produzierten Basis-Code zu nehmen und daraus ein quasi Basis Responsive Theme für WordPress zu bauen?

    Antworten
  2. Florian
    schrieb am 20.06.2012 um 16:12 Uhr:

    Hört sich ja sehr schnell und unkompliziert an, vielen Dank für die Vorstellung. Werde ich mir mal anschauen.

    @Jannis,
    da wird mit JavaScript gearbeitet, oder?

    Antworten
  3. Jannis Gerlinger
    schrieb am 18.06.2012 um 14:18 Uhr:

    Auch noch sehr zu empfehlen:
    http://gridpak.com/

    Antworten
  4. Mario
    schrieb am 12.06.2012 um 11:47 Uhr:

    Hmm kannte ich noch garnicht.
    Danke für den Link wird demnächst mal ausprobiert, sieht auf jedenfall sehr praktisch aus.

    Grüße
    Mario

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Schulung + Beratung