Posts Tagged 'Design responsivo'

Design responsivo x site mobile dedicado

Eduardo Brandão fez uma pesquisa muito interessante sobre esse tema – design responsivo vs site mobile dedicado em seu site/blog, onde destrincha os prós e contras de cada abordagem, sempre numa perspectiva científica, muito interessante pois separa o que é pre/conceito dos fatos. Ainda que os atos possam ser subjetivos, a separação/comparação é muito salutar.

Uma questão interessante – e que se torna muito recorrente hoje, sendo aplicável a qualquer área de nossa sociedade, baseada no consumo – é “no que o (design responsivo ou dedicado) é melhor para meu site/empresa/negócio”? O argumento de unificar conteúdos e interfaces (ou optar por uma interface mais bonita) para facilitar o uso cai por terra quando Eduardo argumenta: “O Facebook é um grande exemplo para mim, pois acho a interface feia e confusa! Mas continuo usando porque todos meus amigos estão lá” (quem não se identifica com essa declaração ou ama demais o FaceBook ou já esqueceu de como era prazeroso usar o Orkut).

Enfim, apesar da leitura longa, se você trabalha na área, vale uma leitura.

Alguns links relacionados (da Wikipedia, em inglês) para ajudar a compreender melhor alguns assuntos paralelos:
Future-proof (layout ou design).
Foundation framework.

Anúncios

Layout versus resolução de tela (3)

Atualmente existem dezenas de dispositivos (equipamentos, aparelhos) no qual sua página de internet pode ser vista: ceulares, smartfones, tablets, computadores de mesa ou portáteis. E isso subentende vários formatos de tela, desde as telas tradicionais de micro de mesa em proporção 4:3 ou 1:1 passando pelas telas wide-screen/panorâmicas até os micros portáteis e de mão.

Como citei num artigo anterior, existem técnicas de projeto que ajudam ao projetista de internet (webdesigner) a definir as dimensões de seu site se o cenário for limitado a telas tradicionais, em duas ou três resoluções de tela.

Em monitores 4:3 e 1:1, até 17 polegadas, as resoluções de tela seriam:
800 x 600 pixels, com área útil sem rolagem de tela em 760 x 410 pixels
1024 x 768 px, com área útil de 1000 x 600 pixels
1280 x 1024 px, com área útil de 1260 x 856 pixels

Em monitores panorâmicos 16:9 até 17 polegadas as resoluções de tela seriam:
1440 x 900 pixels
1280 x 600 px
1280 x 768 px
1280 x  720 px
1176 x 664 px

Mas todos esses cuidados acabam não sendo úteis se seu layout vai ser visualizado em dispositivos portáteis que podem ser horizontais ou verticais.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Teoricamente sites em CSS são rediagramados automaticamente para aparecer em dispositivos pequenos (como celulares).
Dispositivos ou navegadores de internet que não rediagramam o seu site o exibem em zoom (visualização que aumenta ou diminui o layout, em escala).
Por fim, pode-se fazer duas versões do mesmo site, uma para dispositivos tradicionais, outra para portáteis mantendo a estrutura e conteúdo (HTML) e mudando a folha de estilos (CSS).

Aí entra o Design Responsivo (responsive design) que nada mais é que o uso de tecnologias para web (HTML, CSS, Javascript, Flash) a fim de rediagramar seu layout para a maioria das situações possíveis: horizotal ou vertical; tela tradicional ou panorâmica; dispositivo de mesa ou de mão.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Cada tecnologia trata a sua maneira estas questões de projeto de interfaces para internet, seja escalonando o layout conforme a resolução de tela (Flash, p.ex.) ou ocultando/recortando/redistribuindo o conteúdo (CSS); portanto cabe ao projetista de internet (webdesigner) estudar a tecnologia a ser utilizada em seu projeto de sites para esse fim.

Em termos práticos pode-se usar bibliotecas de código (como o JQuery) para implementar esses recursos rapidamente, ou desenvovler seu site em CMS (gerenciadores de conteúdo, como o WordPress) que já possuem recursos para adaptar o site a diferentes dispositivos.