Layouts Web Responsivos para Introdução, Dicas e Exemplos de Telas Móveis

Este artigo faz parte do nosso "Série de Web Design Responsivo" - consistindo de ferramentas, recursos e tutoriais para ajudá-lo a criar sites para usuários de todas as plataformas. Clique aqui para ver mais artigos da mesma série.

Designers têm mais difícil agora do que antes. Não apenas temos que projetar dispositivos fixos, mas também dispositivos móveis como o tablet e smartphones, e já que estamos falando de vários tamanhos e resoluções de tela diferentes aqui, é uma tarefa gigantesca. À luz disso, web design responsivo poderia ser a melhor solução. Oferece mais do que apenas um simples modelo para celular; em vez disso, todo o layout do site foi projetado para ser flexível o suficiente para caber em qualquer resolução de tela possível.

Com um esquema de design tão fluido, há benefícios e desvantagens óbvios. Considere os exemplos abaixo para saber como o design da Web responsivo pode tornar a transição para dispositivos móveis mais suave.

Como funciona o design responsivo

Quando eu uso a palavra “responsivo” Em termos de web design, quero dizer que todo o layout responde com base na resolução da tela do usuário. Imagine este cenário: você está lendo um site em um tablet e, em seguida, alterna para outro dispositivo por um motivo ou outro. A janela do navegador agora está redimensionada. Um layout de web design responsivo contará com esquemas e um layout que decompõe-se e se reinventa. De uma perspectiva de usabilidade, esta é uma técnica brilhante.

O design responsivo tem tudo a ver com a criação de uma experiência homogênea, independentemente do tamanho da tela do navegador ou do dispositivo. Eu encontrei o exemplo perfeito de 'A List Apart' para ilustrar o meu ponto, que também inclui imagens dinâmicas. A largura é definida em CSS usando porcentagens para praticamente todos os elementos internos do contêiner. Websites maiores também respondem bem à remoção de conteúdo dinâmico, como JavaScript, quando não é suportado.

Por que projetar para dispositivos móveis?

Ficou evidente que mais usuários estão migrando, e não apenas para navegação on-the-go. Os Tablet PCs começaram a mudar de contexto quando os usuários estão online na sala de aula. Projetar para dispositivos móveis é certamente um requisito nos padrões modernos da web. O único problema é escolher seu método de desenvolvimento e direcionar seu público-alvo adequadamente.

Quando você começa a codificar para resoluções de tela específicas, você acaba com muitas folhas de estilo para lidar. As consultas de mídia no CSS3 podem ser usadas para criar layouts específicos do iPhone para exibição em retrato e paisagem. Como você pode predeterminar a densidade de pixels, é fácil renovar qualquer modelo HTML para celular.

(Fonte da imagem: bradfrostweb)

Mas quando você codifica um layout para design responsivo, os aspectos móveis são atendidos por padrão. Tanto os usuários de desktop quanto os usuários móveis terão uma experiência semelhante e você não precisará se preocupar com propriedades CSS externas. A única pesquisa que você precisa fazer é planejar a menor tela possível. Os dados de tráfego do Google Analytics podem ser muito úteis para isso.

Você provavelmente não conseguirá que seu website funcione 100% em todos os dispositivos que executam todos os navegadores. Mas você pode segmentar uma maioria com base na largura média da tela. Os modelos mais antigos do iPhone usam uma resolução de 320 × 480 que não é tão inacreditável. Eu fotografaria para uma largura mínima de 240px, ou ainda menor se você pudesse ajustá-lo.

Removendo o Zoom Padrão

Se você passou algum tempo navegando na Web em um smartphone, perceberá como os websites são dimensionados para serem exibidos totalmente na tela. Isso é para a conveniência do usuário, já que a maioria dos sites não tem uma contraparte móvel, portanto, o layout completo é a aposta mais segura.

Mas quando você começa a criar um design móvel responsivo, o zoom automático pode realmente atrapalhar seus elementos de layout. Especificamente, imagens e conteúdo de navegação podem parecer pequenos ou muito grandes em seu layout. Há uma meta tag especial que você pode anexar no cabeçalho do documento, que redefine isso na maioria dos dispositivos Android e iPhone..

Isto é conhecido como o metatag da viewport que configura algumas variáveis personalizadas dentro do conteúdo. A Apple tem uma página de documentação sobre algumas outras metatags que você deve examinar, embora sejam voltadas especificamente para sites no iOS. o escala inicial valor é importante, pois isso padroniza seu site para um zoom 100% completo.

O último valor para escalável pelo usuário irá remover completamente essa funcionalidade de zoom para que o usuário não possa redimensionar o layout. Isso bloqueará o desenho em um tamanho baseado na largura total do dispositivo. Observe que, mesmo que você desative a funcionalidade de zoom, um bom design responsivo ainda se adaptará ao fazer a transição de retrato para paisagem em qualquer dispositivo! Mas faz sentido bloquear um design responsivo e remover as opções genéricas de dimensionamento.

Escala de Imagem Dinâmica

As imagens são outra faceta importante de praticamente todos os sites. Os usuários de dispositivos móveis podem não querer transmitir vídeos, mas as fotos são uma história totalmente diferente. Estes são também os maiores culpados quando se trata de layouts saindo do modelo de caixa.

img max-width: 100%;

A regra padrão para CSS é aplicar uma propriedade de largura máxima a todas as imagens. Como eles sempre serão definidos em 100%, você nunca perceberá distorções. Quando o usuário redimensiona a janela do navegador, menor do que a sua imagem pode manipular, ela reajustará automaticamente a largura de 100% reduzida. O problema é que o Internet Explorer não pode entender essa propriedade, então você precisará montar uma folha de estilo específica do IE usando largura: 100%;.

Imagens flexíveis também são possíveis se você usar plugins JavaScript ou jQuery. Existem alguns desenvolvedores realmente espertos que criaram tempo para criar conteúdo de imagem incrivelmente ágil. Esta discussão é apenas uma das muitas no Stack Overflow, que apresenta uma abordagem estranha, mas conveniente, para resolver os erros do IE6 / 7..

Eu pessoalmente recomendaria manter o redimensionamento natural das imagens CSS. Se o seu site estiver sendo executado em um navegador para dispositivos móveis com JavaScript habilitado, provavelmente ele também suportará o CSS. Se você realmente quer se aprofundar, confira este artigo de 24 maneiras para imagens de projetos adaptativos ...

Desenhos tocantes

Os desenvolvedores da Web podem esquecer que os usuários de dispositivos móveis não estão mais em telefones com teclado, como os BlackBerrys. A maioria dos smartphones hoje usa interfaces touchscreen, o que torna um cenário diferente das configurações de mouse e teclado.

Como tal, você precisará considerar soluções alternativas em elementos móveis. Os menus suspensos podem funcionar melhor quando exibidos como um único menu no lado direito. A maioria dos usuários é capaz de tocar links no lado direito mais facilmente do que a esquerda, mas qualquer coluna funciona para aliviar o espaço. Usando recuos de margem, é simples identificar a hierarquia de links sem exigir nenhum código jQuery.

Também é uma boa prática aumentar o tamanho desses links de navegação. Os usuários móveis não podem se dar ao luxo de usar telas grandes em computadores de mesa ou até em laptops. Você precisa manter o texto grande, na frente, com capacidade de tocar e legível a todo custo. Você pode até mesmo redimensionar se o usuário alternar entre a vista retrato e paisagem - uma recorrência bastante comum ao navegar na Web para dispositivos móveis.

Layouts CSS personalizados

Em geral, é melhor adaptar o layout e permitir a degradação natural do conteúdo. Se você tiver uma barra lateral e uma área de conteúdo, deverá defini-las em larguras de porcentagens ou ems, qualquer coisa que seja redimensionada com a janela do navegador. Se você aplicar um min-width isso acabará por quebrar parte do layout; então agora o conteúdo da sua barra lateral é exibido acima do conteúdo da página.

(Fonte da imagem: Pepperson)

Quando você considera como isso afeta o design geral, é muito mais fácil desenvolver folhas de estilo externas. No entanto, é provável que você encontre resoluções de tela muito pequenas para o layout renderizar. Este é o cenário perfeito para adicionar propriedades CSS personalizadas para remover partes da página ou reformatar completamente o conteúdo.

Ativar / desativar o conteúdo extra

Exemplos de grandes blocos de conteúdo incluem formulários da Web, menus dinâmicos, controles deslizantes de imagem e outras ideias semelhantes. Em vez de remover completamente esses elementos conforme o layout fica menor, por que não simplesmente ocultá-los em um “minimizado” conteúdo div? Você pode usar CSS ou JavaScript para realizar as edições, mas provavelmente precisará de algum código JS para criar um botão de alternância.

Essa alternativa é perfeita para manter sua home page dinâmica e repleta de mídia da web. Em vez de remover completamente a navegação suspensa ou reorganizar a estrutura da página, você pode ocultá-la em um div de conteúdo. Se o usuário quiser exibir seus links, toque em um botão de alternância para abrir / fechar o menu.

Esta formatação é simples, intuitiva e fácil de trabalhar com dispositivos touchscreen. Dentro da div você pode colocar cada um dos menus suspensos lado a lado em um formato de coluna. À medida que a janela se redimensiona, eles ficam naturalmente abaixo um do outro e aumentam a altura da página. No entanto, a opção de recolher o menu inteiro é facilmente atingível e apenas a um único toque de distância. Esta alternância de div também é perfeita para controles deslizantes de imagem em cooperação com redimensionamento dinâmico de fotos.

Usando consultas de mídia

Se uma tela do celular quebrar seu layout de 2 ou 3 colunas, você terminará com cada uma das áreas de conteúdo empilhadas acima umas das outras. Todo o site parece sangrar e pode sair muito confuso sem áreas diferenciadas de blocos. Uma ideia melhor é adicionar uma borda inferior em cada coluna, somente para dispositivos móveis, usando uma folha de estilos externa como mobile.css.

Com esses novos estilos, seu conteúdo é dividido em seções divisíveis. O atributo de mídia acima é especialmente projetado para segmentar dispositivos iPhone mais antigos no modo paisagem. Mas também se aplica a dispositivos com telas menores que 480 pixels. Use isso para sua vantagem, para que você possa determinar em que ponto o layout “termina”.

Existem mais algumas opções que você pode usar para detectar a orientação do dispositivo. Este fantástico guia sobre mídia CSS pode lhe dar algumas idéias. Além disso, o novo projeto móvel de 320 ou superior oferece um clichê para CSS móvel @meios de comunicação Estilos Estes podem ser incluídos diretamente no mesmo arquivo mobile.css e aplicar regras para vários dispositivos diferentes.

 / * Smartphones (retrato e paisagem) ----------- * / @media somente tela e (min-device-width: 320px) e (max-device-width: 480px) / * Estilos * / / * Smartphones (paisagem) ----------- * / @media somente tela e (min-width: 321px) / * Estilos * / / * Smartphones (retrato) ---- ------- * / @media somente tela e (max-width: 320px) / * Estilos * / / * iPads (retrato e paisagem) ----------- * / @ tela somente de mídia e (min-device-width: 768px) e (max-device-width: 1024px) / * Styles * /

(Fonte: Consultas de Mídia CSS3 Hardboiled)

Ferramentas Úteis

Skeleton - Beautiful Boilerplate para Design Móvel Responsivo
De adaptável a totalmente responsivo

Vitrine: belos designs responsivos

Espero que essas dicas e técnicas de design incentivem você a criar layouts responsivos e estimulantes não apenas para telas de dispositivos móveis, mas também para qualquer dispositivo comum com navegação na web. Para manter a criatividade fluindo, criei um pequeno mostruário de designs para web móveis responsivos. Certifique-se de verificar alguns dos recursos mais exclusivos e compartilhar seus pensamentos sobre o design ou o tópico na área de discussão.

pendurando a lua