Tamaño de la página web en píxeles
Tengo más de 10 años de experiencia en la creación de sitios web de fotografía, y siempre tengo que encontrar el equilibrio adecuado entre la creación de un impacto visual impresionante y la elaboración de una experiencia de sitio web rápida y fácil de usar.
En esta guía detallada, te enseñaré todo lo que necesitas saber sobre el tamaño y la compresión de las imágenes antes de subirlas a tu sitio web, qué herramientas utilizar, cómo probar la velocidad de tu sitio y mucho más.
Encontrará consejos directos y prácticos sobre cómo optimizar las imágenes para la web y cómo mejorar los resultados de rendimiento de su sitio rápidamente, con montones de ejemplos y recursos, y una completa sección de preguntas frecuentes al final.
El rendimiento del sitio web se ha convertido en los últimos años en un factor esencial para el SEO y la experiencia del usuario, ya que la velocidad de conexión ha mejorado mucho. Cualquier retraso en los tiempos de carga de las páginas puede hacer que los visitantes de su sitio web pierdan interés y se marchen.
Todo empieza por averiguar las dimensiones correctas de las imágenes necesarias para tus páginas, para poder prepararlas mejor en tu ordenador primero. Subir imágenes de gran tamaño a tu sitio, sin tener en cuenta el tamaño real al que se utilizan, es lo que provoca grandes problemas de rendimiento.
Tamaños de pantalla para el diseño responsivo
Los diseñadores y desarrolladores web siempre se han adaptado a los avances de la tecnología de Internet. Una de las facetas del diseño web que ha estado especialmente sujeta a cambios es el tamaño de las páginas web (medido por el “peso”, o el total de bytes entregados al navegador). Esto se debe a una serie de factores, como el hardware y el software, las tendencias en el uso de lenguajes web y la velocidad de Internet en general.
Como el número de dispositivos utilizados para acceder a Internet se ha disparado, el diseño y el desarrollo para la web han evolucionado hasta requerir un enfoque sofisticado que tenga en cuenta una amplia variedad de contextos de navegación. Ya no se trata sólo de móviles o de ordenadores de sobremesa, sino de un mundo de capacidades específicas de dispositivos, tamaños de pantalla y velocidades de conexión, así como de consideraciones sobre cómo el tamaño de la página afecta a la experiencia del usuario en estos numerosos escenarios.
Aunque las ideas en las que se basa se desarrollaron durante décadas, se atribuye a Tim Berners Lee la invención de la World Wide Web. En 1980, Lee trabajaba en un proyecto conocido como “Enquire”, una sencilla base de datos de personas y programas que trabajaban en la empresa de Berners Lee. A través de su trabajo en Enquire, Berners Lee experimentó con el hipertexto, un texto que puede mostrarse en dispositivos mediante el uso de hipervínculos. Aunque nunca llegó a publicarse, Enquire constituyó la base conceptual del futuro desarrollo de la World Wide Web.
Tamaño del sitio web en photoshop
Aunque las páginas web y los documentos impresos convencionales comparten muchas similitudes gráficas, funcionales y editoriales, la pantalla del ordenador, y no la página impresa, es el principal lugar de entrega de la información basada en la web, y la pantalla del ordenador es muy diferente de la página impresa. Las pantallas de ordenador suelen ser más pequeñas que la mayoría de los libros o revistas abiertas. Un error común en el diseño de la web es extender la anchura de los gráficos de la página más allá del área que la mayoría de los espectadores pueden ver en sus pantallas de diecisiete o diecinueve pulgadas:
La mayoría de las pantallas utilizadas en el mundo académico y empresarial tienen un tamaño de entre diecisiete y diecinueve pulgadas (entre cuarenta y tres y cuarenta y ocho centímetros), y la mayoría están configuradas para mostrar una pantalla de 800 x 600 píxeles. Los gráficos de las páginas web que superan la dimensión de anchura de las pantallas más comunes tienen un aspecto amateur y molestarán a muchos lectores al obligarles a desplazarse horizontal y verticalmente para ver el diseño completo de la página. Ya es bastante malo tener que desplazarse en una dirección (vertical); tener que hacerlo en dos direcciones es intolerable.
Tamaños de pantalla
Imagínese la situación cuando el 5% de los nuevos visitantes del sitio web utilizan el último iPad o iPhone, pero el diseño de su sitio web está en la versión anterior. Los visitantes esperan que su sitio web sea responsivo, y están dispuestos a vivir una experiencia de usuario maravillosa. Debido a que su diseño está anticuado, la interfaz estará distorsionada, los botones serán poco legibles y todos los elementos esenciales como CTAs, enlaces o formularios de contacto se expandirán más allá de los tamaños de pantalla. Piensa que este 5% de los nuevos visitantes tienen una mala primera experiencia. ¿Están dispuestos a volver a su sitio web? Lo más seguro es que no. Esto puede tener efectos dramáticos en la conversión del sitio web y, por lo tanto, en los ingresos.
Dado que las resoluciones de pantalla y los dispositivos cambian constantemente, exigen actualizaciones y mejoras rápidas y cualificadas. En este artículo queremos mostrar las últimas estadísticas de resolución de pantalla y recomendar las mejores prácticas para implementarlas en su diseño.
Para empezar, nos gustaría definir qué es el diseño responsivo. El diseño web responsivo es un enfoque de diseño que permite adaptar el contenido a las dimensiones del sitio web y a los tamaños de las ventanas, como las de los ordenadores de sobremesa, los móviles y las tabletas. Este enfoque ayuda a visualizar el aspecto de la pantalla en diferentes pantallas para que sea responsive de todos modos. El diseño responsivo también da la capacidad de transformar el contenido de acuerdo a los tamaños de pantalla particulares para cualquier aplicación como ERP PMS o sistemas de punto de venta.