Guia para a criação de um site responsivo: Guia 2024 passo a passo

É provável que o seu website seja a interação inicial para potenciais clientes, clientes ou leitores. O seu website deve aparecer e funcionar perfeitamente em todos os dispositivos, quer se trate de um computador, tablet ou smartphone. É aqui que o design responsivo da Web (DRW) desempenha um papel importante.

O design responsivo possibilita que o seu website se ajuste facilmente a vários tamanhos e resoluções de ecrã, garantindo uma excelente experiência para todos os usuários. O DRW não só reforça a satisfação do usuário, mas também tem um papel crucial na posição dos motores de busca. O facto de não tornar o seu website responsivo pode resultar na perda de tráfego substancial e na perda de oportunidades de conversão.

Ter um website responsivo dá-lhe uma grande vantagem.

• Experiência do utilizador melhorada: Assegura uma experiência de navegação suave em qualquer dispositivo, aumentando a satisfação e o envolvimento.

• Impulso de SEO: Os websites responsivos são preferidos pelos motores de busca, o que pode aumentar a sua visibilidade na pesquisa e conduzir mais tráfego para o seu site.

• A preparação para o futuro garante que o seu website se ajustará sem problemas a novos dispositivos e tamanhos de ecrã à medida que a tecnologia avança.

• Desempenho melhorado: A infraestrutura de alojamento tem de ser optimizada em termos de velocidade, reduzindo o tempo de inatividade para garantir que o seu website funciona sem problemas.

Abordagem centrada nos dispositivos móveis como principal fator de conceção.

No passado, os websites eram criados principalmente para monitores de secretária. No entanto, o aumento da utilização da Internet móvel alterou completamente a situação. Conceber e desenvolver um website com uma abordagem mobile-first implica concentrar-se primeiro nos smartphones e depois melhorar a experiência para tablets e computadores de secretária. É por isso que é importante:

• O fluxo de tráfego nos websites mudou significativamente, uma vez que os dispositivos móveis dominam a maioria dos visitantes em vários sectores. Dar importância à conceção para dispositivos móveis garante que está a satisfazer as necessidades da maioria dos seus potenciais visitantes.

• Ao conceber para ecrãs mais pequenos, a experiência do usuário (UX) exige que se dê prioridade ao conteúdo e à funcionalidade essenciais do website. Este método mais eficiente resulta normalmente numa experiência mais simples e mais fácil de utilizar para todos.

• Preferência pelos motores de busca: O Google e outros motores de busca dão mais importância aos websites que são compatíveis com dispositivos móveis quando apresentam resultados de pesquisa. A adoção de uma estratégia centrada nos dispositivos móveis pode aumentar significativamente a facilidade com que o seu sítio Web é visto.

Configurar a Meta Tag Viewport

Embora possa parecer simples, este pequeno trecho de código no HTML do seu website desempenha um papel vital na instrução dos navegadores sobre como ajustar o seu conteúdo para vários tamanhos de ecrã. Esta é a aparência típica de uma meta tag viewport:

Vamos analisá-la em pormenor:

• A etiqueta com o nome “viewport” diz ao browser para seguir instruções específicas relativamente ao tamanho e à escala da página.

• content=“width=device-width” Ajusta a dimensão da página para corresponder à dimensão do ecrã do dispositivo.

• Define o nível de zoom inicial da página para 100% com initial-scale=1.

A importância da meta tag Viewport

Se não incluir esta tag, os navegadores podem pensar que o seu website se destina a uma largura específica, como um layout de desktop. Isto pode resultar em zoom desconfortável e deslocamento horizontal em dispositivos móveis, diminuindo significativamente a experiência do utilizador.

Grades Fluidas

Nas fases iniciais do desenvolvimento Web, os designs utilizavam normalmente larguras de píxeis fixas para a disposição. Embora fosse eficaz num determinado tamanho de ecrã de computador, a disposição tornava-se desorganizada quando vista em ecrãs mais pequenos ou maiores. Este problema é resolvido pelas grelhas fluidas.

Este é o conceito central:

• Nos layouts de grelha fluida são utilizadas percentagens, e não pixels, em vez de definir as larguras em pixels. Por exemplo, uma coluna pode ser definida para ocupar metade da largura do elemento que a contém.

• O conteúdo ajusta-se: Quando a janela do browser é redimensionada, a largura da coluna adapta-se em conformidade, garantindo que mantém sempre uma parte proporcional do espaço disponível.

• Base da adaptabilidade: As grelhas fluidas oferecem uma estrutura versátil que permite que o seu conteúdo flua sem problemas em vários tamanhos de ecrã.

Vantagens dos layouts fluidas

• Compatível com todos os dispositivos: O seu website aparecerá optimizado, independentemente do dispositivo ou tamanho de ecrã utilizado pelo utilizador.

• Desenvolvimento simplificado: Evite codificação complicada para direcionar larguras de tela específicas.

• Projetado para o futuro: O seu design irá ajustar-se perfeitamente aos futuros tamanhos de ecrã à medida que estes se desenvolvem.

Embora as grelhas fluidas sejam eficazes, o design responsivo contemporâneo exige frequentemente uma maior adaptabilidade.

O modelo CSS Flexible Box (Flexbox) permite uma personalização mais fácil da disposição e do alinhamento dos itens num contentor.

A Flexbox é uma ferramenta de disposição CSS que fornece um método forte e eficaz para organizar itens dentro de uma caixa, mesmo que os tamanhos dos itens sejam incertos ou alteráveis. É especialmente adequada para desafios de design responsivo.

• A flexibilidade inclui alterações à distribuição do espaço num contentor, à direção do fluxo do conteúdo e ao alinhamento e ordem dos elementos.

• A caraterística principal é a capacidade de resposta: Os itens numa Flexbox podem expandir-se ou contrair-se para utilizar o espaço, ideal para ajustar os designs em vários tamanhos de ecrã.

• Resolvendo problemas típicos de layout: Realize facilmente tarefas como alinhar elementos no centro verticalmente, criar colunas de igual altura e reorganizar elementos com apenas uma pequena quantidade de código CSS.

Flexbox em ação: Um exemplo de utilização quotidiana

Imagine uma barra de menu. Deseja que os itens de menu sejam organizados horizontalmente no ambiente de trabalho. Num dispositivo móvel, pode ser preferível tê-los dispostos numa pilha vertical com um ícone de menu “hambúrguer”. O Flexbox gere eficazmente esta transição com uma necessidade mínima de modificações no código.

Disposição em grelha em CSS

A grelha CSS traz um sistema de grelha genuinamente bidimensional para o web design. É a ferramenta perfeita para conceber layouts complexos e organizados e manter um controlo preciso sobre o posicionamento dos elementos na página.

Eis a importância da grelha no Web design responsivo.

Organize os elementos com precisão em células designadas dentro de uma grelha composta por linhas e colunas.

Ajustar a grelha: É possível modificar a disposição das linhas e colunas, ajustar as suas dimensões ou fazer com que os elementos ocupem várias células, dependendo do tamanho do ecrã.

A grelha permite-lhe empilhar elementos uns sobre os outros, aumentando as opções criativas, especialmente em situações em que a capacidade de resposta é importante.

Quando as grelhas fluidas e a Flexbox não são suficientes, a Grelha é muitas vezes a escolha ideal para layouts que requerem um alinhamento ou posicionamento preciso.

Utilização da grelha: Um estudo de caso

Suponha que está a precisar de uma montra de produtos. No ambiente de trabalho, prefere ter quatro produtos dispostos horizontalmente numa linha, enquanto nos dispositivos móveis, muda para dois produtos por linha. A grelha permite-lhe definir a disposição e depois modificar o número de colunas de acordo com o tamanho do ecrã.

Ponto-chave: Embora a grelha CSS seja muito eficaz, é um pouco mais difícil de aprender do que a Flexbox. A Flexbox e as grelhas fluidas são as principais ferramentas para muitos designs responsivos, enquanto a Grelha é utilizada para esquemas precisos ou complexos.

O estabelecimento de pontos em que um processo pode ser interrompido e retomado é conhecido como definição de pontos de paragem.

Os pontos de interrupção responsivos são determinados pontos em que são feitos ajustes à disposição e ao design do website com base no tamanho do ecrã. Estas decisões não são tomadas de forma arbitrária; baseiam-se em informações.

• Pesquise resoluções de ecrã comuns para telemóveis, tablets, computadores portáteis e computadores de secretária para encontrar tamanhos de dispositivos populares. Estes oferecem-lhe conselhos sobre possíveis pontos de intervenção.

• Examine a forma como o seu conteúdo e design se fragmentam ou se tornam pesados em larguras diferentes.

• Estude a forma como os utilizadores interagem com o seu website em vários dispositivos para melhorar a experiência do utilizador.

Uma explicação sobre as estruturas

Várias estruturas CSS utilizam pontos de quebra definidos concebidos para dimensões de ecrã padrão. Isso proporciona facilidade de uso, mas é essencial saber como personalizá-los, se necessário.

Criar consultas multimédia CSS

As consultas multimédia CSS permitem a aplicação de estilos variados de acordo com condições específicas, sendo o tamanho do ecrã o fator principal. Esta é a estrutura fundamental:

Consulta @media destinada a ecrãs com pelo menos 768 pixels de largura.

/* Estilos específicos para ecrãs com uma largura mínima de 768px */

Vamos analisá-la passo a passo:

@media: Indicando uma consulta de mídia.

(min-width: 768px): A situação, neste caso sendo a largura mínima da viewport. É possível utilizar a max-width e integrar funcionalidades como a orientação (paisagem ou retrato).

Os estilos CSS contidos entre parênteses rectos só serão aplicados se a condição especificada for satisfeita.

Imagens que ajustam o seu tamanho e resolução com base no dispositivo e no tamanho do ecrã em que estão a ser visualizadas.

As imagens são frequentemente a principal razão para os websites serem mais lentos, particularmente em dispositivos móveis com ligações à Internet mais lentas. Os métodos de imagem responsiva garantem que os seus gráficos têm um aspeto fantástico e carregam rapidamente em qualquer dispositivo.

O atributo srcset ajuda a otimizar as imagens para diferentes tamanhos de ecrã.

O atributo srcset nos seus elementos HTML é crucial para fornecer imagens de tamanho adequado a vários dispositivos. É assim que ele funciona:

Por favor, reformule a imagem.

src=“photo-grande.jpg” deve permanecer inalterado no texto.

srcset=“photo-pequena.jpg" 480w, photo-média.jpg 800w, photo-grande.jpg 1200w” tem diferentes tamanhos de imagem disponíveis para seleção.

sizes=“(max-width: 768px) 480px, (max-width: 1200px) 800px, 1200px” permanece inalterado.

alt=“Texto que descreve uma imagem” />

Vamos decompor isto:

• Src: Oferece o caminho padrão da imagem, garantindo compatibilidade com versões anteriores.

• srcset: Fornece uma coleção de ficheiros de imagem e as respectivas larguras associadas (descritor w) para casos de utilização específicos.

• Dimensões: Esta parte oferece ao navegador orientação sobre como colocar a imagem dentro do design em vários tamanhos de ecrã, ajudando a selecionar a opção de visualização ideal.

• A magia do navegador: Ao examinar o dispositivo do utilizador, as dimensões do ecrã e as pistas da imagem, o navegador escolhe automaticamente a melhor imagem do conjunto de fontes.

Carregar conteúdo apenas quando é necessário.

O carregamento lento é uma técnica que atrasa o carregamento de imagens que não são imediatamente visíveis na janela de visualização do usuário (ou seja, “abaixo da dobra”). Veja por que isso é importante:

• Carregamento inicial da página mais rápido: O conteúdo crítico do website pode ser carregado mais rapidamente, uma vez que o carregamento da imagem é adiado até à deslocação do usuário;

• Redução do uso de dados: Isto é especialmente benéfico para usuários móveis com planos de dados limitados;

• Potencial de SEO melhorado: Carregamentos de página iniciais mais rápidos podem contribuir para um sinal positivo da experiência do usuário, potencialmente ajudando nas classificações de pesquisa.

Como funciona o carregamento lento

• Placeholders: Em vez de carregar imagens diretamente, podem ser utilizados marcadores de posição de baixa resolução;

• Deteção de JavaScript: O JavaScript escuta a deslocação do usuário;

• Acionador de imagem: Quando um marcador de posição de imagem entra (ou se aproxima) da janela de visualização, seu atributo src é preenchido com o caminho da imagem real, acionando o carregamento.

Considerações sobre o carregamento lento

• Equilíbrio da experiência do utilizador: o carregamento lento é ponderado. As imagens imediatamente necessárias para a compreensão devem ser concluídas a tempo;

• Impacto de SEO: Certifique-se de que os motores de busca ainda conseguem indexar as suas imagens. As técnicas modernas de carregamento lento são geralmente optimizadas para SEO.

Como funciona o carregamento lento

Placeholders: Em vez de carregar imagens diretamente, podem ser utilizados marcadores de posição de baixa resolução.

Deteção de JavaScript: O JavaScript escuta a deslocação do utilizador.
Acionador de imagem: Quando um marcador de posição de imagem entra (ou se aproxima) da janela de visualização, seu atributo src é preenchido com o caminho da imagem real, acionando o carregamento.

Considerações sobre o carregamento lento
Equilíbrio da experiência do utilizador: o carregamento lento é ponderado. As imagens imediatamente necessárias para a compreensão devem ser concluídas a tempo.

Impacto de SEO: Certifique-se de que os motores de busca ainda conseguem indexar as suas imagens. As técnicas modernas de carregamento lento são geralmente optimizadas para SEO.

Opções para carregar conteúdo de forma preguiçosa

• Utilizado em browsers actualizados, o Native Lazy Loading pode ser implementado incluindo o atributo loading=“lazy” nas suas tags.

• Bibliotecas JavaScript: Fornecem maior controlo para implementar funcionalidades únicas.

• Plug-ins/CDNs do WordPress: Muitos plugins, juntamente com CDNs, podem lidar automaticamente com o lazy loading no seu website WordPress.

Menu adaptável

A navegação no seu website funciona como um guia para os visitantes. Quando se utilizam ecrãs mais pequenos, é necessário que o menu se adapte para proporcionar aos utilizadores a melhor experiência possível.

Factores a ter em conta nos dispositivos de ecrã tátil

• Tamanho dos alvos: Certifique-se de que o tamanho das hiperligações ou botões de navegação permite tocar facilmente com um dedo. Tente obter pelo menos 48px por 48px.

• Certifique-se de que existe uma distância suficiente entre as hiperligações para evitar cliques não intencionais nos elementos circundantes.

• Feedback visual: Dê sugestões visuais claras (como a mudança de cor) depois de tocar num item de navegação.

Menus com ícones de hambúrguer

O conhecido menu de hambúrguer é agora uma caraterística comum para a navegação em dispositivos móveis. É assim que funciona em DRW:

• Conservação de espaço: Condensa o menu de navegação num botão, o que abre espaço valioso no ecrã.

• Familiaridade: O símbolo de três linhas é geralmente aceite como representando um menu escondido.

Barras de navegação fora da tela

Os menus fora da tela são menus que deslizam para fora do lado do ecrã, normalmente activados por um botão. É nesta fase que se destacam realmente:

• Espaço extra: Permitem estruturas de navegação maiores ou sub-menus em comparação com o estilo pendente do menu de hambúrguer.

• Personalização: Maior versatilidade em termos de design, colocação (deslizamento para a esquerda/direita) e impactos animados.

Lembrete crucial: Independentemente do estilo de menu que escolher, certifique-se de que existe uma forma simples de o fechar depois de ter sido aberto.

Tipografia adaptável.

A tipografia é crucial para a legibilidade e a estética geral do seu website. À medida que as dimensões do ecrã evoluem, é crucial que o tamanho do texto, o espaçamento entre linhas e outros elementos tipográficos se adaptem sem problemas.

Unidades para especificação do tipo de letra.

Agora, vamos dissecar as medidas que irá utilizar para especificar as dimensões do texto numa definição flexível:

• Pixéis (px): Apesar de serem normalmente utilizados, os pixels são unidades estáticas - não são adequados para a capacidade de resposta, uma vez que não se ajustam aos diferentes tamanhos de ecrã.

• Em: Medida relativa ao atual tamanho da fonte. Se o tamanho do tipo de letra de um elemento principal estiver definido para 16px, 1em será igual a 16px. O cálculo é influenciado pelo aninhamento.

• Rem é uma unidade relativa que é sempre determinada pelo tamanho do tipo de letra de raiz, normalmente estabelecido no elemento, criando uma maior previsibilidade.

• As unidades de vista (vw, vh) equivalem a 1% da largura da vista para 1vw e 1% da altura da vista para 1vh. Estas têm o potencial de produzirem resultados impactantes, mas têm de ser empregues com cautela.

Espaçamento de linha ajustável

A altura da linha refere-se à distância entre as linhas de texto. Manter o tamanho correto em relação ao tamanho do tipo de letra é essencial para a legibilidade.

• Altura da linha sem unidades: Um método frequentemente utilizado é especificar um valor sem unidades (por exemplo, altura da linha: 1,6). Isto calcula um fator do tamanho do tipo de letra existente.

• Manter o fluxo: Modifique o espaçamento entre linhas em vários tamanhos de ecrã para garantir uma experiência de leitura agradável em todos os dispositivos.

Otimização e experiências.

Testar e otimizar minuciosamente o seu site responsivo são os últimos passos cruciais para o elevar de bom a excelente.

Testar a compatibilidade em diferentes navegadores

• As diferenças na renderização dos navegadores podem causar problemas até mesmo nos layouts responsivos mais cuidadosamente projetados. Eis a razão pela qual é essencial:

• Navegadores Web normalmente utilizados: Testar as versões mais recentes do Chrome, Firefox, Edge, Safari e os principais navegadores móveis.

• Reconhecer incompatibilidades: Identificar problemas de layout, problemas de renderização de fontes ou inconsistências no comportamento do JavaScript.

• Ajudas para assistência: Ferramentas e serviços para desenvolvedores de navegadores, como o BrowserStack, simplificam o processo de teste entre navegadores.

Testes em dispositivos reais

• Embora os emuladores de browser tenham a sua utilidade, não há substituto para os testes em dispositivos físicos reais.

• Os simuladores não conseguem imitar com precisão o feedback tátil, as diferenças de ecrã e as potenciais variações de desempenho dos dispositivos móveis e tablets reais.

• Se não puder comprar vários dispositivos por si próprio, considere pedir emprestado a amigos e familiares ou investir em alguns modelos-chave para testar.

Ferramentas para testar a capacidade de resposta

Abaixo estão listadas algumas ferramentas normalmente utilizadas para examinar a capacidade de resposta do seu website:

• O Teste de compatibilidade com dispositivos móveis do Google é a avaliação fundamental. Verifica rapidamente se o Google considera o seu website compatível com dispositivos móveis e identifica quaisquer problemas significativos.

• O Responsinator é uma ferramenta básica que lhe permite ver o aspeto do seu website em diferentes dispositivos populares, simulando os respectivos ecrãs. É perfeita para uma breve inspeção visual.

• As ferramentas de desenvolvimento do navegador, como as que se encontram no Chrome e no Firefox, incluem modos de design reativo e emuladores de dispositivos para testes completos.

• Outros factores a ter em conta nos testes.

Certifique-se de que observa o funcionamento do scroll em dispositivos tácteis e verifique se os componentes interactivos, como formulários e botões, funcionam sem problemas.

Teste o desempenho das suas técnicas de otimização de imagens e de lazy loading em ligações mais lentas, verificando o carregamento de imagens.

Métricas de desempenho: Utilize ferramentas como o Lighthouse ou o WebPageTest para obter avaliações de desempenho completas e identificar possíveis obstáculos.

Considerações sobre acessibilidade

A verdadeira capacidade de resposta vai para além das dimensões físicas do ecrã. Considere as necessidades de acessibilidade dos utilizadores com deficiência na sua conceção.

• O HTML semântico implica a utilização de etiquetas de título adequadas, incluindo texto alternativo descritivo, e outros elementos.

• Um contraste de cores adequado é importante para garantir a legibilidade para os utilizadores com deficiências visuais.

• Testar a capacidade de navegação do website utilizando apenas um teclado.

• Os testes com um leitor de ecrã podem ajudá-lo a ver o seu website de um novo ponto de vista.

Ao utilizar estas tácticas de teste e ao ter em conta a acessibilidade, estará no bom caminho para proporcionar uma experiência de resposta excecional a todos os utilizadores!

Melhoria progressiva

O conceito fundamental de melhoria progressiva é garantir que o conteúdo e as funcionalidades fundamentais do seu website podem ser acedidos por todos os utilizadores, independentemente das capacidades do seu dispositivo ou navegador, e depois adicionar melhorias como funcionalidades suportadas. É assim que está ligado ao Web design responsivo:

• Dar prioridade aos dispositivos móveis, mas também acomodar todas as outras plataformas, concebendo primeiro para o tamanho de ecrã mais pequeno e funcionalidades mais simples, antes de expandir para ecrãs maiores e funcionalidades mais avançadas.

• Base sólida: A sua base deve ser suficientemente sólida para funcionar em browsers desactualizados, garantindo a inclusão de todos os utilizadores.

• O JavaScript é normalmente utilizado para implementar funcionalidades e interações responsivas complexas, ao mesmo tempo que lida eficazmente com cenários em que o JavaScript não é suportado.

Erros normalmente cometidos no design responsivo e como corrigi-los.

Vamos apontar alguns erros que devem ser evitados:

• A negligência de imagens deve ser sempre evitada através da otimização de imagens e da implementação de técnicas responsivas como o srcset.

• Assegurar que os elementos interactivos são facilmente tocáveis no telemóvel para evitar problemas com os alvos de toque.

• Negligenciar a modificação do tamanho dos tipos de letra e da altura das linhas em diferentes tamanhos de ecrã resulta em problemas de legibilidade da tipografia.

• Os layouts de largura fixa devem ser evitados, uma vez que podem impedir o refluxo adequado em ecrãs mais pequenos.

Perspectivas futuras para a conceção responsiva da Web

Seguem-se algumas tendências a que vale a pena estar atento:

• Capacidades CSS melhoradas: Funções como as consultas de contentores podem proporcionar uma precisão ainda maior no controlo de layouts.

• Design alimentado por IA: A tecnologia de IA pode recomendar melhorias para a capacidade de resposta ou ajudar na codificação.

• Os princípios do Web design responsivo serão aplicados a wearables, ecrãs inteligentes e experiências de realidade aumentada/virtual, indo além dos ecrãs tradicionais.

• Screenfly

Serviço em língua inglesa, anteriormente propriedade da QuirkTools, pertence agora à Blue Tree. Existem mais de 30 modelos diferentes de smartphones, tablets, PCs e televisores disponíveis. Tem a possibilidade de rodar os ecrãs, impedir o scrolling e estabelecer tamanhos personalizados. Parece que o serviço não está preocupado com a proibição de visualização remota mencionada anteriormente. É conveniente partilhar uma ligação para verificação imediata da adaptabilidade.

• ViewPort Resizer for Google Chrome

O redimensionador de janela é uma ferramenta online no browser que pode ser utilizada para avaliar a capacidade de resposta de qualquer website. Basta guardar o bookmarklet, navegar para a página pretendida, clicar no bookmarklet e ver a página em várias resoluções de ecrã.
Solução gratuita.

• Browserling

Testar a adaptabilidade com um serviço em inglês. A principal diferença é o teste exaustivo em vários navegadores e plataformas.
Seleção do sistema operativo e do navegador Web. Existem vários browsers e versões disponíveis, mas, infelizmente, o iOS não está incluído na lista de sistemas operativos.
A avaliação gratuita está limitada a apenas 3 minutos.
É possível aceder ao website sem custos utilizando apenas o Internet Explorer 11, Windows 7 e uma resolução de ecrã de 1024×768. Para desbloquear todas as funcionalidades, é necessário efetuar uma subscrição a partir de 19 dólares por mês.

Neste artigo, examinámos os princípios básicos do Web design responsivo, as estratégias para melhorar o seu conteúdo para diferentes dispositivos e a importância de testes abrangentes. Vamos resumir os pontos principais.

O design responsivo é essencial: oferece a melhor experiência de utilizador em qualquer dispositivo, melhorando a satisfação do utilizador e aumentando as suas oportunidades de SEO.

Centrar-se no utilizador: Imagine-se na perspetiva dos seus utilizadores móveis. Dê importância ao conteúdo, à clareza e à facilidade de navegação em ecrãs mais pequenos.

O desempenho é importante: O design responsivo e a otimização estão intimamente relacionados. Um website atraente retém os seus utilizadores graças ao seu tempo de carregamento rápido.

Utilize ferramentas, dispositivos reais e avaliações de acessibilidade para garantir que o seu website responsivo se adapta a todos os utilizadores.

A nossa equipa do Studio.351 cria websites responsivos que se apresentam perfeitamente em todos os dispositivos. Contacte-nos e oferecemos-lhe a melhor solução.