Mobile First: Wie ging das noch mal in echt mit der Entwicklung aufm Smartphone – als Erstes?

Level 1: Das kann jeder – Browser „klein ziehen“

Die einfachste Variante ist das Browser Fenster „schmal“ ziehen, das gibt einen ersten Eindruck, so müsste man dann auch anfangen, wenn man „Mobile First“ entwickeln will.

Level 2: Google Chrome Developer Tools

device-toolbar-google-chrome-dev-tools

In den Chrome Developer Tools kann auch auf eine (emulierte) mobile Sicht umschalten, bei Bedarf sogar mit „Geräterahmen“ für das Auge, ich glaube Chrome setzt auch den User Agent etc korrekt in diesem Modus.

Level 3: Echtes Endgerät

mobile-first-entwicklung-iphone

Das mobile Gerät (in meinem Fall iPhone 5S) liegt vor einem, ich garantiere, es gibt immer etwas, das findet man nur „auf dem echten Gerät“.

Tipp: Damit der iPhone (iPad) Screen nicht immer nach ein paar Minuten zum Strom sparen ausgeht über Einstellungen -> Anzeige & Helligkeit -> Automatische Sperre -> Nie die Funktion ausstellen.

2017-05-12 17.27.13

 

Tipp2: Wer mit echtem Gerät bzw. echten Geräten direkt vor Ort arbeitet, dem empfehle ich BrowserSync, das automatisch die Seite nach einer Änderung (HTML, CSS oder JavaScript) neulädt, scrollen und clicks zwischen allen Clients syncron hält.

Was habe ich vergessen?

Die Emulatoren, welches Level sind die?

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.