Blog

Home/Mobile/7 Dicas para criar sites responsivos

7 Dicas para criar sites responsivos

Considerando a velocidade com que a internet móvel está crescendo, nenhum webdesigner pode acreditar que seu site será visto apenas em desktops. O site precisa estar preparado para aceitar visitantes oriundos dos mais diversos dispositivos, com as mais diversas dimensões de telas e as mesmas necessidades.
Para resolver esse problema foi criado o design responsivo, a técnica para criação de sites flexíveis que se adaptem à maioria das telas onde será exibido.
Se você espera que seu site tenha esta flexibilidade, é bom seguir estas 7 dicas:

1) Usuários de dispositivos móveis merecem a mesma qualidade de navegação
Lembra-se quando era preciso criar sites que funcionassem da mesma forma em diferentes navegadores? Parece até que foi ontem. E foi mesmo. Bem, o princípio continua valendo: certifique-se de que a experiência de uso seja a mesma para diferentes usuários.
“O que isso significa?”, você pode estar perguntando agora. Significa que a aparência do seu site e sua estrutura visual podem até se alterar dependendo do dispositivo, mas devem parecer similares e as funções devem permanecer imutáveis. Um visitante acessando suas páginas a partir de um computador de mesa deve desfrutar da mesma experiência de um visitante usando uma tela de 4 polegadas em um smartphone.
Isso significa flexibilizar tudo e garantir que todas as imagens, conteúdo e encadeamentos sejam fluidos e se reconfigurem de acordo com a largura da tela.

2) Crie seu site pensando em flexibilidade
Quando você está montando o esboço do seu site enquanto vai elaborando o código antes de juntar tudo no design, é preciso entender que há layouts que são perfeitos para design responsivo e outros que não funcionam por nada nesse mundo. Traduzindo: há modelos que convertem bem para novos tamanhos de tela melhor que outros graças a sua estrutura.
“O que isso significa?”, você pode estar perguntando outra vez. Significa: crie um layout simples que exija um HTML simples e use mecanismos simples para elementos fundamentais, como navegação e opções de menu.
Evite completamente DIVS complexas, posicionamento absoluto, truques excessivos de Javascript ou elementos em Flash que irão apenas complicar o ajuste do site no final do dia.

3) Respeite os limites
Larguras de tela podem vir em diversos tamanhos e, em alguns casos, o usuário ainda pode definir a sua própria. Mas alguns padrões podem ser definidos como pontos focais para o seu layout. Então, fique atento para esses limites:
>768px (que se aplica aos dispositivos maiores como tablets grandes e telas de desktop)
Se você tiver energia e tempo, pode ainda se concentrar nas larguras abaixo:
>1024px (para telas largas em desktops, como você provavelmente já está fazendo hoje em dia)
Estes são padrões básicos para se focar, o que pode ser facilmente alcançado usando media queries.

4) Torne suas imagens flexíveis
Com um design mais simples, você pode tornar suas imagens igualmente flexíveis, até um certo grau. A forma mais fácil de implementar isso é usando dimensionamento adaptativo e e redimensionando a sua largura.
Você pode fazer isso de diversas formas, mas um dos métodos mais fáceis para atingir esse objetivo é com essa ferramenta: Adaptive Images. Mantenham em mente que dimensionar de acordo com as necessidades dos usuários móveis é a melhor aposta para seu design responsivo se você deseja obter uma boa velocidades de carga, o que para aparelhos móveis é crucial.
Outra alternativa seria armazenar múltiplos tamanhos de imagens de acordo com as dimensões de tela listadas acima, mas isso pode se tornar um problema se você não tem a garantia de que seus usuários acessarão com banda larga.

5) Permita a compressão de elementos do site e do conteúdo
Use um programa como o GZIP para comprimir seus recursos da página para facilitar a carga através das redes. Se você reduzir o peso dos elementos enviados em cada página, seu conteúdo se tornará mais fácil para navegar e acessar a partir de dispositivos com conexões lentas.
Se se sentir inspirado, você pode acelerar as coisas ainda mais, removendo todos os espaços em branco desnecessários e quebras de linha do seu código.

6) Livre-se do que não é essencial
Falando em livrar-se do que é desnecessário, você pode melhorar ainda mais a flexibilidade do seu site e torná-lo mais amigável para dispositivos móveis se seguir uma regra simples: alguns elementos e certos conteúdos nunca foram feitos para serem usados em um contexto móvel e simplesmente não funcionam.
Se você tem elementos que não são imprescindíveis para seu layout, então descarte-os por completo do ambiente móvel. Isso pode ser realizado com uma classe específica a ser aplicada, algo como .notmobile, por exemplo. No CSS, especifique que todos os elementos marcados por esta classe não devem ser exibidos quando a página carregar em dispositivos móveis.

7) Lembre-se do mínimo denominador comum
Se for seguir apenas uma das sete dicas aqui expostas, siga pelo menos essa: se você deseja que seu design responsivo funcione bem, você precisa construi-lo para que ele carregue e funcione rapidamente em dispositivos com baixa resolução, pouco poder de processamento e baixa velocidade de conexão. Isso significa um site bem organizado que se mantém fixo em sua função principal com o máximo de foco.

Publicado por: Carlos L. A. da Silva 30 de março de 2014
fonte:http://codigofonte.uol.com.br/artigos/7-dicas-para-criar-sites-responsivos

Written by

Somos especialistas em desenvolvimento de sites Wordpress em Bh

5 respostas para “7 Dicas para criar sites responsivos”

By admin - 18 julho 2013 Responder

Lorizzle ipsum ma nizzle shut the shizzle up amet, bizzle adipiscing elit. Cool fizzle velizzle, dawg volutpizzle, suscipizzle gizzle, gangster vizzle, arcu. Pellentesque egizzle away. Sizzle eros.

By admin - 18 julho 2013 Responder

Nunc dang we gonna chung ut urna. Nullam congue. Vestibulum viverra laoreet dui. Shizzlin dizzle fo shizzle amizzle fo shizzle brizzle leo sizzle condimentum. Suspendisse potenti. Nunc izzle nizzle that’s the shizzle purizzle tincidunt shizzle my nizzle crocodizzle.

By admin - 18 julho 2013 Responder

Check it out tellizzle shizznit, pulvinizzle shit, fizzle cool, vehicula id, dizzle. Etiam sed daahng dawg a sem hendrerit shut the shizzle up. Pellentesque fizzle magna in for sure black ullamcorpizzle. Etiam cool fermentum ligula. odio.

By admin - 18 julho 2013 Responder

Gangsta velit doggy, own yo’ consequat, pharetra i’m in the shizzle, dictizzle funky fresh, turpis. I saw beyonces tizzles and my pizzle went crizzle neque. Crizzle lorizzle. Shit vitae mammasay mammasa mamma oo sa izzle libero commodo mah nizzle. Fusce break it down augue boom shackalack nibh shizzle my nizzle crocodizzle mattizzle.

By admin - 18 julho 2013 Responder

Crizzle commodo. Get down get down eu for sure izzle neque lacinia sizzle. Aenizzle non the bizzle izzle urna mammasay mammasa mamma oo sa lobortis. Suspendisse enim phat, bibendizzle pot, ornare get down get down, imperdizzle vitae, lacizzle. Mofo boom shackalack diam at massa you son of a bizzle shizzle my nizzle crocodizzle. Ass izzle yo quis tellizzle sheezy nonummy.

Leave a Comment