La era de los dispositivos móviles trajo con sigo algunos problemas para los desarrolladores y diseñadores web. A la hora de comenzar un proyecto web aparecen preguntas como ¿Qué resolución de pantalla es la adecuada para realizar un diseño o maquetación web?, ¿La página web será flexible o fija?, ¿Será usable en móviles?
La respuesta a todo esto es simple y la hemos mencionado en temas anteriores. “¡Diseñar sitios web adaptables y usables en móviles en la actualidad no es ni un valor añadido, ni una característica especial de una página, es una obligación!”, por tanto, tenemos que tener en cuenta todas las resoluciones posibles, diseño flexible y usabilidad.
El problema
La cantidad de resoluciones de pantalla que encontramos en el mercado es demasiado amplia. Teléfonos celulares, Tablets, Computadores Portátiles. Aparte de todo esto debemos tener en cuenta la orientación del dispositivo, el tipo de densidad de píxeles y si es retina display como es el caso de muchos de los dispositivos Apple.
Entre las medidas más comunes de cada dispositivo se encuentran las siguientes:
Celulares
- iPhone 4 y 4S: 320 x 480
- iPhone 5 y 5S: 320 x 568
- iPhone 6: 375 x 667
- iPhone 6+: 414 x 736
- Nexus 4: 384 x 598
- Nexus 5: 360 x 598
- Galaxy S3, S4, S5: 360 x 640
- HTC One: 360 x 640
Tabletas
- iPad (*) 1024 x 768
- Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024
- Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280
- Nexus 7: 603 x 966
- Nexus 10: 800 x 1280
Computadoras
- Pantallas pequeñas: 1024x600
- Pantallas medianas: 1280 x 720 / 1280x800
- Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280
- Pantallas grandes: ancho superior a 1400 píxeles, ejemplo 1400x900 o 1600 x 1200.