Responsive Webdesign ist ein Muss

Noch vor wenigen Jahren gehörte das Tabellenlayout wie der Käse zur Pizza. Dabei wurde das Design an feste Bildschirmauflösungen optimiert, in der Regel 800 x 600, 1.024 x 768 oder 1.280 x 1.024 Pixel. Das Design war dabei fixiert, wer beispielsweise eine größere Auflösung hatte, musste mit viel Whitespace leben. Der unschöne Nebeneffekt konnte mit schicken Hintergrundbildern etwas gelindert werden. Einige Kunden bestanden bereits vor wenigen Jahren darauf, auch eine mobile Internetpräsenz zu besitzen. Diese wurde allerdings oftmals auf eine Subdomain ausgelagert und bot nur eine abgespeckte Funktionalität. Hier herrschten einspaltige Layouts ohne grafische Ansprüche, die lediglich die nötigsten Informationen mit Text darstellten.

Sunday Best

Das bisherige Designkonzept begann mit der Einführung von iPhone, iPad sowie den Android Smartphones ins Wanken zu geraten. Mit ihrer Einführung mussten plötzlich zahlreiche Bildschirmauflösungen bei der Erstellung der Webseite beachtet werden. Durch die immense Popularität der Smartphones und die gleichzeitige Internetnutzung unterwegs wuchs zugleich der Anspruch an die mobilen Webseiten. Webdesigner standen vor einer großen Frage – was tun? Theoretisch hätten sie eine Webseite für Desktoprechner, eine spezielle für iPhones sowie iPads und eine minimalistische für alle anderen mobilen Geräte entwickeln können. Der Aufwand für die Pflege dieser Webseiten wäre allerdings zu groß. Hinzu kommt das Problem mit den verschiedenen Auflösungen, die verlangen würden, dass man immer wieder eine neue Webseite entwickelt.

Eine viel einfachere Lösung bieten HTML5, CSS3 sowie Javascript. Sie erlauben das Programmieren von Device unabhängigen Webseiten, die automatisch Text, Bilder und andere Elemente skalieren und der passenden Auflösung des Gerätes anpassen.

3 Schritte zum Responsive Webdesign

Feste Schriftgrößen sind Schnee von gestern

Die Verwendung von festen Schriftgrößen hat sich leider jahrelang nicht geändert. Der Grund dafür ist auch hier die Tatsache, dass früher fast jeder dieselbe Auflösung nutzte. Wer heute eine feste Schriftgröße auf seinen Webseiten nutzt, steht vor dem Problem, dass die Schrift auf einem Monitor mit Full-HD-Auflösung winzig klein sein könnte, während sie auf einem Smartphone zu groß wäre. Im Responsive Webdesign nutzt man aus diesem Grund keine Pixelangaben als Definition der Schriftgröße, sondern relative Werte.

Simon Collison

Schriftgrößen, Zeilenhöhen und andere Elemente werden auf der Basis von Prozent oder auch em definiert. Eine Schriftgröße von 16 Pixeln entspricht so dem Wert 100% oder 1em. Diese Werte werden in CSS-Dateien festgelegt und von jedem Webbrowser interpretiert.

Flexible Layouts sind die Zukunft

Die bisherigen Webseiten verfügten über feste Layouts, oftmals mit einer Breite von 960px, heute wird auch 1.140px genutzt. Sinnvoll sind beide Werte nicht, denn nach wie vor nutzen viele Internet User kleine Auflösung bei ihrem Monitor. Dies hat zur Folge, dass sie horizontal scrollen müssen, um den kompletten Inhalt der Webseite sehen zu können. Auf der anderen Seite sehen Webseiten, die eine solche Pixel-Breite nutzen, auf einem hochauflösenden Monitor zu klein aus. Der User müsste möglicherweise sogar heranzoomen, um die Elemente gut erkennen zu können.

Sparkbox

Im Responsive Webdesign werden die Elemente in ihrer Maximalgröße begrenzt. Auf der Basis dieser Größen werden sie auf relative Werte heruntergerechnet. Ein Element eines Layouts mit einer Pixelbreite von 960px würde man so beispielsweise auf 31,25% definieren. Dabei definiert man für Bilder, Videos sowie anderen Objekten mit dem Befehl max-width:100%; stets die Maximalgröße. Für das Problemkind Internet Explorer gibt es bereits fertige Scripts, um auch diese Definitionen zu verarbeiten.

Media Queries

Seit Jahren wird bereits das media-Tag genutzt, um beispielsweise spezielle Stylesheets zur Druckausgabe zu laden. Mit CSS Media Queries kann man heute Stylesheets für bestimmte Geräte laden. Mit dem Befehl media="screen and min-width: 800px könnte der Designer ein Stylesheet laden lassen, welches nur dann aufgerufen wird, wenn das Browserfenster des Internet User mindestens 800 Pixel nutzt.

Das Thema kann noch in viele weitere Bereiche eingegangen werden. Interessante Inspirationen zum Thema Responsive Webdesign gibt es übrigens auf der Showcase Seite Mediaqueri.es.

Artikelbild: Creative Commons by Jeremy Keith / Flickr.com

Der Firefox 3 ist ja jetzt schon einige Zeit draußen. Es gibt sicherlich Gründe dafür und ich will keinem zu nahe treten, aber es nervt schon, wenn nach so langer Zeit immer noch keine Updates für bestimmte, veraltete Addons erschienen sind. So schwierig dürfte es zumindest für einige kleine Addons nicht sein, ein kurzes Update herauszubringen, um diese wieder zu aktivieren.

Bei mir sind es zum Beispiel die Addons “Paste and Go 2″, mit dem man einen URL aus der Zwischenablage mit zwei Klicks laden kann (was Opera schon standardmäßig kann), sowie das Addon “Restart Firefox”.

Beide Plugins habe ich jetzt mit einem einfachen Trick wieder zum Laufen gebracht. Dieser Trick funktioniert sicherlich auch bei anderen Plugins, dafür garantieren kann ich aber in keinem Fall!

Genauso wenig übernehme ich die Verantwortung falls irgendetwas schief läuft. Wie gesagt, ich hab es bei meinen beiden Addons getestet und es funktioniert ohne Probleme.

• Ihr sucht euch zunächst den Ordner, in dem die Dateien des jeweiligen Plugins liegen.
  In der Ordnerstruktur liegen diese auf Windows unter:
  C:\Dokumente und Einstellungen\{Username}\Anwendungsdaten\Mozilla\Firefox\Profiles\{profilname}.default bzw. C:\Dokumente und Einstellungen\{Username}\Anwendungsdaten\Mozilla\Firefox\Profiles\{profilname}.default\extensions.

  Falls ihr den Ordner nicht auf Anhieb finden solltet, könnt ihr auch danach suchen lassen. Sollte der Ordner “Anwendungsdaten” nicht sichtbar sein, müsst ihr unter Ordneroptionen>Ansicht die versteckten Dateien und Ordner anzeigen lassen.

• Als nächstes öffnet ihr die Datei install.rdf mit einem Texteditor.
• Jetzt sucht ihr euch die Zeile mit dem XML-Tag <em:maxVersion> und ändert den Wert auf 3.0.1 (3.0.5 oder 3.0.* sollten auch gehen).
• Jetzt die Datei abspeichern und den Firefox neu starten.

Das war’s schon.

Dieses neue Funktion bietet euch die Möglichkeit, anhand der Eingabe von Buchstaben in der URL-Zeile, bestimmte Seiten schneller zu erreichen. Ich hab mich mittlerweile daran gewöhnt. Für alle, die den alten Standard wieder herstellen möchten, gibt es einen kleinen Trick.

Vorab der Hinweis, dass jede Veränderung in den Einstellungen des Firefox mittels about:config natürlich auf eigene Gefahr erfolgen. (Hinweis also beachten)

Und so geht’s:

• In die Adresszeile about:config eingeben
• Die Einstellungen durchsuchen nach: browser.urlbar.matchOnlyTyped
• Hier nun den Wert von false auf true ändern, indem ihr die Zeile doppelt anklickt

Das war's schon.
Jetzt ist die Funktionsweise der URL-Leiste wieder auf dem alten Stand der 2er Version.

Die erste Version des Browsers kam bereits 1994 auf den Markt und errang einen Marktanteil von teilweise bis zu 85 Prozent. Allerdings musste sich Netscape in den folgenden Jahren im sogenannten „ersten Browser-Krieg“ von Microsoft geschlagen geben. Netscape wurde 1998 von AOL aufgekauft. Der Marktanteil schrumpfte derweil auf grade mal einen Prozent.

Aus dem Netscape-Browser ist immerhin das Mozilla-Projekt entstanden, aus dem letztendlich der Firefox hervorgekommen ist.

Ob die Idee, den neuen Browser aus dem Hause Microsoft als “IE VIII”, als “IE Eight!”, als “iIE”, als “IE for Web 2.0 (Service Pack 2)” oder als “IE Desktop Online Web Browser Live Professional Ultimate Edition for the Internet” auf den Markt zu bringen, einer Schnapslaune oder einem verfrühten Aprilscherz zu verdanken ist, darf selbst geraten werden.

Laut einem Artikel von Molly wird der IE8 im März auf der MIX08, einer Webkonferenz in Las Vegas, das erste Mal präsentiert.

Ihr wolltet schon immer irgendwo mehrere Accounts haben, ohne euch jedesmal neu anmelden zu müssen?
Dann ist Cookieswap genau das richtige für euch!
Cookieswap verwaltet bequem bis zu drei verschiedene “Cookieaccounts”. Durch das einfache Umschalten zwischen den Profilen mit Hilfe von gerade mal 2 Klicks könnt ihr im nu von einem Account zum nächsten switschen. Mit einem einzigen Reload der Seite seid ihr direkt im nächsten Profil eures del.icio.us/Facebook/Youtube-Accounts. Probiert’s einfach mal aus!
Cookieswap bekommt ihr hier, Firefox gibt’s bei Mozilla.

Deepest Sender

Habt ihr Deepest Sender erst einmal installiert und geöffnet (als eigenes Fenster oder in der Sidebar), könnt ihr direkt in das große Eingabefeld schreiben. Mit Hilfe der von WordPress oder in Word bekannten Buttons könnt ihr euren Text beliebig formatieren, einrücken lassen oder Bilder posten. Dann fix einer Kategorie zu ordnen, abschicken und schon ist das Posting auf eurem Blog veröffentlicht. Ein minimalistisches Plugin für euren Firefox-Browser, mit dem ihr ganz einfach und vor allem schnell Postings veröffentlichen könnt.

ScribeFire

ScribeFire ist im Prinzip ähnlich, nur mit mehr Funktionsvielfalt. Zu den von Deepest Sender bekannten Möglichkeiten kommen noch einige hinzu, so dass man durchaus schon von einer fast WordPressbackend-gleichwertigen Alternative sprechen kann (was die Postingfunktion von WordPress betrifft).

Ihr könnt nicht nur Beiträge raushauen, sondern z.B. auch Entwürfe speichern. So habt ihr die Möglichkeit auch mal nur eure Gedanken aufschreiben zu können, ohne sie direkt in ein perfektes Posting verwandeln zu müssen. Schlechte Entwürfe oder Beiträge könnt ihr auch direkt mit Scribefire entsorgen. Ihr habt dabei Zugriff auf alle Posts, Seiten, Tags, Notizen, könnt Kategorien hinzufügen, einzelne Seiten löschen, Beiträge bearbeiten, und so weiter… Das Addon unterstützt  Technorati-Tags und Trackback-URLs. Der einzige große Nachteil dieses Addons ist meiner Meinung nach, dass es am ende jedes Beitrags ein “Powered by ScribeFire.”-Footer einträgt.

Fazit

Beide Addons haben Vor- und Nachteile. Wollt ihr schnell mal das eine oder andere Posting raushauen und legt dabei keinen Wert auf allzu viele Formatierungsmöglichkeiten, dann ist wahrscheinlich Deepest Sender das richtige für euch. Wer mehr wert auf Optionen legt und sich an dem “Powered by ScribeFire” nicht stört beziehungsweise wer es händisch rausmachen möchte, für den ist unser zweites Plugin die richtige Wahl. Vielleicht gibt es von ScribeFire ja mal ein Update, wo die Macher auf den Zusatz mit dem Powered-by verzichten können. Nötig haben sie es ja eigentlich nicht und ärgerlich ist es trotzdem, so dass mit Sicherheit der eine oder andere die Installation wieder rückgängig machen wird. Ausprobieren solltet ihr trotzdem mal beide Plugins, sie können einem den Komfort beim Bloggen auf jedem Fall erhöhen.

Je nach Zielgruppe der Webseite sind natürlich leider immer noch User mit dem Internet Explorer unterwegs. Vorhersehen lässt sich das Verhalten der Renderingengine des Exploders Explorers leider nur im begrenzten Maß, vor allem wenn auch noch mehrere Versionen des Internet Explorers unterstützt werden sollen.

Da viele Browser nur eine Installation pro Betriebssystem zulassen, ist es natürlich dementsprechend schwierig auch den leider noch am weitesten verbreiteten Browsers von Microsoft zu testen.

Abhilfe schafft hier z.B. die Software Multiple_IE von TredoSoft, mit der sich mehrere Versionen des Internet Explorers auf einem Rechner installieren lassen. Unterstützt werden dabei:

• Internet Explorer 3.0
• Internet Explorer 4.01
• Internet Explorer 5.01
• Internet Explorer 5.55
• Internet Explorer 6

Wer sich keine Extra-Software installieren möchte oder kann, sollte mal einen Blick auf den Netrenderer von Geotek riskieren. Dort kann man sich online die Engine der IE-Versionen 7, 6 und 5.5 für eine Webseite rendern lassen. Eine Option zum Anzeigen der Unterschiede zwischen IE6 und IE7 ist dort auch vorhanden.

• Das wohl mächtigste Addon zur Analyse und Liveeditierung des Quelltextes und der Stylesheets ist der Firebug. Mit ihm könnt ihr den Quelltext des HTML-Dokumentes ganz einfach direkt im Browser ändern und so bestimmte Teile hinzufügen oder entfernen und z.B. die Angaben in CSS-Stylesheets ändern (wobei die Auswirkungen dann zeitgleich im Browser zu sehen sind). Ausserdem habt ihr Zugriff auf Javascriptfiles, dem DOM und könnt die Ladezeiten einzelner Dateien und Bilder überblicken. Alle zur Verfügung stehenden Möglichkeiten hier aufzuzählen würde den Rahmen sprengen.
• Das Addon, was ihr euch direkt danach installieren solltet ist ein extra Addon für den Firebug. Mit YSlow kann man sich einen kleinen Überblick darüber verschaffen, was an der Website aus perfomancetechnischen Gründen noch verbessert werden kann.
• Ebenfalls Pflicht für jeden Designer ist die Web Developer Toolbar, eine Extension mit der ihr schnellen Zugriff auf relevante Informationen der Webseite und wieder eine grosse Anzahl an Einstellungsmöglichkeiten habt.
• Mit Colorzilla könnt ihr mit einem kleinen Fadenkreuz den Farbwert einzelner Elemente bestimmen.
• Mit Measure It könnt ihr Breiten und/oder Höhen auf der Seite abmessen.
• Lori zeigt euch ähnlich wie YSlow Werte über die Performance der einzelnen Seite an. Zur Auswahl steht dabei die Zeit vom Klick bis zum Empfang des ersten Bytes, die Ladezeit und Größe der Seite, sowie ebenfalls die Anzahl der Anfragen bis zum vollständigen Anzeigen der Seite.
• Wer häufig mit großen CSS-Dateien arbeitet, hat sicherlich irgendwann Stylesheetangaben, die nicht mehr benötigt werden. Dust Me Selectors hilft euch dabei diese überflüssigen Selectoren zu finden.
• Zum Validieren einzelner Seiten ist der HTML Validator bestens geeignet.