Olá, aluno(a)! Nesta aula, você aprofundará os seus conhecimentos sobre web design responsivo e entenderá o que são layouts responsivos. A primeira coisa que se pensa quando se fala desses termos é que tudo aparecerá em qualquer tamanho de tela, o que não está completamente errado. A questão, segundo Silva (2014), Web Design Responsivo vai muito além disso, pois o conceito de design responsivo, na sua forma ampla, deve ser entendido como o design capaz de “responder” às características do dispositivo ao qual ele serve. 

O fato interessante desta aula é que você compreenderá a diferença entre design e layout.  Design é o conceito criado, muitas vezes, fora da área de programação, enquanto layout é propriamente o código implementado daquele design, às vezes, também chamado de template.

Sendo assim, o objetivo desta aula é trazer até você os principais conceitos de designs e layouts responsivos bem como os gatilhos os quais desencadeiam a necessidade de aplicação. Você também compreenderá as particularidades para a criação de bons aplicativos. Neles, o usuário tem uma interface com todas as informações necessárias à sua utilização.

Antes, o(a) desenvolvedor(a) criava o seu site em tamanho padrão, ou seja, estou querendo dizer: altura e largura das imagens a serem exibidas, tamanho de fontes, seções do site. Por exemplo: uma coluna pequena na esquerda, o conteúdo no meio e uma coluna à direita do tamanho da coluna à esquerda. Tudo feito por meio de medidas fixas, uma coluna com X de largura e Y de altura.

Mas qual era o problema dessa estratégia? Com a pouca disponibilidade nos tamanhos e resoluções de telas, não era necessário dar tanto atenção a essas características, então, o tamanho fixo era projetado para as resoluções mais utilizadas, o que fazia o site ser exibido, nestas resoluções, no seu tamanho ideal. Para as resoluções maiores, a página ficava um pouco menor, tendo os espaços em branco das laterais aumentados e o conteúdo centralizado com a exibição menor. O mesmo para resoluções bem menores do que aquelas mais utilizadas: a página era exibida como fosse maior, de forma que barras de rolagem horizontais eram mostradas, ou seja, você não conseguia ver o site inteiro de uma lateral a outra sem utilizar a barra de rolagem, o que prejudica a experiência do usuário.

Como você pode ter concluído, o problema aumentou com o surgimento dos smartphones, pois, o que era uma pequena diferença no tamanho passou a ser um grande abismo para uma simples visualização. Sendo assim, a solução a esse problema estava em definir tamanhos dinâmicos de acordo com a resolução do dispositivo e as seções do site e/ou as imagens e menus que apareciam ou não de acordo com a resolução, melhorando a experiência do usuário tanto em desktops e notebooks quanto em smartphones pequenos ou grandes.

Hoje, apresentarei a você um case real, no qual será possível avaliar um site no quesito responsividade (nome dado ao site, sistema responsivo). 

Você deverá acessar o site do Governo Estadual do Paraná, disponível em (https://www.parana.pr.gov.br/). De cara, já perceberá que é um site com muitas informações e uma divisão de conteúdos bem interessante, o que nos garante boa experiência como usuários.

Sobre a responsividade, você deverá seguir estes passos: primeiro, ao visualizar o site no navegador web de sua preferência, pressione a tecla f12 de seu teclado. Surgirá, possivelmente, na parte inferior do navegador, uma série de informações sobre o site, essa tela que aparecerá costuma ser chamada de DEV Tools (“ferramenta de desenvolvimento” em português). Uma vez essa tela apresentada, você poderá perceber que uma das primeiras opções dela, no canto esquerdo superior ou no canto direito superior, é um ícone representando um smartphone nas duas orientações: em pé e deitado. Você clicará nesse ícone e verá que a exibição do site mudará um pouco. Observe a Figura 1:

Uma vez que esse ícone é selecionado, você poderá alterar a largura de exibição do site e visualizar, a cada tamanho, como o site é exibido. Você também poderá validar a exibição dele para alguns modelos específicos de smartphone, o que torna a experiência mais interessante. Veja a Figura 2:

Como você pôde constatar, o site analisado é um ótimo exemplo de case de site responsivo, sendo apresentado tanto para grandes resoluções quanto para os smartphones.

Agora que você entendeu como design e layouts responsivos são indispensáveis ao desenvolvimento não só de sites e sistemas, mas, principalmente, na criação de aplicativos, por meio da plataforma de desenvolvimento híbrida que utiliza HTML5, CSS3 e a linguagem de programação JavaScript, apresentarei todo o conceito necessário para que você consiga transferir essa teoria a seus aplicativos.

Você precisa saber que, em algum ponto da história dos layouts de sites, se havia apenas duas opções para criar um site e/ou um sistema web: criar um site líquido, o qual se estenderia com o objetivo de preencher a janela do navegador de qualquer maneira, ou um site de largura fixa, o qual, independentemente da tela do usuário, teria um tamanho fixo em pixels; uma das medidas utilizadas no front end (MDN WEB DOCS, [2023a], on-line).

Com o passar do tempo, houve a evolução dos dispositivos móveis, então, o que, antes, era acessado somente do computador, passou a ser acessado, também, de outros aparelhos, por exemplo, o celular. Entretanto, para que isso fosse possível, era necessário criar uma versão mobile do site, ou seja, tínhamos duas versões separadas de uma mesma página: uma para acessar pelo computador, outra para acessar pelo celular. Os layouts desses sites eram diferentes, pois, na versão mobile, a experiência era mais restrita, motivo pelo qual era necessário, também, ter duas versões ao acesso.

Como a evolução dos dispositivos móveis não parou, com o passar do tempo, os aparelhos se tornaram cada vez mais eficientes. É exatamente neste momento que várias abordagens foram desenvolvidas com o intuito de fazer um mesmo design se adaptar a diferentes padrões de tela (MDN WEB DOCS, [2023a], on-line). 

Silva (2014, p. 36) diz que: "O design responsivo ou layout responsivo expande e contrai com a finalidade de se acomodar de maneira usável e acessível à área onde é visualizado ou, mais genericamente, ao contexto onde é renderizado, seja um smartphone, um tablet, um desktop, um leitor de tela, um mecanismo de busca etc".

O que você precisa entender ao desenvolver um design responsivo para o seu aplicativo híbrido? Segundo Silva (2014), existem três tecnologias fundamentais nesse processo: grid fluído; imagens e mídias flexíveis; media queries. Veremos, detalhadamente, cada uma dessas tecnologias, a seguir. 

Grid fluído

Antes de falar sobre grid fluído, você sabe o que seria um grid? Segundo MDN Web Docs ([2022b], on-line), é uma malha formada pela interseção de dois conjuntos: um de linhas horizontais e outro de linhas verticais. A responsabilidade pela definição de linhas é de um conjunto, e a definição de colunas é de outro.

Sendo assim, grid fluído é a seguinte estratégia: ao definir as medidas de grid ou layout do aplicativo por meio do CSS, sempre as definir utilizando unidades relativas, como porcentagens.

Ainda segundo MDN web docs ([2022a], on-line), com o uso de um grid flexível ou fluído, não há necessidade de adicionar um breakpoint e alterar o design no ponto onde o conteúdo começa a aparecer ruim em determinada tela.

Imagens e mídias flexíveis 

Quando se fala em imagens e mídias flexíveis, é importante ressaltar que são aquelas capazes de contrair e expandir as suas dimensões ou ter essas dimensões alteradas por scripts em função do contexto onde são renderizadas (SILVA, 2014). 

Para você ter uma ideia mais prática do que seria as mídias das quais estou falando, as mais comuns são: vídeos, áudios e widgets em geral e, assim como o grid fluído, a estratégia é sempre utilizar as dimensões desses componentes por meio de unidades relativas. Na Figura 3, você tem um layout responsivo sendo renderizado em proporções de resolução de um notebook ou desktop.

Já na Figura 4, você terá o resultado do mesmo site, porém acessado via algum dispositivo móvel, aqui, simulado pelo navegador por meio da ferramenta Dev Tools.

Media queries

O conceito de media queries é uma tecnologia CSS que permite ao autor servir folhas de estilos (CSS) baseadas em determinadas características do dispositivo para o qual o layout servirá, por exemplo, a resolução de tela etc.

É válido ressaltar que o design responsivo como um todo, segundo MDN Web Docs ([2022a], on-line), apenas foi capaz de aparecer para o mercado devido ao recurso de media query. Elas, as medias queries, nos permitem executar uma série de testes e aplicar um CSS, seletivamente, para estilizar a página de acordo com as necessidades do usuário.

Pilares do design web responsivo

Como já mencionado, para construir layouts e designs responsivos, se faz necessária a utilização de três tecnologias: HTML5, JavaScript para compatibilidades e CSS3. 

Quando você utiliza o HTML5 no desenvolvimento web, de forma geral, consegue, dentre outras vantagens e facilidades, desenvolver um código mais semântico, mais bem estruturado, o que facilita a manutenção posterior e a sua leitura; consegue trabalhar melhor as questões de acessibilidade e, também, tem melhores benefícios para SEO (Search Engine Optimization, em português, Otimização para Mecanismos de Busca). 

O que quero te dizer é: o uso do JavaScript para compatibilidade tem a ver com a utilização de navegadores mais antigos e/ou desatualizados, uma vez que você pode estar trabalhando com um aplicativo webview (vide Lição 5).

Finalizando a questão das três tecnologias, temos o CSS3, que teve muito avanço com relação à sua versão anterior, com seus diferentes módulos que criaram funcionalidades de estilização os quais, além do forte impacto visual, chegaram para facilitar as tarefas antes complexas, como as bordas arredondadas de componentes e sombras.

Como você pôde conhecer na aula de hoje, a questão da responsividade de sites, sistemas web e em aplicativos móveis híbridos já não é mais uma decoração ou algo mais que o(a) desenvolvedor(a) aplica e sim algo primordial a uma boa experiência do usuário na utilização de seus produtos.

É importante para a aplicação desse conceito em seu aplicativo que você defina como será o layout, até mesmo em uma folha de papel A4 usando lápis ou outras ferramentas de wireframe (esboço do site usando apenas desenhos, não sendo funcional). Esse esboço deverá contemplar o layout de forma fluída, como você conheceu na aula de hoje e, também, quais os componentes e/ou seções do aplicativo aparecerão e de que forma em resoluções maiores e resoluções menores e, principalmente, com orientação de tela diferentes.

Com esse pensamento e acrescido dos grids fluídos (vide aula sobre Flexbox), imagens e mídias flexíveis e, também, as medias queries para tratar das resoluções e tamanhos de tela, você estará bem servido(a) de ferramentas para atuar como um ótimo desenvolvedor(a) de aplicativos híbridos por meio das tecnologias HTML5, CSS3 e JavaScript.