É quase impossível listar todos os tamanhos de telas disponíveis de dispositivos com acesso à internet hoje em dia, do celular à TV. Para os desenvolvedores web, codificar um site ideal para cada uma delas então... Ufa!
"O Responsive Design possibilita tornar o mesmo design escalável para vários dispositivos de forma inteligente e estruturada"
Assim os sites eram pensados até maio de 2010, quando Ethan Marcotte lançou o termo "Responsive Design" em um artigo para a revista "A List Apart". No livro "Responsive Web Design", Ethan descreveu a teoria e a prática do design responsivo, que adapta o layout dos sites para qualquer tamanho de tela usando fluidez, imagens flexíveis e CSS3 Media Queries. "Cada dispositivo é usado em um contexto diferente e requer um pensamento específico quanto à experiência do usuário que está sendo projetada. O Responsive Design possibilita tornar o mesmo design escalável para vários desses dispositivos, tamanhos de tela e contextos de uso, de forma inteligente e estruturada", declara Fabricio Teixeira, UX designer na R/GA de Nova York.
O designer coordenador da 37 Graus Estúdio, Lucas Pedro, diz que a palavra da vez para os desenvolvedores é fluidez. "Não só para sites, mas também para eBooks e aplicativos. Os designers e desenvolvedores precisam se adequar a essa nova tendência de múltiplos formatos de telas e também a ao rotacionamento de telas nos tablets e celulares. Nosso trabalho é certificar de que esse conteúdo flua corretamente em todas as resoluções. Com isso, estamos nos distanciando cada vez mais da diagramação antiga", ressalta.
 |
| Globo.tv (globotv.globo.com) |
Comece pelo menor dispositivo
Para escrever um código responsivo deve-se adotar a metodologia "mobile first". "A indicação é começar pelo menor dispositivo possível, normalmente o smartphone, e fazer as adaptações responsivas no layout até a maior resolução possível, como o desktop com monitor grande. É uma forma de manter a simplicidade no projeto. A versão mobile, por questões de usabilidade e espaço, costuma ter apenas o essencial para o aplicativo ou o site funcionar, e o "mobile first" prega que apenas o essencial deve ser utilizado em todas as versões do projeto", explica Guilherme Serrano, desenvolvedor no iG e idealizador dos sites Eu compraria! (www.eucompraria.com.br) e And After (www.andafter.org), desenvolvidos com design responsivo.
 |
| Eu Compraria! (www.eucompraria.com.br) |
Para Fabricio Teixeira, uma das maiores dificuldades de codificar um site responsivo é a priorização dos conteúdos para cada tamanho de tela. "É um exercício constante, de definir o que é realmente importante e essencial para ser exibido em cada contexto. Não adianta o site ser responsivo, mas a versão carregada em um celular pesar a mesma quantidade de bytes que a versão carregada em um computador desktop", ressalta.
De acordo com o site The Responsinator (www.responsinator.com), que permite testar os sites responsivos, os principais tamanhos de tela são:
iPhone 3 e 4: vertical (320 x 480), horizontal (480 x 320)
iPhone 5: vertical (320 x 568), horizontal (568 x 320)
Android: vertical (240 x 320), horizontal (320 x 240)
Android Samsung Galaxy: vertical (380 x 685), horizontal (685 x 380)
iPad: vertical (768 x 1024), horizontal (1024 x 768)
Kindle: vertical (600 x 1024), horizontal (1024 x 600)
Guilherme indica ter uma visão geral de como cada página deverá se comportar em cada resolução, antes de codificar. "Isso auxilia no planejamento da estrutura do código, na reutilização de classes e em um código HTML mais limpo, reduzindo bastante o tempo de desenvolvimento e o custo do projeto", diz.
Custo. O valor a ser cobrado pela criação de um site responsivo deve ser estipulado pelo desenvolvedor, e, na opinião de Lucas Pedro, o orçamento acaba sendo maior do que o de um site não responsivo, já que o tempo utilizado para desenvolver pensando em todas as possíveis resoluções de telas atuais é muito maior do que para o desenvolvimento de um site apenas para desktop. "Antes da programação, é preciso apresentar os layouts do site em diversos formatos e explicar para o cliente todas as possibilidades e limitações de cada caso", ressalta.
Fabricio Teixeira compartilha da ideia de que o desenvolvimento de um site responsivo sai mais caro. "Se você comparar o custo de desenvolvimento de um site para desktop não responsivo com o custo de desenvolvimento de um site 100% responsivo, que funciona em todas as resoluções de tela, o segundo é obviamente maior. A economia no custo de desenvolvimento acaba custando mais para o usuário, que tem uma experiência "não tão agradável assim" quando resolve acessar o mesmo site pelo dispositivo móvel", diz.
Guilherme Serrano discorda: "Se você vai fazer uma versão mobile, uma versão para tablet e uma versão desktop, você terá três projetos para desenvolver e três projetos para dar manutenção. Com o Responsive Design você pode transformar três projetos em um só e seu custo de desenvolvimento e, principalmente, de manutenção poderá ser menor", opina.
De acordo com o site The Responsinator (www.responsinator.com), que permite testar os sites responsivos, os principais tamanhos de tela são:
iPhone 3 e 4: vertical (320 x 480), horizontal (480 x 320)
iPhone 5: vertical (320 x 568), horizontal (568 x 320)
Android: vertical (240 x 320), horizontal (320 x 240)
Android Samsung Galaxy: vertical (380 x 685), horizontal (685 x 380)
iPad: vertical (768 x 1024), horizontal (1024 x 768)
Kindle: vertical (600 x 1024), horizontal (1024 x 600)
Guilherme indica ter uma visão geral de como cada página deverá se comportar em cada resolução, antes de codificar. "Isso auxilia no planejamento da estrutura do código, na reutilização de classes e em um código HTML mais limpo, reduzindo bastante o tempo de desenvolvimento e o custo do projeto", diz.
Custo. O valor a ser cobrado pela criação de um site responsivo deve ser estipulado pelo desenvolvedor, e, na opinião de Lucas Pedro, o orçamento acaba sendo maior do que o de um site não responsivo, já que o tempo utilizado para desenvolver pensando em todas as possíveis resoluções de telas atuais é muito maior do que para o desenvolvimento de um site apenas para desktop. "Antes da programação, é preciso apresentar os layouts do site em diversos formatos e explicar para o cliente todas as possibilidades e limitações de cada caso", ressalta.
Fabricio Teixeira compartilha da ideia de que o desenvolvimento de um site responsivo sai mais caro. "Se você comparar o custo de desenvolvimento de um site para desktop não responsivo com o custo de desenvolvimento de um site 100% responsivo, que funciona em todas as resoluções de tela, o segundo é obviamente maior. A economia no custo de desenvolvimento acaba custando mais para o usuário, que tem uma experiência "não tão agradável assim" quando resolve acessar o mesmo site pelo dispositivo móvel", diz.
Guilherme Serrano discorda: "Se você vai fazer uma versão mobile, uma versão para tablet e uma versão desktop, você terá três projetos para desenvolver e três projetos para dar manutenção. Com o Responsive Design você pode transformar três projetos em um só e seu custo de desenvolvimento e, principalmente, de manutenção poderá ser menor", opina.
 |
| And After (www.andafter.org) |
Como pensar o Responsive Design
Pensar qual é o conteúdo mais relevante para cada tamanho de tela, ou dispositivo, é um trabalho que deve ser feito a quatro mãos, pelo desenvolvedor e pelo UX designer, segundo Fabricio Teixeira. "Sem esse pensamento inicial, o design responsivo fica sendo apenas uma "firula tecnológica" e não se torna relevante para as pessoas. É preciso entender quais são as necessidades do usuário em cada dispositivo. Se você entra no site de um restaurante enquanto está em casa, sentado em frente ao computador, é provável que você tenha tempo de ver fotos do ambiente, saber quem é o chefe da cozinha e conhecer algumas das opções do cardápio. Mas se você entra no site do mesmo restaurante pelo celular, possivelmente você está dentro do carro, parado em fila dupla, e precisa confirmar o endereço em menos de cinco segundos. São funções diferentes que o site assume dependendo do contexto de uso", explica.
Lucas Pedro ressalta que, basicamente, os módulos de cabeçalho, conteúdo e rodapé precisam ter formatos variáveis e não absolutos. "Se existirem módulos de conteúdo e menu laterais, eles precisam ser programados para se deslocarem para cima, ou para baixo da área de conteúdo, no caso de resoluções pequenas. Alguns truques antigos, como quebras de linhas perfeitas, já não podem ser usados porque tudo é variável. É preciso testar, testar e testar novamente a solução em diversos dispositivos. E também é preciso evangelizar os clientes para esta nova realidade, mostrando para eles que estar acessível em diversos dispositivos é mais importante do que aquela quebra de linha perfeita no texto", diz.
Codificando...
HTML5, CSS3 e Javascript são conhecimentos básicos que um desenvolvedor web precisa ter, e são os conhecimentos necessários para dar grandes passos com o design responsivo. "O desenvolvedor deve ter domínio de HTML e CSS para conseguir transpor para o código as necessidades planejadas para um design responsivo. Conhecimento de Javascript pode auxiliar bastante para algumas interações avançadas de acordo com a resolução do dispositivo", indica Guilherme Serrano.
Saber programar com algum framework Javascript, como jQuery ou MooTools, também pode ajudar bastante. "Estes frameworks farão o desenvolvedor perder menos tempo", ressalta Lucas Pedro.
Uma alternativa para quem está começando a se adequar ao Responsive Design é embarcar nas facilidades dos CMS?s. "Na 37 Graus, usamos gerenciadores de conteúdo open source, como WordPress, Joomla e GetSimple CMS. Uma forma fácil de aprender é usar um template desse tipo de CMS que já seja responsivo, assim podemos analisar como foi feito o código", declara Lucas.
Media Types são importantíssimas para o desenvolvimento de sites responsivos. Elas direcionam o CSS para um determinado tipo de meio de acesso. "Quando escrevemos um arquivo CSS com os estilos para um website, podemos indicar para que tipo de mídia ele será utilizado. Desta forma, utilizamos as Media Types para definir onde os arquivos de CSS ou blocos de estilos irão agir", explica Claudio Sanches, programador Python na Infranology.
O Responsive Design surge da combinação das Media Types com as Media Queries. Segundo Claudio, elas se integram com proporções, orientação, aspecto, resolução e cores de um dispositivo, tornando possível ter total controle de como um site vai ser exibido. "Até o CSS2, tínhamos apenas Media Types que, teoricamente, deveria atender a tablets e smartphones utilizando a opção "handheld". Entretanto, nos dias de hoje, temos dispositivos móveis com resoluções de tela iguais ou até mesmo superiores a alguns desktops. Com este problema, o CSS3 trouxe as Media Queries", declara.
Confira alguns sites com ferramentas para testar o seu site responsivo:
The Responsinator: www.responsinator.com
Screenqueries: http://www.screenqueri.es
Responsive Design Bookmarklet: responsive.victorcoulon.fr
ViewLikeUs: www.viewlike.us
Info By IP: www.infobyip.com/testwebsiteresolution.php
Fonte:http://www.revistawide.com.br/tecnologia/responsive-design
Pensar qual é o conteúdo mais relevante para cada tamanho de tela, ou dispositivo, é um trabalho que deve ser feito a quatro mãos, pelo desenvolvedor e pelo UX designer, segundo Fabricio Teixeira. "Sem esse pensamento inicial, o design responsivo fica sendo apenas uma "firula tecnológica" e não se torna relevante para as pessoas. É preciso entender quais são as necessidades do usuário em cada dispositivo. Se você entra no site de um restaurante enquanto está em casa, sentado em frente ao computador, é provável que você tenha tempo de ver fotos do ambiente, saber quem é o chefe da cozinha e conhecer algumas das opções do cardápio. Mas se você entra no site do mesmo restaurante pelo celular, possivelmente você está dentro do carro, parado em fila dupla, e precisa confirmar o endereço em menos de cinco segundos. São funções diferentes que o site assume dependendo do contexto de uso", explica.
Lucas Pedro ressalta que, basicamente, os módulos de cabeçalho, conteúdo e rodapé precisam ter formatos variáveis e não absolutos. "Se existirem módulos de conteúdo e menu laterais, eles precisam ser programados para se deslocarem para cima, ou para baixo da área de conteúdo, no caso de resoluções pequenas. Alguns truques antigos, como quebras de linhas perfeitas, já não podem ser usados porque tudo é variável. É preciso testar, testar e testar novamente a solução em diversos dispositivos. E também é preciso evangelizar os clientes para esta nova realidade, mostrando para eles que estar acessível em diversos dispositivos é mais importante do que aquela quebra de linha perfeita no texto", diz.
 |
| Starbucks (www.starbucks.com.br) |
Codificando...
HTML5, CSS3 e Javascript são conhecimentos básicos que um desenvolvedor web precisa ter, e são os conhecimentos necessários para dar grandes passos com o design responsivo. "O desenvolvedor deve ter domínio de HTML e CSS para conseguir transpor para o código as necessidades planejadas para um design responsivo. Conhecimento de Javascript pode auxiliar bastante para algumas interações avançadas de acordo com a resolução do dispositivo", indica Guilherme Serrano.
Saber programar com algum framework Javascript, como jQuery ou MooTools, também pode ajudar bastante. "Estes frameworks farão o desenvolvedor perder menos tempo", ressalta Lucas Pedro.
Uma alternativa para quem está começando a se adequar ao Responsive Design é embarcar nas facilidades dos CMS?s. "Na 37 Graus, usamos gerenciadores de conteúdo open source, como WordPress, Joomla e GetSimple CMS. Uma forma fácil de aprender é usar um template desse tipo de CMS que já seja responsivo, assim podemos analisar como foi feito o código", declara Lucas.
Media Types são importantíssimas para o desenvolvimento de sites responsivos. Elas direcionam o CSS para um determinado tipo de meio de acesso. "Quando escrevemos um arquivo CSS com os estilos para um website, podemos indicar para que tipo de mídia ele será utilizado. Desta forma, utilizamos as Media Types para definir onde os arquivos de CSS ou blocos de estilos irão agir", explica Claudio Sanches, programador Python na Infranology.
O Responsive Design surge da combinação das Media Types com as Media Queries. Segundo Claudio, elas se integram com proporções, orientação, aspecto, resolução e cores de um dispositivo, tornando possível ter total controle de como um site vai ser exibido. "Até o CSS2, tínhamos apenas Media Types que, teoricamente, deveria atender a tablets e smartphones utilizando a opção "handheld". Entretanto, nos dias de hoje, temos dispositivos móveis com resoluções de tela iguais ou até mesmo superiores a alguns desktops. Com este problema, o CSS3 trouxe as Media Queries", declara.
Confira alguns sites com ferramentas para testar o seu site responsivo:
The Responsinator: www.responsinator.com
Screenqueries: http://www.screenqueri.es
Responsive Design Bookmarklet: responsive.victorcoulon.fr
ViewLikeUs: www.viewlike.us
Info By IP: www.infobyip.com/testwebsiteresolution.php
Fonte:http://www.revistawide.com.br/tecnologia/responsive-design
0 comentários:
Postar um comentário
Obrigado pelo seu comentário!