Hasta ahora he diseñado para resoluciones de 800x600, últimamente estoy pensando cual debería ser el ancho máximo de una web de escritorio.
google drive, evernote, pinterest, meneame me parecen muy buenos ejemplos de diseño liquido, pero no todas las webs hacen falta que se adapten al 100% del ancho de la pantalla.
Como podemos ver el ancho máximo en pixeles de otros sitios de sus versiones de escritorio, no superan los 1000 pixeles:
940 dribbble
974 linkedin
981 facebook
837 twitter
960 wordpress.org
990 dropbox
Estas son las resoluciones de pantalla más usadas de los usuarios de betabeers:
1366x768
1920x1080
1280x800
1440x900
1280x1024
1680x1050
320x480 (iphone)
768x1024
1024x768
1600x900
Si bien es cierto que la gran mayoría de páginas web están por debajo de los 1000px, es por que todavía no han dado el paso para adaptar sus páginas web, y se han quedado en la creencia de que la resolución base es 1024 x 768.
También hay que tener en cuenta, que antes de sacar números y métricas hay que excluir aquellas visitas desde dispositivos móviles ( smartphones, tabletas ).
Una vez echo esto deberemos analizar entre que resoluciones están nuestros usuarios potenciales, y acotarnos entre estas medidas. Es mejor quedarse corto que pasarse. Es decir es preferible mantener esa compatibilidad antes que perder esa experiencia de usuario.
Un buen ejemplo es mashable.com, que ya cuenta con un diseño fluido prácticamente al 100%. Su máximo ancho es de 1440px, lo cual me parece muy razonable, aunque si somos por el contrario más conservadores, podemos hacer como time.com, que aunque también cuenta con un diseño fluido bastante logrado, se mantiene en un máximo de 1122px, que no está nada mal, y está entre dos resoluciones mayoritarias. 1024 X 768 y 1280 X 1024.
Como se puede ver, lo más importante no es ofrecer un gran escaparate de contenido, sino lo bien que lo adaptamos. No cabe decir que a más resolución más contenido en nuestro first view, y por lo tanto tiende a aumentar la media de la visita por usuario.
Espero que os haya resultado interesante. Quien quiera charla que opine
No soy experto en esto, pero creo que es práctico hacer el diseño de la web que se adapte a la pantalla y no a un tamaño máximo. Las webs citadas anteriormente, dribble,linkedin,etc... tienen una app para poder acceder desde fuera de la web o una version movil. Sin contar que ya estaban construidas antes del boom de los tlf y tabletas. Supone un gran coste adaptarlas ahora. Yo procuro hacerlas adaptativas para no tener que preocuparme en el futuro de modelos de pantalla o demas. Pero me enseñaron que tenian que ser 1000 pixeles.
Creo que el camino a seguir es hacerlas independientes del tamaño de ventana.
Entiendo el razonamiento, pero si optas por hacer las páginas web independientes del tamaño de ventana, te verás obligado a tener para cada dispositivo un desarrollo.
Como bien dices, las webs que disponen de una resolución fijo disponen de aplicaciones extra. Entenderás, que no puedes defender tu modelo argumentando que supone un gran coste, si es justamente e infinitamente mejor disponer de un único desarrollo (aunque este requiera de un mayor trabajo) adaptable a cualquier terminal, que desarrollar para cada plataforma una aplicación propia.
Ponte en el caso de una mediana empresa, que dispone de un grupo de desarrollo, que conocen ciertas tecnologías, las que sean, no importa. Dicha empresa tiene una página web fija, y quiere aumentar su visibilidad al resto de dispositivos.
Tiene dos opciones, crear aplicaciones como bien defiendes, o adaptar lo que ya tienen y conocen (muy importante) aunque esta última opción les lleve algo más de tiempo.
Lo primero es que ese grupo de desarrollo posiblemente no tenga experiencia en el desarrollo de aplicaciones nativas (sea, cual sea la plataforma), tampoco disponga de las licencias (de pago) para subir dichas aplicaciones, y finalmente la empresa no se pueda permitir el lujo de comprar hardware propio de cada plataforma. En el caso de no conocer las tecnologías, existe una fase de aprendizaje, tiempos, ... e incluso dinero para formar a tus empleados.
No se que decirte, yo veo que la primera opción tiene muchos menos costes e inconvenientes. Además de que la tecnología les sería familiar, únicamente sería un proceso de formación o actualización, sino lo tienen ya.
google drive, evernote, pinterest, meneame me parecen muy buenos ejemplos de diseño liquido, pero no todas las webs hacen falta que se adapten al 100% del ancho de la pantalla.
Como podemos ver el ancho máximo en pixeles de otros sitios de sus versiones de escritorio, no superan los 1000 pixeles:
940 dribbble
974 linkedin
981 facebook
837 twitter
960 wordpress.org
990 dropbox
Estas son las resoluciones de pantalla más usadas de los usuarios de betabeers:
1366x768
1920x1080
1280x800
1440x900
1280x1024
1680x1050
320x480 (iphone)
768x1024
1024x768
1600x900
¿En vuestros sitios que ancho máxima usáis?
12/03/2013 02:03
También hay que tener en cuenta, que antes de sacar números y métricas hay que excluir aquellas visitas desde dispositivos móviles ( smartphones, tabletas ).
Una vez echo esto deberemos analizar entre que resoluciones están nuestros usuarios potenciales, y acotarnos entre estas medidas. Es mejor quedarse corto que pasarse. Es decir es preferible mantener esa compatibilidad antes que perder esa experiencia de usuario.
Un buen ejemplo es mashable.com, que ya cuenta con un diseño fluido prácticamente al 100%. Su máximo ancho es de 1440px, lo cual me parece muy razonable, aunque si somos por el contrario más conservadores, podemos hacer como time.com, que aunque también cuenta con un diseño fluido bastante logrado, se mantiene en un máximo de 1122px, que no está nada mal, y está entre dos resoluciones mayoritarias. 1024 X 768 y 1280 X 1024.
Como se puede ver, lo más importante no es ofrecer un gran escaparate de contenido, sino lo bien que lo adaptamos. No cabe decir que a más resolución más contenido en nuestro first view, y por lo tanto tiende a aumentar la media de la visita por usuario.
Espero que os haya resultado interesante. Quien quiera charla que opine
12/03/2013 12:16
Creo que el camino a seguir es hacerlas independientes del tamaño de ventana.
12/03/2013 15:25
Como bien dices, las webs que disponen de una resolución fijo disponen de aplicaciones extra. Entenderás, que no puedes defender tu modelo argumentando que supone un gran coste, si es justamente e infinitamente mejor disponer de un único desarrollo (aunque este requiera de un mayor trabajo) adaptable a cualquier terminal, que desarrollar para cada plataforma una aplicación propia.
Ponte en el caso de una mediana empresa, que dispone de un grupo de desarrollo, que conocen ciertas tecnologías, las que sean, no importa. Dicha empresa tiene una página web fija, y quiere aumentar su visibilidad al resto de dispositivos.
Tiene dos opciones, crear aplicaciones como bien defiendes, o adaptar lo que ya tienen y conocen (muy importante) aunque esta última opción les lleve algo más de tiempo.
Lo primero es que ese grupo de desarrollo posiblemente no tenga experiencia en el desarrollo de aplicaciones nativas (sea, cual sea la plataforma), tampoco disponga de las licencias (de pago) para subir dichas aplicaciones, y finalmente la empresa no se pueda permitir el lujo de comprar hardware propio de cada plataforma. En el caso de no conocer las tecnologías, existe una fase de aprendizaje, tiempos, ... e incluso dinero para formar a tus empleados.
No se que decirte, yo veo que la primera opción tiene muchos menos costes e inconvenientes. Además de que la tecnología les sería familiar, únicamente sería un proceso de formación o actualización, sino lo tienen ya.
12/03/2013 15:40
width: 80%; / o el máximo que deje algo de margen
margin: 0 auto;
max-width: 1400px; / si uso imágenes nunca las hago mas grandes así queda centrado
... y cuando está por debajo de 600px o segun si es un tablet/smartphone aumento:
width: 95%;
@gruncho