Jederzeit und überall steht das Internet mittlerweile zur Verfügung. Damit es aber reibungslos klappt, müssen auch die Dienste entsprechend darauf ausgelegt sein. Es war also höchste Zeit nun auch mein Weblog entsprechend den Design-Grundsätzen von "CSS3-Responsive Design" zu unterwerfen, damit man auf einer Vielzahl unterschiedlicher Geräte überall ohne Einschränkung darauf zugreifen kann. Mit Erfolg: Vom einfachen monochromen e-Book Reader bis zum Smart-TV ist es nun wunderbar bedienbar.
Von Klein bis Groß
Vertraut man auf eine aktuelle Prognose, so wird es bereits 2016 gleich viele Zugriffe von mobilen Endgeräten geben wie von klassischen Webbrowsern. Sehr beliebt ist der Ansatz eine eigene Subdomain für mobile Websites zu wählen, Google empfiehlt in seinen Richtlinien doch ganz klar den Media-Query Ansatz.
Ich habe daher meine Website entsprechend angepasst und von Grund auf umstrukturiert, auch wenn sie auf einem regulären Browser komplett gleich aussieht!
So gibt es nun drei verschiedene adaptive Designs, die in Abhängigkeit der Darstellungsgröße unterschiedlich angezeigt wird.
Dominik Amon's Weblog auf einem e-Book Reader
Getestet wurden hier vor allem Smartphones wie Android, iPhone oder Windows Mobile aber auch ein e-Book Reader und ein SmartTV mit WLan Funktionalität.
Technische Stolpersteine
Die Umstellung der Designs war realtiv einfach, jedoch galt es das Problem mit fixen Größen von Bildern und eingebundenen Elementen wie Videos zum Beispiel zu lösen.
Bilder automatisch anpassen
Für Bilder war es relativ einfach: Es gelang noch per CSS und einem jQuery Skript, welches allen Bildern innerhalb des Content-Bereiches die "content" CSS-Klasse vergeben hat. Die CSS Klasse selbst ist dann wie folgt notiert:
CSS:
img.content {
max-width: 99%;
min-width:99%;
height: auto;
width: auto/9; /* ie8 */
}
JavaScript (jQuery vorausgesetzt):
//Add CSS Class to all Images within the Story-DIV
$("#story img").addClass("content");
Videos von Youtube resizen
Es war notwendig bei den Videos von Youtube die als IFrame eingebunden werden, entsprechend selbst die Größenanpassung vorzunehmen. Ein jQuery Skript, welches auf das Resize-Event reagiert schien mir hierbei die beste Lösung zu sein.
Ich habe mir einfach das Seitenverhältnis ausgerechnet und dann die Breite auf die zur Verfügung stehende gesetzt und die Höhe im Seitenverhältnis dazu.
JavaScript (Jquery vorausgesetzt):
$("#story iframe").each(function () {
$.each($(this).children(
$(this)
.attr("ratio", $(this).attr("height")
/ $(this).attr("width"))
.addClass("resizableFrame")
));
})
$(window).bind("resize", function () {
resizeFrames();
});
function resizeFrames() {
$(".resizableFrame").each(function () {
$.each($(this)
.children(setFramesize($(this))));});
}
function setFramesize(currentFrame) {
var width = $("#story").width();
$(currentFrame).attr("width", width);
$(currentFrame).attr("height", width
* $(currentFrame).attr("ratio"));
}
Fehler am iPhone
Zu Kämpfen hat man mit Bugs am iPhone, wie zb die nicht Interpretation von "position:fixed". Hier hilft nur ein Update auf des neueste iOS Betriebssystem.
Leider wird beim Drehen des iPhone die device-width nicht neu setzt. Dafür gäbe es für das iPhone einen Work-Around mit einem eigenen JavaScript, wobei mir die Lösung nicht besonders gut gefällt, daher werden iPhone Benutzer bis auf weiteres bei der Hochformat-Variante bleiben müssen.
Umgang mit alten Internet Explorern (IE8 oder älter)
Die Seite funktioniert wunderbar mit IE9 oder höher, allerdings verstehen die Browser von IE8 und abwärts keine Media Queries.
Ich habe daher entsprechend eine Conditional Comments in der Website eingebaut, sodass für IE8 oder älter immer das Voll-Größen-Design ausgeliefert wird:
<!--[if lte IE 8]>
<link id="pageLarge8" href="
Library/Css/Design2011v2.3/PageLarge.css"
rel="stylesheet" type="text/css" />
<link id="sliderLarge8" href="
Library/Css/Design2011v2.3/SliderLarge.css"
rel="stylesheet" type="text/css" />
<link href="Library/Css/Design2011v2.3/ie8.css"
rel="stylesheet" type="text/css" />
<![endif]-->
Nachladen von CSS und Bildern
Da man davon ausgehen kann, dass auf Geräten mit kleinen Bildschirmen oft auch schlechte Internetverbindungen stehen bzw. schwache CPUs, habe ich mich daher entschlossen, dass nur die CSS Daten geladen werden, die auch wirklich gebraucht werden.
Ich habe auch den Slider, der ganz oben Artikel ankündigt, die Bilder durch Links mit Hintergrundbildern ausgetauscht, die nur im Falle der großen Ansicht angezeigt und geladen werden.
Auch den JavaScript Code habe ich ein wenig ausgemistet, wobei es dennoch noch viele JavaScript Daten gibt, die geladen und verarbeitet werden. Hier gibts sicher noch Optimierungspotentional
Ohne Fleiß, kein Preis
Das Weblog auf einem aktuellen Smartphone
Hat man die ersten Stolpersteine überwunden, macht es richtig Spaß die Seite mit dem Smartphone zu bedienen.
Mit dem Google GoMo Tester erhalte ich 4 von 6 Punkten. Problematisch derzeit ist immer noch die Ladezeit, die vor allem durch große JavaScript und CSS Daten zustande kommen, aber hier gibt es noch Potential!
Wenn gleich der Anteil der Smartphone Nutzer meiner Website derzeit nur bei 10% liegt, so erwarte ich vor allem in den nächsten Jahren einen starken Zuwachs in diesem Bereich.