walkingdesign.com

October 21, 2009 | Posted in: SP-articles

La Importancia del Ancho de la Ventana

0 Comments Ì Discussion open

Algunas personas tienen una confusión de términos entre el ancho de la ventana del browser con la resolución de la pantalla. Para aclarar, el foco de este artículo es sobre la anchura de la ventana del navegador utilizado y no de la resolución de la pantalla del computador.

Independientemente de la plataforma, browser, de las tecnologías disponibles, y de la resolución de la pantalla, otro factor importante en el diseño dirigido a una audiencia es la anchura de la ventana del navegador. Como diseñador que tiene un sitio web que se comporta de acuerdo con esta anomalía, tengo que priorizar obviamente este factor.

Fuera de la curiosidad, decidí tiempo atrás comenzar a clasificar estadísticas para ayudarme a decidir que tan ancho debía hacer mis "layouts", y por lo tanto poder tomar una mejor decisión pensando en el usuario final. Como Collylogic está dirigido a la comunidad del diseño, asumí que siguiendo solamente este sitio daría una impresión injusta, como la mayor parte de ustedes probablemente usan - por el argumento -un iBook, IMac o un PC bien configurado. Por lo tanto parecía también necesario seguir el uso de un sitio web que represente una sección mucho más amplia de los usuarios de la computadora para así conseguir un mejor impresión de los tamaños típicos de la ventana.

Asumí que habría un espacio razonable entre los dos, con más visitantes de Collylogic que tienen un viewport más ancho. Interesantemente, el espacio no era tan grande.

Pensando en variable / fijo

Usted probablemente está consciente de que Collylogic tiene lo que Richard Rutter llama "un layout variable con una anchura fija" (una lectura obligatoria si usted está interesado en los diversos métodos que hasta ahora existen). Este es un enfoque que no es ni fijo ni líquido, pero esta en algún punto intermedio. Como diseñador poncy, exijo que mis detalles intrincados del diseño no sean comprometidos por anchuras de columna desconocidas (como yo tendría con un diseño fluido). El problema es que no estoy preparado para construir un sitio fijo de 1000- o más pixeles (mire a todas la respuestas negativa a todos los sitios con 1000-pixel de ancho en los últimos días), y siento que los desesperadamente cansadores 780 pixeles es ser demasiado cauteloso.

Así, con un poco del ingenioso JavaScript , puedo crear columnas de ancho fijo y también tener dos o tres columnas en el juego, dependiendo del ancho de la ventana del navegador utilizada por el usuario final . Si no lo ha probado, arrastre la ventana del navegador encima o por debajo de los 1000 pixeles de ancho marca y se dará cuenta que la tercera columna flota a la derecha, o cae en la segunda columna. No todo el mundo le gusta esta solución, pero es una opción viable.

Nota: Este sitio (colly.com) actualmente no usa la técnica anteriormente mencionada.

Pensando en fluido

Sabemos que hay otras soluciones que hacen que el diseño fluido sea una opción fuerte. A pesar de la falta de apoyo de IE pare la propiedad the máxima anchura, los diseñadores todavía pueden jugar con una par de trucos que -casi- establecen una anchura máxima de un diseño fluido (Visita Vitamina para un ejemplo perfecto - recordar que este articulo fue publicado en 2006 -). La probabilidad es que si usted va con un layout fijo, fluido o variables de ancho fijo o elástico seguirás pensando largo sobre su audiencia, y por qué una disposición será más apropiada que otra.

Fe en las Estadísticas

Podría hablar acerca del ancho de la ventana todo el día, pero voy a cortar algunas estadísticas. Compara las dos tablas y los porcentajes de ancho de ventana de Collylogic y Dirty Pretty Things ((un sitio que el promedio de 15.000 visitas por día de una PC típicamente amistosa).

Window-width stadistica de Collylogic

Window-width stadisticas de Dirty Pretty Things

Entonces tiene esto algún uso?

Los porcentajes de mayor interés para mí son los "más de 1000" , especialmente por que este es el umbral en el que se producen los cambios Collylogic cambia de 2 a 3 columnas. Esa cifra ha alcanzado un promedio de 77% durante algún tiempo, y pueden ser una pequeña sorpresa. Sin embargo me sorprendió mucho al ver que el 73% de los Dirty Pretty Things, los visitantes tienen un visor más amplio que 1000-pixeles (espero que no estar insultando a ese público al decir esto - pero van a ser aplastados todos sobre la sidra barata de todas formas). Si bien es muy importante no ignorar los 23/27%, browsing con una anchura inferior a 1000 pixeles, estas cifras son alentadoras.

Esto podría significar que la audiencia el denominador común genérico esta mas bajo y nosotros como diseñadores web estamos siempre preocupados y en realidad creemos que somos un poco más inteligente de lo que pensamos. Ahora que todos ellos tienen iPods, también están negociando las anticuadas PC para comprar los nuevos iMacs y Vaio de Sony? Usted ve ciertamente mucho más los mac y vaio en las cafeterías por estos días.

Aun así, todavía es importante recordar que una resolución de pantalla 1024 x 768 no significa que los usuarios tienen sus ventanas completamente extendida. Lo más probable es que quede un poco de espacio justo en el escritorio desde el viewport, y que el viewport es quizás 850/900-pixeles de ancho. En mi Powerbook, estoy notando una barra de desplazamiento horizontal en cada una de las páginas web construidas por bien conocidos diseñadores, forzándome a ampliar mi información de la ventana del navegador o perder visual de la información.

Es probable que nunca habrá una solución perfecta, y web design continuará siendo basado sobre asunciones cuidadosamente consideradas. Cuando es "Mayor que 1000" estadística tiene un porcentaje del 100%, podría considerar fijar la anchura de mi sitio web para 1000-pixeles, en el supuesto de que para entonces todos los Powerbooks tengan una magia "hacer de este equipo cinco pulgadas más amplio.

Personalmente, estoy decepcionado al ver tantos sitios web diseñados en layout fijo entorno a los 1000-pixeles, y el reciente CSS Reboot me frustró en ese aspecto (aunque la mayoría fueran sitios personales, entonces as lo que quieras). Con una enorme oferta de métodos más flexibles (elástico, fluido, o variable fija, etc.) ¿Hay alguna razón que la experiencia del usuario final podría estar comprometida? Call me "obstinado", pero no creo que el pobre soporte para el máximo de anchura sea nunca mas una excusa legítima.

Lecturas Recomendadas

Nota: En esta traducción se han incluido nuevos artículos, ademas de los indicados por el autor con la finalidad de tener una visión mas actualizada.

• Ten questions for Richard RutterEnglish Only, 2004 -

• Rutter: Variable fixed-width layout - English Only, 2006 -

• Adams: Resolution dependant layout update - English Only, 2006 -

• Colville: CSS drop column layout - English Only, 2006 -

• Meyer: Making popular layout decisions - English Only, 2006 -

• Where did the data come from?- English Only, 2006 -

• What size do I need to suppor? - English Only, 2006 -

• Web Browser Window Size Matters More than Monitor Resolution - English Only, 2007 -

• Best Screen Resolution to Design Websites - English Only, 2009

• More Width - English Only, 2009