Ściśnięcie bardzo wąskiej przeglądarki na komputerze może dać ci niejasne wyobrażenie o tym, jak działa responsywny projekt, ale nie jest to dokładne odwzorowanie rzeczywistego urządzenia z małym ekranem. Projektujemy tutaj rzeczywiste urządzenia z małym ekranem, a nie inni ciekawscy projektanci ściskający przeglądarki =).
W tym screencastie otwieramy symulator iOS (dostarczany bezpłatnie z XCode na Macu) i wprowadzamy pewne poprawki projektowe w oparciu o to, co tam widzimy. Z mojego doświadczenia wynika, że symulator jest bardzo dokładny do tego, co widzisz na prawdziwym urządzeniu. Jednak zauważyłem też różnice - na przykład zużycie pamięci. Zaraz po uruchomieniu tej strony internetowej zauważyłem awarię zestawu mobilnego - a to nie działo się w symulatorze.
Jedną z rzeczy, które robimy, jest usunięcie efektu ułożonego papieru 3D przy najwęższym zapytaniu o media. Odkryliśmy również, że reklama w nagłówku powoduje przewijanie w poziomie na urządzeniach mobilnych, co jest niepożądane w podejściu do układu mobilnego. Na szczęście udało nam się to od razu wyśledzić, ale czasami te rzeczy są nieuchwytne do wyśledzenia i po prostu ukrywamy overflow-xciało na ciele, co ostatecznie robimy tutaj.
Dostosowujemy również niektóre rozmiary czcionek do mniejszego ekranu.