Responsive Design testen für Nischenseiten und Nischenblogs

imageMittlerweile wird das Netz ja nicht nur von den Desktop-Benutzern genutzt und durchsucht, sondern die mobile Aktivität steigt und steigt immer mehr. Zum Teil kommen mittlerweile 30% oder mehr der Besucher über mobile Geräte wie Handys und Tablets.

Responsive Design heißt hier das Zauberwort. Also man will nach Möglichkeit eine Webseite oder einen Blog bauen, der dann auf allen Geräten gut aussieht.

Es wird also für Nischenseiten- und Nischenblogbetreiber immer wichtiger auf das Responsive Design zu achten. Was man beachten sollte und vor allem wie man es testen kann, zeige ich hier in diesem Artikel.


Responsive Design oder der Versuch über gut auszusehen

Als die Touch-Geräte wie Handy oder Tablets noch nicht so verbreitet waren, gab es den Versuch ein mobiles Internet parallel zu dem normalen Internet  aufzubauen. Könnt Ihr Euch noch an diese mobilen Seiten erinnern?

Meist waren diese stark abgespeckt, damit die Ladezeiten so gering wie möglich waren und naja, mit Usability und Design hatte das wenig zu tun. Auch bei den Blogs gab (bzw. gibt es bei manchen Themes immer noch) eine mobile Version. Diese sieht eher aus wie ein besserer RSS-Feedreader, aber nicht wie ein Blog.

Nach und nach wurden die Datenraten auch im mobilen Sektor höher und die Geräte konnte mit Ihren integrierten Browser immer bessere Seiten schnell darstellen. Das erzeugte nun die Begehrlichkeiten Webseiten und Blog, die ja zum Teil von Ihrem einzigartigen Design leben, auch auf diesen Geräten darzustellen.

Ziel war es bei der Gesichte, dass die Webseite bitte so aussieht wie Sie überall aussieht, sich aber trotzdem an das Gerät anpasst.

Es geht also darum ohne die Webseite entsprechend anpassen zu müssen überall gut auszusehen.

Das ganze nennt sich dann Responsive Design.

Wie setzt man das um?

imageWer meine neue Nischenseite LED-Taschenlampen kennt und die Nischenseiten-Challenge verfolgt, wird gesehen haben das ich hier in der 3. Woche ein Outside-Box (siehe links) eingebaut habe. Diese Outside-Box liegt außerhalb des eigentlichen Seitenlayout und soll den Besucher etwas steuern.

Nachdem die Entwicklung (in HTML und CSS) soweit abgeschlossen war, musste diese Box aber auch für das Responsive Design fit gemacht werden. Schließlich rechne ich damit, dass einige Besucher auch über mobile Geräte auf die Webseite kommen.

imageWie macht man dies? Schau ich mir mal mittels eines Test an, wie meine Nischenseite in unterschiedlichen Geräten aussieht, sehe ich deutlich, dass bei einer kleinen Auflösung die Outsite-Box abgeschnitten wird.

Ich habe das im Bild mal rot eingekringelt. Was kann ich nun dagegen tun?

Als erstes hat meine Outsite-Box einen eigenen DIV-Block mit ID erhalten. Das heißt alle StyleSheet-Einstellungen kann ich nun auf diese ID anwenden, ohne auf die Nischenseite Einfluss zu nehmen.

Danach habe ich in den StyleSheets definiert, was mit dem gesamten Block passieren soll, falls eine bestimmte Auflösung unterschritten wird. Ich habe also ein sogenanntes Media-Query erstellt.

Hier habe ich mir angeschaut wie hoch die Auflösung maximal sein darf und habe dann das Media-Query darauf angepasst. Der Stylesheet sieht wie folgt aus:

#outsidebox { display: block; }

@media screen and (max-width: 1280px) {#outsidebox { display: none; } }

Im folgenden sagt das CSS folgendes aus.

imageZeile1: Der DIV-Block soll die display-Eigenschaft block bekommen. Das gilt also erst einmal immer.

Zeile 2: Wenn die maximale Auflösung <= 1280 Pixel beträgt, dann soll der DIV-Block die display-Eigenschaft none erhalten. Das gilt nur für die entsprechende Auflösung.

Hier habe ich also einen Zweig eingefügt, der nur gilt, wenn bestimmte Eigenschaqften vom Gerät zu Verfügung stehen. Schaue ich mir nun das Ergebnis dieser Programmierung an, erhalte ich das nun so wie auf dem Bild dargestellt.

Auf einem Desktop sieht man die Box noch, auf den anderen Geräten wird es nicht mehr geladen.

Testen, Testen, Testen des Responsive Designs

Nun besitze ich zu Hause einen 27” Mac mit hoher Auflösung. Einen Windows-PC der schon an die Grenzen der Auflösung stößt und ein iPad Mini sowie ein iPhone. Ich habe also schon einmal viele Geräte zum testen des Designs zu Hause.

Doch wie kann man das Design testen, wenn man keine Geräte hat? Es gibt mittlerweile Plattformen auf denen man dies kostenlos testen kann.

Das Bild oben z.B. ist von einem solchen Dienst übernommen. Hier bekommt Ihr mal 3 solcher Dienste von mir an die Hand.

Tipp 1: Am I Responsive

imageDas ist der erste Kandidat der mir in die Finger gefallen ist und ich bin zufrieden mit dem Dienst. Sieht man ja oben an den Bilder.

Der Dienst stellt 4 Geräte zur Verfügung. Ein Mobiles Device mit 320×480 Pixel. Ein Tablet mit 768×1024 Pixel. Einen Laptop mit 1280 x 802 Pixel und einen Desktop mit 1600 x 992 Pixel.

Schön ist, dass man in den Geräten scrollen kann. Probiert das mal aus. Das geht gut.

Link: Am I Responsive

Tipp 2: ResponsiveTest

imageResponsiveTest ist zwar nicht mehr so einfach wie der Tipp 1, aber dafür kann man mehr einstellen.

Hier kann man zum einen bestimmte Klassen an Geräten wählen. Handys mit unterschiedlichen Auflösungen oder Laptops. Aber man kann noch mehr machen. Durch die direkte Eingabe in die Breite- und Höhefelder in Pixeln, kann man nun genau die Auflösung finden, die mit seinem Design funktioniert.

Zum Optimieren des Designs und der CSS-Einstellungen also ideal.

Link: ResponsiveTest

Tipp 3: Demonstrating Responsive Design

imageWer nicht nur die Tools verwenden möchte um seine Webseite anzupassen, sondern es auch benötigt um Kunden zu zeigen das er Responsive ist mit seinem Design, der sollte sich man Demonstrating Responsive Design anschauen.

Ein schickes Online Tool, welches 5 Geräteklassen darstellen kann. Nach der Eingabe seiner URL kann man dann die Geräte auswählen und schauen wie die Webseite so wirkt.

In Präsentationen zeigt man direkt Online die Webseite seinen Kunden und erhält bestimmt das eine oder andere “Gut gemacht”.

Link: Demonstrating Responsive Design

 

Ihr seht, Testen in Nischenseiten und Nischenblog bedarf etwas mehr als nur eine HTML-Seite aufzubauen und diese dann mal in seinem eigene Browser anzuschauen.

Der Test auf Responsive Design gehört heute schon dazu und wird in Zukunft auch immer wichtiger werden.


Ähnliche Beiträge:

GD Star Rating
loading...

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

CommentLuv badge