Click me
Transcribed

Diseñar una página web "above the fold"

Diseñar una página web ABOVE THE FOLD ABOVE THE FOLD (ENCIMA DEL PLIEGUE) CORRESPONDE A LA PARTE DE LA PÁGINA WEB QUE ES VISIBLE SIN NECESIDAD DE HACER SCROLL HACIA ABAJO CON DE SON FSTE CONCEPTO VIENE DE LOS PERIODICOS, EN LOS CUALES CUALQUIER ARTÍCULO, IMAGEN O PIEZA PUBLICITARIA UBICADA EN LA MITAD SUPERIOR DE LA PORTADA ERA CONSIDERADA "ABOVE THE FOLD". EN EL PASADO ESTE TÉRMINO DESPERTÓ MUCHAS DUDAS ENTRE LOS DISEÑADORES, ESPECIALMENTE AL PLANTEARSE QUÉ DEBERÍA UBICARSE ABOVE THE FOLDENCIMA DEL PLIEGUE) Y QUÉ BELOW THE FOLD (DEBAJO DEL PLIEGUE). CON EL SURGIMIENTO DEL INTERNET MÓVIL, DEL USO DE TABLETAS Y DE LA EVOLUCIÓN EN EL TAMAÑO Y RESOLUCIÓN DE LAS PANTALLAS, EL ROL DEL PLIEGUE ES SIEMPRE CAMBIANTE Y. POR TANTO, IMPOSIBLE DE MEDIR CON EXACTITUD. NO OBSTANTE, ES ALGO QUE SE DEBE TENER SIEMPRE EN CUENTA AL DISEÑAR UNA PÁGINA WEB. RESOLUCIÓN DE PANTALLA ACTUALMENTE LA MAYORÍA DE GENTE UTILIZA PANTALLAS CON UNA RESOLUCIÓN MAYOR A 1024 X 768. A CONTINUACIÓN PODRÁS VER COMO ESTO HA IDO CAMBIANDO A LO LARGO DE LOS ÚLTIMOS 5 ANOS. A MEDIDA QUE LAS PANTALLAS SE HAN IDO HACIENDO MÁS Y MÁS GRANDES, MÁS INFORMACIÓN PUEDE SER INCLUIDA ABOVE THE FOLD; AUNQUE ESTE PLIEGUE RESULTE IMPOSIBLE DE DEFINIR. MAYOR 1024X768 800X600 2012 2011 2008 2009 2010 85% 1% 1% 13% 85% 6% 8% 48% 38% 76% 1% 14% 3% 4% 36% 57% 3% 1% 20% SCROLL HACIA ABAJO CONSEJOS DE DISEÑO NO INTENTES INCLUIR TODO TU CONTENIDO EN EL PRINCIPIO DE LA PÁGINA - REPÁRTELO EN DISTINTOS APARTADOS A LO LARGO DE LA WEB. TENER LAS ESTADÍSTICAS EN MENTE ES MUY ÚTIL, YA QUE TE AYUDARÁ A TENER UNA IDEA CLARA A LA HORA DE DISEÑAR TU WEB. LOS DATOS DEMUESTRAN QUE EL PLIEGUE ES MUCHO MENOOS IMPORTANTE EN LA ACTUALIDAD QUE HACE UNOS AÑOS Y QUE ES MUY DIFÍCIL DE DEFINIR. SER CONSCIENTE DE LA EXISTENCIA DE ESTE PLIEGUE, PERO NO REGIR TU DISEÑO WEB POR ÉL, TE AYUDARÁ A CONSEGUIR LOS MEJORES RESULTADOS. SÓLO EL 23% DE USUARIOS HACE SCROLL EN LA PRIMERA VISITA A UN SITIO WEB. SIN EMBARGO, CON UN BUEN DISEÑO, • INCLUYE UNA CABECERA QUE SEA CONCISA Y QUE EXPLIQUE, AL PRINCIPIO DE LA PÁGINA. QUÉ ES LO QUE TU SITIO WEB OFRECE A QUIENES LO VISITEN. • ASEGÚRATE DE TENER UN MENÚ DE NAVEGACIÓN CLARO QUE DIRIJA A LOS UUUARIOS FÁCILMENTE HACIA LAS ÁREAS DE TU WEB QUE ESTÁN BUSCANDO. 23% QUE INDIQUE QUE HAY MÁS CONTENIDO POR VER, LOS USUARIOS ESTARÁN MÁS QUE DISPUESTOS A HACER • EL CONTENIDO Y EL COPY DE TU PÁGINA DEBE SER ATRACTIVO Y DEBE FOMENTAR QUE LOS USUARIOS SIGAN LEYENDO Y DESPLAZÁNDOSE POR EL SITIO, HACIENDO SCROLL HACIA ABAJO CON EL RATÓN. SCROLL HACIA ABAJO. ESTE ESTUDIO MUESTRA EL LUGAR, CON RESPECTO AL PLIEGUE, EN EL QUE LAS VISITAS DE LOS USUARIOS SE CENTRAN: • INCLUYE TAMBIÉN INFORMACIÓN DE UTILIDAD BELOW THE FOLD (DEBAJO DEL PLIEGUE). ABAJO DEBES REPARTIR TU CONTENIDO HACIA ABAJO, DEJANDO PARA EL FINAL DE LA PÁGINA APARTADOS COMO EL FORMULARIO DE CONTACTO. • COMPRUEBA QUE TU PÁGINA WEB SE VISUALIZAY FUNCIONA CORRECTAMENTE EN LOS DISTINTOS NAVEGADORES Y DISPOSITIVOS, PARA PODER SACARLE EL MÁXIMO PARTIDO A LA DISTRIBUCIÓN DEL CONTENIDO ENCIMA O DEBAJO DEL PLIEGUE. ENCIMA 39.3% 35.2% NAVEGADORES USADOS EN 2012 TAL Y COMO SE MUESTRA EN EL GRÁFICO SIGUIENTE Y A PESAR DE QUE LOS ÚLTIMOS ESTUDIOS DEMUESTRAN QUE CHROME, FIREFOXE INTERNET EXPLORER SON LOS NAVEGADORES MÁS COMUNES Y QUE UTILIZAN UN MAYOR NÚMERO DE USUARIOS DE INTERNET, CADA VEZ HAY MÁS OPCIONES QUE HACEN QUE EL PLIEGUE SEA MENOS RELEVANTE. 18.1% 4.3% 2.2% INTERNET FIREFOX CHROME SAFARI OPERA EXPLORER Fuentes: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3schools.com/browsers/browsers os.asp http://www.useit.com/alertbox/scrolling-attention.html f BasekitLatino E @Basekit_es BaseKit en español www basekit.com.mx BK basekit

Diseñar una página web "above the fold"

shared by BaseKit_es on Aug 06
190 views
0 shares
0 comments
Infografía que refleja la importancia actual de la ubicación de elementos “above the fold” al diseñar una página web.

Category

Computers
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size