..


Links Patrocinados

O layout básico de um site otimizado para smartphones

Se a Web que estamos acostumados a entrar-nos com combinação infinita de layout e espaço, criação de páginas web para telefones inteligentes revemos as nossas ambições criativas, ou pelo menos redimensionar o tamanho limitado de monitores destinados para a visualização do nosso trabalho.

Nota: a resolução de vídeo varia, é claro, dependendo do modelo, a maioria dos smartphones próxima geração tem um display com uma largura variando de um mínimo de 240 a um máximo de 480 pixels. A resolução mais comum pode contar, no modo retrato, numa largura de 320 pixels.

Esquecer de layout, em seguida, colunas dois, três ou quatro! Do meu ponto de vista a única solução possível, a fim de garantir boa usabilidade para o conteúdo, é a concepção única coluna, onde todo o conteúdo é organizado ao longo de uma cascata de forma vertical (ie, uma abaixo da outra). Quando você criar uma página web, lembre-se sempre, a coisa mais importante é garantir a boa usabilidade e, mais ainda quando a tela é limitada a um smartphone, a simplicidade é sempre o melhor caminho a seguir.

Como você pode ver, a nossa estrutura é muito simples e consiste inicialmente de três partes:

  • Cabeçalho: é a parte superior da página e é projetado para acomodar o logotipo do site e, possivelmente, alguns outros elementos do primeiro andar;
  • Corpo da página: é projetado para acomodar a porção central do conteúdo real das páginas do nosso site;
  • Rodapé: Esta é a parte final, na parte inferior, onde é habitual colocar os créditos, as referências legais, avisos de direitos autorais, contatos, etc.

O menu de navegação

A porção central da página, por sua vez, será usado para a casa de outras áreas (que variam dependendo de suas necessidades).
Um elemento essencial, é claro, é o menu de navegação por meio do qual para acessar outras páginas / áreas do site. Se estes são poucos (primeira solução) pode diretamente criar uma barra de ferramentas com as ligações necessárias, caso contrário - por razões de espaço - é melhor adicionar um botão que, quando clicado, mostra uma lista de todas as páginas / áreas disponíveis (segunda solução).

O conteúdo

Também, e acima de tudo, para o conteúdo que você precisa ter em mente a tela pequena do smartphone. Mais uma vez, portanto, a simplicidade ea linearidade são, na minha opinião, a melhor escolha.

Evitar desnecessários gráficos frills é uma boa regra de web design e é ainda mais no desenvolvimento de páginas web para dispositivos móveis e para as questões relacionadas ao pequeno tamanho da tela e por razões relacionadas com a largura de banda disponível (bem como ter um custo, A largura de banda 3G nem sempre é tão rápido, é melhor se concentrar no que é essencial).

Mesmo para o conteúdo, portanto, sugerem uma cascata, onde os elementos de layout diferentes (texto, imagens, vídeo) em um seguem um ao outro:

Na próxima lição veremos como construir o código HTML em nosso website de partida, é claro, pela <head> (título, meta tags e CSS).

Ajudar a desenvolver sites para dispositivos móveis
E-Learning
Flash MX e ActionScript (Curso) Flash MX e ActionScript (Curso)
Tornar um desenvolvedor de sites a partir de 29 €.
SQL e Banco de Dados (Curso) SQL e Banco de Dados (Curso)
Criar e gerenciar bancos de dados relacionais. A partir de 39 €.
VB.NET (Curso) VB.NET (Curso)
Fazer aplicações desktop com o Visual Basic .. A partir de 49 €.
Links Patrocinados