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

[:pt]É 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
 [:en]It’s impossible to think of any marketing campaign or action without predicting the mobile. There are already more cell phones than toothbrushes in the world. When it comes to design, what is responsive, defensive and mobile first? And what’s the difference between them?

Mobile First

The literal translation fulfills well the function of explaining what is mobile first: mobile first. It is a design concept that provides development and architecture primarily geared towards mobile devices. That is, the desktop will receive a derivation of what was developed for the mobile and not the other way around. In this way, the user experience will be favored in terms of performance, usability and content.
Below is an example of email marketing thought about mobile first:

Responsive design

Unlike mobile first, responsive design is designed for the desktop and responds when accessed by a mobile device. A piece or website designed with RWD (Responsive web design) adapts the layout to the visualization environment using fluid networks based on proportions, flexible images, and CSS3 queries.
To see an example of responsive design, check the email below:

 Defensive design

The principle of design that aims to prevent risks and anticipate human error in order to reduce it or even eliminate it. It is based on the assumption that if there is a “wrong way” to use something, the user will find it. It’s tied to usability tests.
On websites, some problems can be avoided with simple measures such as:
Form Field with List of Options
Clear error messages
Error page 404 (page not found) customized and efficient to help the user find what they are looking for
Simple and effective FAQs
An ecommerce that offers substitute products when the searched is not available.
 
Sources: WikipediaDigitalks and Simplicable[:es]Es imposible pensar en cualquier campaña o acción de marketing sin predecir el móvil. Ya hay más teléfonos celulares que cepillos de dientes en el mundo. Cuando se trata de design, ¿qué es responsivo, defensivo y mobile first? ¿Y cuál es la diferencia entre ellos?

Móvil primero

La traducción literal cumple bien la función de explicar lo que es Mobile First: pensar primero en móviles. Es un concepto de design que proporciona desarrollo y arquitectura principalmente orientada a dispositivos móviles. Es decir, el escritorio recibirá una derivación de lo que fue desarrollado para el móvil y no al revés. De esta manera, la experiencia del usuario será favorecida en términos de rendimiento, usabilidad y contenido.
Vea este ejemplo de marketing por correo electrónico diseñado primero:

Design responsivo

A diferencia del mobile first, el responsivo está diseñado para el escritorio y responde cuando se accede por un dispositivo móvil. Una pieza o sitio web diseñado con RWD (Diseño Web Responsivo) adapta el diseño al entorno de visualización utilizando redes fluidas basadas en proporciones, imágenes flexibles y consultas CSS3.Para ver un ejemplo de diseño receptivo, vea el correo electrónico a continuación:

Diseño defensivo

Principio de diseño que pretende prevenir los riesgos y anticipar el error humano con el fin de reducirlo o incluso eliminarlo. Se basa en la suposición de que si hay un “camino equivocado” para usar algo, el usuario lo encontrará. Está ligado a pruebas de usabilidad.
En los sitios web, algunos problemas pueden evitarse con medidas simples como:
Campo de formulario con lista de opciones
Borrar mensajes de error
Error página 404 (página no encontrada) personalizada y eficiente para ayudar al usuario a encontrar lo que está buscando
Preguntas frecuentes sencillas y eficaces
Un comercio electrónico que ofrece productos sustitutivos cuando la búsqueda no está disponible.
 
Fuentes: WikipediaDigitalks y Simplicable[:]