Att klämma ner en stationär webbläsare mycket smal kan ge dig en vag känsla för hur en responsiv design fungerar, men det är inte en korrekt representation av en verklig liten skärmenhet. Och faktiska småskärmsenheter är vad vi designar för här, inte andra nyfikna designers som pressar ner sina webbläsare =).
I denna screencast öppnar vi iOS-simulatorn (kommer gratis med XCode på en Mac) och gör några designjusteringar baserat på vad vi ser där. Enligt min erfarenhet är simulatorn väldigt exakt till vad du ser på den riktiga enheten. Jag har dock sett skillnader - till exempel minnesanvändning. Strax efter lanseringen av just den här webbplatsen såg jag krascha på mobilwebbsatsen - och det hände inte i simulatorn.
En sak vi gör är att ta bort den 3D-staplade papperseffekten vid den smalaste mediefrågan. Vi räknar också ut att annonsen i rubriken orsakar lite horisontell rullning på mobilen, en oönskad sak i hur vi närmar oss mobillayouten. Lyckligtvis kunde vi spåra det direkt, men ibland är dessa saker svårfångade att spåra och du gömmer bara overflow-xpå kroppen, vilket vi i slutändan gör här.
Vi justerar också vissa teckensnittsstorlekar för den mindre skärmen.