Webseitenlayout

Das Screendesign wird gewöhnlich in PhotoShop, InDesign oder Illustrator umgesetzt. Beim Screendesign ist es wichtig von Anfang an die Usability im Auge zu haben das das Design dementsoprechend zu erstellen. Bei der Usabilty ist die Größe, das Raster, die gewählte Typo, die zuverwendenden Farben, Bildformate und Navigationsstrukturen und -hilfen zu beachten!

Im ScreenDesign  bietet es sich an, mit den Größenangaben der mobile Devices zu arbeiten und  anschließen auf 33% Anischtsgröße zu reduzieren (wie groß wird was dargestellt, wichtig für
Buttons und Text, da Touchscreen) . Cross-Media (PC und mobile Devices): PC, Tablet-PC, Smartphone  verschiedene Seiten oder CSS-Weichen und „Responsive Webdesign“ (flexible Webseiten: die  Seite muss auf einem flexiblen Grid basieren; eingebettete Grafiken müssen flexible sein;für  verschiedene Screens werden verschiedene Ansichten der Website angesteuert ), siehe:
http://www.elmastudio.de/inspiration/webdesign-trends-funf-responsive-webseiten-layout-analysiert

Layout – Usability für mobile Devices – welche Richtlinien

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}» spezielle Bedienungsfreundlichkeit (Usability)

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Inhalt reduzieren (gegenüber Webseite für PC) – schnelle Informationswiedergabe

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  einspaltiges Layout

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Navigation oben und unten bzw. immer ein Back-Button

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Texteingabe minimalisieren

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Design für Touchscreen (Achtung Schriftgröße! Für das I Phone wird 20px empfohlen und Buttons in der Größe von 40x40px) Die Mobile Devices (Smartphones) haben eine enorme Pixeldichte. Hat ein Desktop Monitor 100 -136ppi (dpi) kommen die mobilen Endgeräte auf bis zu 336ppi (Tendenz steigend). Das bedeutet, dass UI-Elemente teilweise nur 1/4 so  groß erscheinen wie auf einem Monitor.

Umsetzung mit HTML und CSS
Media Queries
Nach dem WC3-Standart CSS Weichen – Media Queries (für responsive Webdesign).  Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um  beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch Media Types geregelt. Media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp  zuzuordnen.  Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit Media Queries die Eigenschaften und
Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu  verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Breite und Höhe (des Browser-Fensters)

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Breite und Höhe des Geräts

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der Media Queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern.

Nach Monitorauflösung

<link rel=”stylesheet” media=”screen and (min-device-width: 800px)” href=”800.css” />

Nach Browserfenstergröße

<link rel=’stylesheet’ media=’screen and (min-width: 701px) and (max- width: 900px)’ href=’css/medium.css’ >

Die komplexere Lösung