Bei den aktuellen Smartphones mit Android Betriebssystem sowie beim iPhone 4 werden Bildschirm-Auflösungen mit enormer Pixeldichte angeboten, die weit über dem Auflösungsvermögen des bloßen Auges liegen. Deshalb bieten diese Handys eine Standardauflösung von 320 x 480 Pixel für Webseiten an, die bei durchschnittlichem Sehvermögen eine gute Lesbarkeit der Webseiten bietet, ohne ein Zoomen des Users beim Lesen der Webseite notwendig zu machen. …weiterlesen
Responsive Webdesign (5) – Media Queries für iPhone, Android Smartphone und Blackberry DEMO
Responsive Webdesign (4) – Hintergrund-Bilder automatisch skalieren DEMO
Dank CSS3 lassen sich Hintergrund-Bilder automatisch an verschiedene Browsergrößen anpassen. Mithilfe der zahlreichen neuen Anweisungen lassen sich auch gekachelte Hintergründe skalieren, wobei sogar ein willkürliches Abschneiden des Musters am Bildschirmrand vermieden werden kann.
Dennoch ist eine pixelgenaue Platzierung eines Hintergrund-Bildes bei einem fließenden Webdesign wie in unserem Beispiel aus den vorigen Beiträgen zum Thema „Responsive Webdesign“ nicht so einfach realisierbar. Aber Designer eines flexiblen Seitenlayouts werden wohl ohnedies umdenken müssen, denn die hundertprozentige Umsetzung einer exakten Vorlage kann den Arbeitsaufwand enorm in die Höhe treiben. Großzügige Leerräume um Webinhalte sind eines der besten Mittel, um die kleinen Ungenauigkeiten beim Skalieren von Webseiten erst gar nicht sichtbar werden zu lassen.
Gute Hintergrundgrafiken tragen wesentlich zur Wiedererkennung einer Webseite bei, wobei man auch diese im Sinne des responsive Webdesigns automatisch skalieren lassen kann. Mögliche Realisierungen dieser Möglichkeit füge ich nun in unseren Quellcode aus den letzten Beitragsteilen ein. …weiterlesen
Responsive Webdesign (3) – Bilder automatisch skalieren DEMO
Nachdem wir in den beiden ersten Beiträgen zum Thema „Responsive Webdesign“ ein einfaches Grundlayout einer Webseite aufgebaut haben, widmen wir uns nun den Inhalten von Webseiten. In diesem Beitrag geht es um die Darstellung von Bildern im „Responsive Webdesign“.
In einem „fließenden“ Webdesign würden fixe Bildgrößen bei kleinen Bildschirmen über ihre umschließenden Container hinausragen und das Aussehen einer Webseite zerstören. Was wir also benötigen, sind variable Bildgrößen, die sich automatisch an kleinere Pixelmasse anpassen.
Zwar könnte man mit mehreren „Media Queries“ angepasste Breiten und Höhen für eingebettete Bilder definieren, aber es gibt eine viel elegantere Lösung. …weiterlesen
Responsive Webdesign (2) – Media Queries DEMO
Media Queries sind ein wesentlicher Bestandteil in einem responsiven Webdesign und bieten ideale Möglichkeiten, um ein Webseitenlayout für bestimmte Bildschirmgrößen mit spezifischen CSS-Anweisungen zu steuern. Derzeit werden sie hauptsächlich dazu verwendet, Webseiten für Smartphones wie iPhone und Android-Geräte in der Lesbarkeit zu verbessern.
Zwar leisten die Browser von iPhone und Android standardmäßig eine gute Darstellung von Internetseiten, zum Lesen ist man aber meist gezwungen, die Texbereiche manuell zu vergrößern. Deshalb bieten einige Webseiten eine mobile Version, die jedoch zusätzlich zum normalen Webseitenlayout erstellt werden muss.
Dank Media Queries kann man sich diese Arbeit ersparen und passt dafür einzelne Bereiche einer Webseite an die kleineren Bildschirme von Smartphones an. Wie das genau funktioniert, zeige ich nun an unserem Beispiel aus dem ersten Teil dieser Beitragsserie zum Thema „Responsives Webdesign“.
…weiterlesen
Responsive Webdesign (1) DEMO
Teil 1: Ein flexibles Webseitenlayout erstellen
Responsiv bedeutet aktiv, sich anpassend, mitgehend – und genauso passt sich responsives Webdesign den Größen des Bildschirms bei Desktop-Computer, Laptops, Netbooks, Smartphones, TV-Geräte und zukünftiger Ausgabegeräte an.
Genauer betrachtet ist ein anpassungsfähiges Webseiten-Layout keine wirklich neue Technik, denn eigentlich war es schon immer möglich, Webseiten mit einer variablen Breite zu erstellen. Dank CSS3 stehen jetzt allerdings viele zusätzliche Feinabstimmungen zur Verfügung, um das Aussehen einer Webseite noch besser auf verschiedene Bildschirmbreiten abzustimmen.
Das Ende fixer Pixelangaben?
In dieser Anleitung erstellen wir ein „fließendes“ Webseitenlayout, das zum Leidwesen mancher Webdesigner auf eines verzichten wird: fixe Pixelbreiten. Doch keine Angst, auch exakte Photoshop-Zeichnungen lassen sich dennoch relativ einfach in ein gefälliges Webdesign umsetzen, weil durch CSS3 nun auch automatisch skalierende Bilder realisiert werden können.
…weiterlesen