{"id":2873,"date":"2013-12-26T12:16:50","date_gmt":"2013-12-26T14:16:50","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2873"},"modified":"2013-12-26T12:16:50","modified_gmt":"2013-12-26T14:16:50","slug":"como-testar-um-site-responsivo","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/web-design\/como-testar-um-site-responsivo","title":{"rendered":"Como Testar um Site Responsivo"},"content":{"rendered":"

\"ferramentas-design-responsivo\"<\/p>\n

Acredito que uma das piores tarefas em um projeto \u00e9 a etapa de teste. Apesar de hoje em dia a diferen\u00e7a entre os navegadores estar cada vez menor (quem lembra do IE6!?) \u00e9 importante testar seu site nos principais navegadores. Testar em Desktop \u00e9 relativamente f\u00e1cil, o desafio aqui \u00e9 testar em dispositivos m\u00f3veis.
\n
\nUma coisa \u00e9 certa, se seu site responsivo quebra no desktop vai quebrar tamb\u00e9m no m\u00f3bile. Eu ainda procuro validar meus c\u00f3digos, pois assim consigo encontrar os erros mais grosseiros o mais cedo poss\u00edvel. Evitamos erros do tipo:<\/p>\n

<p><a href=\"#\">Informa\u00e7\u00f5es<\/p><\/a><\/code><\/p>\n

Procure investir em um n\u00famero de dispositivos e monte um laborat\u00f3rio de testes. Nada melhor que testar seu site em um dispositivo real<\/strong>, somente ele lhe dar\u00e1 100% de certeza. A\u00ed voc\u00ea deve estar se perguntando: \u201cqual aparelho comprar?<\/em>\u201d. Para n\u00e3o errar, invista nos mais populares. Mas isso vai depender tamb\u00e9m do tipo de projeto que voc\u00ea faz e a que tipo de mercado deseja servir. Escolha aqueles que s\u00e3o representativos, aqueles que seus clientes mais usam. Se poss\u00edvel use o Google Analytics<\/em> para coletar informa\u00e7\u00f5es relevantes dos dispositivos utilizados pelos usu\u00e1rios.<\/p>\n

\u00c8 imposs\u00edvel ter todos os modelos de dispositivos m\u00f3veis existentes, por isso \u00e9 importante o compartilhamento de dispositivos entre outros desenvolvedores e seus amigos. Procure criar comunidades entre seus amigos onde as pessoas possam encontrar e compartilhar dispositivos. Eu sempre que posso uso os aparelhos dos meus amigos para fazer alguns testes.<\/p>\n

\"Laborat\u00f3rio<\/p>\n

Uma coisa bacana que ocorre em outros pa\u00edses \u00e9 o que chamam de device labs comunit\u00e1rios<\/em> (http:\/\/opendevicelab.com<\/a>) onde os associados tem acesso a v\u00e1rios dispositivos doados. O que se pode fazer tamb\u00e9m \u00e9 a compra de aparelhos com defeitos (tela quebrada, por exemplo) por um pre\u00e7o bem mais acess\u00edvel. Escolha aparelhos de tamanhos diferentes, plataformas diferentes e fabricantes diferentes, etc. Assim conseguir\u00e1 atingir o p\u00fablico de uma forma mais geral.<\/p>\n

Instale a maior quantidade de navegadores poss\u00edvel em um aparelho. Em um aparelho com Android, por exemplo, voc\u00ea pode instalar v\u00e1rios Browsers (Chrome Mobile, Firefox Mobile, Opera Mobile, Opera Mini, etc.)<\/p>\n

Emuladores M\u00f3biles<\/h2>\n

Utilize emuladores m\u00f3biles, quase toda plataforma fornece um emulador para testes. No site Mobilexweb<\/a> voc\u00ea tem uma lista que \u00e9 atualizada regularmente. Com os emuladores dispon\u00edveis nesse site voc\u00ea cria um ambiente de testes para dispositivos m\u00f3veis em seu computador. \u00c9 s\u00f3 fazer o Download dos emuladores e instalar.<\/p>\n

Para testes em navegadores Internet Explorer temos um emulador gratuito que pode ser baixado em (http:\/\/www.modern.ie\/virtualization-tools<\/a>)<\/p>\n

Na hora de testar seu design responsivo ferramentas de teste podem lhe ajudar a ganhar um tempo precioso. Essas ferramentas alteram facilmente entre os diversos tamanhos de tela simplifica seu trabalho. Abaixo listo algumas ferramentas que uso.<\/p>\n