Mobile First | Elmastudio

Buch-Tipp: Content Strategy for Mobile von A Book Apart

Gestern ist das neueste Buch der A Book Apart-Serie “Content Strategy for Mobile” von Karen McGrane erschienen und wir haben uns natürlich gleich die eBook-Version gekauft. Inzwischen habe ich schon etwas im Buch geschmökert und ich bin jetzt schon total begeistert.

Karen bespricht in einer leicht verständlichen Sprache (wenn auch auf Englisch) darüber was zu bedenken ist, um Webinhalte mobile-ready zu machen und welche Problematiken auf Designer, Entwickler und Autoren zukommen, wenn Webinhalte für die verschiedensten Geräte zugänglich gemacht werden müssen. Weiterlesen

Tool-Tipp: Skizzen-Vorlagen für responsive Webdesigns

Layout Skizzen-Vorlagen für responsive Webdesigns

Interface Sketch Vorlagen für responsive Webdesigns.

Schnelle, unkomplizierte Skizzen auf Papier sind oft die einfachste Methode, um die ersten Ideen für ein neues responsive Webdesign-Layouts zu entwickeln. Um nicht auf einem ganz leeren Papier arbeiten zu müssen, kannst du dir fertige PDF-Skizzenvorlagen herunterladen und einfach einige dieser Vorlagen-Blätter ausdrucken. Weiterlesen

Thinking mobile first forces you to only keep what matters in our sites. We have to think about usability & content because people on mobile have very little time and screen space.

from An Event Apart: Content First by Jeffrey Zeldman

Ältere Internet Explorer in einem responsive, mobile-first Webdesign unterstützen (ohne JavaScript)

Die älteren Internet Explorer Versionen 6-8 unterstützen leider nicht die für ein responsive Webdesign benötigten Media Queries. Da diese Browser-Versionen allerdings immer noch recht weit verbreitet sind, bleibt zumindest eine Unterstützung der IE-Versionen 7 und 8 bei der Entwicklung eines neuen Webdesigns leider meist weiterhin nötig. Ganz besonders bei der Umsetzung eines mobile-first, responsive Webdesigns wird das Problem der nicht unterstützten Media Queries deutlich, denn hier bildet die kleinste Layout-Version für Smartphones das Standard-Layout. Da die älteren Internet Explorer alle Angaben innerhalb der Media Queries ignorieren, bleibt das kleinste Layout in diesen Browsern also auch auf großen Bildschirmen bestehen (was natürlich in den seltensten Fällen gewünscht ist). Um eine JavaScript-abhängige Lösung (z.B. mit dem respond.js Script) zu vermeiden, kann man Conditional Comments für die entsprechenden Internet Explorer-Versionen einbinden und das Webdesign dann mit Hilfe zusätzlicher CSS-Eigenschaften im Stylesheet allein mit CSS für die alten IEs optimieren. Weiterlesen

Pohutukawa: ein mobile-first, responsive Premium WordPess Blog-Theme für jede Menge Spaß beim Bloggen

Das neueste Elmastudio WordPress-Theme Pohutukawa ist da! Pohutukawa ist ein modernes mobile- first, responsive Blog-Theme, das sich besonders gut fürs persönliche Bloggen eignet. Das Theme-Design ist erfrischend und bietet jede Menge praktische Theme-Optionen, wie Farbanpassungen, eine Layout-Option mit Sidebar oder ein einspaltiges Layout, ein großes Headerbild, einen optionalen Footer-Widgetbereich und vieles mehr. So kannst du deinen Blog in nur wenigen Schritten individuell einrichten und an deine eigenen Bedürfnisse anpassen. Weiterlesen

So richtest du deinen WordPress-Blog für mobile Geräte optimiert ein

Ein responsive WordPress-Theme ist eine tolle Option, um den eigenen Blog für die Ansicht auf mobilen Geräten vorzubereiten. Doch auch nach der Auswahl eines geeigneten Themes, kann man noch jede Menge Optimierungen für die Ansicht des Blogs auf mobilen Geräten vornehmen. Ich habe ein paar praktische Tipps zusammen gestellt. Weiterlesen

Schrift-Optimierung im responsive Webdesign

Bei der Gestaltung eines responsive Webdesigns ist die Optimierung der Schriftgrößen für unterschiedliche Geräte eine wichtige und nicht zu unterschätzende Aufgabe. Am besten ist es natürlich, wenn man die Lesbarkeit der ausgewählten Schriften und Schriftgrößen auf möglichst vielen Geräten live testet. Dennoch kann man schon vor der ersten Design-Testphase einige Dinge beachten. Weiterlesen

Mobile-first Webdesign: Hilfreiche Tipps und Erfahrungswerte

“Mobile-first” bedeutet, dass man ein responsive Webdesign nicht vom großen Desktop-Layout Schritt für Schritt verkleinert, sondern dass man die mobile Webseiten-Ansicht als Ausgangsbasis nimmt, und das mobile Webseiten-Design dann schrittweise für größere Bildschirmformate optimiert.

Eine solche Vorgehensweise bringt natürlich eine ganz neue Denkweise für Webdesigner und Entwickler mit sich und wir werden gezwungen, uns mit der rasant wachsenden Beliebtheit mobiler Geräte und deren neuen Anforderungen auseinanderzusetzen.

Diese offensichtliche Herausforderung ist meiner Ansicht nach eine große Chance, Webseiten flexibler und damit auch moderner umzusetzen. Während der Konzeption und Umsetzung unseres ersten mobile-first WordPress-Themes Nori in den letzten Wochen haben auch Manuel und ich etliche “Aha-Erlebnisse” gehabt und neue Erkenntnisse dazu gewonnen. Die aus meiner Sicht wichtigsten Tipps und Erfahrungswerte zum Thema “mobile-first Webdesign-Ansatz” habe ich im folgenden Artikel zusammen gestellt: Weiterlesen

Elmastudio

Est 2009

Artikel der Kategorie ‘Mobile First’