El diseño sensible o responsive design es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca (ordenador, tablet o smartphone). Como ejemplo puedes ver esta web desde cada uno de los dispositivos y veras el flujo de elementos dependiendo del dispositivo.
Atrás quedaron los días en que el diseño de una interfaz fija para un pantalla de ordenador lo suficientemente ancha. El diseño de su sitio web ahora debe ser compatible y optimizado para teléfonos inteligentes y tabletas, que trabajan con diferentes resoluciones de pantalla, y que garanticemos un sitio web que se ve bien en todo tipo de los dispositivos actualmente disponibles en el mercado.
Veamos unos consejos para resposive desing:
- Empieza con una plantilla. Si, mola ser un tipo duro y empezar las cosas desde cero pero si hay cosas muy chulas ya hechas (Skeleton, Omega, Amazium…), ¿por qué no utilizarlas si ahorras tiempo?
- Trabaja con layouts basados en grids fluidos. ni una medida en pixeles, todo en porcentajes y relaciones
- Imágenes flexibles o adaptativas. Esto no siempre es fácil y la mayoría de las veces es costoso pero con unas reglas de CSS bien definidas y un buen número de presets para los tamaños de las imágenes, se puede lograr y dar un aspecto genial.
- Utiliza jQuery. Exprime los plugins de jQuery.
- No te olvides del viewport de Apple. Los iPhones y los iPads son lo que está copando el mercado.
- Fondos escalables. Primordial para dar una sensación de responsive design bien hecho.
- Inspírate. Navega, navega, navega y sigue navegando para ver que hacen el resto de los mortales.
- Probar. Nunca dejes de probar, y volver a probar, todas las veces que sea necesario. Recuerda que tus visitantes no tienen porque utilizar el mismo navegador que tu. Estas herramientas pueden ayudarte en este trabajo tan tedioso pero muy necesario.
Fuente: Cats who Code
