Apretar un navegador de escritorio muy estrecho puede darle una vaga idea de cómo funciona un diseño receptivo, pero no es una representación precisa de un dispositivo de pantalla pequeña real. Y los dispositivos de pantalla pequeña reales son para lo que estamos diseñando aquí, no para otros diseñadores curiosos que reducen sus navegadores =).
En este screencast abrimos el simulador de iOS (viene gratis con XCode en una Mac) y realizamos algunos ajustes de diseño basados en lo que estamos viendo allí. En mi experiencia, el simulador es muy preciso para lo que ves en el dispositivo real. Sin embargo, también he visto diferencias, por ejemplo, el uso de memoria. Justo después del lanzamiento de este mismo sitio web, vi fallar en el webkit móvil, y eso no estaba sucediendo en el simulador.
Una cosa que hacemos es eliminar el efecto de papel apilado 3D en la consulta de medios más estrecha. También nos damos cuenta de que el anuncio en el encabezado está provocando un desplazamiento horizontal en el móvil, algo indeseable en la forma en que nos acercamos al diseño móvil. Afortunadamente, pudimos rastrear eso de inmediato, pero a veces estas cosas son difíciles de rastrear y simplemente escondes el overflow-xen el cuerpo, lo que finalmente hacemos aquí.
También ajustamos algunos tamaños de fuente para la pantalla más pequeña.