Mobile First, responsivo, defensivo. Qual a diferença?

É impossível pensar qualquer campanha ou ação de marketing sem prever o mobile. Já existem mais celulares do que escovas de dente no mundo. Em se tratando de design, o que é responsivo, defensivo e mobile first? E qual a diferença entre eles?
Mobile First
A tradução literal cumpre bem a função de explicar o que é mobile first: móvel primeiro. É um conceito de design que prevê o desenvolvimento e a arquitetura primordialmente orientados aos dispositivos móveis. Ou seja, o desktop receberá uma derivação do que foi desenvolvido para o mobile e não o contrário. Dessa maneira, a experiência do usuário será favorecida em termos de performance, usabilidade e conteúdo.
Abaixo um exemplo de email marketing pensado em mobile first:
Design responsivo
Oposto ao mobile first, o design responsivo é desenvolvido para o desktop e responde quando acessado por um aparelho móvel. Uma peça ou site projetado com RWD (Responsive web design) adapta o layout ao ambiente de visualização usando redes fluidas e baseadas em proporções, imagens flexíveis e queries CSS3.
Para visualizar um exemplo de design responsivo, veja o e-mail abaixo:
Design defensivo
Princípio do design que pretende prevenir riscos e antecipar o erro humano, a fim de reduzi-lo ou mesmo eliminá-lo. Baseia-se no pressuposto de que, se houver uma “maneira errada” de usar algo, o usuário irá encontrá-la. Está ligado a testes de usabilidade.
Em sites, alguns problemas podem ser evitados com medidas simples, como:
- Campo de formulário com lista de opções
- Mensagens de erros claras
- Página de erro 404 (página não encontrada) customizada e eficiente para ajudar o usuário a encontrar o que está procurando
- FAQs simples e efetivos
- Um ecommerce que oferece produtos substitutos quando o buscado não está disponível.
Fontes:
Wikipedia
Digitalks
Simplicable