Os dispositivos móveis já compreendem uma grande parte, se não a maioria, de leitores on-line para muitos sites, portanto, é fundamental garantir que o site funcione corretamente em um iPhone ou tablet. Existem muitos serviços que oferecem visualizações de layout para dispositivos móveis para um determinado URL, mas a Apple facilitou muito mais os sites de teste de disponibilidade para dispositivos móveis com o Safari 9 no OS X El Capitan. Um novo recurso chamado Modo de design responsivo pode visualizar rapidamente a aparência de um site em uma variedade de dispositivos Apple, além de resoluções de tela móveis comuns. Aqui está como isso funciona.
É importante reiterar que o Modo de Design Responsivo é um novo recurso exclusivo do Safari 9 no OS X El Capitan, portanto, você precisará executar pelo menos essas versões do navegador e do sistema operacional para acessá-lo. Se o seu Mac atender a esse requisito, primeiro será necessário ativar o Modo de desenvolvedor do Safari. Para fazer isso, inicie o Safari e clique em Safari na barra de menus. Em seguida, selecione Preferências> Avançado .
Na guia Avançado da janela Preferências do Safari, marque a caixa "Mostrar menu de desenvolvimento na barra de menus". Como o nome da opção implica, você verá um novo menu "Desenvolvimento" na barra de menus do Safari, à direita de "Favoritos."
Em seguida, feche a janela Preferências do Safari e navegue até o site que você deseja testar no Modo de design responsivo. Depois que o site estiver totalmente carregado no navegador, use o atalho de teclado Command-Option-R e a janela do navegador será convertida em uma visualização de uma das várias resoluções de dispositivos móveis (você também pode acessar o Responsive Design Mode clicando em Develop in na barra de menus do Safari e selecione Entrar no modo de design responsivo ).
O Safari Responsive Design Mode permite que você visualize a aparência de um site em todas as resoluções de dispositivos móveis da Apple, do iPhone 4S de 3, 5 polegadas ao iPad Pro de 12, 9 polegadas. Os usuários também têm a opção de selecionar uma resolução “Retina” de 1x, 2x ou 3x e alterar o agente do navegador para imitar o comportamento dos navegadores mais populares, como Chrome, Firefox e Edge.
Para cada dispositivo e tamanho da tela, os usuários podem clicar no ícone do dispositivo para alternar entre a orientação retrato e paisagem ou, para dispositivos como o iPad Air e o iPad Pro que suportam exibição dividida, você pode clicar para alternar entre vários layouts de exibição dividida.
Embora o Modo de Design Responsivo do Safari não tenha algumas das opções de ferramentas pré-existentes semelhantes, tê-lo incorporado diretamente no Safari pode economizar muito tempo para designers da web e uma ótima ferramenta de aprendizado e teste para proprietários de sites que desejam garantir que seus visitantes móveis estão obtendo a melhor experiência, independentemente da resolução ou tamanho da tela.
Depois de concluir o teste, você pode sair do Modo de design responsivo fechando a janela ou a guia do navegador ou pressionando o atalho Command-Option-R novamente.
