Concepção e técnicas desafios para o conteúdo do site móvel

Video: Tendências Pedagógicas - Hamurabi Messeder: Aula 01 de 09

A questão da acessibilidade móvel emerge em todos os domínios da criação de um site, afetando o tamanho e tipo de imagens que você incorporar, o esquema de cores que se aplicam ao seu site, e que tipo de estrutura de navegação que você escolher.

O ponto aqui não é apontar todos os diferentes desafios colocados pelo tamanho dos dispositivos móveis. Aqui estão duas soluções possíveis para fornecimento do conteúdo do web-friendly:

• Consultas de mídia: Você pode apresentar o mesmo conteúdo em tamanho completo e navegadores móveis, mas exibir esse conteúdo de forma diferente usando diferentes folhas de estilo CSS. Por exemplo, o conteúdo apresentado em três colunas de um monitor de tamanho completo pode ser apresentada em uma coluna em um (mais estreita) janela móvel (tela).

  Várias consultas de mídia pode ser configurado para um site. Eles são definidos pelo tamanho do visor de um usuário. Assim, por exemplo, você pode criar uma folha de estilo que exibe o conteúdo do site em comprimidos, outro que exibe o site em um telefone celular no modo paisagem (horizontal), e ainda um outro para um telefone celular no modo retrato (vertical).

  É improvável que você criar mais do que duas ou três versões de seu site no início, mas o número de estilos que você pode definir para um único local é ilimitado.

• jQuery Mobile: Você pode construir um site completamente diferente para os usuários móveis. A opção jQuery Mobile envolve a criação de conteúdo separado para um site móvel do que o que é apresentado aos visitantes do monitor de tamanho normal.

Mídia consultas e jQuery Mobile estão ao seu alcance. Nenhum deles requer programadores contratação ou conhecimento avançado de web design. Dito isto, quando você decidir tomar a mergulhar e criar uma versão móvel do seu site (usando consultas de mídia ou jQuery Mobile), você vai ter de colocar algum tempo e energia para descobrir um (ou ambos) dessas abordagens.

O ponto aqui é aumentar a consciência sobre como a diferença de tamanho entre uma janela de visualização de tamanho completo e celular afeta todos os aspectos do design da página e tecnologia, incluindo estas questões:

Video: Desafios de Raciocínio Lógico

• viewports pequenas: A diferença mais óbvia e imediata entre navegação desktop / laptop e navegação móvel é que viewports móveis (as telas de visualização) são menores. A diferença de tamanho entre a mídia de tamanho normal e dispositivos móveis tem implicações radicais para o design do site:

• páginas móveis geralmente evitar o uso de colunas. design de página edifício com um “understructure” columnal é muitas vezes essencial para tornar o conteúdo acessível e convidativo em páginas de tamanho normal.

• 
  
  
  

  Ligações muitas vezes precisam ser maiores em dispositivos móveis para ser acessível. ligações pequenos são difíceis para grandes dedos para tocar, e, portanto, diferentes técnicas de ligação (tais como botões grandes, clicáveis ​​em vez de linhas estreitas do tipo) são frequentemente utilizados em design de móveis.

• As imagens devem ser muito menor em dispositivos móveis. Há uma dimensão qualitativa quando se trata de escolher e cortar versões de imagens que aparecem em um site móvel. Designers muitas vezes são bem servido para cortar fotos mais apertado para um dispositivo móvel. Por exemplo, uma foto da pessoa da cabeça aos pés que funciona bem em um monitor de tela cheia pode ser mais agradável se cortada para apenas um headshot para dispositivos móveis.

• Os formulários são configurados de forma diferente em dispositivos móveis. Alguns campos de entrada de formulário que funcionam bem em um laptop (tais como botões de rádio e caixas de seleção) são difíceis de usar em um dispositivo touch-screen pequena. Em vez disso, sliders (barras com um controle deslizante draggable) e flipswitches (com um sim / não conjunto de opções) fazer formas mais fáceis de preencher em um dispositivo móvel.