O QUE É WEB DESIGN RESPONSIVO?
Web design responsivo, como o nome já diz, é uma forma que o webdesigner encontra de desenvolver um website que “responda”, ou melhor, que se adapte ao dispositivo no qual está sendo visualizado. Podendo ser a tela de um monitor gigantesco, um laptop, um tablet e até de um smartphone.
O Web design responsivo se tornou uma das maiores tendências de 2013 na área de desenvolvimento web. Isso se deve ao enorme crescimento do número de smartphones e dispositivos móveis. De acordo com pesquisas, só no Brasil o número de smartphones já se aproxima a 70 milhões de aparelhos. E mundialmente esse valor é de aproximadamente 1,1 bi de aparelhos.
Cada vez mais as pessoas estão utilizando as telas pequenas para acessar a internet. Tanto é, que o site de notícias britânico Mashable, nomeou o ano de 2013 como o “Ano do Web Design Responsivo”. Pete Cashmore, o criador do portal, disse: “Para nós que criamos websites e serviços, tudo isso leva para uma única conclusão: Milhôes de telas surgiram, e nós precisamos criar para todas elas.”
COMO É UM SITE COM DESIGN RESPONSIVO?
O objetivo do design responsivo é ter apenas um site, mas com elementos diferentes que respondem de diferentes formas em dispositivos de tamanhos diferentes.
Vamos tomar como base um site “fixo” tradicional. Quando visualizado em um computador comum, por exemplo, o site pode mostrar três colunas de conteúdo, mas quando abrimos ele em um tablet o conteúdo não cabe na tela e nos força a rolar o site horizontalmente, e as vezes acaba distorçendo o visual do site, algo que não agrada muito os usuários, certo?
Em smartphones com telas pequenas pode ser ainda mais difícil de se visualizar o site. Imagens grandes podem fazer com que o layout do site “quebre”, ou então fazer com que o site demore para carregar.
Porém, quando o site é desenvolvido de forma responsiva, o que eram três colunas em um dispositivo comum, podem se tornar duas em um tablet, ou até uma coluna em um smartphone, tornando o conteúdo mais legível e fácil de navegar. E as imagens ao invés de “quebrarem” o layout do site, podem ser redimensionadas para se adaptar ao tamanho do site.
Como disse antes: o objetivo do web design responsivo é fazer com que o website se adapte ao dispositivo no qual ele está sendo visualizado, não importa se é em um computador comum ou em uma tela de um smartphone.
COMO FUNCIONA UM SITE COM DESIGN RESPONSIVO?
Sites responsivos usam, os chamados, grids flúidos. Todos os elementos do site são dimensionados proporcionalmente, não utilizando pixels, que são uma medida fixa.
Então, se você quer montar um site com três colunas, você não diz o tamanho exato que aquelas colunas vão ter, mas o tamanho relativo delas, por exemplo: a coluna 1 vai ocupar 50% do site, a coluna 2, 30% e a coluna 3, os 20% restantes. Dessa forma o tamanho das colunas vai se adaptar ao tamanho da janela, ou tela, em que o site for aberto.
O mesmo se aplica as imagens, por exemplo, se você tem uma imagem de 1200px de largura, em um site responsivo esse tamanho deve ser redimensionado conforme o tamanho da coluna, ou caixa, em que esta imagem estiver inserida, evitando a tal “quebra” de layout.
PROBLEMAS COMUNS NO DESENVOLVIMENTO RESPONSIVO
MOUSE X TOUCH SCREEN:
Desenvolver websites para dispositivos móveis nos leva a pensar no problema do mouse versus o touch screen. Em computadores de mesa o usuário geralmente usa um mouse para navegar e selecionar itens. Já em smartphones e tablets o usuário, na maioria das vezes, usa os dedos e a tela sensível ao toque para interagir com o site. Aí que surge o problema, o que parece ser fácil de clicar com um mouse, pode ser difícil de clicar com o dedo em uma tela pequena. Por isso o webdesigner deve levar em consideração o “toque” na hora de desenvolver para dispositivos móveis.
IMAGENS E VELOCIDADE:
Também existe um problema muito comum, que é a velocidade da internet nos smartphones. A grande maioria não possui uma internet veloz em seus dispositivos móveis, o que faz com que imagens muito grandes levem muito tempo para serem carregadas. Por isso é importante utilizar poucas imagens, ou que sejam leves o suficiente para não atrapalhar a performance do website no celular ou tablet.
APLICATIVOS OU “MOBILE WEBSITES”?
Há um tempo era comum desenvolver aplicativos do seu site para celulares (iPhone ou Android). Mas hoje em dia existem milhares de dispositivos móveis diferentes e com sistemas operacionais diferentes, o que dificulta criar um aplicativo para cada um deles. Por isso é muito mais fácil desenvolver um website, que pode ser acessado de qualquer navegador e que abra em qualquer dispositivo.
MAS AFINAL, POR QUE MEU SITE PRECISA SER RESPONSIVO?
Desde 2015, a maior empresa de buscas de conteúdo na web, o Google, passou a penalizar websites que não estiverem sendo exibidos corretamente nos diferentes dispositivos utilizados pelos usuários. Na prática, se o seu website não estiver responsivo, será escondido dos resultados de pesquisa, mesmo que o usuário busque conteúdo que seja relevante no seu website.
Você ainda não possui um website responsivo? Entre em contato com a Adron e teremos o prazer de atendê-lo.
Traduzido e Adaptado de: http://smallbiztrends.com/2013/05/what-is-responsive-web-design.html