kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Responsify.it – Responsive Grid Template

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).

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

4 Kommentare

  1. Mario

    Verfasst am 12. Juni 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

  2. Jannis Gerlinger

    Verfasst am 18. Juni 2012 um 14:18 Uhr.

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

  3. Florian

    Verfasst am 20. Juni 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?

  4. Stefan

    Verfasst am 21. Juni 2012 um 8: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?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.