By Tara Hornor
Mar 21, 2014
dentro del mundo maravillosamente complejo que es el diseño web, los profesionales se enfrentan a algunos tecnicismos muy difíciles, con la resolución de pantalla posiblemente una de las mayores causas de dolores de cabeza palpitantes. A veces, este problema engañosamente pequeño puede parecer irremediablemente carente de soluciones, ya que las resoluciones y los dispositivos cambian y mejoran constantemente., Sin embargo, hay algunas prácticas recomendadas que los diseñadores y desarrolladores web pueden seguir para diseñar un sitio web, y una mirada en profundidad a la resolución del dispositivo revela cuáles son.
muchos confunden el término para referirse a los tamaños de pantalla reales. Sin embargo, como saben los diseñadores web expertos en tecnología, la resolución de pantalla es el término utilizado para el número de píxeles que una pantalla contiene horizontal y verticalmente, como 1024 × 768, en el que el primer número se refiere a los píxeles horizontales y el segundo se refiere a los píxeles verticales.
crédito de Foto: Design215.,com
la parte confusa viene cuando dos de los mismos tamaños de pantalla tienen diferentes resoluciones de pantalla. Esto también significa que diferentes tamaños de pantalla pueden tener la misma resolución. Por ejemplo, una pantalla de 13 pulgadas puede tener la misma resolución de 1280 × 800 que una pantalla más grande de 17 pulgadas.
Cómo se muestra un sitio web en una pantalla será muy diferente dependiendo de las diferentes resoluciones de pantalla. Como ejemplo, dos monitores de escritorio de 17 pulgadas pueden tener diferentes resoluciones, siendo uno 1024 × 768 y el otro 1280 × 800., La resolución más baja (1024 × 768) mostrará los elementos en un tamaño más grande para mantener la pantalla lo más nítida posible, pero esto también significa que menos de la página cabrá en la pantalla. El monitor de mayor resolución podrá mostrar más de la página del sitio web, como todo el pliegue más un poco más abajo, y los elementos de la página se verán más pequeños pero más nítidos.
en su consejo sobre las mejores prácticas para la resolución de dispositivos en el diseño, Jakob Neilson del grupo Neilson Norman señala que nunca se desea diseñar un sitio web para un tamaño de monitor., Por un lado, los usuarios con pantallas uber, como una de 30 pulgadas, nunca pueden maximizar una ventana debido a su monitor anormalmente ancho. Además, los tamaños de pantalla vienen en demasiadas formas y tamaños. Simplemente es mucho más eficiente centrarse en la resolución.
en el pasado, era mucho más fácil saber para qué resolución diseñar. Las resoluciones altas eran muy caras, por lo que la mayoría de los usuarios solo podían permitirse una de las tres resoluciones más baratas: 640 × 480, 800 × 600 o 1024 × 768, como menciona Andrew Keir.
Crédito de Foto: jorge.,correa vía Compfight cc
sin embargo, hoy en día hay muchas más pantallas de alta resolución disponibles a precios que la mayoría de los consumidores pueden permitirse. Y luego está la consideración adicional de los dispositivos móviles. Con los usuarios de tabletas y teléfonos inteligentes en aumento exponencial, los diseñadores web no tienen otra opción que considerar estas resoluciones de pantalla más pequeñas nuevamente.
afortunadamente, hay algunas mejores prácticas para elegir la resolución correcta para diseñar un sitio web., También hay algunas opciones de solución para asegurarse de que si alguien con una resolución de pantalla extraña o anticuada visita su sitio web, seguirá teniendo una experiencia de visualización positiva.
resoluciones comunes y el mejor tamaño para el diseño Web.
La mayoría de los diseñadores y desarrolladores web están de acuerdo en que una de las mejores prácticas es optimizar un diseño para la resolución más popular entre su audiencia. Sin embargo, esto puede ser más difícil de definir hoy en día, con tantas resoluciones diferentes disponibles.,
a principios de 2012, la mayoría de los usuarios web tenían una resolución de pantalla de 1366 × 768, 1024 × 768 o 1280 × 800. Esto ha cambiado bastante hoy, Sin embargo, y va a mostrar la rapidez con la que los tamaños de resolución óptimos cambiarán con el tiempo para el diseño web.
Resolución de Pantalla Mínima.
por ejemplo, W3Schools muestra a partir de enero de 2014, «el 99% de sus visitantes tienen una resolución de 1024 × 768 píxeles o superior.»Esto proporciona un argumento bastante fuerte para atender al mínimo de 1024 × 768., Shaun Anderson también revela evidencia estadística de que la mayoría de los visitantes del sitio web tienen una resolución de este tamaño o superior.
principales resoluciones de pantalla en todo el mundo.
lo interesante de las estadísticas que Anderson presenta, sin embargo, es que solo el 9% en todo el mundo utiliza 1024 × 768 con el 30% utilizando una resolución de 1366 × 768, y alrededor del 15% utilizando una resolución de dispositivo designada como «otro», que más que probable es el uso móvil.
El estudio de Mobify analizó la actividad de 200 millones de compradores en 2012 en la red Mobify Cloud (sitios web de comercio electrónico impulsados por Mobify)., El estudio mostró algunos hallazgos interesantes:
1. El 19,5% de los visitantes utilizaron una resolución de netbook de 1280 × 800.
2. El 13,5% utilizó 1366 × 768.
3. 11.4% utiliza el tamaño del iPhone: 320 × 480.
4. 7.8% utilizó 1024 × 768, llevándolo al cuarto lugar.
5. 7.3% utiliza 768 × 1024, común de iPads y netbooks horizontales de 10 pulgadas.
6. 7.3% utiliza ordenadores portátiles más grandes tamaño 1440 × 900.
7. El 6,5% utilizó 1280 × 1024, un monitor de escritorio LCD común.
8. El 6,1% utilizó pantallas HD de 1080p (1920 × 1080).
9. El 5,1% utilizó la resolución de pantalla ancha común de 1680 × 1050.
10. 3.,El 8% utilizó el tamaño de pantalla HD+ 1600 × 900.
haga Clic en la imagen para ver la infografía de Mobify.
¿Cuál es el mejor tamaño?
como ya se mencionó, muchos argumentan que al menos debe optimizar los diseños de sitios web para 1024 × 768. Esto debería hacer que un sitio web se vea bastante bien en la mayoría de las resoluciones y dispositivos. Sin embargo, esto todavía puede causar bastantes problemas, especialmente con el aumento de los dispositivos móviles para acceder a Internet. Aquí es donde los diseñadores web realmente tienen que conocer a su audiencia y, en última instancia, diseñar para esta audiencia.,
¿Qué pasa si no conoces a tu público y no quieres limitar tu diseño a una resolución específica? Echemos un vistazo a algunas prácticas recomendadas para dispositivos y diseño web.
Una Introducción a SVG (Scalable Vector Graphics).
Adam Fairhead presenta una idea interesante en su artículo sobre WebDesignerDepot, acertadamente titulado, «Stop chasing screen resolutions», y su punto es exactamente este. Fairhead cree que los diseñadores web ya no tienen que preocuparse por las resoluciones de pantalla debido a SVG o gráficos vectoriales escalables., SVG es una tecnología HTML5 que permite que las imágenes (vectoriales, para ser exactos) se muestren usando código, lo que hace que la imagen sea clara, sin importar la resolución de la pantalla de un usuario, lo cual es muy útil cuando se crea un sitio web responsivo.
PPI y Gráficos Retina.
detengámonos un momento y discutamos el PPI (píxeles por pulgada), que se refiere a la resolución de las imágenes. El PPI se ve afectado por la resolución de la pantalla y el tamaño real de la pantalla determinado por la longitud diagonal en pulgadas, como lo demuestra esta herramienta de ppi de DPILove., Saber qué PPI usar para sitios web ha sido fácil en el pasado: los diseñadores web sabían que 72ppi se aseguraría de que las imágenes parecieran nítidas dentro de un sitio web pero aún así se cargaran a una velocidad adecuada, simplemente porque la mayoría de los tamaños de monitor se correlacionaban con las resoluciones como tales.
El gran problema en la resolución de pantalla desde que Apple salió con el iPhone4 es con gráficos retina. Los dispositivos gráficos Retina son aquellos con una resolución muy superior a las pantallas tradicionales. ¿Por qué es un problema?, Porque las imágenes optimizadas a 72ppi ahora aparecen borrosas en pantallas más pequeñas que muestran más de 200ppi.
los gráficos Retina dependen de la resolución.
han surgido diferentes métodos para convertir un sitio web a retina, como el uso de Sprites CSS o imágenes Retina que tienen 2 veces su tamaño original para mantener la imagen clara sin importar la resolución. Fairhead señala, sin embargo, que estos métodos todavía nos hacen dependientes de la resolución, ya que a medida que las resoluciones continúan aumentando, también lo hará la necesidad de tamaños de imagen.,
y esto todavía no resuelve el problema de hacer zoom en una página web, por ejemplo en un iPhone. Cuando los usuarios intentan ver la página web con un tamaño ampliable, las imágenes se vuelven borrosas.
la solución SVG.
debido a que SVG utiliza gráficos vectoriales, se verán muy bien sin importar la resolución. Las imágenes de mapa de bits (imágenes retina) se basan en píxeles, por lo que una imagen de mapa de bits se extiende más allá de su resolución de píxeles óptima, comienza a aparecer borrosa o «pixelada».»Los vectores son escalables a cualquier tamaño, ya que se basan en una fórmula matemática, en lugar de una cierta cantidad de píxeles., Por lo tanto, cuando se escalan, los vectores aparecen limpios en cualquier tamaño debido a los ajustes de fórmula, de ahí la razón por la que los diseñadores los utilizan para crear un sitio web adaptable.
crédito de la imagen: arrashthearcher.org
el otro beneficio de usar gráficos vectoriales en lugar de mapas de bits es que el tiempo de carga de las imágenes vectoriales es el mismo sin importar el tamaño. Una imagen de mapa de bits de 2000px × 2000px tarda demasiado en cargarse. Una imagen vectorial de 2000px no requiere píxeles individuales para cargar, por lo que no importa si el vector es tan pequeño como 20px o tan grande como 4000px.
limitaciones de SVG.,
entonces, ¿por qué no se promociona SVG como una solución de resolución completa? Bueno, no puede contener imágenes de mapa de bits en absoluto, para empezar. Y no pueden ser demasiado complicados en el diseño o de lo contrario afectará el tiempo de carga, incluso como un vector.
la gran complicación final con SVG es que es un código bastante difícil de aprender. Adam Fairhead lo explica así:
el código SVG no es algo que puedas «ver en tu mente» como cuando lees HTML. Es una serie de instrucciones mapeadas una contra la otra, elemento por elemento, capa por capa.,
entonces, si un diseñador web ya no tiene conocimiento de código, diseñar para SVG podría ser casi imposible.
sitios web de pantalla completa.
más las mejores prácticas para el diseño de dispositivos se refieren al tipo de diseño para un sitio web, como un sitio web de pantalla completa, que es un diseño que llena toda la ventana del navegador, sin importar la resolución de la pantalla. Este tipo de Diseño Web implica el uso de una imagen súper grande, como 2560 × 1290, CSS y HTML para que el sitio web se vea bien ya sea en resoluciones de pantalla grandes o pequeñas., Algunos diseños de sitios web absolutamente hermosos han surgido de esta práctica:
visite el Sitio Web Made In Days
visite el Sitio Web de Keecker
visita el sitio web Grove made
tutoriales CSS.
usando CSS, estirar el fondo al ancho del navegador de pantalla completa puede ser bastante fácil. Muchos tutoriales también explican cómo colocar HTML sobre las imágenes, como cuando se muestra el encabezado y el menú de navegación., Los siguientes son algunos excelentes tuts:
construyendo una increíble experiencia móvil de pantalla completa – Paul Kinlan
CSS fondo de pantalla completa (código de sugerencia rápida) – John Surdakowski
creando un fondo de pantalla completa para sitios web – vistas de diseño web
diseño de pantalla completa con transiciones de Página – Mary Lou
Limitaciones de pantalla completa.
una de las mayores molestias con el diseño para navegadores en lugar de la resolución es que tienes que probar la compatibilidad entre navegadores., Y esto nos lleva de vuelta a un problema muy familiar: al igual que con la resolución, tienes que conocer a tu audiencia y sus navegadores más comunes. Al igual que con la resolución de pantalla, siempre va a decepcionar a una pequeña parte de los visitantes de su sitio web que utilizan navegadores desactualizados.
Diseño Web Responsive.
una solución muy debatida es crear un diseño web responsivo. Algunos creen que los sitios web receptivos son lo último en mejores prácticas para la resolución, ya que puede hacer que un sitio web se vea y se sienta maravillosamente consistente en cualquier dispositivo.,
un diseño responsivo es también el diseño favorito de Google para Smartphone, curiosamente.
¿Es el diseño adaptativo una mejor opción?
algunos diseñadores creen que un diseño adaptativo es mejor para la mayoría de los sitios web debido al control sobre los elementos. Esta opción utiliza un diseño fijo que cambia en función del dispositivo utilizado para acceder al sitio web.,
El beneficio de un diseño adaptativo, como explica Ravi pratap en VentureBeat, es que el sitio web se puede personalizar más fácilmente para una «experiencia altamente diferenciada que se construye para la intención específica de su cliente móvil.»Pero una vez más, nos estamos topando con el problema de la resolución de dispositivos con diseño adaptable.
Diseño Web Responsivo de píxeles perfectos.,
El diseño de sitios web Responsive resuelve el problema del diseño adaptativo en que es fluido, lo que funciona muy bien para muchos sitios web, especialmente para aquellos que desean proporcionar una experiencia idéntica en todos los dispositivos. Algunos sitios web encuentran que la adaptación y la capacidad de respuesta son demasiado limitantes cuando necesitan una experiencia flexible y personalizada. Los diseños adaptativos Pixel-perfect llenan la brecha entre la opción de crear un sitio web adaptable o un sitio web adaptativo combinando los mejores aspectos de ambos tipos de diseño.,
echando un vistazo al Sitio Web ProStory en Screenfly muestra la flexibilidad del diseño responsivo.
Al igual que el diseño adaptativo, el diseño responsive pixel-perfect permite que el sitio web se adapte a ciertos tamaños. Proporciona a los diseñadores un control preciso de cada píxel para que el sitio web funcione exactamente como se desee en diferentes dispositivos. Al igual que el diseño responsivo, el diseño pixel-perfect es flexible y fluido y escala cada parte del diseño (imágenes, contenido, etc.) sin importar el tamaño del dispositivo., Los diseñadores simplemente designan puntos de interrupción para un sitio web con píxeles precisos sin importar la vista. Un bono? Todavía cae bajo el diseño favorito de Google
Cómo la resolución de pantalla afecta a los diseñadores profesionales.
la resolución de pantalla seguirá siendo un factor que los diseñadores web deben tener en cuenta cuando crean un sitio web a medida que se crean resoluciones más altas y la tecnología Web evoluciona. Esta es la razón por la que es importante para los diseñadores web conocer algunas de las mejores prácticas, así como la audiencia de sus clientes.,
diferentes clientes quieren llegar a su audiencia de maneras únicas y proporcionar experiencias personalizadas dependiendo del lugar donde su audiencia los encuentre. Para muchos clientes, esto puede significar una combinación de funcionalidades, como un diseño de sitio web responsivo perfecto con imágenes SVG.
como diseñador web, es su trabajo estar informado sobre la mejor manera de ayudar a su cliente a lograr estos objetivos, y la resolución del dispositivo es una pieza muy importante del rompecabezas del diseño web.
