Bei der Schaffung einer mobilen Präsenz von Produkten stellt sich die Frage
- Native App oder
- Web App
Für eine Native App spricht sicherlich, dass sie performanter läuft und eben an das jeweilige System angepasst ist. Aber gerade hier ist auch ein Schwachpunkt. Entscheide ich mich für eine native App, muss ich sie für alle relevanten Systeme und Auflösungen entwickeln und pflegen. Eine Web App dagegen wird einmalig zentral entwickelt und kann sich dank CSS Media Queries automatisch jeder Auflösung anpassen. In Zeiten des Booms an mobilen Geräten in den verschiedensten Auflösungen ein maßgeblicher Vorteil. Denn die User von heute surfen nicht mehr nur mit ihren dicken Workstations von zu Hause, sondern sind eben immer häufiger mit ihrem Smartphone/Tablet und entsprechend kleiner Auflösung online. Diesen Usern gilt es, auch ein ansprechendes Surferlebnis zu bieten. Das Layouten solcher benutzerfreundlicher, anpassbarer Websites wird "Responsive Webdesign" genannt.
Media Queries nutzen
@media screen and (max-width: 980px) { [...] } @media screen and (max-width: 480px) { [...] }Im obigen Beispiel können dann CSS Deklarationen für Viewportbreiten bis 480px und 980px gesetzt werden.
Flexible Bilder
img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }IE nachrüsten
IEs bis Version 8 müssen nachgerüstet werden um Media Queries korrekt interpretieren zu können: http://code.google.com/p/css3-mediaqueries-js/
Hier gibts auch ein ansehnliches Beispiel: http://webdesignerwall.com/demo/adaptive-design/final.html Einfach mal das Fenster kleiner machen, dann sieht man schon die Effeckte.