Source: http://www.factorsim.info/2013/11/20/navegadores-resoluciones-y-otras-hierbas-analisis-oct2012-nov2013/
Timestamp: 2019-01-23 11:43:26+00:00

Document:
Navegadores, resoluciones y otras hierbas
Home / Desarrollo web / Navegadores, resoluciones y otras hierbas (Análisis 10/2012 – 11/2013)
Publicado noviembre 20th, 2013
En Desarrollo web, Diseño gráfico y web, Factorsim, Tecnologia
Uno de los mayores retos (y problemas) a los que nos enfrentamos los profesionales del diseño web está en la adecuación del contenido a los diferentes dispositivos, sistemas operativos y resoluciones de pantalla del usuario final.
Aunque parezca sencillo de conseguir, el entorno de trabajo es realmente complejo. Entre otras cosas, tenemos un ecosistema con:
Al menos 4 navegadores principales (y sus múltiples versiones) que interpretan de manera diferente el código HTML/CSS (Explorer 7, 8, 9, 10, 11, Firefox (y sus múltiples versiones), Chrome (y sus versiones), Safari 5, Safari 6. Y a esto hay que añadir otros navegadores minoritarios.
Tres sistemas operativos de escritorio (Windows, OS X, Linux), con sus versiones específicas de navegador.
Al menos 3 entornos de navegación móvil (Android, IOS, Windows)
Y múltiples resoluciones de pantalla según el dispositivo, incluyendo la visualización horizontal o vertical en móviles.
A esto hay que añadirle otros elementos como la necesaria sustitución de contenidos desarrollados en Flash en el entorno móvil, la presencia de la pantalla Retina (que requiere de imágenes más grandes) y la necesidad lógica que tiene el cliente de que su desarrollo se vea perfecto en los diferentes dispositivos. Os podéis imaginar que con lo que he explicado, no es nada fácil conseguirlo y cuando se consigue hay que renunciar a funcionalidades para asegurar el máximo de compatibilidad.
Estadísticas de uso de Navegadores. Noviembre 2012 – Octubre 2013
(Haz clic en la imagen para poder visualizar en grande el gráfico e interactuar con él)
Esta primera gráfica nos da algunos datos interesantes:
La combinación Firefox + Chrome ostenta el 58% de cuota de mercado. Teniendo en cuenta que estos navegadores se actualizan automáticamente y que soportan HTML y Css de forma muy correcta, es una gran noticia para los desarrolladores.
Explorer 7 tiene menos de un 1% de cuota de mercado. Explorer 7 (y el 8 en menor medida) son navegadores que no soportan bien algunas tecnologías que son imprescindibles en el diseño web actual, como es la normativa CSS3 o la codificación HTML5 (Tabla comparativa de navegadores).
Explorer 8 todavía tiene casi un 10% de cuota. Pero comienza ganar protagonismo Explorer 10 (12,44%). Explorer 10 es un navegador más robusto y potente: (+ info 1 | + info 2)
Safari tiene una cuota de mercado agrupada casi del 8%. Pero es significativo que el uso de Safari desde el Ipad gana a la versión de escritorio. Existe una explicación. Muchos usuarios de Mac, utilizan Chrome o Firefox que son más eficientes. En cambio en Ipad no hay muchas opciones. Safari está instalado por defecto y muchos usuarios no quieren instalar un navegador alternativo.
Comparativa de navegación (PC sobremesa – Móvil). Noviembre 2012 – Octubre 2013
Aquí resulta significativo el incremento notable que ha experimentado la navegación desde el móvil. En Octubre de 2012 era un 13% del total y un año después está cerca del 20%. Teniendo en cuenta el amplio parque instalado de ordenadores de escritorio, portátiles y servidores, es evidente que en un futuro ambas líneas tenderán a converger e incluso no sería exagerado decir que en 2 años el mayor acceso a Internet se realice desde el móvil. Sólo hay que fijarse en el incremento desde Junio del 2013 (4% de incremento en 5 meses). Aquí puedes consultar la evolución desde 1998.
Estadísticas de navegación según resolución de pantalla. Noviembre 2012 – Octubre 2013
Lo más llamativo de esta gráfica es la resolución que predomina en la navegación por Internet. Esta resolución es la que podemos encontrar por defecto en los portátiles de 15,6″ y en los monitores de 18,5″. Como dato curioso hay que indicar que es la resolución más extendida en los aparatos de televisión HD.
Otro dato que ha captado mi atención es la fila del Other (dotted). Esta fila tiene un peso muy significativo (casi un 18% y tenía curiosidad por saber de dónde salía así que he descargado el archivo de datos cvs que Stat Counter facilita y he trasladado a un Excel los valores más altos. Según parece, Stat Counter suma una serie de valores menos convencionales y los agrupa.
Una vez tenemos la tabla de valores, podemos sacar otra conclusión. He marcado en otro color las resoluciones menores a 1100×768. Si sumamos los diferentes valores obtenemos un 24,7% en Octubre del 2013. Es decir, más del 70% de los dispositivos que acceden actualmente a Internet tienen una resolución mayor a 1100 pixels. Y sumando los valores más altos vemos que el 50% de los dispositivos tienen más de 1300 pixels de resolución de ancho.
Y sin embargo, lo más común en diseño es seguir diseñando para resoluciones de 1024×768. Curioso.
Resolution 11/12 12/12 01/13 02/13 03/13 04/13 05/13 06/13 07/13 08/13 09/13 10/13
1366×768 22,55 23,17 23,12 23,19 23,57 23,38 23,78 24,91 25,03 25,07 24,82 24,78
1024×768 15,54 15,06 14,71 14,31 14,64 17,57 16,83 14,35 13,28 13,39 14,01 14,2
1280×800 11,34 11,17 10,99 10,82 10,5 9,8 9,63 9,69 9,45 9,27 9,11 9,01
1920×1080 6,24 6,43 6,67 6,79 6,86 6,7 6,89 7,2 7,48 7,58 7,64 7,75
1280×1024 6,78 6,56 6,63 6,62 6,45 6,16 6,17 6,06 6,05 5,99 6,12 6,06
1440×900 6,45 6,34 6,28 6,23 6,15 5,91 5,9 5,96 5,91 5,9 5,94 5,87
1600×900 4,45 4,53 4,58 4,65 4,69 4,67 4,72 4,76 4,82 4,75 4,73 4,76
768×1024 3,05 3,26 3,54 3,93 3,99 3,68 3,78 4,1 4,28 4,26 4,11 4,09
1680×1050 3,38 3,29 3,38 3,35 3,26 3,12 3,1 3,09 3,1 3,07 3,06 3,01
Unknown 2,38 2,47 2,55 2,61 2,61 2,55 2,65 2,77 2,86 2,88 2,89 2,91
1360×768 2,39 2,39 2,3 2,3 2,32 2,36 2,4 2,5 2,51 2,49 2,44 2,41
1024×600 2,1 2,11 2,05 2,02 2,01 1,87 1,87 1,94 1,89 1,84 1,75 1,69
1280×720 1,54 1,53 1,51 1,52 1,52 1,48 1,48 1,53 1,62 1,62 1,57 1,56
1280×768 1,4 1,39 1,34 1,33 1,32 1,31 1,31 1,31 1,28 1,3 1,26 1,23
1152×864 1,25 1,23 1,17 1,15 1,12 1,06 1,06 1,04 1,03 1,04 1,02 0,98
1920×1200 1,02 0,97 1,03 1,02 0,99 0,94 0,94 0,95 0,97 0,94 0,94 0,93
800×600 0,8 0,75 0,68 0,69 0,69 0,67 0,68 0,66 0,66 0,69 0,69 0,7
1093×614 0,62 0,61 0,61 0,6 0,59 0,54 0,55 0,57 0,66 0,66 0,64 0,62
1280×960 0,63 0,62 0,6 0,59 0,58 0,55 0,55 0,56 0,56 0,57 0,55 0,53
2560×1440 0,41 0,4 0,44 0,44 0,44 0,42 0,44 0,46 0,48 0,49 0,51 0,51
1536×864 0,34 0,35 0,36 0,36 0,35 0,32 0,32 0,33 0,52 0,54 0,54 0,55
Suma 94,66 94,63 94,54 94,52 94,65 95,06 95,05 94,74 94,44 94,34 94,34 94,15
Principales resoluciones de pantalla desde un acceso móvil. Noviembre 2012 – Octubre 2013
Esta gráfica aporta poco a nuestro análisis por varios motivos. En primera instancia han agrupado un conjunto de resoluciones en el grupo de Otros y hay una resolución “desconocida” que supone un 10% del total.
He descargado el archivo y lo he procesado como la tabla anterior. Y aquí viene mi segundo desconcierto. No he sido capaz de identificar las resoluciones del Iphone 4 (960×640) o Iphone 5 (1136×640) en el listado. ¡Y eso que hay 365 resoluciones diferentes!
Date 11/12 12/12 01/13 02/13 03/13 04/13 05/13 06/13 07/13 08/13 09/13 10/13
320×480 21,45 19,98 21,13 21,19 20,84 19,87 19,06 18,18 17,54 16,34 15,16 13,13
Unknown 11,6 11,38 11,08 11,6 11,14 11,2 10,61 10,21 10,06 10,62 11,26 10,35
240×320 8,85 8,21 6,14 6,23 6,2 6,41 6,58 6,9 6,85 7,1 7,29 6,4
720×1280 3,6 4,57 5,86 6,51 6,47 6,78 6,91 6,62 6,72 6,76 6,87 6,34
320×568 2,01 2,95 4,4 5,4 6,02 6,45 6,86 7,15 7,43 7,37 7,63 7,49
480×800 3,55 3,92 4,47 4,71 4,93 5,29 5,64 5,8 6,08 6,55 6,76 6,43
800×600 5,75 6,65 5,69 4,51 3,63 3,49 3,59 3,57 3,76 3,82 3,59 3,53
320×240 4,66 4,32 3,77 3,77 3,85 3,93 4,05 4,17 4,21 4,27 4,19 3,76
360×640 2,81 2,8 2,25 2 2,3 2,37 2,45 2,52 2,6 2,73 2,88 2,74
128×160 2,44 2,19 1,64 1,63 1,65 1,59 1,56 1,6 1,51 1,58 1,63 1,4
540×960 1,25 1,28 1,41 1,47 1,48 1,42 1,37 1,31 1,31 1,28 1,28 1,21
240×400 1,24 1,22 0,87 0,96 0,95 0,91 0,91 0,99 0,99 1 1,05 0,84
1280×720 0,64 0,76 0,94 1,05 1,02 1,06 1 0,91 0,88 0,85 0,8 0,7
1080×1920 0 0,01 0,02 0,04 0,09 0,15 0,48 0,88 1,3 1,68 1,99 2,07
Suma (1) 69,85 70,24 69,67 71,07 70,57 70,92 71,07 70,81 71,24 71,95 72,38 66,39
(1) El porcentaje restante (hasta el 100%) se obtiene de la suma del resto de resoluciones presente en el listado.
Por último me gustaría publicar cuatro gráficas que no tienen relación con el desarrollo web ni la resolución pero que me han parecido significativas:
Principales redes sociales. Noviembre 2012 – Octubre 2013
Esta gráfica es extraña. No parece lógico que Facebook concentre el 70% del tráfico de redes sociales. Según podemos leer en las FAQ de Stat Counter “We rank social media sites according to their traffic generation capabilities i.e. the amount of traffic they refer to other websites. We do NOT rank social media sites according to the amount of traffic they receive.”. Es decir, lo que mide Stat Counter es la influencia que estas redes sociales tienen en otros espacios web.
Una vez dicho esto, vamos a analizar la situación de estas redes en 3 países:
¿Qué pasó en Marzo del 2003? He buscado una explicación plausible y no he encontrado nada que explique esta subida y caída repentina. De hecho, la gráfica es un auténtico festival de subidas y bajadas de actividad en redes sociales. Esta gráfica en si misma merecería un post específico.
En Rusia, la red de moda es Vkontakte, un clon de Facebook (imagen 1 | imagen 2). Por curiosidad, fijaros en las imágenes de referencia/ayuda: Un chico joven con fotos de mujeres atractivas y posando como modelos.
Otro fenómeno extraño. ¿Qué pasó en Septiembre para que un 8% de las visitas se traspasaran de Twitter a Facebook? Aparte de este detalle, la gráfica demuestra una simetría entre las dos redes digna de análisis.
Con esto termino mi análisis de estadísticas web. Espero que alguien sea capaz de explicarme el porqué no aparecen las resoluciones del Iphone 4 y 5 en las estadísticas de navegación.
Bonus. ¿Qué cuota de mercado crees que tiene Google en Rusia? ¿y en China?
Etiquetas: batallasbrowsersnavegadoresresoluciones

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución