Sin ser demasiado específicos, diremos que un sitio responsive detecta el dispositivo que estás utilizando, ( ya sea un teléfono móvil, ordenador personal, portátil o tablet ),  y lo adapta a la pantalla que corresponda. Tenemos un solo código, una sola hoja de estilos, un solo website para dominarlos a todos. Todo esto optimizado para un máximo rendimiento y facilidad de navegación.

Y ahora, unos truquitos para que tu diseño responsive sea perfecto, rápido y amortices el tiempo que empleas en prepararlo:

1. USA UN FRAMEWORK

Hay numerosos sitios que proporcionan plantilla y frameworks preparados para responsive design: Foundation, Bootstrap, Gridless, entre otros, vienen listos en sus últimas versiones para este método de trabajo..

2. DISEÑA DESDE MOBILE FIRST

De esta manera partiendo de la resolución para móviles, vamos de lo esencial a la mayor resolución. Los que van a tener un diseño web con reglas de CSS sobreescritas, son los dispositivos de mayor resolución.

• Mantén tu layout limpio Piensa en global, categoriza la información para que más tarde se pueda desplegar en todos los dispositivos, cuando digo todos son TODOS: Desde una apple watch, hasta un pc, pasando por el ordenador que tienes en tu coche. Eliminamos cualquier cosa redundante o 100% útil.

• Botones con técnicas simples cuyas acciones y estados funcionen en cualquier dispositivo.

• Fotos/Imágenes Vamos a cargar por defecto las de menor tamaño, y en caso de detectar que estamos en una pantalla más grande, descargar entonces la foto mayor.

•  Google lo recomienda Ya que se evitan las redirecciones y detección de user-agents. Además permite un rastreo más eficiente de las páginas por parte de los robots (Googlebot y Googlebot-Mobile). Sin embargo, hay que tener en cuenta que a veces no es posible utilizar este método y considerar las otras opciones igualmente válidas. (Diseño adaptado para smartphones bajo la misma URL y Diseño adaptado para smartphones en una URL diferente (m.example.com).

• Usa media Queries  Escribir las media queries de menor a mayor tamaño: @media (max-width: 600px).

3. TESTEA CONTÍNUAMENTE, Y EN MÓVILES A SER POSIBLE

Obviamente, no vas a tener todos los modelos de móvil a tu alcance para testear, ¿Qué hago entonces? Prueba en todos los posibles. También tablets. Siempre hay sorpresas e inconsistencias inesperadas, así que pídele a todo el que tenga un dispositivo portátil y esté cerca tuyo que cargue la aplicación o la web, para que compruebes que todo está en orden.

Y ahora, unos pocos datos:

El informe de 2014 sobre la Sociedad de la Información destaca que que España es uno de los países más conectados de Europa. El 80% de los móviles son «smartphones», mientras que el 78% de los internautas son usuarios intensivos. (PDF)

Para negocios online, conviene saber que el número de ventas a través del móvil está creciendo exponencialmente, es necesario mantener tu web optimizada para el mayor número de usuarios (y potenciales clientes) que quieran acceder a tus servicios.

Cada vez más personas consultan su correo y navegan a través de pantallas pequeñas y los dispositivos son cada vez más rápidos. Además la media de consulta en teléfonos móviles es de unas 150 veces al día.

Un 81% de los teléfonos que se usan en España son smartphones. Sería conveniente facilitar en lo posible la experiencia de uso a todo este tráfico de gente, y procurar sitios accesibles y fáciles de ver con estos dispositivos.