At klemme ned en desktop-browser meget smal kan give dig en vag fornemmelse af, hvordan et responsivt design fungerer, men det er ikke en nøjagtig gengivelse af en egentlig lille skærm-enhed. Og egentlige enheder med lille skærm er det, vi designer her, ikke andre nysgerrige designere, der presser deres browsere ned =).
I denne screencast åbner vi iOS-simulatoren (kommer gratis med XCode på en Mac) og laver nogle designtilpasninger baseret på det, vi ser der. Efter min erfaring er simulatoren meget nøjagtig, hvad du ser på den rigtige enhed. Jeg har dog set forskelle - for eksempel hukommelsesforbrug. Lige efter lanceringen af netop dette websted så jeg nedbrud på mobilwebkit - og det skete ikke i simulatoren.
En ting, vi gør, er at fjerne 3D-stablet papireffekt ved den smalleste medieforespørgsel. Vi finder også ud af, at annoncen i overskriften forårsager en vis vandret rulle på mobil, en uønsket ting i, hvordan vi nærmer os mobillayout. Heldigvis var vi i stand til at spore det med det samme, men nogle gange er disse ting vanskelige at spore, og du skjuler bare overflow-xpå kroppen, hvilket vi i sidste ende gør her.
Vi justerer også nogle skriftstørrelser til den mindre skærm.