Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Conceito de Site Responsivo

Estou com uma dúvida um pouco conceitual sobre sites responsivos. Existe um trecho do livro Web Design Responsivo da Casa do Código que diz que:

“Manter um site para cada tipo de dispositivo com acesso à internet se tornou inviável, tendo-se em vista que hoje temos smartphones de todos os tamanhos, assim como tablets, notebooks, iPads, entre outros. Sendo assim, o site responsivo é a melhor maneira de manter o seu site atualizado sem grandes investimentos, pois a manutenção é feita em uma única plataforma, que se adequa aos dispositivos de acordo com a necessidade.”

Porém, eu tinha entendido que responsividade está ligada à criação de um layout para cada dispositivo, por exemplo, um desenho para o desktop, um para o tablet e um para o smartphone, no mínimo. Casos especiais como o Netflix por exemplo pensariam em um desenho para TV. Mas de acordo com esse trecho do livro, estou associando responsividade à flexibilidade, coisa que eu acho bem difícil de se fazer, afinal como criar uma imagem por exemplo que possa se flexibilizar a uma largura x sem perca de qualidade? O próprio site do Alura, que é responsivo, não foi previsto para minha TV de 40’’, e pelo meu entendimento, ele continua sendo responsivo, mas não foi pensado para TV.

Por exemplo, se eu fosse vender um site responsivo eu teria que dizer a quais dispositivos ele é adaptável ou apenas dizer que ele é flexível? Gostaria de uma maior explicação sobre essa ideia de adaptável e flexível porque esse trecho do livro me deixou um pouco na dúvida quanto a isso.

Desculpe pelo detalhamento da pergunta, mas é que queria ter bem claro o significado de responsivo.

Agradeço desde já

7 respostas

olá luana, o uso de media querie no css e que somos capazes de flexibilizar nossos sites tornando o layout responsivo para telas menores ou maiores, existe uma tabela de dispositivos no qual nos baseamos e criamos a media querie imaginando todos os dispositivos que utilizaram nosso site, no caso do site da alura provavelmente não devem ter definido uma media querie para dispositivos acima de 1900px por exemplo, em todo caso quando vc estiver estudando as queries vc vai entender tudo pois vai fazer na prática.

Olá André, primeiramente obrigada pela explicação.

Sim, conheço as media queries. Na verdade a minha dúvida é mais conceitual quanto ao trecho do livro. Sempre entendi site responsivo exatamente da maneira como você explicou, crio no mínimo três layouts baseados nessas medidas mais usadas. Mas o trecho que livro fala que seria impossível dar suporte a cada um dos dispositivos que hoje acessam à internet e que sites responsivos resolveriam esse problema. E eu não concordei muito com esse trecho, pois como você mesmo explicou o site do Alura não foi previsto para um media screen acima de 1900px e nem por isso ele deixa de ser um site responsivo.

Resumindo, acho que o trecho do livro passa a explicação de que um site responsivo seria flexível a qualquer tamanho de tela, quando na verdade eu acho que não é bem isso e queria só ter certeza rs.

Obrigada mais uma vez pela atenção.

solução!

Oi Luana,

Bastante filosófica sua pergunta hehehe. Me fez pensar um pouco aqui. Lá vai minha tentativa:

Quando falamos de "criar um site pra cada aparelho" a ideia era que antigamente pessoas faziam sites diferentes pra mobile, pra desktop e ate pra tablet (os famosos sites m.*). E isso é impossível de se fazer. Ha muitos dispositivos diferentes.

Então preferimos a ideia de um site único que se adapte a diferentes resoluções de tela. Essa adaptação é feita com design responsivo: um design base com pequenas adaptações feitas nas media queries.

No mundo ideal, todos os sites do mundo deveriam se adaptar a todas as resoluções do mundo. Isso seria o mega responsivo ideal. Que ninguém faz.

Na prática, estabelecemos limites que nosso site deve suportar. Isso dentro dos limites do nosso público e do que acreditamos ser prioridade hoje. Vejo da mesma forma como nenhum site hoje suporta IE4 mais; não faz sentido. No mundo ideal, suportaríamos todos os browsers e resoluções de tela possíveis. No mundo real, priorizamos pra suportar o máximo possível dentro dos critérios do projeto.

Então como não dá pra suportar todos os tamanhos de tela (esse número seria infinito) é comum fixar um valor máximo pra suportar. Por isso o site da Alura não fica legal em 1900px. E, se for ver, não fica legal em telas pequenas de 200px tbm. O site é responsivo entre os limites de 320px e 1400px. Fora deles, quebra.

Inclusive eu gosto de explicitar esses limites em código pra deixar bem claro o intervalo de resoluções que aquele projeto suporta (e, de novo, cada projeto deve priorizar do seu jeito):

html {
   min-width: 320px;
   max-width: 1400px;
}

Olá Sérgio,

bom antes de agradecer pela resposta peço então que desconsidere minha msg pelo Twitter na qual eu pedi seu email rs. Como vc ajudou com o livro, ia fazer a pergunta diretamente para vc, mas vc já respondeu por aqui. E claro, mt obrigada pelo esclarecimento, sanou totalmente minha dúvida. É exatamente isto que eu penso sobre sites responsivos:

"Na prática, estabelecemos limites que nosso site deve suportar. Isso dentro dos limites do nosso público e do que acreditamos ser prioridade hoje."

Isso que dá a pessoa de humanas querer se meter em TI, fica filosofando sobre coisas simples rs.

Obrigada novamente e parabéns pelo livro, estou adorando.

Legal, obrigado!

Pessoal, tudo bem?

Muito legal essa discussão! Sobre a questão responsiva, vi que já trataram, mas um trecho citado pela Luana me fez questionar as "práticas" de mercado para desenvolvimento e, principalmente, planejamento de um site responsivo.

Nessa citação: "Porém, eu tinha entendido que responsividade está ligada à criação de um layout para cada dispositivo, por exemplo, um desenho para o desktop, um para o tablet e um para o smartphone, no mínimo. Casos especiais como o Netflix por exemplo pensariam em um desenho para TV."

Vejo muitos designer (que por vezes não tem muito conhecimento de html/css/responsivo/framework como boostrap e etc rs) criando layouts partindo da versão Desktop para iniciar o projeto. Porém, apenas depois que o front-end já iniciou os trabalhos, "surge" o layout SmartPhone / Table por exemplo. O que acaba gerando retrabalho, como por exemplo uma sessão de 3 boxes que no celular foi desenhado para ser um carrossel.

O ideal seria partir do projeto seguindo o conceito de "mobile first" desde a etapa de design, certo? Ou o mais comum realmente é desenharem a versão Desktop para depois pensar em como ficará nos outro dispositivos? Ou pior ainda, apenas desenhar a versão desktop e deixar para os desenvolvedores "adaptarem responsivamente" o Site, sem um layout / planejamento prévio, coisa que também já vivenciei rs.

Então, a dúvida conceitual / filosófica (além da curiosidade de saber se isso realmente é muito praticado no mercado) seria: é necessário fazer o planejamento / desenho dessas versões, certo? Fazer um site responsivo, não quer dizer apenas desenhar a versão desntop em cima de uma grid de um Bootstrap e fazer as adaptações nas diferentes resoluções com media queries, mas sim planejar visual e tecnicamente nos dispositivos menores.. até mesmo na parte de performance, com uso de imagens otimizadas por exemplo. Como vocês enxergam isso na área atualmente?

Obrigado, abs!!

Bom adendo, Douglas!

Concordo totalmente com vc que precisa ser desenhado em diversas resolucoes. Ou pelo menos definido pelo designer/UXer o que deve acontecer com cada componente em telas menores. Acho muito ruim deixar pro programador final definir isso so na hora da implementacao.

E ai tem 2 questoes que julgo bem importantes:

1) Mobile-first. Criar o desenho mobile antes do desktop facilita muita coisa, tanto na cabeca do designer quanto na hora de implementar, e ate pro dono do produto que vai ser obrigado a priorizar. Aqui a gente tem tentado fazer as criacoes em mobile first desde o wireframe inicial.

2) Designer saber código. Sou muito favoravel ao designer (o do photoshop mesmo) ter uma boa nocao de HTML e CSS, de media queries, de entender o que é responsivo no browser. Isso resolve muita, mas muita coisa. O cara nao precisa ser expert, nem ser quem vai codar efetivamente, mas ele precisa ter nocao das limitacoes do design dele no mundo real (browser). E, no cenario responsivo, ter nocao da dificuldade que são as adaptacoes pra diferentes tipos de dispositivo.