Réduire très étroitement un navigateur de bureau peut vous donner une vague idée du fonctionnement d'une conception réactive, mais ce n'est pas une représentation précise d'un appareil à petit écran réel. Et les vrais petits écrans sont ce pour quoi nous concevons ici, pas d'autres designers curieux qui pressent leur navigateur =).
Dans ce screencast, nous ouvrons le simulateur iOS (livré gratuitement avec XCode sur un Mac) et apportons quelques modifications de conception en fonction de ce que nous y voyons. D'après mon expérience, le simulateur est très précis par rapport à ce que vous voyez sur l'appareil réel. J'ai également vu des différences - par exemple l'utilisation de la mémoire. Juste après le lancement de ce site Web, je voyais planter sur le Webkit mobile - et cela ne se produisait pas dans le simulateur.
Une chose que nous faisons est de supprimer l'effet de papier empilé 3D à la requête multimédia la plus étroite. Nous constatons également que l'annonce dans l'en-tête provoque un défilement horizontal sur mobile, ce qui n'est pas souhaitable dans la façon dont nous abordons la mise en page mobile. Heureusement, nous avons pu retracer cela tout de suite, mais parfois ces choses sont difficiles à retrouver et vous ne faites que les cacher overflow-xsur le corps, ce que nous faisons finalement ici.
Nous ajustons également certaines tailles de police pour le petit écran.