O motivo pelo qual uma nova web responsiva está surgindo

As interfaces de usuário são desenvolvidas com base no que há de mais moderno na tecnologia web e nesse fluxo, novas APIs surgem com a promessa de aumentar a capacidade de resolver problemas antigos, incluir cobertura para novas preferências do usuário e tudo isso agilizando o trabalho de quem trabalha com o frontend.

source: https://web.dev/new-responsive/ (Una Kravets)

O cenário atual para o Design Responsivo

Para entender melhor nada mais justo do que entender como as coisas são feitas atualmente (na perspectiva do desenvolvedor). Bem, estamos em 2022 e uma pesquisa ordinária no Google sobre "como se faz um design responsivo" [ 3 ] tem como principais tópicos [ 1 ]:

Adicione meta tags responsivas em seu documento HTML. Aplique media queries ao seu layout. Torne as imagens e vídeos responsivos e, finalmente, garanta que sua tipografia seja facilmente legível em dispositivos móveis.

Agora, na própria Mozilla [ 2 ], que inclusive você pode considerar como uma fonte extremamente confiável para se aprofundar nesse e em outros assuntos, temos que o termo Design Responsivo (Ethan Marcotte in 2010) descreve o uso de três técnicas combinadas:

Os grids fluídos (veja Gillenwater para a referência original) — pode ser lido em Fluid Grids (publicado em 2009, A List Apart).

As imagens fluídas —permite que uma imagem seja reduzida para caber em uma coluna de tamanho flexível, evitando que fique destorcida ou pixelizada se a coluna se tornar mais larga que a imagem.

A media query (veja Cameron Adams para mais informações) — permite que diferentes tipos de layout estejam disponíveis usando somente CSS.

Mas queremos uma busca ainda mais apurada por conteúdo publicado ou editado em menos de um ano. Sendo assim, é possível encontrar um artigo da web.dev (Google Developers)[ 3 ] (Una Kravets) que dedica uma pequena introdução ao que significa utilizar o termo desgin responsivo além de nos dar uma cuidadosa visão de como as coisas estão hoje.

Hoje, ao usar o termo: “design responsivo”, você provavelmente está pensando em usar media queries para alterar o layout ao redimensionar um design do tamanho do celular para o tamanho do tablet e para o tamanho da área de trabalho. Mas logo, essa percepção de design responsivo pode ser considerada tão ultrapassada quanto usar tabelas para layout de página.

Bem, então a web responsiva se trata do uso combinado de tecnologias que fazem uso moderno de CSS e HTML, criando elementos elegantes e designs úteis para nosso usuário final, independente do dispositivo que esteja sendo utilizado.

Mas se a tecnologia está estabilizada e é considerada moderna, do que se tratam as novidades ? Bem, a resposta clássica pode vir do eterno ciclo que existe para minizar o esforço que as tecnologias demandam para que suas habilidades continuem atentendo novos dispositivos e outras necessidades.

Nessa linha, dependendo da sua experiência com engenharia de software o termo Design System pode soar estranho e não esteja tão presente no seu dia-a-dia. No entanto, mesmo não sendo o objetivo primordial do seu trabalho, acaba sendo importante por muitas vezes mesmo que sutilmente em tomadas de decisão de interesse direto de negócios.

Logo, tome como exemplo o Design System da própria Google, mais conhecido como Material [ 4 ], que é a fundação para desenvolvimento da melhor experiência para usuários de produtos da própria Google.

Material é um design system criado pelo Google para ajudar as equipes a criar experiências digitais de alta qualidade para Android, iOS, Flutter e a Web.

Bem, nesse ponto as coisas devem estar um pouco melhor relacionadas. Temos em um lado a prática de basear decisões e implementações no que as APIs atuais (veja Viewport [5] para mais) nos ofecerem e no outro lado a contínua evolução de dispositivos e das próprias decisões de negócio.

Daí, surgem os termos Component-based e Page-based que fazem parte de discussões para diferentes abordagens de desenvolvimento. Descobre-se que as APIs possuem limitações que, como colocadas pela própria Una Kravets, tornam cada vez mais difícil de extrair o melhor do que elas se propõem a oferecer.

Logo, você pode imaginar que tais questões afetam tecnicamente a escolha entre as abordagens de desenvolvimento (Component-based e Page-based), afetando também o desempenho nos negócios ao final pois é de interesse geral (ou deveria ser) que produtos continuem atentendo novos dispositivos e outras tecnologias.

Conclusão

Desde que o termo Design Responsivo foi cunhado por Ethan Marcotte em 2010 foi possível ver inúmeros avanços que em alguns aspectos foram determinados pelas necessidades que usuários passam a ter a medida que novos dispositivos são introduzidos na rotina.

Como muitas coisas na tecnologia, as APIs atuais são modernas, funcionais mas carentes de muita delicadeza. Estamos entrando em um mundo onde se desenvolvem micro e macro layouts e as APIs atuais não têm a capacidade (esperada) de responder às novas necessidades exigidas pelos componentes.

Links úteis e tutoriais

Visite https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design para aprender sobre as técnicas atuais de design responsivo (Refência em 2022)

web.dev — The new responsive: Web design in a component-driven world

Referências

[ 1 ] How to Make a Responsive Website in 3 Easy Steps (catswhocode.com) (may contain banners)

[ 2 ] Responsive design (developer.mozilla.org/)

[ 3 ] web.dev — The new responsive: Web design in a component-driven world

[ 4 ] Material — Design System da Google

[ 5 ] Viewport API — https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API#interfaces

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store