responsive_webdesign

Responsive Webdesign – Erklärung und Vorteile

Von | Allgemein, Barrierefreiheit, Responsive Webdesign | Keine Kommentare

Das ist Responsive Webdesign

Bei Responsive Webdesign handelt es sich um eine Layout-Struktur, welche sich an die Vielfalt der Eigenschaften von Endgeräten anpasst. Zu diesen Eigenschaften zählen voranging die Auflösung, das Format sowie die Eingabemöglichkeiten. Ermöglicht wird dies durch HTML5 , CSS3 (insbesondere Media Queries) und Javascript.

Beispiel

Oben sehen Sie ein Bild, bei dem die Anzeige einer Webseite auf unterschiedlichen Displays anschaulich dargestellt wird. Ein großer Bildschirm (oben) und ein Laptop (links) zeigen die normale Web-Ansicht (3 Spalten), rechts eine schmalere Ansicht (2 Spalten) für Tablets und unten sind zwei Smartphones zu sehen. Dort wird der Inhalt aufgrund des schmalen Hochformats untereinander (1 Spalte) angeordnet. Die Aufteilung in Spalten ist hier nur als Beispiel zu sehen. Alle Inhalte sind auf jedem Gerät sichtbar und werden lediglich anders angeordnet.

 

Problematik

Sicherlich sind jedem verschiedene 4:3, 16:9 oder 16:10 Formate von herkömmlichen Bildschirmen bekannt. Dabei handelt es sich ausschließlich um Querformate. Durch den rasant angestiegenen Anteil von mobilen Endgeräten, kam in den letzten Jahren jedoch auch eine hohe Anzahl unterschiedlichster Formate hinzu. So hat ein Smartphone beispielsweise meist ein sehr kleines Display und wird im Hochformat per Fingergestiken bedient. So muss eine Webseite heutzutage nicht nur auf unterschiedlichen Display-Größen, sondern auch Formaten (Hoch- und Querformat bzw. Portrait- und Landscape-Format) einwandfrei funktionieren und eine einfache Lesbarkeit sowie Bedienbarkeit bieten.

Dies hat natürlich auch Auswirkung auf die Aufteilung einer Webseite. Ist diese normalerweise in viele Spalten unterteilt, so müssen diese Inhalte auf relativ schmalen Bildschirmen (z.B. von Smartphones) untereinander angeordnet werden. Auch müssen Schriftgrößen, Abstände, Eingabemöglichkeiten und viele weitere Eigenschaften angepasst werden. Im Idealfall deckt das Layout einer responsiven Webseite alle möglichen Display-Varianten ab.

Bisher fertigte man für mobile Endgeräte spezielle mobile Versionen der Webseite an. Diese waren meist einspaltig und der Inhalt somit untereinander gegliedert. Somit gab es mindestens zwei verschiedene Ansichten der Webseite und auch zwei Systeme, die gewartet werden mussten. Bei der Fülle an Auflösungen reicht das jedoch bei weitem nicht aus. Ein responsive Webdesign stellt ein Grundsystem dar, welches sich auf alle Anzeigevarianten automatisch einstellt.

 

Anforderungen

Folgend die wichtigsten Merkmale auf die eine responisve Webseite bei einem mobilen Endgerät reagieren muss.

  • Unterstützung von HTML5 und CSS3
  • Maße des Displays
  • Auflösung
  • Format (Hoch- oder bzw. Querformat)
  • Eingabemöglichkeiten wie Tastatur, Maus, Finger und Sprache

 

Vorteile

Ein großer Vorteil von Responsive Webdesign ist, dass alle Inhalte einer Seite verschiedensten Endgeräten bequem zugänglich gemacht werden können ohne weitere Systeme (z.B. extra mobile Webseite) aufsetzen zu müssen. Zudem müssen Inhalte nicht unnötig entfernt, sondern nur umstrukturiert werden.

Vorteile im Überblick:

  • Eine Webseite deckt möglichst alle internetfähige Endgeräte ab
  • Weniger Absprünge von Besuchern
  • Kein zusätzlicher Aufwand durch Erstellung und Wartung separater Seiten (z.B. mobile Webseite)
  • Perfekte Grundlage für Barrierefreies Webdesign und eine gute Corporate Identity

Nachfrage

Im Durchschnitt findet mittlerweile jeder zweite Webseitenbesuch über ein mobiles Endgerät statt. Jedoch können bei weitem nicht alle Webseiten die Nachfrage noch mobile-optimierten Inhalten befriedigen. Gerade im Bereich Onlineshopping und in der Industrie sind nur ein Bruchteil der Webseiten wirklich responsive und somit ordentlich über mobile Endgeräte bedienbar. Durch die Optimierung bietet sich hier ein sehr großes Potenzial, Verkäufe oder andere Kundenaktionen drastisch zu steigern.

Damals und heute: Facebook

Von | Allgemein | Keine Kommentare

Im heutigen “Damals und heute” Beitrag geht es um Facebook. In nächster Zeit werde ich einige Erfolgstories verschiedener Web-Unternehmen unter der Rubrik veröffentlichen und zeigen, wie heutige Unternehmen gestartet sind und welchen Lauf diese genommen haben.

Read More

Was ist ein Entrepreneur?

Von | Selbstständigkeit | Keine Kommentare

In diesem Artikel möchte ich euch erklären, was ein Entrepreneur ist. In letzter Zeit hört man immer häufiger diesen Begriff in Zusammenhand mit Firmengründern und Startups. Da es keine direkte deutsche Übersetzung gibt, fällt es vielen schwer, sich etwas darunter vorstellen zu können. Read More

No WPautop

Von | Wordpress | 2 Kommentare

Mit No WPautop kannst du die Wordpress-Funktion wpautop deaktivieren, welche automatisch Absätze in Inhalt und Auszüge einfügt.

In den Plugin-Optionen kannst du entscheiden, wo wpauop deaktiviert wird. Im Auszug, Inhalt oder beidem.

Read More

Kurz-Tipp: WordPress – Text direkt ausgeben

Von | Wordpress | Keine Kommentare

Es ist immer mal nötig, auf einer WordPress-Seite an verschiedenen Positionen Text auszugeben. Zum Einen gibt es natürlich die Möglichkeit per Widget. Diese sind aber nicht immer an der richtigen Stelle verfügbar. Bequemer und überall anwendbar kann man mit folgendem Code den Inhalt einer Seite oder eines Artikels direkt ausgeben.

Read More

Hochwertige WordPress Themes

Von | Wordpress | 5 Kommentare

Hier möchte ich einige tolle Anbieter von hochwertigen und meist kostenpflichtigen Themes für WordPress auflisten

Kostenlose Templates gibt es wie Sand am Meer, hochwertige seltener. Diese kosten dann meistens auch etwas aber ich denke Preise unter 100 € sind mehr als gerechtfertigt. Ergänzungs-Wünsche bitte einfach per Kommentar.

Read More

Home Office – Zuhause Selbständig werden

Von | Selbstständigkeit | 2 Kommentare

Die Arbeit in einem Home Office – also von Zuhause aus – ist für viele eine tolle Angelegenheit. Man erspart sich den Weg zur Arbeit, hat Ruhe vor Kollegen und bestimmt selbst über sein kleines Reich der Arbeit. Wie Sie Ihren Arbeitsplatz Zuhause bestmöglich optimieren und was es Alles zu bedenken gibt, lesen Sie in diesem Beitrag. Zusätzlich füge ich noch meine eigenen Erfahrungen an. Später folgen weitere Tipps.

Read More