Inspiriert von einem Artikel im Smashing Magazine über Webdesign Trends 2011 hat PERIMETRIK den eigenen Blog grundlegend überarbeitet: unser Blog stellt unsere Beiträge nun in einem Fluid Design dar.

Als Basis für den neuen Auftritt dient das Theme Yoko des Stuttgarter Teams Elmastudio. Der unschlagbare Vorteil dieser modernen Technik auf Basis von CSS3: die Darstellung ist nativ optimiert für die unterschiedlichen Auflösungen von PC- & MAC-Monitoren, Tabletts wie iPad sowie Handhelds/Smartphones wie iPhone. Durch spezielle Media-Querys wird sogar das hochauflösende Retina-Display des iPhone4 unterstützt:

Was bedeutet Responsive Webdesign bzw. Fluid Design?

Anders als in herkömmlichen, für bestimmte Auflösungen optimierten Layouts, wird beim Fluid Design die Auflösung und Orientierung des darstellenden Displays abgefragt. Das Design kann darauf reagieren, daher die Bezeichnung „Responsive“. Das Webdesign des Blogs baut auf einem Raster (oder „Grid“) auf, je nach Auflösung und Orientierung des Display werden Bilder beispielsweise 6 oder nur 4 Spalten breit dargestellt. So brauchen nur noch verhältnismäßig wenige Anpassungen vorgenommen zu werden, z.B. unterschiedlich abgestufte Schriftsätze, um die Darstellung auf den verschiedenen Geräten zu optimieren. Bei kleineren Displays können zudem einzelne Elemente weggelassen werden, um die Übersichtlichkeit zu optimieren.

Responsive Webdesign – testen Sie selbst!

Ziehen Sie Ihr Browserfenster kleiner und beobachten Sie, wie sich das Design unseres Blogs anpasst. Unser Blog ändert die Darstellung von einem 4-Spalten-Design auf Displays mit 1280Pixeln Breite und mehr in ein 3-Spaltiges Layout auf Displays wie dem iPad (quer: 1024 x 768Pixel). Auf dem iPad hochkant wird das Layout 2-Spaltig, bei kleineren Auflösungen (z.B. iPhone hochkant) wird das Layout 1-spaltig, wobei auf dem iPhone4 Bilder sogar in hoher Auflösung dargestellt werden. Wenn Sie mit einem Mobilgerät surfen, drehen Sie einfach mal Ihr Gerät um 90°!

Der Einsatz des fluiden Themes für WordPress bringt jedoch auch Schwierigkeiten mit sich: nicht alle Plugins für Diashows o.Ä. unterstützen die variablen Breiten. Wir mussten deshalb einige Plugins deaktivieren bzw. für Responsive Webdesign geeignete Plugins installieren. Bei dieser Gelegenheit haben wir die Suchmaschinenoptimierung unseres Blog noch weiter verbessert. Der Einsatz hat sich gelohnt: unser Blog ist nun perfekt für die Zukunft des mobilen Internets gerüstet.

Suchen Sie einen professionellen Webdesigner?

Wir erstellen Ihren professionellen Unternehmensauftritt: wir gestalten und konzipieren professionelle Websites und wenn Sie eine Homepage erstellen lassen möchten sind wir Ihr Ansprechpartner! Werfen Sie einen Blick auf unsere Web Design bzw. Responsive Webdesign Leistungen!

Möchten Sie Ihre Website für Mobilgeräte optimieren durch Responsive Webdesign?

Zögern Sie nicht uns anzusprechen!

Telefon: +49 228 9764 2412
E-Mail: info@perimetrik.de

11 + 9 =