El diseñador web Sandijs Ruluks, creador de la herramienta para crear webs responsive FROONT – Responsive Web Design Tool explica con simples GIFs animados 9 principios básicos del diseño web responsive.
La mayoría hablan del layout, otros de rendimiento o de técnicas recomendadas para crear sitios web que se adapten a todos los dispositivos. Algunos pueden ser inclusos discutidos pero me parecen una genial forma de explicar qué es el diseño web responsive (RWD).
1. Responsive versus Adaptativo
Aunque mucha gente los sigue utilizando indistintamente como sinónimos no lo son. Son dos técnicas distintas. Si usamos la filosofía del diseño adaptive lo que hacemos es trabajar con anchuras fijas de dispositivos concretos, con la cantidad de dispositivos que existen es mucho mejor trabajar en un diseño responsive.
2. Unidades de medidas relativas versus Unidades de medidas estáticas
Evitaremos el uso de la unidad píxel en un diseño responsive
3. Con o sin Breakpoints
Los breakpoints son los que utilizamos con las media queries para definir que algo cambie a partir de un tamaño determinado. Por ejemplo pasar de 3 columnas a una.
4. Diseño fluido versus diseño estático
Los elementos irán ocupando más espacio vertical a medida que la pantalla se estrecha. Con un diseño fluido conseguimos que no estos elementos se distribuyan siguiendo el espacio natural que deben ocupar.
5. Anidar o no anidar elementos
Es mucho más sencillo trabajar con un elemento contenedor que tener que hacerlo uno a uno, sin caer en la divitis.
6. Fuentes de sistema versus webfonts
Las fuentes de sistema no inciden en el peso de la web y en su rendimiento, si pensamos en dispositivos móviles minimizar y optimizar la velocidad de carga es mucho más importante.
7. Determinar una anchura máxima
Igual que trabajamos para dispositivos móviles con resoluciones pequeñas debemos pensar también en otros dispositivos como los televisores. Establecer una anchura máxima (max-width) es una buena opción.
8. Filosofía Desktop first versus Mobile First
Este punto quizás sea el más discutible por los diseñadores donde la tendencia apunta y defiende las ventajas del mobile first, empezar diseñando para dispositivos de baja resolución. Sandijs Ruluks no lo ve así y en su herramienta Froont da la opción de empezar por una u otra. No cree que exista mucha diferencia entre usar una u otra.
9. Vectores versus Bitmaps
No necesita demasiada explicación, siempre será mejor a no ser que hablemos de fotografías elementos vectoriales.
Deja una respuesta