Vamos mergulhar no oceano profundo da Internet e ver como os sites evoluíram ao longo do tempo.
Primeiros dias da Internet
Lembra dos primeiros dias da internet, quando qualquer site parecia ótimo? Conseguir um lugar na internet para que o mundo inteiro pudesse ver seu conteúdo teria sido a melhor sensação.
A boa notícia para os designers é que eles sabiam muito bem a aparência de seus sites. Havia apenas desktops e quase todos eles tinham a mesma resolução e proporção de aspecto. Isso significava que os designers precisavam colocar as coisas em qualquer lugar da tela, sem se preocupar com outros tamanhos de tela.
Você pode ter visto sites antigos ainda usando seu design antigo ou forçando você a usar um navegador de desktop. Redesenhar um site existente para funcionar em todos os tamanhos de tela é uma tarefa difícil.
A vida antes do CSS
A maioria das pessoas deseja começar a fazer as coisas começarem com a web. E HTML é a linguagem da web.
Em termos mais básicos, todos os elementos HTML são caixas retangulares empilhadas umas sobre as outras por padrão. Não há muito que você possa fazer apenas com caixas que contêm texto e talvez imagens.
Portanto, o HTML permitiu alguma personalização, fornecendo certos atributos e algumas tags especiais. Mas, um artista nunca deve ser limitado por ferramentas, nem os web designers. Ainda assim, não havia uma forma estruturada e uniforme de estilizar os elementos.
As tags HTML mais básicas eram tudo o que podíamos usar. Eles incluíram tags h1 a h6, tags de imagem, listas, tabelas, parágrafos e muitas tags até mesmo para as coisas mais básicas (que agora são feitas usando CSS). Uma página HTML básica seria assim:
<html><head> <title>FreeCodeCamp</title> </head><body> <h1>FreeCodeCamp</h1> <img src="https://www.freecodecamp.org/news/history-of-responsive-web-design/logo.jpg" height="150" width="150" align="right"> <p>Text goes here</p> <p>Text goes here</p></body></html>
Todas essas tags ainda existem hoje, embora algumas delas tenham sido descontinuadas no HTML5 por serem muito básicas. Por exemplo, havia um <marquee> tag, uma tag para criar texto deslizante, imagens e outros elementos HTML.
O mesmo efeito agora pode ser facilmente criado usando apenas CSS. Mas, naquela época, eles tinham que criar tags separadas para cada funcionalidade. (Fato engraçado: Google ‘Marquee tag’ para vê-la em vigor.)
Assim, os designers precisavam de uma forma estruturada de estilizar os elementos. Ele precisava ser flexível e totalmente personalizável.
Isso levou à criação de Cascading Style Sheets (CSS), uma forma padrão de estilizar elementos HTML.
Folhas de estilo em cascata ou CSS é uma forma de estilizar qualquer elemento HTML. Eles possuem um conjunto de propriedades pré-definidas que podem ser aplicadas a qualquer elemento HTML. Este estilo pode ser incorporado na mesma página HTML ou usado como um arquivo .css externo
Foi um marco importante no web design. Agora os designers tinham a opção de alterar todas as propriedades dos elementos HTML e colocá-los onde desejassem.
Quando as telas começaram a diminuir
Agora que os designers tinham controle total sobre a página da Web, eles precisavam ter certeza de que ela tinha uma boa aparência em todos os tamanhos de tela.
Os desktops ainda são populares hoje, mas a maioria das pessoas também usa dispositivos móveis portáteis para navegar na web. Agora, os designers têm menos largura, mas uma altura mais utilizável, pois a rolagem é muito conveniente em dispositivos com tela de toque em comparação com desktops.
Os sites agora tinham que incorporar Web design responsivo:
O design responsivo da web é uma abordagem ao design da web que faz as páginas da web renderizarem bem em uma variedade de dispositivos e tamanhos de janela ou tela.
A maneira mais comum de lidar com telas menores é Barra Lateral. Uma barra lateral é como uma gaveta onde os links e outras coisas não tão importantes são mantidos. Os designers apenas transferem todo o material secundário para a barra lateral para que a página da web pareça limpa.
No entanto, este é um método usado em demasia e as barras laterais não foram originalmente concebidas para este fim.
Antes dessa tendência, o <frameset> e <frame> as tags eram muito populares, pois permitiam que os designers incorporassem páginas da web externas.
Mas ao contrário do agora popular <iframe> tags, essas tags eram altamente sem resposta. Isso porque eles não se adaptaram a diferentes tamanhos de tela e tentaram manter seu layout mesmo em telas menores, que pareciam terríveis.
<frameset rows="100,*"> <frame src="https://www.freecodecamp.org/news/history-of-responsive-web-design/header.html"/> <frameset cols="33%,33%,*">Nested frameset <frame src="subframe1.html"/> <frame src="subframe2.html"/> <frame src="subframe3.html"/> </frameset></frameset>A saída pareceria perfeitamente boa em desktops, mas falhou em dispositivos móveis.
Transição para Design Responsivo
Os antigos e enormes sites com milhares de páginas se depararam com um dilema: ser responsivo ou não ser.
Qualquer web designer sabe que ter que fazer a transição de uma tela maior para uma menor é o pior. Sua tela está ficando menor, enquanto a pintura permanece a mesma. Você exclui algumas partes de sua pintura ou faz com que ela se adapte.
Como não havia diretrizes para ser responsivo naquela época, os web designers costumavam usar maneiras ingênuas de colocar elementos em várias partes da tela.
Por exemplo, usando <table> Tag.
Usar uma tag de tabela para um layout era uma prática ruim por vários motivos, como:
- As tabelas não são destinadas a layouts. Eles são para mostrar dados tabulares de uma forma compacta.
- As tags de tabela, assim como as tags de frameset, não respondem e não se adaptam a tamanhos de tela menores.
- A tabela não pode ser renderizada até que todas as células sejam carregadas, enquanto o uso de tags div para um layout permite que sejam carregadas independentemente.
Estudo de caso de alguns sites grandes
Vamos ver como alguns grandes sites lidaram com esse dilema. Vamos levar Youtube, por exemplo.
Você provavelmente já viu a versão desktop do YouTube. Está cheio de coisas – um cabeçalho no topo, uma barra lateral à esquerda, vídeos empilhados uns em torno dos outros e um rodapé. Agora, a maioria dessas coisas são totalmente desnecessárias para usuários móveis, pois eles não podem utilizá-las adequadamente.
O YouTube pode ter escolhido um design responsivo, mas isso significaria esconder esses elementos extras em algum lugar.
Qualquer pessoa que criou um site sabe a importância do desempenho do site. Cada coisa que você coloca em uma página a retarda. Portanto, no caso do YouTube, seria um desperdício buscá-los no servidor apenas para ocultá-los.
E o YouTube é antigo, assim como seu design. Modificar o código já escrito tem uma grande chance de quebrar coisas que já estão funcionando. Em vez disso, o YouTube usou o que é conhecido como Serviço Dinâmico.
O Dynamic Serving é um método em que o servidor verifica se o dispositivo que está solicitando a página da web é um desktop ou um celular. Em seguida, ele veicula dinamicamente a página da Web, dependendo do tipo de dispositivo.
Esse método é fácil de implementar, pois os designers não precisam lidar com tamanhos de tela diferentes. Mas também costuma ser desencorajado porque, se não for configurado corretamente, pode devastar o SEO devido a problemas de conteúdo duplicado.
Essas versões para celular costumam ser veiculadas por meio de um subdomínio diferente, como m.
Este método foi usado pelo Facebook, Wikipedia e outros grandes sites, por razões semelhantes. O Responsive Web Design é uma solução ideal e difícil de implementar.
Alguns outros sites decidiram não ser responsivos, mas sim construir um aplicativo móvel. Essa foi uma abordagem razoável, considerando que os aplicativos móveis eram à prova de futuro. Mas a instalação de um aplicativo móvel exigia algum nível de confiança, pois eles tinham muito mais acesso do que os aplicativos da web.
Além disso, o problema com os aplicativos móveis nativos era que eles eram caros de fazer, pois tinham que ser construídos para várias plataformas com exatamente o mesmo design e funcionalidade. A web é uma plataforma bastante madura e, portanto, tem um escopo maior do que os aplicativos móveis.
Estratégia de Web Design Responsivo
Esses eram os problemas enfrentados por sites que já existiam. Para novos sites, o design responsivo se tornou uma obrigação para competir com outros sites.
O Google também introduziu recentemente indexação mobile-first o que significa que ele prefere sites mobile-friendly em busca em aparelhos mobile, criando mais um motivo para se adaptar.
Abordagem mobile-first
Suponha que você tenha uma mala com algumas coisas dentro. seria mais fácil transferir coisas de uma mala menor para uma maior, ou de uma maior para uma menor?
Na abordagem mobile-first, o site é feito para ser compatível primeiro com o mobile, e então ver como as coisas mudam ao fazer a transição para uma tela maior.
Um equívoco em torno dessa abordagem é que as pessoas pensam que é apenas para dispositivos móveis. Mas isso não é correto – priorizar os dispositivos móveis não significa projetar apenas para dispositivos móveis. É apenas uma abordagem segura e fácil para começar.
Como o espaço disponível na tela do celular é muito menor em comparação com a de um desktop, ele deve ser usado para conteúdo central.
Além disso, os usuários móveis mudam de página com muito mais frequência, por isso é importante chamar a atenção deles imediatamente. Como há menos elementos na página e o foco é colocado mais no conteúdo, isso resulta em uma página da web mais limpa.
O Futuro do Web Design
A web está crescendo a um ritmo incrível. As pessoas estão mudando seus negócios online e a concorrência está mais acirrada do que antes.
Também há uma discussão sobre se as empresas realmente precisam mais de um aplicativo móvel. Com crescimento de Progressive Web Apps (PWAs) e várias APIs da web, a web é muito mais poderosa do que antes. E a maioria dos recursos nativos, como notificações, localização, cache e compatibilidade offline agora são possíveis com PWAs.
Um aplicativo da web progressivo é um tipo de software de aplicativo distribuído pela web, desenvolvido com tecnologias comuns da web, incluindo HTML, CSS e JavaScript.
O processo de fazer um PWA é muito simples, mas está além do escopo e da ideia central deste artigo. Vamos nos concentrar mais no que estamos obtendo com os PWAs.
Você deve ter notado o botão “Adicionar à tela inicial” no navegador Chrome acima. Para sites normais, nada mais é do que um ícone de atalho na tela inicial. Mas se o site for um PWA, você pode fazer muitas coisas muito legais.
Você não precisa instalar um aplicativo da web para que funcione como um PWA, mas isso o faz parecer mais um aplicativo nativo. Além disso, um PWA pode ser executado como um aplicativo da web independente sem a barra de endereço do Chrome na parte superior. Mais uma vez, isso dá uma sensação mais parecida com um aplicativo.
Os PWAs também funcionam em desktops, o que os torna candidatos perfeitos para qualquer novo aplicativo. Eles podem ser executados em qualquer plataforma que tenha um navegador da web, são seguros e têm todos os recursos nativos básicos.
Mesmo assim, muitos recursos ainda não instalados ou disponíveis podem representar uma ameaça à segurança, pois abrir um site é considerado muito mais seguro do que instalar um aplicativo. Portanto, alguns recursos altamente nativos ainda exigem um aplicativo nativo.
Só para ficar claro: os PWAs não substituem os aplicativos nativos. Os aplicativos nativos continuarão existindo. Os PWAs são apenas uma maneira mais simples de obter esses recursos sem realmente criar um aplicativo móvel.
Predizendo o futuro da web
Como vimos, a tecnologia continua a melhorar e a Internet continua a se tornar mais acessível à medida que o número de usuários cresce exponencialmente.
A mudança nas tendências de design da web se inclina mais para o desempenho e a experiência do usuário. E continuará a fazê-lo.
Também estamos caminhando para Web 3.0:
A Web 3.0 é a próxima geração de tecnologia da Internet que depende fortemente do uso de aprendizado de máquina e inteligência artificial (IA). Seu objetivo é criar sites e aplicativos da web mais abertos, conectados e inteligentes, que se concentram no uso de uma compreensão de dados baseada em máquina.
Isso significa que tudo estará conectado e as máquinas usarão a internet também. Será semelhante a como os rastreadores da web rastreiam sites e entendem o contexto da página.
Um web design bom, limpo e mínimo com mais foco no conteúdo ajudará as máquinas a entender melhor as coisas. A internet é um lugar aberto e com muita inovação. Podemos estar caminhando em direção a uma rede controlada pela mente!
Conclusão
Começamos do início da Internet e vimos como as tecnologias populares se tornaram obsoletas. Ainda estamos caminhando para uma internet melhor.
Não estamos mais na era em que os desenvolvedores não se preocupam com os usuários. A experiência do usuário é uma prioridade hoje em dia, seja ela performance ou design, o usuário deve se sentir satisfeito com qualquer aplicação.
E, ao contrário dos velhos tempos, não estamos limitados a nenhuma ferramenta. Somos livres para usar nossa própria criatividade, e cabe a nós transformar nossas criações em algo valioso.
A web é um lugar maravilhoso e existem muitos sites excelentes para se inspirar. Vamos manter nossos dedos cruzados e seguir em frente.
Espero que você tenha gostado do meu primeiro artigo. Eu convido você para minha casa de internet theabbie.github.io onde guardo tudo. Obrigado por ler.
