Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

O atual estado do Web Design Responsivo

by
Length:MediumLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Com o caminhar de 2015, não tem tempo melhor para falarmos sobre qual o rumo e o estado atual do web design responsivo.

Vamos analisar tudo que sabemos sobre web design responsivo, ou RWD (sigla em inglês para Responsive Web Design), o que foi deixado de lado, as novidades que podemos utilizar hoje e o que ainda está por vir.

Primeiro, a história

Antes de começarmos, vamos primeiro definir o que de fato significa "Web Design Responsivo".

Quando Ethan Marcotte originalmente cunhou o termo, cinco anos atrás em um artigo no A List Apart, ele citou grids fluidas, imagens flexíveis, e media queries como os três "ingredientes técnicos" que compõem o RWD.

Accompanying illustration by Kevin Cornell
A ilustração imortal de Kevin Cornell

De qualquer forma, ele imediatamente qualificou essas especificações dizendo:

"...mas isso também requer uma maneira diferente de pensar."

Desde o artigo de 2010 vemos uma evolução continua na tecnologia que as pessoas utilizam para acessar a internet, assim como emergiram soluções técnicas para agregar valor as nossas ferramentas.

Continuamos utilizando grids fluidas, imagens flexiveis, e media queries, mas esses três itens não formam mais a imagem completa do que o "Web Design Responsivo" representa.

Tecnologia e técnicas de web design estão em um estado de fluxo perpetuo, então a definição de RWD deveria nos dar uma uma visão diferente para pensar sobre o assunto. Temos que ter visão do futuro no presente.

Na minha visão, essa maneira de pensar pode ser encarada da seguinte forma.

"Web Design Responsivo é uma técnica para criar websites que podem se apresentar a qualquer dispositivo com acesso a internet através de um navegador, com conteúdo e interação otimizados da melhor maneira possível para qualquer internauta".

Ao invés de focar nos itens e especificações técnicas, focamos na maneira de pensar do web design responsivo, mas mesmo assim ainda somos livres para testar qualquer novo conceito já que é um campo em constante mutação na indústria.

O Web Design Responsivo como nos conhecemos

Enquanto há vários conceitos mudam no RWD, alguns continuam da mesma forma como foram concebidos, e muitos desenvolvedores concordam que essas são as melhores práticas disponíveis.

Aqui estão alguns dos conceitos mais aceitos em relação ao RWD hoje.

Suporte multipos tipos de tela

Todos sabemos que precisamos pensar na lista de possíveis resoluções, a densidade de pixels ou tamanho do viewport.

Suporte a diversos mecanismos de input

Temos de nos atentar a diferente métodos input, por exemplo dizer adeus a dependência mouse hover criando elementos UI amigaveis a telas touch.

Touch screen gestures

Utilizando Media Queries e Breakpoints

Precisamos utilizar as Media Queries para aplicar os ajustes no layout quando houver necessidade.

Sabemos que breakpoints não devem ser pré determinados com larguras, e sim no ponto em que o design "quebra" e precisa de ajuste.

Flexibilidade de arquivos de mídia

As imagens precisam ter um tamanho fluido, evitando problemas como o de ser muito grande em telas pequenas ou muito pequena em telas grandes.

Box showing the dimensions of uploaded media

Outras formatos de mídia, como vídeos e players de audio, também precisam seguir o mesmo fluxo.

Utilize a Meta Tag Viewport

Precisamos incluir a meta tag viewport para que nosso design se comporte como esperamos:

Novidades a caminho

Existem algumas filosofias e tecnologias que foram incorporadas ao design responsivo no passado, e que hoje ainda talvez não tenham sido removidas, mas gradativamente as regras do jogo vão mudando conforme o aparecimento de alternativas melhores para o mesmo propósito.

“Desktop” vs. “Mobile”

Consideremos os seguintes dispositivos com acesso a internet:

  • Netbook Acer eMachine / 10.1 / 1024x600 / sem touch.

  • Tablet Panasonic Toughpad / 20 / 3840x2560 / apenas touch.

  • Televisão Ultra HD / 78 / 3840x2161 / com um Xbox utilizando o IE + Kinect para navegar com gestos e comando de voz.

  • Monitor de 27 polegadas em modo retrato com resolução de 1020px de largura e 1980px de altura.

  • Monitor de 24 com 1920x1080 com navegador e zoom ativado a 125%, com tamanho de fonte padrão de 20px, navegando através apenas do teclado.

Essa lista representa o mundo real, e as infinitas possibilidades de casos.

Digamos que meu site possui recursos como touch otimizado e alguns recursos específicos para mobile, e em telas grandes, como desktops por exemplo, um design mais especifico dependente do mouse. Em que largura eu devo configurar minhas media queries para apresentar os recursos voltados para mobile ou desktop e assim gerar uma boa experiência ao usuário?

Nossa lista aborda alguns dos diferentes exemplos, mas há centenas se não milhares de outros exemplos e casos de uso que geram barreiras no desenvolvimento.

A realidade é que hoje não existe destinção clara entre dispositivos mobile e desktop, então a melhor maneira continua sendo disponibilizar recursos para qualquer media possível com acesso a internet.

Se seus projetos são elaborados do zero, para atender a qualquer caso de uso, não apenas os conhecidos como mobile e desktop, você pode ter criado um padrão que enquadra melhor a responsividade do layout em diversos tamanhos de tela.

Código com pixel fixo "px"

Primeiro, precisamos parar de tentar criar layouts no Photoshop totalmente baseados em pixels, porque eles não são fluidos e nem flexíveis o suficiente para atender ao requisitos do viewport.

Também precisamos parar de desenvolver layouts com pixels fixos, pela mesma razão. Ao invés disso, podemos criar um layout utilizando a combinação de valores rem, em e %, assim nosso layout sempre vai assumir medidas fluidas e flexiveis. 

Com o conceito de unidade flexivel, o layout pode ser dimensionado uniformemente através de um unico valor de base. As configurações de fonte e zoom do navegador do usuário também são suportadas e respeitadas. Vários erros relacionados ao tamanho do viewport podem ser resolvidos de imediato. Mais importante que isso, o design da tipografia pode ser atualizado sem problemas.

Os dois principais frameworks front-end disponíveis já estão abandonando o padrão de medidas fixas e adotando o padrão de unidades flexiveis. 

O Bootstrap 4 está sendo desenvolvido inteiramente com unidades rem / em / % deixando para trás layouts do Bootstrap 3 que são baseados na unidade px. E o Foundation 5 já fez a transição para operar apenas com unidades flexíveis. 

Os bons e velhos dias de utilização da unidade px, que chegamos a conhecer tão bem, chegaram ao fim.

px on a gravestone

Em pouco tempo vamos ver esse conceito lado a lado com outros conceitos que foram abandonos, como o suporte ao flash, tabelas, IE6, entre outros.

Falando no Flash...

Conteúdos que dependem do Flash (ou qualquer outro plugin de navegador)

Presenciamos o desaparecimento de cabeçalhos animados em Flash a algum tempo atrás, mas continuamos a ver videos, slideshows e jogos que ainda dependem do Flash. Não estou falando apenas de pequenos sites feitos por hobbie - constantemente vejo sites com alto tráfego apresentaram a informação de que o vídeo não pode ser carregado, solicitando baixar o Flash manualmente.

Message This site uses Adobe Flash Player to display videos

É muito comum dispositivos móveis não suportarem o Flash, então confiar neste recurso para exibir conteúdo não é uma boa opção.

Em tempo, por razões de estabilidade e segurança, os navegadores estão começando a substituir a tecnologia de plugins como Flash, Silverlight e Java, em favor de tecnologias que operam nativamente através do navegador.

Com o passar do tempo, soluções baseadas em plugins estão perdendo espaço para novas técnicas que focam em melhorar a exibição de medias.

Colaboradores do mundo responsivo

Algumas dessas tecnologias são novas, e algumas já estão disponíveis a algum tempo, em constante desenvolvimento, mas existe uma coisa de comum entre elas: todos vão além de grids flexiveis, imagens fluidas e media queries.

HTML5 Powered Media

Só porque o Flash foi praticamente excluído do ambiente web, não quer dizer que não possamos continuar criando soluções gráficas bem feitas. Video, audio, animações, e inclusive gráficos 3D e jogos completos são possíveis hoje graças ao mix de recursos disponibilizado pelas junção das tecnologias HTML5, CSS3 e JavaScript 

Antigamente utilizamos plugins nos navegadores para habilitar determinado recursos, hoje temos recursos nativos do HTML5 para reproduzir tanto áudio quanto vídeo, temos as animações totalmente em CSS3, ferramentas como o Google Web Designer, Canvas, WebGL.

Utilizando o elemento <picture> para gerenciar imagens responsivas

O novo elemento <picture> do HTML5 permite uma série de funcionalidades nas imagens, assim como vimos nos elementos <video> e <audio>.

Ela permite que o navegador cheque qual o tamanho do viewport ou a densidade de pixels para então determinar qual o arquivo de imagem mais adequeado para a situação. 

Esse recurso ainda não é suportado nativamente por navegadores, porém existe um polyfill chamado Pitcturefill (criado por Scott Jehl, o mesmo cara por traz do Design Responsivo Responsável) que permite a utilização deste recurso no elemento <picture> imediatamente. 

Leia mais sobre como esse recurso funciona no tutorial: Dica Rápida: Como Utilizar a Tag "picture" do HTML5 Para Trabalhar Imagens Responsivas (com tradução em pt-br).

Fonte de ícones

Porque utilizar ícones de tamanho fixo quando você pode redimensionar os mesmo alterando apenas o tamanho da fonte via CSS?

Através de poderosas bibliotecas como a Font Awesome, Entypo, Typicons, entre outras, você pode ter qualquer tipo de imagem no seu site, desde foguetes a ícones de redes sociais. Mas, como ele são gerados com fonte, e não imagem, você pode alterar a cor e o tamanho através apenas de estilos CSS.

Isso significa que você pode garantir que seus ícones tenham um estilo espcifico com base no tamanho do viewport identificado, se apresentando sempre do tamanho/cor necessários para determinado tipo de tela.

O que está por vir

Flexbox

O conceito de flexbox está aí para acabar com uma das maiores dores de cabeça que desenvolvedores web tentam resolver a anos.

Existe apenas um problema: a taxa de navegadores que não suportam o recurso ainda é bem significante, para que possamos utilizar Flebox nativamente. Se você está trabalhando em um projeto que não obriga a utilização do IE8, IE9 ou Opera Mini, tente utilizar o recurso.

De todo modo, no CanIUse.com conseguimos uma estimativa de uso destes três navegadores que ficam entre 3.18%, 2.13% e 2.82% respectivamente. Até o momento, ainda não existe um fallback para Flexbox. Isso significa que em um site com muito acessos, podem haver centenas de usuários carregando um site desconfigurado.

Todos queremos que o Flexbox se torne um padrão para o desenvolvimento de layouts para então pararmos de sonhar com recursos que deveriam ser simples, então assim que essas três marcas vermelha sumirem deste gráfico do CanIUse, isso pode acontecer.

Web Components

Nós falamos sobre web components pouco tempo atrás, e eles continuam a guiar o rumo de como pode ser o futuro, determinando muitos padrões e se tornando cada vez mais popular a cada dia.

Anteriormente mencionamento os elementos video, audio e picture e como eles podem ser úteis para o web design responsivo. Quando os web components começarem a ser utilizados em peso, qualquer um vai poder de fato criar elementos como estes, seja lá qualquer a necessidade. Além disso, web components podem ser compartilhados, o que significa que virtualmente vamos ter muitos elementos seguindo os padrões de design responsivo que podemos utilizar nas nossas proprias criações.

Isso essencialmente democratiza o HTML, que de certa forma é bem extenso. 

Se existe algum elemento que os desenvolvedores podem realmente fazer um bom uso, não precisamos aguardar a implementação do navegador — precisamos apenas que um desenvolvedor open source crie, e tome a generosa decisão de compartilhar seu trabalho com os demais.

Por exemplo, comentamos anteriormente que o design responsivo requer arquivos de mídias flexíveis, e isso inclui permitir que uma media em um iframe embutido, por exemplo, como o player do YouTube, também respeite as resoluções/densidade das telas.

O desenvolvedor Joselito Junir criou um web component open source que faz justamente isso, utilizando simplesmente HTML.

Leia mais sobre essa fascinante tecnologia no artigo Como criar seus próprios elementos HTML com Web Components (com tradução em pt-br).

Conclusão

Como a tecnologia está sempre em constante evolução, é muito importante manter o foco em soluções ainda não exploradas do web design responsivo, e não se acostumar com a maneira atual de desenvolvimento responsivo. Dessa forma garantimos que sempre vamos estar aberto a novas descobertas para criar experiências melhores para as pessoas que utilizam a internet, ou nossas soluções.

Para isso, precisamos estar atentos as novidades, acompanhar lançamentos e eventos de desenvolvimento, tanto voltado para navegadores quanto para técnicas de web design.

Se você quiser se aprofundar mais um pouco no conceito de design responsivo, recomendo meu curso "Responsive Web Design Revisited". Em pouco mais de duas horas pretendo te guiar por tudo que você precisa saber para criar websites completamente responsivos com técnicas bem simples. Os dois primeiros vídeos são grátis, então de uma conferida no preview, para ter uma ideia do o curso tem a oferecer.

Tenham um ótimo 2015, e vamos juntos melhorar o web design responsivo!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.