Comprimir um navegador de desktop muito estreito pode dar a você uma vaga noção de como um design responsivo funciona, mas não é uma representação precisa de um dispositivo de tela pequena real. E dispositivos de tela pequena reais são o que estamos projetando aqui, não outros designers curiosos comprimindo seus navegadores =).
Neste screencast, abrimos o simulador iOS (vem de graça com o XCode em um Mac) e fazemos alguns ajustes de design com base no que estamos vendo lá. Na minha experiência, o simulador é muito preciso para o que você vê no dispositivo real. Eu também vi diferenças - por exemplo, o uso de memória. Logo após o lançamento deste site, eu estava vendo travamentos no webkit móvel - e isso não estava acontecendo no simulador.
Uma coisa que fazemos é remover o efeito de papel empilhado 3D na consulta de mídia mais estreita. Também descobrimos que o anúncio no cabeçalho está causando alguma rolagem horizontal no celular, algo indesejável em como estamos abordando o layout do celular. Felizmente, conseguimos rastrear isso imediatamente, mas às vezes essas coisas são difíceis de rastrear e você apenas esconde o overflow-x
no corpo, o que no final das contas fazemos aqui.
Ajustamos alguns tamanhos de fonte também para telas menores.