Criando um móvel-First Responsive Web Design

Introdução

Nós vamos caminhar por como criar uma experiência web adaptativa que é projetado mobile-first. Este artigo e demonstração irá sobre o seguinte:

Há ainda mais atualizado orientação sensível em nosso novo Fundamentos Web site.

• Por que precisamos de criar móveis de primeira, responsivos, experiências adaptativas
• Como estruturar HTML para um site adaptativo, a fim de otimizar o desempenho e priorizar a flexibilidade
• Como escrever CSS que define estilos compartilhados em primeiro lugar, constrói-se estilos para telas maiores, com consultas de mídia, e usa unidades relativas
• Como escrever discreto Javascript para carregar condicionalmente em fragmentos de conteúdo, tirar proveito de eventos de toque e de geolocalização
• O que poderíamos fazer para melhorar ainda mais a nossa experiência adaptativa

A Necessidade de Adaptatividade

À medida que a paisagem se torna cada vez mais complexo web, está se tornando extremamente importante para proporcionar experiências web sólidas para um crescente número de contextos. Felizmente, web design responsivo dá criadores web algumas ferramentas para fazer layouts que respondem a qualquer tamanho de tela. Vamos usar as redes de fluidos, imagens flexíveis e consultas de mídia para obter o layout de grande procura, independentemente do tamanho de dimensões da tela do dispositivo.

No entanto, o contexto móvel é muito mais do que apenas o tamanho da tela. Os nossos dispositivos móveis estão conosco onde quer que vamos, desbloqueando novos casos inteiras de uso. Porque nós constantemente temos nossos dispositivos móveis com a gente, a conectividade pode ser toda sobre a placa, variando de sinais Wi-Fi forte no sofá para 3G ou EDGE quando fora de casa.Além disso, telas de toque abrir novas oportunidades de interagir diretamente com o conteúdo e ergonomia móveis levam a diferentes considerações ao projetar layout e funcionalidade.

A fim de criar um site que é verdadeiramente concebido para o contexto móvel e não apenas para telas pequenas, queremos garantir que vamos enfrentar os muitos desafios da inicial de desenvolvimento móvel. As limitações da força contexto móvel nos focar no que o conteúdo é essencial e como apresentar esse conteúdo o mais rápido possível. A construção de carregamento rápido, experiências otimizadas primeiro celular tem um trickle down (ou para cima, dependendo de como você olha para ele) para efeito tablet, desktop e outros contextos emergentes.

O que nós estamos fazendo: O detalhe Humble produto Page

Veja a demo

A demo que estamos fazendo é uma página de detalhes do produto simples e-commerce para uma empresa t-shirt fictício. Por que escolher este? Sites de comércio eletrônico pode ter muitos casos
de uso através de contextos. Por exemplo, 70% dos proprietários de smartphones usam seus telefones móveis para influenciar as compras na loja . Então, enquanto nós vamos ter certeza de que a compra do produto é tão fácil quanto possível, nós também vamos tentar fazer com que os produtos avaliados acessível e utilizar a localização do usuário para melhorar a experiência móvel.

Estrutura

Criação de magra, semântica marcação HTML5 mantém experiências adaptativas gerenciável e acessível, e também oferece oportunidades para experiências aprimoradas (exemplo rápido: usando os tipos de entrada HTML5 adequada traz o teclado virtual apropriada em muitos dispositivos de toque). Marcação semântica é extremamente portátil e pode ser acessado por muitos dispositivos móveis, tablets, navegadores de desktop e dispositivos habilitados para a web futuros, independentemente do conjunto de recursos ou capacidade.

Definir o viewport

A fim de acomodar para sites não otimizados para telas de dispositivos móveis, muitos modernos navegadores móveis definir uma janela do navegador maior, o que permite uma melhor visualização de sites que não são otimizados para celulares. Os usuários podem então pinch-to-zoom no conteúdo que eles querem.Isso é bom para as experiências não-móveis, mas porque estamos otimizando nossa experiência para navegadores móveis, vamos usar a tag meta viewportpara definir a largura da tela para a largura do dispositivo.

É importante notar que não estamos desativando a capacidade do usuário para aumentar a página (o que você poderia fazer, adicionando escalável-user = não para o atributo de conteúdo), embora nós estamos otimizando o conteúdo para telas pequenas. É recomendado manter utilizador A ampliação permitiu manter as coisas o mais acessível possível. No entanto, existem casos de uso para desativar user-zoom, como se você está incluindo elementos posicionados fixos .

Fragmentos de conteúdo

A fim de manter a experiência tão leves quanto possível e melhorar o tempo de carregamento percebido, estamos criando dois documentos HTML adicionais para auxiliar o nosso conteúdo, reviews.html andrelated.html. Porque este conteúdo não é necessário para o caso de uso principal (a compra do produto) e inclui uma série de imagens, que não irá carregá-lo por padrão para manter o tamanho da página inicial para baixo. Por padrão, o conteúdo é acessível através de links na página, mas se um certo nível de suporte javascript está presente, vamoscondicionalmente carregar o conteúdo quando o usuário solicita-lo ou quando a resolução atinge um determinado ponto de interrupção.

HTML caracteres especiais

Uma técnica simples para reduzir a necessidade de imagens de fundo (economizando solicitações HTTP) é a utilização de caracteres especiais em HTML para formas simples. No caso das nossas estrelas de classificação, estamos usando & # 9733; para criar uma estrela sólido (★) e & # 9734; para criar estrelas vazias (☆) para nossas avaliações. E porque é HTML e não uma imagem, ela permanece nítido, mesmo em telas de alta resolução.

O tel: Esquema URI

Outra técnica simples, mas eficaz, estamos incluindo em nosso rodapé é um link clicável para o número de atendimento ao cliente. Isso é feito usando o esquema de URI tel, que se parece com isso:

<A  href = "tel: +18005550199" > 1-800-555-0199 </a>

Nós às vezes esquecemos que os dispositivos móveis podem fazer chamadas telefônicas , e também que algumas configurações de desktop pode lançar aplicações VoIP para iniciar uma chamada de telefone. Estamos incluindo uma maneira fácil para os usuários para facilitar um telefonema, que em alguns casos pode fazer sentido (ou seja, um usuário móvel que pode preferir terminar a transação através do telefone contra passando por um fluxo de checkout em seu dispositivo móvel).

Agora que temos uma base forte, semântica no lugar, vamos passar para a adição de melhorias de estilo.

Estilo

Ao elaborar o nosso CSS, vamos fazer tudo ao nosso alcance para manter as coisas leves e tão fluido quanto possível. Entendemos que todos esses dispositivos têm muitas diferentes tamanhos de tela e dispositivos que de amanhã não terá as mesmas resoluções como hoje. Porque o tamanho da tela é uma incógnita, vamos usar o conteúdo em si para determinar como o layout deve se ajustar a seu recipiente.

Folha de estilo separada para telas maiores

Estamos criando dois arquivos CSS separados, style.css e enhanced.css a fim de entregar estilos básicos para telas de menos de 40.5em e usando consultas de mídia para servir estilos aprimorados para telas maiores do que 40.5em.

Estamos usando o código condicional <! - [If (lt IE 9) e (IEMobile!)]>, A fim de servir-se enhanced.css para versões não-móveis do IE menos do que a versão 9, que infelizmente não fazer consultas de mídia de apoio. Embora este método de fato adicionar uma solicitação HTTP para o mix, que nos dá uma maior flexibilidade sobre nossos estilos . Alternativamente, poderíamos usar respond.jspara entregar estilos aprimorados para o IE.

Estamos usando a unidade em vez de px para manter a coerência com o resto de nossas unidades relativas e representam as configurações do usuário, como o nível de zoom. Além disso, o conteúdo deve determinar o ponto de interrupção (estamos usando 40.5em como um ponto de interrupção), porque as dimensões do aparelho são muito variadas e estão sempre mudando, assim, são, portanto,não confiável .

Mobile Primeiros Styles

Começando com estilos de linha de base comum e da introdução de regras de layout mais avançadas, quando as autorizações de tamanho de tela mantém código mais simples, menor e mais fácil de manter.

Em vez de declarar regras de tela grande primeiro apenas para substituí-las para telas menores, vamos simplesmente definir regras quanto mais imóveis se torna disponível. A web, por padrão, é uma coisa fluida, então vamos fazer o nosso melhor para trabalhar com ele em vez de contra ela. É importante notar que alguns navegadores (browsers móveis Symbian, Blackberry <OS 6.0, Netfront, WP7 pré-Mango, etc) não suportam consultas de mídia, de modo que serve de base estilos por padrão atinge mais dispositivos e navegadores. Como Bryan Rieger coloca , "a ausência de suporte para consultasmedia é de fato a primeira consultamedia".

Aplicando consultas de mídia

Estamos continuando nosso mobile-primeiro estilo quando aplicamos nossas consultas de mídia. Nossa lista de produtos relacionado começa dois para a linha, mas aumenta para 3 em uma linha quando o tamanho da tela é de pelo menos 28.75em de largura (aproximadamente o tamanho de telefones celulares no modo paisagem) e depois a 6 para uma linha quando o tamanho da tela é, pelo menos 40.5em (cerca de tablets no modo retrato ou pequenas telas de desktop).

Assumindo telinha por padrão nos permite suportar mais plataformas e também torna mais fácil adicionar mais pontos de interrupção sem ter que modificar os estilos existentes. Definindo estilos como eles são necessários também mantém o tamanho do arquivo para baixo, reduz a complexidade e mantém um código mais sustentável.

Usando unidades relativas

Estamos usando percentagens e unidades em em nosso projeto, a fim de manter as coisas o mais flexível possível. Unidades relativas são muito mais compatíveis com a enorme variação provocada por tamanho de tela, densidade de pixels e nível de zoom.

Enquanto consultas de mídia são segredo molho web do projeto ágil, queremos que os nossos grades fluidos para fazer a maioria do trabalho. A manutenção de uma enorme quantidade de estilos de largura-definidos através de consultas muitos mídia pode se tornar inviável, por isso vamos ter certeza de fundação da folha de estilo é totalmente flexível.

Usando CSS para reduzir pedidos

Muitas solicitações HTTP pode ser um enorme assassino para o desempenho , especialmente no celular. Estamos incorporando algumas técnicas CSS para salvar as solicitações HTTP que irá melhorar o desempenho do site. Usandogradientes CSS ao invés de imagens de fundo reduz a quantidade de pedidos de imagem e nos dá mais controle sobre o design. Estamos incluindo os prefixos de fornecedores adequados para assegurar o máximo de compatibilidade (existemferramentas para isso) e esperando que um dia em que estas regras serão padronizados para nos salvar algum tempo.

Também estamos usando URIs de dados , em vez de imagens de fundo para alguns dos ícones mais pequenos (por ícones como pesquisa, as características sociais e localização). Enquanto URIs de dados pode parecer um pouco feio e pode aumentar o tamanho do arquivo de folha de estilo, a redução de pedidos de resultados em um tempo de download percebida mais rapidamente .

Comportamento

Agora que temos nossa estrutura e estilo no lugar, vamos acrescentar melhorias JavaScript para adicionar funcionalidade à navegação, galeria de imagens e conteúdo auxiliar.

Navegação

A navegação pode ser especialmente complicado para experiências adaptativas.Top navegação é comum para sites de desktop, mas topo de navegação pode multidão tela e empurrar para baixo o conteúdo primário em telas pequenas.Queremos destacar o produto e não a navegação no site, por isso vamos fazer o nosso melhor para obter a navegação fora do caminho. na nossa marcação, criamos uma lista chamada # nav-âncoras, que será usado para alternar a visibilidade da navegação e barra de pesquisa para telas pequenas.

Nós vamos adicionar um ouvinte de redimensionamento que irá determinar se há espaço suficiente para mostrar a barra de navegação e pesquisa.

Galeria de Imagens

Por padrão, a galeria de imagem é simplesmente uma grande imagem com imagens em miniatura que clicar para suas contrapartes maiores. Isso significa que eles são acessíveis aos navegadores e dispositivos com suporte a JavaScript pobre ou não.

Vamos construir um carrossel de imagem das imagens em miniatura disponíveis.

Para melhorar a experiência ainda mais, estamos usando Modernizr para detectar a presença de eventos de toque e transições CSS, e se eles são compatíveis, vamos carregar em uma biblioteca chamada SwipeJS para fazer uma imagem Carrossel touch-friendly.

Agora temos uma galeria de imagens acessível com melhorias adicionais para dispositivos sensíveis ao toque.

Conteúdo relacionado

A fim de manter o tamanho da página inicial para baixo, não estamos carregar conteúdo auxiliar, ou seja, as t-shirts relacionadas e análises de produtos, por padrão. Em vez disso, eles existem como as suas próprias páginas HTML, que são acessados ​​por links como um comportamento padrão.

Vamos puxar o conteúdo relacionado, se forem satisfeitas uma de duas condições: Quando um usuário clica em pequena tela as camisas relacionadas ou produtos avaliados ligações Quando a tela tem espaço suficiente para carregar no conteúdo auxiliar.

Atenção: estamos usando o tamanho da tela para determinar quando carregar no conteúdo, mas isso não é, de maneira perfeita. Mantenha-se atento paranavigator.connection para uma melhor maneira de determinar se vale a pena introduzir conteúdo extra.

Geolocation

Aproveitando a localização do usuário para oferecer experiências aprimoradas é um aspecto importante do desenvolvimento móvel. Felizmente geolocalização é uma das características mais suportados em navegadores móveis (assim como a maioria dos navegadores de desktop). A funcionalidade fallback poderia ser uma forma simples, onde o usuário simplesmente insere seu CEP para encontrar loja perto deles.

Próximos Passos

Imagens adaptativos

Nossa demonstração não está incorporando muitas imagens grandes, mas é a melhor prática para carregar em imagens otimizadas móveis por padrão, em seguida, condicionalmente carregar em imagens maiores apenas quando necessário. Existem muitas técnicas diferentes para imagens sensíveis , do lado do cliente e servidor lado ambos. Nós fizemos um monte de tão longe para estar consciente de desempenho e otimização de imagens é uma maneira fácil de otimizar o desempenho ainda mais.

Menos JS

Mantendo páginas tão leves quanto possível, é importante para o desempenho, por isso, devemos olhar para otimizar os scripts, tanto quanto possível. Estamos usando o jQuery biblioteca para a nossa demo, mas nós definitivamente não estamos usando tudo isso. Poderíamos olhar para usar Closure Compiler para retirar bits não utilizados da biblioteca para manter as coisas tão leves quanto possível, enquanto ainda aproveitando o jQuery oferece. Alternativamente, poderíamos olhar para as micro-estruturas como Zepto.js e outros, mas eles normalmente não necessariamente oferecer o melhor suporte cross-browser.Escrevendo baunilha Javascript podia evitar peso adicional, mas pode ser mais difícil para o autor e mais difícil de manter. Em última análise, cada abordagem tem seus prós e contras, só não se esqueça de considerar as vantagens e desvantagens quando tomar essas decisões.

Acesso offline

É cada vez mais importante para garantir que as experiências web estão off-line acessível, especialmente quando se considera os usuários móveis com a conectividade variável. Felizmente, AppCache e outras técnicas off-line nos dá uma maneira de manter os nossos recursos acessíveis mesmo quando o usuário estiver offline.

Resumindo

Nós criamos uma experiência que está atento ao contexto do usuário e se adapta tanto layout e funcionalidades baseadas no navegador e características do dispositivo. Nós também criou uma fundação que pode adaptar-se a dispositivos e navegadores futuros. Eis alguns tópicos principais:

• Autor de marcação semântica HTML5 como base para experiências de adaptação.
• Criar móvel primeiro CSS para manter as coisas leves, simples e de fácil manutenção.
• Use unidades relativas como ems e percentagens para manter estilos tão fluido e flexível possível.
• Vamos conteúdo determinar os limites de faturamento para consultas de mídia.
• Explorar oportunidades de redução de solicitações HTTP por conteúdo condicionalmente-loading e com caracteres de HTML, CSS, gradientes de dados URIs e mais
• Autor discretos ferramentas Javascript e usar como Modernizr para detectar características.
• Tire partido das funcionalidades mobile-centric, como eventos de toque, ligações telefônicas e de geolocalização para oferecer experiências aprimoradas para usuários móveis.

Criando experiências de adaptação permite que o seu conteúdo para ir mais lugares, o que significa mais oportunidades para chegar a potenciais clientes onde quer que estejam. Ao aderir aos princípios de melhoria progressiva e resolver as restrições em primeiro lugar, nós estamos colocando uma amigável para o futurofundação que dá o nosso site uma melhor chance de trabalhar em navegadores e ambientes futuros.