Porque no necesitas breakpoints especificos en el Diseño responsivo
Hace poco encontré este articulo acerca de los breakpoints mas comunes para media queries, para los dispositivos móviles mas comunes, y en verdad funciona perfectamente. Lo mas fácil es especificar estilos para cada dispositivo, pero, ¿y si salen nuevos dispositivos?, usando este criterio lo natural seria crear un breakpoint (en modo landscape y portrait) para ese nuevo dispositivo y agregarlo; la respuesta a esto es: “no es necesario”, ya que muchos breakpoints se comparten entre dispositivos, por lo que encontré este articulo donde explica porque.
Necesidad de Actualizar
Con el lanzamiento de, por ejemplo, el IPhone 6, y su compañero mas grande el IPhone 6+; llega la pregunta de: ¿Como se vera mi pagina en este dispositivo?, y al probarlo encontraremos que se ve ligeramente distinto (algún margen mas o menos, el tamaño de letra, etc.), de ahi, creo yo, viene la necesidad de actualizar nuestros estilos CSS.
El Diseño responsivo es lo mejor
En los últimos años, hemos trabajado para que nuestros diseños se vean en celulares (hablando genéricamente) y PCs; y si tenemos paginas sencillas, este no es problema; pero, ¿y que de los diseños complejos?, ahi si tenemos que agregar breakpoints para cada dispositivo nuevo, cuando el contenido ya no se ve correctamente.
Teniendo en cuenta este pensamiento de: “agregar breakpoints specificos”, ya no tendremos miedo a agregar nuevos breakpoints cuando salga un nuevo “IPhone” o Android, (los hay de una infinidad de caracteristicas)
Altas Densidades de pantalla
Cuando se lanzaron las pantallas retina (Nombre comercial de Apple para las pantallas de alta resolucion), provoco pánico en el internet ya que nuestras paginas teníamos que hacer un “zoom” en la programación para que los textos e imagenes no se vean pequeños, por lo que se tenia que multiplicar por un factor “-webkit-min-device-pixel-ratio : 1.5” que luego se convirtio con el lanzamiento de pantallas con mas pixeles a un ratio de 2, por lo que si teniamos una imagen de 25px que se vería pixeleada con el multiplicador , la imagen original debia ser de 50px, compensando calidad y tamaño
Este multiplicador, llamemosle así; cambia de dispositivo a dispositivo, y una buena herramienta para saber cual valor para tu smartphone es esta pagina,
La buena noticia si trabajas tus iconos y logos en formato SVG (como bootstrap), no será necesario aumentar de calidad las imágenes, eso si, solo aplica para gráficos vectoriales.
Nuevos Viewports? (no sigas….)
Considerando los puntos anteriores: nuevas DPIs y nuevas resoluciones no deberían resultarnos un dolor de cabeza, ya que tenemos una buena base de breakpoints y a partir de ahí solo necesitamos agregar unas cuantas lineas de codigo adicionales; el beneficio es mayor, ya que de ponerse de moda algún dispositivo, estaremos preparados para que nuestro sitio web se muestre correctamente, y claro el consejo es siempre estar al tanto del lanzamiento de nuevos dispositivos.
El Futuro
Afortunadamente si tomamos en cuenta que nuestras imágenes tienen tamaños flexibles, maquetas flexibles; el objetivo sera mostrarlos en pantallas cada vez mas pequeñas, comúnmente mostrándolas en una sola columna (como en los smartwatch)
El articulo que cité al comienzo, utiliza intervalos de resoluciones, por ejemplo para el IPHONE 4
/* iPhone 4 ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
Cualquier estilo que se agregue aplicará solo a resoluciones 480px de ancho por 320px de alto en modo landscape, el mismo estilo no aplicara para, por ejemplo, el modo portrait; por lo que será necesario agregarlo “repetido” en su contraparte, por lo que lo mas sensato es agregar otra media-query que afecte a los dos
@media (max-width : 480px) {
/* Styles */
}
y si quieres que un estilo aplique a todos los “moviles”, será crear esta media querie para resoluciones inferiores a 1024px
@media (max-width : 1024px) {
/* Styles */
}
Para lo que los estilos que cite al principio solo serán necesarios para adecuar un estilo para un dispositivo especifico, cuando sea absolutamente necesario, mas no para estilos que se compartan entre ellos.
