• Responsive Web

Dies ist eine Demoseite zu responsive Webdesign. Verkleinern Sie die Breite und/oder Höhe des Browser-Fensters, um das Verhalten der Webseite mit kleinen Bildschirmen zu sehen.

Manche Eigenschaften werden nicht in allen Browsern wiedergegeben, ich habe die Seite bewusst so gestaltet, dass Sie Unterschiede beim Betrachten in verschiedenen Browsern feststellen.

Abbildung im OperaZum Vergleich:
Die Abbildung zeigt die Seite im Opera 12.12.

Das Internet ändert sich, es werden immer mehr Tablet PCs, Smartphones, Smart TV und Konsolen und MacBook pro zum surfen verwendet.

Dabei haben die Endgeräte unterschiedlichste Auflösungen und fordern unterschiedliche Internetseiten. War bis vor kurzem noch 72px/90px pro Zoll Standard gibt es heute Endgeräte die bis zu 326px abbilden. Schriften und Vektorgrafiken können beliebig skaliert werden, aber bei Bildern benötigen wir für diese Geräte etwa doppelt so große Bilder (4 fache Fläche).

Der Aufbau einer responsiven Website erfolgt anhand der Anforderungen des Gerätes, mit dem die Seite betrachtet wird. Dabei ändert sich die Anordnung und Darstellung einzelner Elemente, wie Navigation, Seitenspalten und Texte und Bilder. Technische Basis hierfür ist CSS3.

Jeder moderne Browser kann heute viel aber nicht alles!

Da selbst Browser wie der Internetexplorer 9 heute schon einen Teil des CSS3 interpretieren bzw. ignorieren, lässt sich das Design zumindest für moderne Geräte anpassen, ohne dass veraltete Browser und Betriebssysteme die Seiten allzu sehr verfremden. Weitere Infos finden Sie unter Beratung.
Es wichtig, dass die Webseite so konzipiert wird, dass keine sinnlosen doppelte Navigation und feste Breiten vom Grafiker vorgegeben werden. Exakte Breiten in Pixel lassen sich natürlich nur schrittweise anpassen, während Prozentangaben flexibel sind, also auch mit Geräten angezeigt werden deren Auflösung nur wenige Pixel kleiner sind als die Vorgabe. Warum keine 2 Navigation verwendet werden soll erklärt sich von selbst, wenn man sich die Seite auf einem Handy angepasst anschaut.
In einem „liquiden“ Web würden feste Bildgrößen bei kleinen Bildschirmen über das Design hinausragen und das Aussehen einer Webseite zerstören. Deshalb werden variable Bildgrößen benötigt, die sich automatisch an kleinere Ausgabegeräte anpassen.

TEST2

Responsive Webdesign brauch ich so was?

Dazu ein paar Zahlen von einer Seite die von uns betreut wird (März 2013 bei ca. 40.000 Besuchern):

  • Windows 70,41 %
  • iOS 13,22 %
  • Android 10,79 %
  • Macintosch 4,08 %
  • Linux 0,95 %
  • Windows Phone 025 %
  • nicht ermittelt 0,13 %
  • Symbian OS 0,08 %
  • BlackBerry 0,07 %
  • Nokia 0,01 %

Das bedeutet, dass von den Besuchern heute schon ca. 25 % der Seitenbesucher ein Smart Tablet/Phone benutzen. Um 1/4 aller Besucher eine optimale Lösung zu bieten benötigen Sie heute schon eine variable Seite. Wir erstellen Ihnen gerne ein Responsive Web.