Olá tripulantes depois de um longo período desde o nosso último post sobre web designer, estou de volta agora para falar de websites Mobile e Responsivo, este assunto será dividido em 2 partes, na primeira abordamos quem é quem nesse campo de batalha e no próximo faremos uma análise sobre qual opção é a mais indicada.

Começa logo

Sem mais “delongas” vamos ao assunto!
Quando visitamos websites utilizando diferentes dispositivos podemos ficar confusos com a maneira com que eles se comportam, com a crescente onda de aparelhos móveis os websites se adaptaram a novas formas de exibirem seu conteúdo, duas maneiras que abordaremos neste post são mobile e responsivo.
Um website responsivo(também conhecido como RWD, Responsive Web Design) não é somente um website que se adapta ao layout da tela de um dispositivo, ele deve ser capaz de responder às  características do dispositivo que o acessa, se expandindo, contraindo, movimentando, executando ações. Tudo isso com a finalidade de ser acessível.

Para o desenvolvimento responsivo existem algumas características de acordo com Ethan Marcotte considerado o pai do web design responsivo, alguns “ingredientes técnicos” são:

  • Uso de grid fluído;
  • Imagens e mídias flexíveis;
  • Media queries.

Calma jovem, vamos por partes, para não colocarmos “muuuuuito” conteúdo e transformarmos esse post em um livro, recomendarei alguns materiais para estudo, para resumir os “ingredientes técnicos” acima citados podemos entender como:

  • Grid fluído: temos vários frameworks css que podem fazer esse serviço para nós, organizar nosso site em grids, com linhas e colunas que se adaptam ao dispositivo que o acessa;
  • Imagens e mídias flexíveis: são capazes de contrair ou expandir suas dimensões de acordo com as dimensões de tela do dispositivo;
  • Mídia querie: é um recurso CSS que nos permite utilizar as folhas de estilo baseada nas características do dispositivo ao qual o layout é servido.
Felipe Massa - Fórmula 1
Felipe Massa – Fórmula 1

Web site mobile, é feito para dispositivos móveis, quando acessamos um site que tenha a versão mobile por um aparelho móvel somos redirecionados para uma url diferente como por exemplo “http://m.nomedosite.com.br”, o site mobile tem um layout diferente do desktop. Seu desenvolvimento é exclusivamente pensado em diferentes aparelhos móveis, com isso agora o foco passa a ser o conteúdo, para isso temos o conceito de mobile first(Que é um assunto extenso para tratarmos nesse post!), mas resumindo mobile first é um conceito que planeja o desenvolvimento de projetos desde um website até um sistema complexo com foco nos dispositivos móveis e só depois se pensa em outros ambientes como desktops ou notebooks.

Para desenvolver para mobile também contamos com alguns frameworks como o jQuery Mobile, PhoneGap e o Ionic.
Conclusão
Ok, pessoal com este post pude apresentar os principais conceitos de web design mobile e responsivo, no próximo irei confrontar suas características, ok?
Então até lá! Abaixo seguem alguns links e referências sobre o assunto.
Leitura recomendada
Exemplos de sites mobiles
Exemplos de sites responsivos

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *