Os conceitos básicos de web design móvel-friendly

Video: Responsive Web Design with HTML5/CSS3 Media Queries, Create Mobile/Desktop/Tablet Friendly website

Ao projetar ou redesenhar um site, você também deve considerar a criação de versões alternativas, móvel-amigável do site. Estas versões não devem ser confundidos com os aplicativos nativos que vivem em seus telefones inteligentes (os que você baixou a partir de lojas de aplicativos). telefones inteligentes têm todos os navegadores web e pode tornar o seu site com diferentes graus de sucesso. Essencialmente, você deve fazer uma lista do que dispositivos que irão apoiar e locais alternativos de design para atender a esses alvos múltiplos. Fora isso, a restrição mais óbvio que todos eles compartilham é o pequeno tamanho da tela das janelas do navegador do telefone.

Você pode adicionar código ao seu site que detecta um dispositivo de usuário e redireciona para a versão apropriada do seu site. Com tantos dispositivos para escolher, os desenvolvedores normalmente criar vários perfis de dispositivos e agrupar vários dispositivos em um de um punhado destes perfis. Os perfis são geralmente conduzidos por tamanho da tela:

• *Microscópico: 132 pixels ou menos largo

• *Minúsculo: 240 pixels ou menos largo

• *Pequeno: 320 ou menos largo

Tendo em conta estes espaços de tela pequena em que para entregar sua experiência na web, não há como contornar a necessidade de fornecer projetos alternativos.

Olhe para pixels para sites móveis

O que é único para dispositivos é que eles não têm pixels 72 dpi mais. Muitos destes dispositivos têm resoluções mais altas. Este é o lugar onde as coisas ficam complicadas, porque para sites e CSS, você ainda deve definir elementos em pixels que são 1/72 polegadas de largura. Esta medição não tem nada a ver com a densidade de pixels de dispositivos, de modo que o elemento de imagem é agora uma unidade relativa de medida.

No entanto, se você fosse para criar um modelo de Photoshop para simular um espaço de tela do iPhone, você pode usar 640 x 960 em 72 dpi. Este tamanho da tela dá-lhe os detalhes direito “display retina” você vai chegar em um iPhone. Mas não fique tentado a espremer um monte de texto e imagens a este espaço. Este é claramente um tamanho da tela muito maior do que o telefone. Para ter uma noção de como seu projeto vai realmente mostrar ao telefone, zoom out seu documento Photoshop para 50 por cento.

Simplificar a navegação de um site para celular

Lembre-se, não há nenhum mouse para se mover. Muitos usuários móveis têm tanto um teclado ou um ecrã táctil. Não há muito espaço para mostrar todos os elementos de navegação que você pode normalmente incluem no local principal. Por esta razão, as versões móveis de sites muitas vezes têm um esquema de navegação despojado.

Muitas vezes, esses sites reduzidas são frustrante para os usuários que estão em movimento e precisam acessar uma determinada área do site normal. É por isso que é uma boa prática de incluir um link para visualizar o site principal.

Reduzir tamanhos de arquivo

Quando não estiver usando Wi-Fi para navegar na web, dispositivos móveis cam acumular uma grande quantidade de megabytes em plano de dados de um usuário, que pode ter um limite mensal. Portanto, quanto mais você pode reduzir o tamanho do arquivo e dimensões de componentes de interface e conteúdo, não só o seu site de download mais rápido em redes celulares, mas vai pisar levemente no orçamento alocação de transferência mensal de dados do usuário. Você também pode remover o código desnecessário, comentários e tags opcionais para acelerar as coisas.

A orientação horizontal e vertical

A pesquisa móvel é um ambiente fluido. Entre a variedade de densidades de pixel e a capacidade de visualizar sites em orientações horizontais e verticais, é melhor se aproximar de seu site amigável-móvel com um layout flexível, ao contrário de um layout de largura fixa. Não especificando a largura do site e deixá-lo preencher o espaço disponível, naturalmente, você adaptar seu site de forma mais eficaz para o ambiente de visualização móvel. Além disso, usar a cor CSS e gráficos em azulejos, em vez de imagens único salto de pixel, para preencher os seus componentes.

Video: Responsive Web Design Made Simple CSS @media Rule Tutorial

Usar um layout de coluna única em um site móvel

Apesar de telefones inteligentes são maiores do que seus antecessores, eles ainda não é grande o suficiente para apoiar eficazmente mais de um layout de coluna única ao exibir conteúdo. Esta é uma alteração de design significativo a fazer para o seu web design principal, mas vale o esforço em termos de aumento de usabilidade. Um layout de conteúdo de coluna única que utiliza toda a largura da tela (em qualquer orientação) evita a necessidade de um usuário para se deslocar para trás e para a frente ou aumentar o zoom. Deixe o conteúdo expandir para baixo a página em seu lugar. Os usuários são muito mais aceitar de rolagem abaixo do que eles são de ter que mover-se lado a lado e zoom in.

Video: Twitter Bootstrap Tutorial: Make Website Design Responsive And Mobile Friendly [Part 6]

O site móvel Tripulação Clothing Company é um excelente exemplo de um site móvel e-commerce complexo que usa um sistema de navegação simplificada e um layout de coluna única para embalar em um monte de funcionalidade. Além disso, eles também fornecem uma ligação clara para ver o site principal, no caso os usuários precisam de funcionalidade adicional que tem sido retirados da versão móvel.