Responsive Web - die Homepage für Alle

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. Nicht alle Features würde ich sonst gleichzeitig auf einer Webseite einsetzen, z. B. entweder Flatter- oder Blocksatz, letzterer dient hier nur der Demo. Das Selbe gilt für die Spalten, die übrigens auch Blocksatz sein könnten.

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

Firefox Nightly Zum Vergleich:
Die Abbildung zeigt die Seite im Firefox Nightly 33 für 64 Bit (Win 7). Zum Vergrößern und für weitere Browser bitte auf die Abbildung klicken.

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. Weitere Beispiele zu CSS sehen Sie auch auf der Seite Programmierung.

Jeder moderne Browser kann heute viel aber nicht alles!

Nach dem Microsoft den Support für das Betriebssystem XP eingestellt hat, brauchen Websites, in absehbarer Zukunft, den veralteten IE 6 nicht mehr zu unterstützen. 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.
Nach dem Microsoft den Support für das Betriebssystem Windows XP eingestellt hat, brauchen Websites, in absehbarer Zukunft, den veralteten IE 6 nicht mehr zu unterstützen.
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.
Heute scheint es noch nicht relevant, aber immer mehr Smart-TVs erobern die Wohnzimmer und Ihre Webseite wird in Zukunft immer öfter mit so einem Gerät aufgerufen werden.

Casino Monte Carlo

Kontakt

Kontaktadresse:

nr.1 design
Joachim Schulte
Kopsbühl 64
78048 Villingen-Schwenningen

Telefon: 07721 9469732
E-Mail: web@nr1-design.de

Kontaktdaten Pflichtfelder







Kopie an Ihre E-Mail-Adresse senden
Spamm-Schutz Pflichtfeld Bitte nur die Buchstaben in das Feld Code eintragen:
140jmads125



Bitte füllen Sie alle Felder aus.
Please complete all fields.