Please enable JavaScript.
Coggle requires JavaScript to display documents.
Web para dispositivos móveis (Mobile-First (Técnica onde em vez de…
Web para dispositivos móveis
O mesmo site para os aparelhos mobile ou um outro site?
Vamos falar primeiramente de criar um outro site apenas para o mobile, maneira que é usada por muita gente. Vamos falar como ela é uma maneira bosta de adaptar seu site para o mundo mobile.
Como vamos adaptar o site para outros dispositivos mobile que não é um celular? Você sabe que tem coisa pra caramba que está conectada e acessa a web hoje em dia né? Você iria criar um novo site para cada aparelho novo?
Muitas vezes os sites mobile são versões limitadas do site original, o que frustra o usuário.
Poha, dar manutenção num site já é foda, imagina mais de um?
Você terá conteúdos duplicados em sites "diferentes", o Google com certeza não vai gostar disso.
Terá que aturar redirecionamentos do site normal para o mobile e vice-versa, sinto pena do seu servidor.
A maneira mais recente e que com certeza poupa nossa sanidade mental é a ideia
One Web
, essa ideia enfatiza que o melhor para o usuário é ter o mesmo site do desktop normal também acessível para o mundo móvel, apenas usando truques do CSS para adaptar o site para cada dispositivo.
CSS Media Types
No CSS2, existia o recurso media types que permitia um que um documento usasse um estilo CSS diferente dependendo do dispositivo que ele estava acessando.
Ele era definido dentro da tag link:
<link rel="stylesheet" href="site.css" media="[tipo do dispositvo]" />
A gente também poderia fazer tudo em um único arquivo css, especificando para qual dispositivo ia a estilização:
@ media [tipo dos dispositivo]
{
[estilização]
}
Os tipos de dispositivos que esse recurso aceitava como valor era esses:
screen
Aqui não tem segredo, é voltado para os computadores desktops "normais"
print
Aqui normalmente fica uma estilização feita para impressão do site numa folha de papel
handheld
Aqui fica a estilização para os aparelhos mobile, porém esse modo foi feito para dispositivos móveis muito simples e antigos. que não dispunham de muito poder de processamento, por isso as páginas nesse modo eram bem simples, quando os smartphones com touchscreen surgiram, que possuem a capacidade de abrir paginas completas com tudo que tinha direto, passaram a exigir as páginas feitas para dekstop e ignorar esse modo.
CSS Media Queries
Uma evolução dos Media Types onde em vez de seguir o tipo do dispositivo, (como screen, print e handheld), a gente segue propriedades do dispositivo, como tamanho da tela, orientação e até resolução da tela em dpi.
Como na sua versão anterior, pode também ser inserido no CSS: vamos ver alguns exemplos:
<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">
@ media (max-width: 480px)
{
[estilização]
}
Viewport
Mesmo que a gente coloque um media querie que determina uma estilização para até 480px de width, ele pode ser ignorada por um smartphone por exemplo, sabe porque? Porque os celulares hoje dia possuem o mesmo ou mais resolução que os desktops, porém claro, a experiência entre um e outro é diferente
Para contornarmos esse probleminha, exite o valor viewport, que faz que o dispositivo seja forçado a renderizar o conteúdo numa resolução, mesmo que a resolução dele seja muito maior
Ele fica dentro da tag meta, aqui um exemplo:
<meta name="viewport" content="width=320">
Porém, o mais recomendável é que você siga o que a fabricante do aparelho acha como ideal de resolução para o dispositivo:
<meta name="viewport" content="width=device-width">
Responsive Web Design
As mudanças que a gente estudou anteriormente, fazem parte desta ideia, onde a página se adapta a diferente ocasiões
Possui três princípios básicos:
Layout fluído usando medidas flexíveis, como porcentagens
Media Queries para ajustes de design
Uso de imagens flexíveis
Mobile-First
Técnica onde em vez de começarmos com um site desktop e depois fazer adaptações para mobile, nós comecemos com o mobile e depois nós vamos para o desktop
A grande mudança desta técnica para a Desktop-First (que nós estávamos fazendo) é que ele permite uma abordagem muito mais simples, pois iniciamos por uma área mais simples e limitada, com mais restrições, o que nos obriga a usar páginas simples, focadas e objetivas, depois nós fazemos a adaptação para o desktop com os media queries
Não preciso dizer que é pra usar essa técnica em vez da outra né?