Grundlagen: Responsive Webdesign und Webdesign für mobile Endgeräte mit HTML5 und CSS3

responsive-webdesign

Nicht nur WordPress-Fans, Bloggern und anderen Internet-Geeks wird es aufgefallen sein: Responsive Webdesign ist absolut im Kommen und wird auch 2013 aller Wahrscheinlichkeit nach eines der top Themen im Online-Bereich sein.

Generell halte ich mich über aktuelle Webdesign-Themen sehr gern über diverse einschlägige Webdesign-Blogs auf dem Laufenden. Ich bin keine Webdesignerin, muss mein Wissen dennoch auf dem aktuellen Stand halten. Einerseits weil es mich interessiert und andererseits, weil ich Kunden auch in diesen Aspekten ganzheitlich beraten möchte.

Als ein kleiner Einstieg in das Thema des Responsive Webdesign und des Webdesign für mobile Endgeräte möchte ich diesen Artikel nutzen, um beides grundlegend zu erläutern und verständlich voneinander abzugrenzen.

Was ist Responsive Webdesign?

Nun möchte ich erst einmal erklären, was Responsive Design bzw. Responsive Webdesign eigentlich bedeutet. Übersetzt heißt „Responsive Webdesign“ so viel wie „reaktionsfähiges Webdesign“.

responsive-webdesignReaktionsfähig, weil das Design in der Lage ist, die Struktur und die Anordnung einzelner Bestandteile des Designs (Navigation, Texte, Bilder etc.) dynamisch den Anforderungen des Ausgabegerätes beziehungsweise des Endgerätes anzupassen. Ein Design kann damit auf einem Tablet anders aussehen als an einem Rechner oder Smartphone. Anders bedeutet in diesem Zusammenhang „optimal für das jeweilige Endgerät“.

Die technische Basis für diese Möglichkeiten sind HTML5 und CSS3. Dies sind Weiterentwicklungen von HTML und CSS, die sich vor allem an der Zunahme mobiler Endgeräte orientieren.

Was ist Webdesign für mobile Endgeräte?

Hin und wieder wird das Responsive Webdesign als eine Art Synonym für „Webdesign für mobile Endgeräte“ oder auch „Design für mobile Websites“ genutzt. Das ist so aber leider nicht ganz richtig. Während man bei dem reaktionsfähigen Webdesign darauf achtet, dass die Darstellung des Designs auf mobilen Endgeräten als auch in einem größerem Browser nutzerfreundlich ist, beschränkt sich das „mobile Webdesign“ im Kern eben nur mit der mobilen Optik einer Webseite.

Was HTML5 und CSS3 leisten können

Um die vielfältigen Möglichkeiten von HTML und CSS3 zu demonstrieren, kursieren bereits viele interaktive und unterhaltsame Projekte im Internet. Ein paar Beispiele hierfür sind:

 

Wie auf Responsive Webdesign umsteigen?

Der Aufwand für einen Umstieg auf ein Responsive Webdesign kann nicht pauschal bewertet werden. Blogger, die mit einem WordPress-Blog arbeiten und weitestgehend unabhängig vom aktuell eingesetzten Theme sind, können sich ein gutes und schön aussehendes (Premium) WordPress Theme suchen, das „Responsive-fähig“ ist und es auf dem Blog installieren.

Im unternehmerischen Umfeld ist der Umstieg meist etwas aufwändiger. Eine Online-Präsenz ist nicht mal eben so umgestellt und eine versierte HTML5-Agentur sollte in jedem Fall in Anspruch genommen werden, um zu einem professionellen Ergebnis zu gelangen.

 

Wer schreibt hier? Jasmina

Hi! Ich bin Jasmina, die Autorin von onlinelupe.de. Seit 2010 schreibe ich hier über digitales Arbeiten und Selbständigkeit im Internet.

2 Kommentare

  1. Schöner Artikel und soweit stimme ich hier auch zu. Nur eine Anmerkung: Im Grunde kann man jede Seite zu einem responsiven Webdesign umcoden. Kann zum Teil zwar sehr aufwendig werden, aber es wäre machbar. Hierzu ist nur die komplette Anpassung der CSS notwendig und ein bisschen HTML in der entsprechenden Seite. Kann je nach Webseite viel oder auch sehr viel sein …

  2. Durch die Nutzung meines Tablets und Smartphones bin ich auf diese Abbildung bzw. Grafik aufmerksam geworden. Gerade Onlineshops sollten dies anbieten, da es zum Teil mühselig ist, auf kleinen Bildschirmen und via Touchscreen die klassische Website zu bedienen. Sicherlich ist man unterwegs auf den mobilen Endgeräten auch anderen Voraussetzungen ausgesetzt als vor dem heimischen Screen. Mich überzeugt in diesem Fall ein hohes Maß an Nutzerfreundlichkeit.

Schreibe einen Kommentar

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