Web Design Primeiro Móvel

Duas grandes categorias de estratégias foram utilizadas ao longo dos anos para apoiar web design para dispositivos móveis: degradação graciosa

e melhoria progressiva. Grande parte da web atualmente é quase inutilizável em dispositivos móveis, pois foi projetado para navegadores desktop e não se adaptam bem às telas pequenas.

usuários da web móvel são muitas vezes forçados a aumentar, rolar, apertar, apertar os olhos, e fazer os seus dedos tão pequeno quanto possível usar a maioria dos sites projetados mais de um par de anos atrás.

estratégia de design graciosa degradação web para dispositivos móveis

A idéia por trás degradação graciosa é para projetar seu site principalmente para usuários de desktop, mas também para projetá-lo de tal maneira que as características do local de trabalho que não vai funcionar ou se encaixam em dispositivos móveis ainda será utilizável - se não muito ou como funcional - em dispositivos móveis.

degradação suave era uma boa filosofia de design nos dias antes de smartphones com navegadores com recursos completos existiu. No entanto, a degradação graciosa tem grandes problemas. Mais importante ainda, a degradação graciosa força o usuário a fazer o download do site inteiro, apenas para ser mostrado uma versão degradada do mesmo. Em dispositivos móveis, que muitas vezes têm largura de banda limitada, isso não é uma coisa boa.

estratégia de design progressivo aperfeiçoamento web para dispositivos móveis

Como resultado das limitações de degradação graciosa, uma nova estratégia chamada optimização progressiva tornou-se popular. fortalecimento progressivo começa com o site muito mais básico e adiciona em características, dependendo do que o navegador do usuário suporta.

melhora progressiva permite sites para ser utilizável mesmo quando usando um telefone celular muito básico. O navegador móvel não precisa baixar um monte de CSS e código javascript (por exemplo) que ele não sabe o que fazer com.

Uma maneira de visualizar melhoria progressiva é como um sistema que adiciona camadas sobre um site, dependendo do tamanho do navegador, ou as características do navegador suporta.

Aqui está um exemplo simples de como dois links de folha de estilo pode ser usado para melhorar uma página da Web móvel para navegadores maiores:

O primeiro link inclui style.css para qualquer tela ou dispositivo portátil. Nesse caso, style.css contém estilos que são otimizados para um dispositivo móvel.

O segundo link é para uma folha de estilo chamada enhanced.css. Se você olhar para o meios de comunicação atributo para este link, você vai perceber que ele tem um min-width condição. o enhanced.css ficheiro só será incluído se o dispositivo é maior do que 800px. Dentro enhanced.css, o web designer pode substituir as propriedades do style.css folha de estilo para fazer a escala para cima navegador para navegador larguras maiores.

primeiro projeto móvel resolve o problema do tamanho do navegador

Móvel primeira é uma filosofia de design que emprega as ideias de optimização progressiva para construir sites para celular primeiro e depois melhorá-los para a área de trabalho. A grande coisa sobre o primeiro projeto móvel é que quando você construir o site móvel em primeiro lugar, ao contrário do contrário, você recebe um site de computador funcional para livre!

Pense em todos os sites que você já viu que não se encaixam em navegadores móveis. Agora, imagine visitar um site móvel com um computador desktop. Um site que é otimizado para a tela pequena sempre trabalhar em um navegador de desktop - mesmo que não acabam por não preencher a janela do navegador inteiro.