As noções básicas de compatibilidade com dispositivos móveis Web Design

Ao projetar ou redesenhar um site, você também deve considerar a criação de versões alternativas, compatíveis com dispositivos móveis 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-los 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 entregar sua experiência na web, não há como contornar a necessidade de fornecer modelos 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 de polegada de largura. Esta medição não tem nada a ver com a densidade de pixels de dispositivos, de modo que o pixel é agora uma unidade relativa de medida.

No entanto, se você fosse para configurar um modelo de Photoshop para simular um espaço de tela do iPhone, você pode usar 640 x 960 a 72 dpi. Este tamanho da tela dá-lhe o direito # 147-retinal exibição # 148- detalhe que você vai ter em um iPhone. Mas não se tentado a espremer um monte de texto e imagens a este espaço. Isto é claramente um tamanho da tela muito maior do que o telefone. Para ter uma noção de como o 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 site 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 o tamanho 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 as dimensões dos componentes de interface e de conteúdo, não só o seu site de download mais rápido em redes celulares, mas vai pisar levemente no orçamento de 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.

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 encher o espaço disponível, naturalmente, você se adaptar o 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.

Use um layout de coluna simples em um site móvel

Mesmo que os telefones inteligentes são maiores do que os seus antecessores, eles ainda não são grandes o suficiente para apoiar eficazmente mais de um layout de coluna única ao exibir conteúdo. Esta é uma alteração de projeto significativo a fazer para o seu design web 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 da página, em vez. Os usuários são muito mais aceitar de rolagem para baixo a página do que eles são de ter que mover para os lados e zoom in.

O site móvel Grupo Clothing Company é um excelente exemplo de um site móvel e-commerce complexo que utiliza 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 clara ligação para visualizar o site principal, no caso os usuários precisam de funcionalidade adicional que tem sido retirados da versão móvel.