O Responsive Web Design pode adequar websites para vários tipos de tamanho de tela, mas essa adequação só chega até a estrutura do site. Você pode falar que o site terá 3, 2 ou 1 coluna e mais nada. As Media Queries ajudam a resolver nosso problema estrutural. Essa parte é super importante, mas não é suficiente. Há ainda outro grande problema que são os elementos usados no site. Um elemento usado no desktop pode não ser o ideal nos celulares.

Nada contra, mas…

Entenda que não sou contra o RWD, pelo amor de Deus… Eu amo ele de paixão. Mas quero que você pense friamente que ele, sozinho, não resolve os seus problemas. É aí que um conceito bem maior entra em cena, chamado Adaptive Web Design, que abrange uma série de soluções para adaptar seu website/produto a diversos cenários e contexto, onde o RWD é apenas uma peça do quebra cabeças. Você precisa considerar muitas coisas além de layouts flexíveis para que seu website seja de fato acessado por qualquer lugar.

Existem cenários que não foram bem explorados e que ainda vão nos atormentar por muito tempo, como é o caso dos navegadores em consoles. Pode ser que você descubra que seus usuários, por algum motivo qualquer, estejam acessando seu website via xbox, playstation e etc. A ideia de adaptar websites para consoles é algo pouco explorado. Para começar você não tem mouse, nem teclado. Você tem um joystick que não foi preparado para essa tarefa.

Muitos formatos estão surgindo de todos os cantos e isso é algo realmente perturbador. Smartwatchs serão a próxima onda e muito provavelmente os usuários sentirão a necessidade de acessar informações em websites usando um dispositivo assim. E aí?

Um exemplo básico

Costumo usar um exemplo bem básico para você entender a brincadeira. As tabs (ou guias, como você preferir) são bem usadas em sistemas e websites. O problema com as tabs é que elas são bem usadas em Desktops e não nos mobiles. Quando uma tab quebra de linha, perde-se totalmente a analogia inicial.

Em uma tela menor, como ficaria:

Muito, muito, muito ruim.

O mais legal seria que no mobile esse elemento virasse um dropdown. O uso seria mais intuitivo, economizaríamos espaço e manteríamos decente a experiência do usuário:

Essa é uma solução básica e você pode nem gostar dela. Não há problema nisso. O ponto é que você entendeu o conceito.

Existem outros exemplos extremos de Adaptive Delivery, onde não mudamos apenas uma parte do código, mas o site inteiro, como é o caso da Lufthansa. Aliás, esse site da Lufthansa é um case clássico de Adaptive Delivery, onde entregamos o código exato de acordo com o contexto do usuário. Existem vários websites que explicam esse case. Dê uma pesquisada no Google sobre o site deles.

Existem dois conceitos que você já deve ter cansado de ouvir e estudar: Fault Tolerance e Progressive Enhancement. Os dois servem como base para produzir websites que se adequam de verdade a qualquer tipo de dispositivo, não importa qual a tela ou qual plataforma.

Se você levar a sério esses dois conceitos, você conseguirá fazer websites compatíveis com qualquer browser e principalmente com qualquer contexto que o usuários se encontrar.