Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung | |||
| modul:m287:learningunits:lu05:mobile-desktop-first [2025/04/11 07:29] – kdemirci | modul:m287:learningunits:lu05:mobile-desktop-first [2025/04/11 07:38] (aktuell) – gelöscht kdemirci | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====== LU05d - Mobile vs. Desktop First ====== | ||
| - | |||
| - | ===== Mobile First ===== | ||
| - | Da sich die mobilen Geräte immer rasanter verbreiten, tendieren viele Webdesigner heute dazu, zuerst die mobile Version zu erstellen. Zuerst die mobile Version zu erstellen kann die Umsetzung vereinfachen. So können Sie mit einer einfachen platzsparenden Navigation anfangen. Ein nachträgliches Anpassen einer Navigation für eine Desktopversion ist etwas komplexer zu erstellen. | ||
| - | |||
| - | Ähnlich sieht es mit Grafiken, Bannern oder einem Hintergrundbild aus, die nicht zum eigentlichen Inhalt gehören und häufig auch nichts zum eigentlichen Inhalt beitragen. So könnten Sie z. B. bei der Mobile-First-Strategie diese Grafiken wie z. B. ein Hintergrundbild ganz weglassen. Ebenso zwingt einen die Mobile-First-Taktik dazu, etwas genauer zu überlegen, was denn der eigentliche Inhalt der Webseite sein soll, weil Sie nur eingeschränkt Platz zur Verfügung haben. Nachfolgend ein Rezept für diese Strategie: | ||
| - | |||
| - | <code css> | ||
| - | ... | ||
| - | /* Ein Design unterhalb von 768 Pixeln primär für Smartphone-Bildschirme */ | ||
| - | @media only screen and (min-width : 768px) | ||
| - | /* Styles für Tablets mit einer Breite von 768 bis 989 Pixel */ | ||
| - | ... | ||
| - | } | ||
| - | |||
| - | @media only screen and (min-width : 980px) { | ||
| - | /* Styles für Monitore mit einer Breite von 980 bis 1279 Pixel */ | ||
| - | ... | ||
| - | } | ||
| - | |||
| - | @media only screen and (min-width : 1280px) { | ||
| - | /* Styles für Monitore ab 1280 Pixel */ | ||
| - | ... | ||
| - | } | ||
| - | ... | ||
| - | </ | ||
| - | |||
| - | ===== Desktop First ===== | ||
| - | Zuerst die Desktopversion zu erstellen kann z. B. ein Vorteil bei relativ komplexen Webseiten sein. Das verleitet zu mehr in die Webseite hineinzustecken, | ||
| - | |||
| - | Sicherlich ist Mobile First gegenüber Desktop First derzeit populärer, aber auch hier gibt es kein Richtig oder Falsch. Beide Vorgehensweisen haben sicherlich ihre Vor- und Nachteile, was an dieser Stelle nicht weiter detailliert wird.\\ | ||
| - | <wrap hi>Das Wichtigste ist den eigentlichen Inhalt der Webseite nicht aus den Augen zu verlieren.</ | ||
| - | |||