Als u een desktopbrowser erg smal naar beneden drukt, krijgt u een vaag idee van hoe een responsief ontwerp werkt, maar het is geen nauwkeurige weergave van een echt apparaat met een klein scherm. En echte apparaten met een klein scherm zijn waar we voor ontwerpen, niet andere nieuwsgierige ontwerpers die hun browser naar beneden drukken =).
In deze screencast openen we de iOS-simulator (wordt gratis geleverd bij XCode op een Mac) en maken we enkele ontwerpaanpassingen op basis van wat we daar zien. In mijn ervaring is de simulator zeer nauwkeurig voor wat je op het echte apparaat ziet. Ik heb echter ook verschillen gezien - bijvoorbeeld geheugengebruik. Net na de lancering van deze website zag ik crashen op de mobiele webkit - en dat gebeurde niet in de simulator.
Een ding dat we doen, is het 3D-gestapelde papiereffect verwijderen bij de smalste mediaquery. We komen er ook achter dat de advertentie in de koptekst wat horizontaal scrollen op mobiele apparaten veroorzaakt, wat ongewenst is in hoe we de mobiele lay-out benaderen. Gelukkig konden we dat meteen opsporen, maar soms zijn deze dingen ongrijpbaar om op te sporen en verberg je ze gewoon overflow-xop het lichaam, wat we uiteindelijk hier doen.
We passen ook enkele lettergroottes aan voor het kleinere scherm.