Como configurar o site para Dispositivos Móveis? Conheça os segredos dos Desenvolvedores

Hoje em dia todos nós sabemos que existem os famosos celulares e tablets que fazem um papel fundamental no desenvolvimento de site. Até estes dias meus amigos, eu estava numa loja (empresa) de eletrônicos e acabei por me deparar com uma situação bem interessante quando um vendedor mostrava para mim os produtos, pelo tablet.  Até aí tudo bem, pois, para uma pessoa que não entende isso parece ser bem normal, mas, para quem é "Desenvolvedor aprendiz ou Desenvolvedor iniciante" sabe muito bem que neste momento, bate uma curiosidade.Como criar um site para Dispositivo móvel?

No momento em que ele me mostrava os produtos, eu consegui perceber que o site da loja não estava adaptado para o modelo do tablet (ou digamos, a versão mobile). Pensando nisso, hoje eu trago então este artigo para você, que logicamente ficou curioso. :D

O site Mobile

Isso tudo é feito com CSS! Você que é novo neste mundo, nunca se perguntou o que seria os famosos @media no CSS? Bem, apesar de já existem à tempo, é com ele que vamos determinar o modo de visualização do site para a versão mobile, sendo elas tablets, celulares (smartphones) e desktop (PC).

Estilo separado

Os sites "Responsivos" como são chamados, é a otimização do CSS para a versão mobile. Recomendo que crie um arquivo único para sua versão mobile. No nosso "Diretório dos Sites" ao olhar no código fonte, você vai se deparar com este arquivo: http://diretorio.shiftactif.com/css/mobile.min.css

Abra um Bloco de Notas e lá, comece um novo estilo separado.
@media (max-width: 400px;) {Seu novo CSS}

@media: Os media types regulamentam para que tipo de media um certo código CSS é direcionado. Para não alongar muito o nosso artigo, então, deixo-vos uma explicação mais detalhada no devmedia: http://www.devmedia.com.br/utilizando-css-media-queries/27085.

max-width ou min-width: Como todos sabem, se traduzirmos o nome "width" no Google tradutor, teremos o nome Largura. Se você define uma largura, o regulamento do CSS vai aumentar ou diminuir de acordo com o valor que você mencionou em porcentagem ou pixel. :D Se você usar o MIN depois do hifem, automaticamente será "mínimo". E se usar o MAX, será "máximo".

Neste caso, estamos simplesmente dando um valor específico para alguns modelos básicos, então, se colocar @media (width: ) você está dizendo para o navegador interpretar a seguinte lógica:

Se o dispositivo for de largura "tal", então, será personalizado da seguinte maneira.

É claro que não é desta forma, mas, apenas citei assim para que você compreenda. Logo, então:

@media (max-width: 400px;) {
body {
background-color: #000 !important;
}
}

No código acima, perceba que se a largura (width) for 400 pixels então o corpo (body) da página terá uma cor de fundo hexadecimal #000, que seria PRETO. Abra uma nova página do seu navegador e diminua o tamanho da janela do navegador até atingir 400px ou, menor. Com essa redução, verá o CSS da versão (ou suposta) mobile agindo no seu site. :D

Exemplo em nosso Diretório:

Perceba que na seta Azul, vemos o botão "Menu" que diz respeito a lista de links do menu de navegação do nosso Diretório. Na seta vermelha com o ícone, permite que o internauta da versão Mobile possa abrir o menu, usando os links para acessar outras páginas.

Essa é a maneira mais simples para usar o recurso, porém, se quer algo mais avançado, poderá usar o "and" para especificar um limite. Ou seja, neste caso da imagem ao lado, estamos acessando o Diretório dos Sites pelo celular Smartphone, sendo assim a sua suposta largura de tela será 400 pixels. E se eu quiser especificar isso, usando uma personalização qualquer para quando o aparelho for de resolução 515px até 700px? Isso quer dizer que, se a resolução for de 515 à 700 pixels, uma personalização será executada, e este é o exato momento que falamos dos famosos Tablets.

Tipos de resoluções disponíveis mais usados

Uma dica interessante é buscar resoluções mais usadas, como a de tablets e celulares. Bem, digamos assim que a versão Desktop e Smartphone são as mais usadas hoje, então, eis uma tabela que vai lhe ajudar:

Modelos e pixels

Pixels	Modelos
1200px	Desktop (PC)
900px ou 760px	Tablets
480px ou 320px	Versão Smartphones (celulares)

Então, vamos especificar de um valor para o outro de maneira que não nos percamos. Confuso não é? Quero dizer que, se for um tablet, então a resolução será 900px à 760px. Então, vamos criar este CSS:
@media (min-width: 900px) and (max-width: 760px) {<br /> Meu CSS.<br /> }

E dentro das chaves, vamos colocar a personalização. Lembra que anteriormente tínhamos colocado uma cor de fundo preto? Então, agora, vamos colocar como exemplo, uma cor azul.

@media (min-width: 760px) and (max-width: 900px) {body {background-color: blue !important;}}
Em resumo, nós temos a seguinte conclusão do CSS:

se o mínimo de largura for 760 pixels até 900 pixels, então, vamos colocar uma cor Azul no fundo do site.

Tendo isso em mente, agora, você está pronto para aumentar o sucesso do seu site na versão móvel. :)

Qualquer dúvida, fale conosco no fórum Shiftactif: http://shift.forumactif.com

Alguns sites que podem ajudá-lo

Eu fiz uma lista comFiz uma pequena lista com alguns sites para você visitar. Veja-os e tire suas dúvidas. ;)

- http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/
- http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/

Depois de adicionar o modo responsivo no seu site, é só acessar o seu código HTML e antes do head adicionar a tag META media print. Veja no site w3schools: http://www.w3schools.com/tags/att_link_media.asp

RESUMINDO...

É fato que a maioria dos desenvolvedores não se preocuparam com a versão mobile do seu site, então, essa dica vai para todos. Seja rápido, pois, se seu site está sem este recurso, pode causar um grande problema de vendas. :( Quem sabe? Bem, se você leu tudo, então saberá que ficaria mais fácil para o vendedor da loja que entrei me mostrar os produtos no tablet sem precisar ficar deslocando a página para os lados, que nem um "doido". :D Boa sorte!!