Was ist responsive Webdesign und warum sollte meine Webseite responsive sein?

Hallo euch allen,

heute geht es um ein Thema das ihr bestimmt nicht kennen werdet.

Responsive Webdesign.

Wie ihr vielleicht hier schon sehen könnt hat sich einiges verändert.

Ich war mit meiner eigenen Seite unzufrieden und habe mir mal die Zeit genommen hier auf zu räumen. klares Design, klare Struktur. Das ganze sollte natürlich responsive sein. Was das ist und warum es so wichtig für eigentlich jede Webseite ist will ich euch in diesem Beitrag mal erklären.

Was ist Responsive Webdesign

responsive-webdesign-screenshot-iphone-5s

Responsive Webdesign ermöglicht es einer Webseite sich an die Größe des Browserfensters automatisch an zu passen. Ein Anwender soll auf kleinen Bildschirmen nicht zoomen müssen und auf großen den Platz effektiv nutzen können.

Responsive Websites bieten eine super alternative zur mobilen Webseite. Der Nachteil der mobilen Webseite ist, dass diese nur für einen Gerätetyp entwickelt wird. Der Bildschirm eine iPhones hat zum Beispiel eine ganz andere Grösse als der des Samsung Galaxy oder anderen Geräten. Hinzu kommen noch Tablets in verschiedenen Ausführungen und Größen.

Beim Surfen sitzen viele auf dem Sofa mit ihrem Tablet in der Hand und sehen Webseiten an, bei denen sie nur noch mit zoomen und scrollen beschäftigt sind. Man verliert schnell die Lust am Surfen und da der Weg zum PC oder Notebook meist zu weit ist geht man einfach auf Webseiten, die auf dem Tablet schön aussehen, weil man es eben gerne einfach hat.

Responsive Webdesign passt sich auf die Fenstergrösse durch relative Werte an. Es wird nicht mehr mit festen Breiten gearbeitet, sondern mit prozentualen Werten. Ein Bild ist jetzt nicht mehr 300 Pixel breit, sondern 80%. Diese 80% werden von jedem Gerät perfekt interpretiert und passen auf jeden Bildschrim.

Das bezieht sich nicht nur auf Geräte, die kleiner als der Durchschnitt sind, sondern auch auf die großen. Was bringt mir ein schöner neuer 30 Zoll  Monitor, wenn die Seiten die ich aufrufe nur für 15 bis 19 Zoll gemacht sind. Ich verschwende Platz.

Mobile Webseiten vs. Responsive Design

Mobile Websites sind Webseiten, welche extra für das Smartphone erstellt wurden. Wie vorhin angesprochen, habe sie den Nachteil, dass sie nicht auf jedes Smartphone passen. Durch ihre Feste grösse sind die Mobilen Webseiten meist schon mit dem Umdrehen des Handys in die Horizontale überfordert.

Die Entwicklung des Smartphone und Tabletmarkt wird zur Herausforderung, wenn man sich einmal die Bildschrimauflösugnen der Besucher anschaut.

Über 107 verschiedene Auflösugnen besuchten allein in diesem Monat den Knighthouse Blog; und ich spreche nur von Tablets und Smartphones.

So einer breiten Masse die perfekte Auflösung bereit zu stellen ist ein Ding der Unmöglichkeit. Ausser sie ist anpassungsfähig.

responsive-webdesign

Brauche ich eine Mobile Seite

Überlegt selbst. Wie oft surft ihr Mobil mit dem Smartphone oder Tablet. Wie oft Surfen bekannte und Freunde von euch Mobil. Wenn ihr es genau wissel wollt könnt ihr auch den Google Analytics Dienst nutzen. Hier hat man die Möglichkeit sich anzuschauen, wie viele Aufrufe tatsächlich von mobilen Geräten erfolgen. Bei mir sind das zwischen 20 und 30%. Für diejenigen die sich jetzt denken das ist jetzt auch nicht so viel. Denkt mal daran ihr hättet 10.000 Aufrufe im Monat. Das bedeutet 2.000 Besucher bekommen keine perfekte Seitendarstellung und könnten es sich anders Überlegen. Wenn ihr jetzt noch Kunden über eure Seite generieren wollt sind das 2.000 potenzielle Kunden die es sich anderes überlegen könnten.

Mobile / Responsive ist nicht schwer

Wenn ihr wie ich WordPress verwendet, habe ihr mehrere Möglichkeiten eure Webseite anzupassen.

Passendes Design verwenden

Für Worpdress gibt es so viele Designs die responsive sind. Viele Designer folgen diesem Trend und passen ihre Designs den zahlreichen Mobilgeräten an. Also wer suche der Finde.  Eine gute Empfehlung die ich immer wieder gebe: Schaut mal bei den Jungs von themeforest.net vorbei. Die haben tolle responsive Themes.

Mobile Plugins verwenden

Die meiner Meinung nach schlechteste Lösung. In diesen Mobilen Plugins wird sehr oft ein komplett anderes Design verwendet als auf eurer Desktop Seite. Ein Besucher sollte auch sehen wo er ist und sich beim erneuten Besuch an euer Design erinnern.

Absolutes “No Go” ist eine Mobile URL. Die zusätzliche Url wie mobile.matthiasbutz.com sorgt bei Suchmaschinen für Verwirrung, da auf beiden Seiten, trotz unterschiedlicher URL der gleiche Inhalt ist.

Warum Responsive Webdesign auch seine Schatten hat

    • Mehraufwand in der Entwicklung
    • Bilder müssen in mehreren Auflösungen bereit gestellt werden
    • Ältere Browser haben meist Probleme mit den Responsive Design werten und können diese nicht richtig interpretieren.

Ich hoffe ich konnte mit diesem Beitrag das Internet zu einem schöneren Ort für Mobilgeräte machen.

Gruß

Matthias

Jetzt bis du gefragt!

Was hältst du von diesem Beitrag? Hast du Fragen oder Anregungen? Dann schreib es in die Kommentare.

Es gefällt dir? Hilf uns und Teile es mit deinen Freunden!



Schreibe einen Kommentar

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

Dieser Beitrag wurde von Matthias Butz geschrieben

Mein Name ist Matthias Butz und ich bin Fotograf und Digital Artist im Raum Ludwigshafen – Mannheim – Heidelberg. Ok, eigentlich bin ich gar kein Fotograf, zumindest kein gelernter. Ich komme aus der IT, wo ich viele Jahre tätig war. Die Fotografie war jedoch schon immer mein Hobby, meine Leidenschaft und so kam es, dass ich eines Tages das Hobby zum Beruf gemacht habe. Ich bin der Meinung, dass man diese Leidenschaft durch nichts ersetzen kann. Ich liebe, was ich mache und habe Spaß dabei! Wenn man Spaß an etwas hat, ist man deutlich motivierter und kniet sich mehr rein als andere, um Schritt für Schritt besser zu werden. Ich möchte weg von engstirnigen Denken und probiere immer wieder neue Sachen aus um meinen Horizont zu erweitern. Das ist auch der Grund, warum ich die Dinge deutlich lockerer sehe als andere. Ich lasse mich auf mein Team und die Personen mit denen ich Arbeite ein um bessere Ergebnisse zu bekommen.