{"id":5885,"date":"2015-04-13T09:00:18","date_gmt":"2015-04-13T12:00:18","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=5885"},"modified":"2015-04-13T09:00:18","modified_gmt":"2015-04-13T12:00:18","slug":"aprenda-7-elementos-que-devem-ser-observados-para-criar-um-design-responsivo","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/aprenda-7-elementos-que-devem-ser-observados-para-criar-um-design-responsivo\/","title":{"rendered":"7 elementos para se considerar ao criar um design responsivo"},"content":{"rendered":"

A caracter\u00edstica mais conhecida de um site responsivo<\/strong> \u00e9 a capacidade que ele tem de se adequar ao tamanho da tela na qual est\u00e1 sendo exibido, com o objetivo de apresentar o conte\u00fado da melhor maneira. Neste conceito de site responsivo fica a d\u00favida: quais elementos devo usar para otimizar meu site e torn\u00e1-lo mais acess\u00edvel em qualquer dispositivo?<\/span><\/p>\n

Basicamente voc\u00ea ter\u00e1 que montar um quebra-cabe\u00e7as, em que poder\u00e1 encolher, dobrar ou esticar as pe\u00e7as. E\u00a0se elas estiverem dentro de um grid sua tarefa ser\u00e1 bem mais f\u00e1cil. Fique atento \u00e0s dicas dos principais elementos que devem ser observados para voc\u00ea n\u00e3o se perder na cria\u00e7\u00e3o de um design responsivo!<\/span><\/p>\n

Imagens<\/strong><\/span><\/h2>\n

As imagens est\u00e3o relacionadas a dois desafios quando tratamos dos sites responsivos: desempenho e tamanho. Com a chegada das telas de alta densidade (as de retina, por exemplo), imagens tidas como de tamanho normal podem vir borradas e pixeladas. Imagens maiores podem solucionar este problema, mas acabam\u00a0criaando\u00a0outro no quesito desempenho, j\u00e1 que\u00a0quanto maior, mais tempo leva para ela ser carregada e nem sempre o download \u00e9 f\u00e1cil com as conex\u00f5es dos nossos dispositivos m\u00f3veis.<\/span><\/p>\n

E os usu\u00e1rios de telas menores que n\u00e3o precisam de imagens t\u00e3o grandes? Ser\u00e1 que daria para trabalhar com as mesmas? Como adapt\u00e1-las?<\/span><\/p>\n

O primeiro passo para que as imagens possam ser trabalhadas de maneira mais otimizadas em sites responsivos \u00e9 mudando a forma com a qual elas s\u00e3o marcadas e embutidas em p\u00e1gina. O conceito seria usar as media queries<\/em>, servindo imagens diferentes para cada tipo de dispositivo, sendo referenciadas na sua fonte.<\/span><\/p>\n

Grids<\/strong><\/span><\/h2>\n

Atrav\u00e9s dos grids\u00a0voc\u00ea tem colunas fixas, que ter\u00e3o sua largura ajustadas de acordo com o espa\u00e7o dispon\u00edvel. O n\u00famero de colunas tamb\u00e9m pode ser ajustado, deixando que o navegador calcule a sua largura. Um n\u00famero bem consensual \u00e9 o de 12 colunas, que \u00e9 facilmente dividido por 3, 4, 2 e 6 e que permite uma boa variedade de layouts.<\/span><\/p>\n

Tipografia<\/strong><\/span><\/h2>\n

O layout de um site vai depender muito do seu conte\u00fado. E a tipografia escolhida para os textos do site \u00e9 muito importante. Enquanto as fontes medidas pela unidade \u201cem\u201d tem um tamanho herdado do seu elemento pai, a fonte medida pela unidade \u201crem\u201d \u00e9 relativa ao tamanho da fonte do seu elemento raiz. Para um site responsivo, voc\u00ea dever\u00e1 alterar o tamanho de todas as fontes simplesmente mudando o tamanho da fonte especificada no elemento HTML<\/strong>.<\/span><\/p>\n

Formul\u00e1rios<\/strong><\/span><\/h2>\n

Quanto maior o formul\u00e1rio, mais complicado \u00e9 adapt\u00e1-lo (e mais dif\u00edcil \u00e9 para que as pessoas o preencham at\u00e9 o final). Os formul\u00e1rios devem ser visualmente atraentes e f\u00e1ceis de usar em qualquer dispositivo. Uma dica \u00e9 que ele contenha o select, para que o usu\u00e1rio apenas selecione a op\u00e7\u00e3o, n\u00e3o precisando digit\u00e1-la. Habilitar a op\u00e7\u00e3o de feedback imediato ao clicar no bot\u00e3o enviar, solicitando a corre\u00e7\u00e3o de eventuais erros, \u00e9 \u00f3timo, pois com as telas menores \u00e9 f\u00e1cil deixar passar alguma coisa. O atributo autocompletar tamb\u00e9m ajuda na montagem de formul\u00e1rios mais responsivos.<\/span><\/p>\n

Tabelas<\/strong><\/span><\/h2>\n

Grande parte das tabelas tem uma orienta\u00e7\u00e3o horizontal e traz muitos dados de uma s\u00f3 vez. Este elemento deve ser observado nos sites responsivos para que a informa\u00e7\u00e3o n\u00e3o se torne ileg\u00edvel. Uma solu\u00e7\u00e3o seria esconder colunas menos importantes e deixar que o usu\u00e1rio escolha quais ele quer ver. Uma outra solu\u00e7\u00e3o \u00e9 fixar uma \u00fanica coluna a esquerda e deixar uma barra de rolagem, deixando que a pessoa fa\u00e7a esse movimento de leitura. O grande empecilho desta \u00faltima \u00e9 que alguns dispositivos n\u00e3o exibem uma barra de rolagem vis\u00edvel, o que \u00e9 um problema para a efici\u00eancia do site responsivo.<\/span><\/p>\n

Iframe<\/strong><\/span><\/h2>\n

Quando incorporamos conte\u00fados de terceiros no nosso site tempos que ficar atentos a estes elementos. O maior problema aqui \u00e9 que a maioria desses conte\u00fados, ao serem incorporados ao seu site, s\u00e3o feitos atrav\u00e9s de iframes, que exigem altura e largura fixas no seu c\u00f3digo. Dessa forma, quando voc\u00ea incorporar um slideshow, mapa ou um v\u00eddeo no seu site, \u00e9 preciso aten\u00e7\u00e3o para que eles n\u00e3o percam a sua propor\u00e7\u00e3o original e ainda assim fiquem responsivos.<\/span><\/p>\n

Navega\u00e7\u00e3o<\/strong><\/span><\/h2>\n

Outro grande desafio dos sites responsivos \u00e9 com rela\u00e7\u00e3o \u00e0 navega\u00e7\u00e3o. Para que todos os usu\u00e1rios, independentemente do dispositivo, possam navegar no site com facilidade, \u00e9 importante que ele apresente um menu simples, amig\u00e1vel. H\u00e1 uma ferramenta em ingl\u00eas chamada Responsive Design Testing Tool<\/a> que mostra como fica a navegabilidade do seu site em diversas resolu\u00e7\u00f5es, como 768\u00d71024, 1024\u00d7768, 240\u00d7320 e 480\u00d7640.<\/span><\/p>\n

Criar um website responsivo \u00e9 muito mais que escolher imagens certas, \u00e9 todo um trabalho de elementos para que o quebra-cabe\u00e7as fique com as pe\u00e7as encaixadas. A solu\u00e7\u00e3o perfeita ainda n\u00e3o existe, ent\u00e3o conte pra gente atrav\u00e9s dos coment\u00e1rios o que voc\u00ea tem feito com os elementos do seu site para que ele se torne mais acess\u00edvel e adapt\u00e1vel.<\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>