Responsive Webdesign

Neben dem iPad, als populärster Vertreter der Tablet-PCs, spielt das mobile Internet durch die Verbreitung von webfähigen Smartphones und günstigeren Datentarifen eine zunehmende Rolle. Die folgenden Fragen werden dadurch immer wichtiger: wie sieht das auf dem iPad aus? Kann ich die Seite auch gut mit einem iPhone bedienen?

Wo früher hauptsächlich der PC/Laptop mit seinen unterschiedlichen Bildschirm-Auflösungen berücksichtigt werden musste, kommen heute Geräte unterschiedlichster Größe (Bildschirm, Tablet, Mobiltelefon) und Bedienungsart (Maus/Finger/Tastatur/Stift) zum Einsatz. Und in den nächsten Jahren werden noch viele unterschiedlichste Geräte neu dazukommen.

Für jedes Gerät eine optimierte Version anzubieten, das genau das Format, Auflösungen, Größe, etc. berücksichtigt ist mit einem enormen, und oftmals auch unnötigen Aufwand verbunden. Welche Lösung hier die Techniken anbietet, die sich unter dem Begriff "Responsive Webdesign" versammeln, schauen wir uns im Folgenden an.

Beim Responsive Webdesign passt sich das Design und die Technik an die technische Umgebung des Benutzers an. Das Design, das Layout und schlussendlich die Technik "reagieren („eng: respond) auf den Benutzer und auf das Gerät, das er benutzt. Basierend auf Bildschirmauflösung, Platform, Hoch- oder Querformat wird das Layout der Internetseite angepasst ausgegeben. In der Praxis basiert Responsive Webdesign aus einem Mix aus flexiblen Rastern und Layouts, flexiblen Bildern und dem intelligenten Einsatz von CSS. Wenn neue Geräte auf den Markt kommen, passt sich das Raster flexibel an die neuen Spezifikationen an.

 

Bildschirmauflösung

Die verschiedenen Bildschirmauflösungen ist für Webdesigner seit Beginn des Internets eine Herausforderung. Die Lösung war bisher für die Bildschirmauflösung zu gestalten, die am weitesten verbreitet ist. Größere Bildschirme zeigen die Internetseite mit einem Rand, kleinere Bildschirme zeigen nur einen Teil der Seite und Benutzer müssen scrollen.

Auf Smartphones, die von Natur aus einen sehr kleinen Bildschirm haben, wird die ganze Seite soweit verkleinert, dass die ganze Seite angezeigt wird. Um zu navigieren oder Inhalte zu lesen, muss der Benutzer erst "reinzoomen".

 

Lösung: flexibles Layout, flexibles Raster

tl_files/blog/pi_home_macbookpro.jpg
Laptop/PC: Gewöhnliche Ansicht, im Beispiel mit drei Spalten.

 

 

tl_files/blog/pi_home_ipad.jpg

iPad: im Querformat gleiche Ansicht wie auf dem Laptop, im Hochformat würden drei Spalten keinen Sinn machen, deswegen untereinander. Die Schriftgröße ist für ideale Lesbarkeit angepasst.

 

 

tl_files/blog/pi_home_iphone.jpg

iPhone: Auf den Smartphones ist der Bildschirm am kleinsten. Deswegen wieder angepasste Schriftgrößen. Das Layout hat nur noch eine Spalte.

 

 

Fazit

Layouts, die sich gut an die entsprechenden Geräte anpassen, ist eine Anforderung, die in Zukunft erfüllt werden sollte. Besonders die User mit Smartphones profitieren am Meisten von einer optimierten Darstellung. Die Technik (CSS3) ist in den Smartphones gut integriert. Dadurch kann man mit wenig Mehraufwand bei Besuchern mit diesen neuartigen Geräten glänzen.

Content Management Systeme

CMS ist die Abkürzung für Content Management System. Wie der Name schon andeutet, ist das CMS ein Programm, das auf dem selben Server wie die Internetseite gespeichert ist und zur Verwaltung der Internetseite und deren Inhalte verwendet wird. Der Einsatz eines CMS hat vielerlei Vorteile, insbesondere weil es für die Administratoren (techn. Verwaltung) und Redakteure (Texte, Bilder, etc. einfügen) der Seite viele Aufgaben erleichtert

 

Gründe, ein CMS einzusetzen gibt es viele, hier die Wichtigsten:

– Einfach neue Seiten anlegen

– Inhalte, insbesondere Texte bearbeiten, Links einfügen, formatieren ...

– Bilder einfügen

– Einfach Nachrichten einzufügen,

– Veranstaltungen, Terminkalender

– Häufig gestellte Fragen

– uvm.

 

tl_files/blog/backend_contao.jpg
Frontend und Backend

Ein CMS teilt sich in zwei Hauptbereiche. Das "Frontend" und das "Backend". Das Frontend, also die vordere Ende der Seite, ist das, was der gewöhnliche Besucher der Internetseite sieht. Der Besucher kriegt es im Frontend normalerweise gar nicht mit, ob und welches CMS eingesetzt wird. Das Backend, also der hintere Teil der Seite, ist ein durch Passwort geschützter Bereich, in dem sich der Benutzer zuerst identifizieren muss und dann Änderungen an der Homepage vornehmen kann. 

 

Die Auswahl des Systems

Inzwischen gibt es sehr viele verschiedene Systeme, die sich mehr oder weniger durch vorgefertigte Funktionen, Bedienung und Systemanforderungen unterscheiden. Der Großteil dieser Systeme ist kostenlos sowohl für den privaten als auch gewerblichen Einsatz.
Für welches System man sich entscheidet, kommt letztendlich auf die Anforderungen an, und welches System diese am Besten mit dem kleinsten Zusatzaufwand erfüllen kann. Pauschal auf ein CMS-System wie beispielsweise Typo3 zu setzen ist da kontraproduktiv. Typo3 ist eines der bekanntesten und häufigsten eingesetzen "Open-Source" "Enterprise-CMS-Systeme". Ein sehr großes und mächtiges CMS. Und genau aus diesem Grund nicht immer zu empfehlen. Die Lernkurve, um das Backend bedienen zu können ist steil, die Hardwarebedingungen und der Einrichtungsaufwand hoch und somit kostspielig.

Diese Homepage, also auch der Blog den Sie gerade lesen, wurde mit dem CMS Contao umgesetzt, das besonders durch seine einfache Bedienung im Backend und seine Geschwindigkeit bei niedrigem Hardwarebedarf im Frontend überzeugt.

Es muss also nicht immer Typo3 sein, wobei wir natürlich auch gerne Projekte mit Typo3 umsetzen, besonders bei großen Seiten mit vielen Fremdsprachen und mehreren Redakteuren (Benutzer im Backend).

 

Dateinamen in CMS

Ob die Adresszeile index.php? oder andere merkwürdige Zeichenketten enthält die nach CMS aussehen ist übrigens kein Indiz dafür ob ein CMS eingesetzt wird oder nicht. Mehr dazu in meinem nächsten Blogeintrag.

Facebook über 500 Millionen Mitglieder.

Im Januar 2004 wird Facebook gestartet. Knappe sechs Jahre später hat sich Facebook zur Nummer eins der sozialen Netzwerke entwickelt und laut eigenen Angaben über 500 Mio. aktive Mitglieder weltweit. Diese Erfolgsgeschichte ist der Stoff für aktuellen Kino-Film  "The Social Network". Doch was mich als Webdesigner viel mehr interessiert sind wie viele und welche Benutzer ich über diesen Kanal erreichen kann.

Seit Februar 2008 gibt es Facebook auf deutsch. Inzwischen verzeichnet die deutsche Seite über 12,6 Mio. Nutzer (Stand Oktober 2010).

Die folgenden Statistiken sind über die Benutzer von Facebook selbst und beziehen sich auf die globale Plattform.

  • 50% der aktiven Benutzer loggen sich täglich bei Facebook ein.
  • Der durchschnittliche Benutzer hat 130 Freunde.
  • Benutzer verbringen 700 Billionen Minuten pro Monat auf Facebook.
  • Benutzer installieren täglich 20 Millionen Anwendungen.
  • Seit der globale "Gefällt-mir"-Button im April 2010 gestartet ist, integrieren ihn durchschnittlich 10000 neue Seiten auf ihren Webseiten.
  • Über zwei Millionen Webseiten haben den "Gefällt-mir"-Button bereits integriert.
  • Über 200 Millionen aktive Benutzer benutzen Facebook von mobilen Geräten wie Smart-Phones.

Quelle: http://www.facebook.com