test 03

Las diferentes medidas en las que romper el estilo CSS nos pueden venir sugeridas por las dimensiones estándar de las aplicaciones más utilizadas del mercado (iPhone, iPad, etc) o, tal y como realizamos en Alsernet, según las necesidades de cada diseño web y la distribución de sus espacios. De esta forma, no adaptamos simplemente el grid de la web según las media queries apropiadas, también utilizamos breakpoints para elementos únicos que necesitan de una optimización concreta para una determinada resolución, personalizando y optimizando al máximo el diseño web.

En el diseño web, lo normal es no enfocarse en los puntos de ruptura del dispositivo, sino que la mejor práctica es diseñar primero para la ventana gráfica más pequeña (recuerda: «Mobile-first«) y después ir añadiendo breakpoints a medida que ampliamos la vista y necesitamos nuevos puntos de quiebre. Por tanto, debemos de centrarnos en los cortes específicos del contenido para que éste sea consumido con facilidad por el usuario.

De todas formas, existen unos breakpoints estandarizados que debemos de tener en cuenta:

• Móviles: entre 320 y 480 píxeles.
• Tablets: entre 768 y 1024 píxeles.
• Pantallas grandes: más de 1200 píxeles.