HTML Webpages für Android etc. anpassen

[Elcrian]

Hallo,
das interessiert mich privat wie beruflich: Wie passt man "heutzutage" Webseiten (inkl. einzelner HTML-Dokumente) für Android/Symbian/Tablets/etc. an? Auslesen der Größe und des Devices via JavaScript ist ja kein Ding.

Für Apple-Kram ist es relativ simpel - da habe ich schließlich nur eine begrenzte Anzahl an Auflösungen und kann das Layout dementsprechend anpassen. Aber gerade bei Android geht es ja von (sinngemäß) QVGA bis HD...

Interessant sind insbesondere an sich statische Header und Backgrounds oder Seiten die z.B. mit einem größeren Logo arbeiten. Einer Tabelle nur Prozentangaben zu geben ist ja schließlich nicht das Problem.

 

[Zeverius]

Normal alles mit CSS, statische Dinge wie Bilder musst du dann halt angepasst hinterlegen...

 

[Elcrian]

Aber wie angepasst? Wie soll ich einen Hintergrund oder ein Bild bei der Auflösungsspanne anpassen?
Ich dachte bereits dran z.B. (das ist zugegebenermaßen müsehlig) einen relativ großen BG zu benutzen welchen ich als image mit "z-index:-1" einbinde und somit der Auflösung anpasse/resize - ist aber eher Gemurkse.

 

[Zeverius]

Jo nen größeres Bild dann immer nach Bedarf zu verkleinern wäre schon möglich.
Normal wird für mobile Endgeräte ne speziellere Version der Webseite bzw der CSS auf dem Server hinterlegt, bei der man nicht all zu viel grafisch macht.
Beispiel: computerbase.mobi/

 

[mustermen]

Wie man das mit den Bildern macht wird hier gezeigt
http://css-tricks.com/9838-techniques-for-context-specific-images/
hier wie man ein menu für Handys anpasst
http://css-tricks.com/13303-convert-menu-to-dropdown/
und hier die verschiedenen Größen für alle Geräte
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

[.olli]

Den letzten Link von mustermen solltest du dir genauer ansehen - denn genau für Vorhaben wie deins gibt es Media Queries.

 

[ice-breaker]

HTML5 Mobile Boilerplate

Gerade Hintergrundbilder, die exakte Größen benötigen, nutzt man für Smartphones dann nicht. Nur streckbare oder kachelbare Bilder. Das Designen von Mobilen Webseiten unterscheidet sich eben von Desktop Webseiten.