Continue navegando
Prévia do material em texto
Design responsivo Este conceito descreve uma técnica na qual o design de um site é ajustado automaticamente com base no tamanho das telas dos usuários. No site responsivo o layout se adapta ao tamanho da tela, independentemente do dispositivo. O responsivo usa o CSS para alterar estilos com base no dispositivo utilizado como: tipo de exibição, largura, altura, etc., e apenas um destes é necessário para que o site se adapte às diferentes telas. Nesse caso, você estará desenvolvendo o site para todos os possíveis tamanho de tela e isso tornará o processo bastante complexo. A solução é a criação de uma viewport para resolução média e consultas de mídia para ajustar as resoluções baixas e altas mais tarde. No fim das contas, um site responsivo na maioria dos casos será mais moderno e viável, tanto para quem desenvolve para quem paga. Design adaptativo O design adaptativo usa layouts estáticos baseados em pontos de quebra que só respondem quando são carregados. Ele detecta o tamanho da tela e carregar o layout apropriado para ele e geralmente se trabalha com seis larguras de tela: 320 px / 480 px / 760 px / 960 px / 1200 px / 1600 px É como ter um único site com várias versões: quando o servidor detecta que tipo de dispositivo o usuário está visualizando a página, ele envia a versão correta do website para melhor visualização. Design mobile-first Mobile-first é uma abordagem para o design responsivo: primeiro design para telas menores, e depois adicione mais recursos e conteúdo conforme as telas ficam maiores. A grande maioria dos sites são projetados pensando na experiência do usuário no desktop. O problema é que precisamos desconstruir boa parte da criação para que ela possa ser exibida em um smartphone ou tablet. Muito da experiência do usuário acaba se perdendo e como a maioria das pessoas acaba usando o telefone para acessar os sites, o resultado não será o esperado. Os usuários esperam um bom nível de desempenho, um pequeno dispositivo com baixa largura de banda não tem muito espaço para erros, esses fatores precisam se tornar prioridades. Concentrar-se no celular primeiro garante tempo para incorporar recursos móveis populares, como toque e geolocalização. Não se pode esquecer que as telas dos smartphones estão ficando cada vez maiores, tanto em altura quanto largura. E a experiência das pessoas ao navegar, utilizando principalmente os polegares, mostra que com esse acréscimo de área torna mais difícil acessar os limites da tela durante a navegação. Área de alcance do polegar durante uma navegação em smartphone