Mobile First Web Design
Zwei große Kategorien von Strategien wurden im Laufe der Jahre verwendet, um Web-Design für mobile Geräte unterstützen: graceful Degradation
Menu
Mobile Web-Nutzer sind oft gezwungen, zu zoomen, scrollen, pinch, Schielen, und ihre Finger so klein wie möglich zu machen, die Mehrheit der Websites mehr als vor einigen Jahren entworfen zu verwenden.
Graceful Degradation Web-Design-Strategie für mobile Geräte
Die Idee hinter Graceful Degradation ist Ihre Website in erster Linie für Desktop-Anwender zu entwerfen, sondern sie auch so zu gestalten, eine Art, die von der Desktop-Website bietet, die nicht oder auf mobilen Geräten passen funktionieren wird noch verwendbar sein - wenn nicht schön oder als funktional - auf mobilen Geräten.
Graceful Degradation war ein gutes Design-Philosophie in den Tagen vor Smartphones mit vollem Funktionsumfang Browser existierte. Allerdings ist Graceful Degradation große Probleme haben. Am wichtigsten ist, Graceful Degradation der Benutzer zwingt, Ihre gesamte Website zum Download, nur eine verschlechterte Version davon gezeigt werden. Auf mobilen Geräten, die Bandbreite oft begrenzt ist, ist dies nicht eine gute Sache.
Progressive Enhancement Web-Design-Strategie für mobile Geräte
Als Folge der anmutigen Einschränkungen des Abbaus, eine neue Strategie populär genannt hat Progressive Enhancement geworden. Progressive Enhancement beginnt mit der sehr grundlegende Webseite und fügt auf Funktionen je nachdem, was die Benutzer Browser unterstützt.
Progressive Erweiterung ermöglicht Websites verwendbar zu sein, selbst wenn ein sehr einfaches Handy. Der mobile Browser muss nicht viel von CSS und javascript-Code (zum Beispiel) herunterladen, die es nicht wissen, was damit zu tun.
Eine Möglichkeit, progressive Verbesserung sichtbar zu machen ist als ein System, das Schichten auf einer Website, auf der Größe des Browser oder die Merkmale je fügt der Browser unterstützt.
Hier ist ein einfaches Beispiel, wie zwei Stylesheet-Links verwendet werden können, eine Handy-Webseite für größere Browser zu verbessern:
Der erste Link enthält style.css für jeden Bildschirm oder Handheld-Gerät. In diesem Fall, style.css enthält Stile, die für ein mobiles Gerät optimiert sind.
Die zweite Verbindung ist für ein Stylesheet aufgerufen enhanced.css. Wenn man sich die Medien Attribut für diesen Link, werden Sie feststellen, dass es eine hat min-width Bedingung. Das enhanced.css Datei wird nur dann angezeigt, wenn das Gerät größer als 800px ist. Innerhalb enhanced.css, die Web-Designer kann von der überschreiben Eigenschaften style.css Stylesheet, um den Browser Scale-up für größere Browser Breiten machen.
Mobil erste Design löst das Browsergröße Ausgabe
Mobile ist zunächst eine Design-Philosophie, die die Ideen von Progressive Enhancement beschäftigt erste mobile Websites zu erstellen und sie dann für den Desktop zu verbessern. Die große Sache über Handy erste Design ist, dass, wenn Sie die mobile Website zuerst bauen, wie auf die andere Art und Weise im Gegensatz zu einer funktionierenden Desktop-Website kostenlos zu bekommen!
Denken Sie an all die Webseiten, die Sie gesehen haben, die in mobilen Browsern nicht passen. Nun stelle man sich eine mobile Website mit einem Desktop-Computer zu besuchen. Eine Website, die für einen kleinen Bildschirm optimiert ist, wird auf einem Desktop-Browser immer funktionieren - auch wenn es nicht das gesamte Browserfenster füllt nicht am Ende.