Qual a diferença: site mobile ou responsivo

Esses dias uma estagiária aqui na Alura me perguntou qual era a diferença entre um site mobile e um site responsivo. Expliquei, mostrei exemplos, e ela saiu satisfeita. Mas fiquei com isso na cabeça. A maioria das pessoas não sabem a diferença, ou sequer sabem que existe uma.

A internet é um lugar enorme, e existem diversas maneiras de acessar essa espaço. Celular, tablet e desktop costumam ser as maiores preocupações de designers e desenvolvedores front-end, mas também existem outros dispositivos, apesar de poucos usuários usarem, são usados.

Por isso, quando se fala em criar um conteúdo para a web, é melhor pensar em diversas resoluções diferentes, ao invés de dispositivos. Dispositivos são diversos e a cada dia nasce um novo. Resoluções são mais fáceis, posso estar criando algo para 80% dos celulares do mundo apenas por pensar em criar um site com largura de 320px.

Site responsivo

Essa é a maneira que eu penso para desenvolver, mas ela não é a única. A que acabei de descrever é o design responsivo. Crio apenas um website e o faço com que ele seja funcional em todos os tipos de resoluções possíveis. Por exemplo, entre no meu site olacarol.com.br agora. No seu computador, no seu celular, aonde quer que você esteja lendo esse artigo. O mesmo site e mesmo conteúdo será exibido pra você. De maneira diferente, dependendo do dispositivo. Mas o mesmo conteúdo. Porque esse site é responsivo.

Esmiuçando um pouco essa filosofia, digamos assim, se eu tivesse começado meu desenvolvimento pensando nos menores dispositivos possíveis, indo aos poucos para os maiores, esse desenvolvimento teria sido mobile-first. O desenvolvimento desse site não foi feito assim, mas o da Alura foi.

Site mobile

Mas nem todo mundo faz como nós fazemos. E se você decidir pegar o seu celular e acessar ao site do Facebook (não o aplicativo), perceberá uma grande diferença. Perceba que a URL do Facebook é https://m.facebook.com/ mesmo se você mesmo tiver digitado facebook.com sem esse m na frente.

Isso é porque o Facebook percebeu que você estava acessando o site via seu celular, e te redirecionou para um site feito especificamente para celulares. Tente acessar o Facebook em um computador, pela URL https://m.facebook.com/

Percebe que ele é todo esticado na largura? Porque ele foi feito pra ter largura 100% em telas pequenas, não em telas grandes como um desktop. Por isso fica feio assim. Ele foi feito para ser usado em dispositivos mobile, e por isso, é um site mobile.

Aplicativo

Existem ainda mais alternativas para situações diferentes. Por exemplo, criar aplicativos ao invés de sites. Você pode usar o site do iFood no computador, mas é recomendado (e natural) usar o aplicativo quando se está usando seu celular.

Criar aplicativos são alternativas recomendadas para sites de conteúdo mais robusto e com formulários. É muito mais confortável e seguro usar o aplicativo de um banco ao invés de acessar o site deste banco.