Webdesign, Fotografie, Video und Architektur-Visualisierungen zwischen Hamburg und Lübeck

Mobile Websites

Der nächste Evolutionsschritt im World Wide Web

tablettussiQuoteAnwender greifen zunehmend mit Smartphones und Tablets auf das Internet zu. Allein in Deutschland sind mehr als 115 Millionen Mobilfunkanschlüsse geschaltet, ca. ein Drittel aller Internetnutzer surfen auch mit dem Handy im Internet. Die Tablet-Verkäufe sind an den Verkaufszahlen herkömmlicher (Desktop) PCs vorbeigezogen.

Mit der Einführung des iPhone 2007 sind mobile, an das Web angebundene Endgeräte intuitiv bedienbar geworden. Zudem sind Datentarife mittlerweile recht erschwinglich und Netzabdeckung und Geschwindigkeit werden von Jahr zu Jahr besser. Das Internet verlässt also die Büros und Schreibtische und breitet sich aus in die Wohnzimmer, Schulen und Cafés.

Alles spricht dafür: Die Zeit ist reif für das mobile Web!

Und warum ist meine jetzige Website nicht für das mobile Web geeignet?

tablettussi“Normale”, nicht für mobile Devices optimierte Websites sind zumeist für eine Auflösung von ca. 1000 px optimiert (der kleineste gemeinsame Nenner bei Desktop Monitoren). User mit einem Smartphone können solche Seiten zwar ebenfalls aufrufen. müssen dann aber – damit der Inhalt groß genug dargestellt wird – zoomen.

Das heißt, man erhält eine verkleinerte Ansicht der Site und kann bestimmte Bereiche vergrößern. Das ständige Ein- und Auszoomen und das Verschieben der vergrößerten Seite  auf dem Bildschirm motivieren jedoch nicht gerade zum Weiterlesen.

 

(zum Vergrößern bitte klicken)

 

 

Die verschiedenen Möglichkeiten

Um sich als Unternehmen dieser Entwicklung, die weit mehr als nur ein Trend ist, sondern der nächste logische Evolutionsschritt des WWW, anzuschließen, gibt es derzeit im Wesentlichen drei Möglichkeiten:

  1. Eine eigene mobile (Zweit-) Website
    Nachteile: Man hat zwei Seiten zu pflegen, dies erfordert hohen adminsitrativen Aufwand. Es entsteht doppelter Content, was von Suchmaschinen abgestraft werden kann
  2. Eine mobile App für Handy und Tablet
    Nachteile: Es enstehen recht hohe Kosten, da in den jeweiligen native Programmiersprachen von Android und iOS programmiert werden muss des­sen Gerä­te­funk­tio­nen (Kamera, GPS) ange­wie­sen ist, dann braucht man eine auf das Gerät opti­mierte Web App, oder eine native App.
  3. Eine responsive Webseite
    Mobile Websites machen sowohl auf dem Handy als auch auf dem Desktopbildschirm im Büro oder auf dem Fernseher im Wohnzimmer eine hervorragende Figur.  

 

 

Responsive Webdesign: Eine Webseite für alle Fälle

mobile_webseite

QuoteResponsive Webdesign bedeutet soviel wie “reaktionsfähiges Webdesign”, besser noch “anpassungsfähiges Webdesign”. Das heißt, die Website passt sich automatisch der Bildschirmgröße des jeweiligen Ausgabegerätes an und erkennt auch, ob die Eingabe mittels Touchscreen möglich ist. Dies geschieht über diverse Abfragen im Hintergrund. Abhängig von der Bildschirmgröße ändert sich die Größe von Fotos, Texten, Videos und Hintergründen.  Zudem können Elemente hinzugefügt oder weggelassen oder die Navigation angepasst werden.

Die Site passt sich flexibel sowohl vom Design als auch von den Inhalten dem veränderten Kontext an. An der Bushaltestelle will man schließlich andere Inhalte abrufen als auf der Wohnzimmercouch. Responsive Webdesign ist erst durch die neueste Generation von Web-Browsern sowie die Standards HTML5 und CSS3 möglich geworden.

 
 
Die Vorteile einer Responsive Website :

  • Darstellbar auf diversen Geräten Tablets, E-Reader, Mini Tablets, Navigationssysteme, Fernseher etc.
    Die Site wird nicht nur kleiner dargestellt als auf dem Desktop Rechner, sondern auch größer, um den Platz auf LCD-Fernsehern oder 28″ Monitoren auszunutzen
  • Es ist nur eine Site zu aktualisieren
    Neue Texte müssen nur einmal eingepflegt werden, so bleibt der Inhalt stets konsistent.
  • Identischer  Programmier-Code auf allen PlattformenEbenso müssen besipielsweise Sicherheitsupdates nur einmal durchgeführt werden
  • Suchmaschinenfreundlich
    Es entsteht kein doppelter Content. Man hat nur eine URL – dies wird von Google ausdrücklich empfohlen. Auch erkennt Google, ob die Seite technisch für mobile optimiert ist, und ranked sie entsprechend höher
  • Zukunftssicher da auf alle Bildschirmgrößen und Geräte vorbereitet

 
Die technischen Hintergründe

Responsive Webdesign ist ursprünglich dem Begriff Responsive Architecture entlehnt.

Responsive Sites zeichnen sich vorrangig durch drei Merkmale aus:

  1. Der Website liegt ein flüssiges Gestaltungsraster zugrunde, welches sich automatisch an der Bildschirmgröße orientiert. So können auch Größenunterscheide zwischen ähnlichen Displaygrößen (diverse Handys oder Tabletformate) kompensiert werden.
  2. An bestimmten kritischen Punkten (meist 3-5), den sog. Sprungmarken, Breakpoint (engl. Media Queries) bricht das Design dann um. Die Struktur kann sich dramatisch verändern: Die Seitenleiste fällt weg, Grafiken werden ausgetauscht, aus einem vormals 3-spaltigen Layout wird ein 1-Spaltiges. Mit Hilfe dieser Technologie können die (HTML) Inhalte einer Site komplett (mit CSS) neu positioniert werden.
  3. Auch die Fotos und Grafiken verhalten sich flexibel. Sie füllen automatisch den Ihnen zugewiesenen Platz aus.

 

media123

Die Umsetzung von Responsive Web Design erfordert eine interdisziplinäre Arbeitsweise im gesamten Team. In Summe sind solche Projekte für alle Beteiligten nicht nur eine große Herausforderung,
andere Enwicklungsprozess:

 

Auch von der Planung her, ist der Prozess um einiges aufwändiger als bei herkömmlichen Sites Bei der Konzeption werden von Anfang an mobile Geräte mit berücksichtigt. Dieses Denken ist neu, während die Technolgie (HTML/CSS) schon länger existiert
 
 

(zum Vergrößern bitte klicken)

 

 

Anhand eine Beispiels…

QuoteImmer mehr (auch größere) Webpräsenzen stellen auf die neue Technologie um. Darunter z.B. tagesschau.de, iso.org oder bostonglobe.com

Den Effekt können Sie am besten sehen, indem Sie zum Beispiel auf dieser Seite das WebBrowser-Fenster kleiner oder größer machen.

Rechts sehen Sie ein Beispiel für die verschiedenen Anpassungen: Die  Site eines unserer Kunden:
www.holzundtechnic.de

 

QR Codes

tablettussiMittels QR-Codes kann auf die Site elegant hingewiesen werden. Auch bestimmte Kampagnen können beworben werden. Videos können direkt dargestellt werden.

Der QR Code ist ein zweidimensionaler Strichcode, der einem in letzter Zeit immer häufiger begegnet . Es kann auf Web-Adressen (URLS) verwiesen werden, oder auch Texte oder Kontaktdaten lassen sich speichern.

Wichtig ist hier ganz besonders, dass die Site dann entsprechend dargestellt wird, da in 90% der Fälle mit eine Handy gescannt wird.

Insbesondere auf Basis einer URL lassen sich die verschiedensten Inhalte verschlüsseln. Dazu zählen u.a. Homepages, Produktseiten, Videos, Bildergalerien, Coupons, Gewinnspiele, Kontakt- oder Newsletterformulare und Social Media-Präsenzen.

Die Einsatzmöglichkeiten sind vielfältig:

  • Visitenkarten
  • Bauschilder
  • Prospekte
  • Fahrzeugbeschriftung
  • Verpackungen

…um nur einige von vielen Möglichkeiten zu nennen. Durch den Einsatz von QR-Codes verschmelzen Realität und Cyberspace, was besonders integrierten Kampagnen zugute kommt.