Responsives Design – unverzichtbar ?

Teile diesen Beitrag!

Was ist der Albtraum eines jeden Webseitenbesitzers ? Richtig, dass die Leser/Benutzer/Käufer/oder einfach USER sofort nach „Betreten“ der Webseite wieder wegklicken und sich die Angebote oder Blogartikel o.ä., die man mit viel Mühe erstellt hat gar nicht erst ansehen.

responsives-Design

Mit einem Grund, das zu diesem unerwünschten Verhalten führen kann, möchte ich mich heute mal näher beschäftigen: die Webseite ist nicht für mobile Geräte optimiert.

Unter „mobile Geräte“ fällt alles vom Smartphone bis zum iPad, also alle Geräte, die kleiner sind als der normale Computer- oder Laptopbildschirm.

Und warum ist das so wichtig ?

Weil immer mehr User tatsächlich nicht mehr mit ihrem Laptop oder Computer surfen, sich informieren oder einkaufen, sondern mit ihren mobilen Geräten. An der Bushaltestelle mal kurz ein eBook kaufen und herunterladen, wenn der Bus mal wieder Verspätung hat ?? Heute kein Problem mehr, wenn du dein Smartphone dabei hast ! Da der Bildschirm des Smartphones aber nun recht klein ist, macht das Einkaufen nur dann Spaß, wenn der eBook-Händler seine Webseite für Smartphones optimiert hat und man nicht alle Informationen extra vergrößern muss und auch gleich einen guten Überblick über die Webseite bekommt. Sonst macht das Einkaufen bald keinen Spaß mehr und der User wechselt vermutlich zu einem anderen eBook-Händler. Verständlich, oder ?

Um es auf den Punkt zu bringen: du verschenkst wichtiges Potential, wenn du deine Seiten nicht für mobile Geräte optimierst !

Nutzen denn tatsächlich so viele Menschen Mobilgeräte ?

Ja, und es werden täglich mehr, wie untenstehende Infografik beweist:

Infografik: Smartphone-Absatz knackt die Milliarden-Grenze | Statista

Es handelt sich also um einen Marktanteil, der keinesfalls vernachlässigt werden darf !

Was genau ist denn nun responsives Design ?

An zwei Grafiken zeige ich dir den Unterschied zwischen einer Seite, die nicht responsiv ist und einer, die bereits für Mobilgeräte optimiert wurde. Den Unterschied siehst du nur auf den kleinen Geräten, auf einem Computerbildschirm sehen beide Seiten gleich aus.

responsive-1
responsive_2
Kurz gesagt werden die Inhaltsblöcke bei responsivem Design also nicht (nur) verkleinert, sondern umsortiert.

Hier ein Beispiel für reine Verkleinerung:

nicht responsiv

Das meines Erachtens größte Problem beim Zoomen der einzelnen Inhaltselemente ist die damit einhergehende Unübersichtlichkeit der Webseite. Man zoomt groß um etwas einzugeben, dann wieder klein für den Überblick etc. – schlichtweg lästig ! Besonders wichtig ist ein vernünftiges für Mobilgeräte optimiertes Design für Onlineshops.

Und wie sieht deine Seite aus ?

Nachdem wir also festgestellt haben, dass es unerlässlich ist, eine Webseite zu haben, die auch auf Tablets und Smartphones leserlich dargestellt wird, stellt sich natürlich die Frage: ist meine Webseite bereits responsiv ?

Hierfür gibt es glücklicherweise diverse Testtools im Internet, so dass man nicht gezwungen ist, sich alle Mobilgeräte zu Testzwecken selber anzuschaffen 😉

Sehr schön und übersichtlich finde ich persönlich die Seite Am I responsive

Hier gibt man einfach die URL seiner Seite ein und sieht sie daraufhin auf den 4 gängigen Geräten (großer Bildschirm, kleines Laptop, Tablet und Smartphone). Da auf den einzelnen Geräten der Seite auch die Scrollfunktion funktioniert, kann man hier schon viel erkennen.

 

Eine andere (und sicher die einfachste) Möglichkeit zu überprüfen, wie sich die eigene Seite verkleinert, ist das Browserfenster zu verkleinern. Dazu habe ich ein kurzes Video erstellt, in dem ich die Vorgehensweise beschrieben habe. Bedenke aber, dass das tatsächliche Aussehen einer nicht responsiven Seite auf einem Mobilgerät anders aussieht, siehe Bild Stadtbibliothek Bremen oben.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PGRpdiBjbGFzcz0iYXN0LW9lbWJlZC1jb250YWluZXIiPjxpZnJhbWUgd2lkdGg9IjE0MDAiIGhlaWdodD0iNzg4IiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL1RjOFJPWkhBZjNzP2ZlYXR1cmU9b2VtYmVkIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlIiBhbGxvd2Z1bGxzY3JlZW4+PC9pZnJhbWU+PC9kaXY+

(Die Links zu den Seiten: Stadtbibliothek Bremen und Smashing Magazin)

Und nun ?

Was tust du nun, falls du festgestellt hast, dass deine WordPress-Seite noch nicht für mobile Geräte optimiert ist ??

Hier kommt einer der großen Vorteile von WordPress zum Tragen: du wechselst einfach dein Theme ! Natürlich suchst du dir ein neues Theme aus, das bereits responsiv ist (steht in der Themebeschreibung). Bei der Umstellung gehen dir keine Inhalte verloren, du musst bestenfalls ein paar Anpassungen vornehmen und kannst in Zukunft deine Seite auch auf dem Smartphone ansehen ohne dich zu ärgern.

Passende Themes findest du über jede Suchmaschine.

Hast du noch Fragen oder Anmerkungen zu dem Thema ? Dann stell sie doch in den Kommentaren !

 

Teile diesen Beitrag!

Kommentar verfassen

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

Der Elementor Basics Mini-Kurs:

Was ist ärgerlicher, als beim Design der eigenen Webseite festzustellen, dass all deine tollen Ideen nicht mit deinem Wordpress Theme umsetzbar sind?

Aber halt! Dafür gibt es ja inzwischen die Wordpress Pagebuilder, mit denen das Webdesign auch für Nicht-Programmierer easypeasy geworden ist. Nur ein paar Elemente per drag-and-drop hin und her geschoben und schon hast du deine super Webseite.

OK, zugegeben, ganz so einfach ist es nun doch nicht…du brauchst vor allem einen Plan, eine Idee, sonst wirst du von den Möglichkeiten vermutlich erschlagen.

Aber!

Um überhaupt erstmal einen Eindruck von den Möglichkeiten zu bekommen, kannst du dich hier für meinen kostenlosen ELEMENTOR BASICS Mini-Kurs anmelden. Elementor ist der Pagebuilder meines Vertrauens … und vielleicht auch bald deiner.

Elementor macht das Design einer Webseite, die genau so aussieht, wie du das möchtest, super einfach! Keine Beschränkungen durch Themevorgaben mehr!

In meinem ELEMENTOR BASICS Mini-Kurs zeige ich dir in vier Videolektionen an vier Tagen die Grundlagen von Elementor, damit du siehst, ob Elementor eine Option für dein Webdesign ist.

Elementor ist in der Grundversion übrigens kostenlos und funktioniert mit jedem Wordpress Theme!

Also melde dich gleich hier an!

 
 
 

Ja

Wenn du das Häkchen nicht setzt, bekommst du nur den ELEMENTOR BASICS Kurs, versprochen!

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne: 

Umekos Designletter

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand  meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Das neueste aus dem Blog:

Wordpress Pagebuilder

Bist du mit dem Theme deiner WordPress Webseite unzufrieden, möchtest aber nicht gleich wechseln? Möchtest du mehr Entscheidungsmöglichkeiten für dein Webseitendesign? Brauchst du eine andere Seitenaufteilung als von deinem Theme vorgegeben? Und möchtest du dieses alles, ohne vorher Programmieren zu lernen?

Weiterlesen
Ist Wordpress kompliziert

Immer häufiger stolpere ich im Internet über die Aussage, dass WordPress so kompliziert zu bedienen und unübersichtlich sei, dass man lieber auf Squarespace oder ähnliches ausweichen sollte. Als überzeugter WordPressnutzer wollte ich mal etwas Licht in dieses Dunkel bringen…

Weiterlesen

Umekos Designletter

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne meinen Designletter.

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Meld dich gleich an: