Conceito de Site Responsivo

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.

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.