Mais de metade dos utilizadores (57%) da internet acede à rede fora de casa e do local de trabalho, através de equipamentos portáteis como telemóveis e computadores, revela um inquérito do Instituto Nacional de Estatística (INE) divulgado recentemente.
O
leitor já se deve ter deparado com experiências menos boas aquando da abertura
de um website no tablet ou telemóvel. Aparentemente, parece que o site não quer
abrir corretamente nos dispositivos móveis. Isto acontece frequentemente com
sites mais antigos que não impl
O Responsive Web Design é uma das
soluções técnicas para esse problema: programar um site de forma que os elementos que o compõem se adaptem
automaticamente à largura de tela do dispositivo no qual ele está ser visualizado.
Um design responsivo inclui:
Adaptar
o layout da página de acordo com a resolução em que está ser visualizada.
Redimensionar
as imagens automaticamente para que caibam no ecrã e para que não
sobrecarreguem a transferência de dados no telemóvel, por exemplo.
Simplificar
elementos da página de internet para dispositivos móveis, onde o utilizador normalmente
tem menos tempo e menos atenção durante a navegação.
Ocultar
elementos desnecessários nos dispositivos menores.
Adaptar
tamanho de botões e links para interfaces touch onde o ponteiro do rato é substituído
pelo dedo do utilizador. Utilizar
de forma inteligente recursos mobile como geolocalização e mudança na orientação
do aparelho (horizontal ou vertical).
Uma
variação do “Responsive Web Design”
é o “Adaptive Web Design”, uma
versão um pouco simplificada da primeira. A diferença, no segundo caso, é que o
layout se adapta para três ou quatro larguras de tela específicas – e não pixel
a pixel, como no primeiro caso.
Os sites que usam web design responsivo, utilizam as chamadas grelhas fluidas, onde
todos os elementos do site são dimensionados proporcionalmente em percentagem
em detrimento do pixel, que é uma unidade de medida fixa.
Tipos de
letra um pouco maiores, que se ajustam na sua dimensão, espaçamento e
alinhamento em diversas resoluções, proporcionam uma leitura muito fluida, para
que o utilizador evite fazer zoom, tudo se tenta aproximar da leitura e
experiência que um livro nos proporciona.
Imagens responsivas que se ajustam
automaticamente, consoante a dimensão do dispositivo em que for visualizada,
por exemplo no formato paisagem do seu iPhone ou iPad é apresentada uma imagem
com um enquadramento diferente se for visualizada na vertical no formato
retrato.
Grelhas e
colunas responsivas, que se ajustam automaticamente entre si, veja por exemplo
a ilustração em cima, de 3 colunas horizontais no layout apresentado no seu
Desktop, passam a 2 + 1 colunas se visualizadas no iPad no formato retrato
vertical, ficando depois em 1+1+1 colunas verticais no formato retrato
vertical, no iPhone.
Isto tudo
para proporcionar a melhor experiência de visualização, leitura e interação no
seu conteúdo, dos seus produtos ou serviços aos seus usuários.
10 Boas
Razões, Porque deve ter um Site Responsivo.
1.
4
em 5 consumidores, utilizam o seu smartphone para compras online.
2.
Em
alguns países, já existem mais dispositivos mobile do que pessoas?
3.
61%
das pessoas deixarão o seu site, se este não está otimizado para mobile.
4.
55%
do tráfego da internet vem de dispositivos mobile e 45% de desktop.
5.
Sabia
que já existem mais dispositivos mobile, do que TV’s no mundo?
6.
Desde
2012, que a Google recomenda o web
design responsivo.
7.
Conteúdo
numa plataforma, adaptável a vários dispositivos.
8.
8.Mais
conversões, menos taxa de abandono do website.
9.
Mais
garantia no Retorno de Investimento (ROI).
10.
Um
site responsivo, uma campanha de SEO.
Na
ComunicaDigital desenvolvemos websites
com design responsivo, que se
adaptam aos diferentes dispositivos, promovendo uma usabilidade adequada à dimensão
e formato dos mesmos, como é exemplo o website desenvolvido para o cliente
projects4U (na foto).
Usando o web design responsivo no seu site, você
vai estar com toda a certeza a investir no sucesso do seu negócio online, cativando
cada vez mais utilizadores e clientes, que interagem de formas diferentes no
seu site, com diversos dispositivos no seu dia à dia, no escritório no Desktop,
em todo o lado com o seu Smartphone, e no conforto do seu sofá no seu Tablet.
Mais
informação / Fontes
http://pt.wikipedia.org/wiki/HTML5
http://pt.wikipedia.org/wiki/Web_Design_Responsivo
http://visual.ly/responsive-web-design-0
http://cdn.churchm.ag/wp-content/uploads/2014/05/responsive-web-design-infographic.png
http://webdesignledger.com/tips/top-5-reasons-to-adopt-responsive-web-design-in-2014
http://viverdeblog.com/mobile-marketing/
Mensagens
Sem comentários:
Enviar um comentário