Quina és l’amplada de la pàgina web òptima?

Dissenyar un lloc web i configurar l’amplada de la pàgina web a una amplada òptima és una conversa que val la pena tenir. Molts de vosaltres heu notat que recentment he canviat l’amplada del disseny del meu bloc. He ampliat l’amplada de la pàgina fins a 1048 píxels. És possible que alguns de vosaltres no estiguin d’acord amb el moviment, però volia compartir algunes estadístiques i raons per les quals he ampliat l’amplada del tema.

1048 píxels, però, no era un número aleatori.

Hi va haver dues influències clau a l’hora d’ampliar l’amplada de la meva pàgina:

  • Canvia l’amplada de YoutubeYoutube ofereix mides d’inserció més grans ara. Si feu clic a l’engranatge petit de la barra lateral de la pàgina de vídeo de Youtube, se us ofereixen opcions per a mides més grans i també per al tema. Com que els vídeos de més alta definició es converteixen en un lloc habitual a Youtube, volia incorporar aquests vídeos al meu bloc i mostrar-los amb el màxim de detalls possible (sense consumir tota l’amplada de la pàgina).
  • La publicitat típica té una amplada de 125, 250 i 300 píxels. Sembla que 300 píxels apareixen cada cop més als llocs d’ingressos publicitaris i volia incorporar-los perfectament a la barra lateral.

I, per descomptat, hi ha alguns farcits a l'esquerra i a la dreta de la pàgina, el contingut i la barra lateral ... de manera que el nombre màgic era de 1048 píxels per al meu tema:

Amplada òptima del lloc web

He comprovat les estadístiques dels meus lectors?

Sí, per suposat! Si la majoria dels meus visitants tinguessin pantalles de resolució més baixa, sens dubte hauria tingut un segon pensament sobre ampliar la meva pàgina. Amplada i percentatgeDesprés de publicar les resolucions de pantalla del meu paquet d'Analytics (a Google són Visitants> Capacitats del navegador> Resolucions de pantalla), he creat un full de càlcul Excel dels resultats i he analitzat l'amplada del camp de resolució.

Google ofereix una resolució de 1600 × 1200, de manera que heu d’agafar-ho tot de l’esquerra de la "x", multiplicar-lo per 1 per convertir-lo en un resultat numèric perquè pugueu ordenar descendentment, fer un SUMIF i veure quantes visites són superiors o inferiors a l’amplada de disseny que esteu veient.

= ESQUERRA (A2, FIND ("x", A2,1) -1) * 1

He abandonat el 22% dels lectors que tenen una resolució més petita? És clar que no! L’aspecte positiu d’un disseny amb el contingut esquerre i la barra lateral dreta és que podeu assegurar-vos que el contingut continuï dins de l’amplada de la majoria dels navegadors. En aquest cas, el 99% dels meus lectors tenen una amplada superior a 640 píxels, així que estic bé. No vull que perdin totalment la barra lateral, però això és secundari al contingut.

9 Comentaris

  1. 1

    Us proposo un disseny híbrid i una amplada de contenidor CSS del 100%. Sempre que tingueu una amplada fixa per a la barra lateral, la capçalera, el peu de pàgina i les àrees de contingut principals s'ajustaran per ajustar-se a l'amplada restant de la pantalla. Omple el 100% de la finestra del navegador de tots, independentment de la resolució del monitor de l'usuari. Aleshores ja no haureu de comptar píxels ni fer un seguiment de les estadístiques dels usuaris sobre les resolucions del monitor.

    • 2

      Bob, m'agraden molt els dissenys híbrids, Bob, però, malauradament, de vegades no juguen bé amb el contingut real. Potser sóc mandrós, però és més fàcil saber que el màxim i el mínim són de 640 px al meu lloc. L’estirament és difícil de concebre quan escric les publicacions.

      Només una preferència personal, suposo!

  2. 3

    Essencialment, estic d'acord amb la vostra conclusió, però si estic fent servir una configuració d'amplada fixa, limito l'amplada a 960 píxels.

    Cal tenir en compte les barres de desplaçament verticals i altres barres de dreceres del navegador que ocupen una amplada addicional. Si es manté a 960 píxels, es garanteix que no hi ha cap desplaçament d’esquerra a dreta en una resolució de pantalla d’amplada de 1024 píxels.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Ja que teniu el vostre definit a 1048 px, el vostre lloc provoca barres de desplaçament horitzontals en una pantalla de 1024. Crec que hauria estat millor desaprofitar 100 px de l’amplada (i el farciment) de la barra lateral i de l’àrea de contingut perquè s’adapti a un 728 × 1024. Això és el que és la millor pràctica actual.

    L'únic cas contra això seria si els números d'anàlisi ho avalen ... però com que no vau proporcionar aquestes dades al vostre article, diria que el disseny de la pàgina és defectuós.

  6. 7
  7. 8

    Home ximple
    No tothom utilitza totes les finestres a pantalla completa; de fet, apostaria que pocs ho fan. 

    Tinc el teu bloc en un 80% windo ... i aquí està, una barra de desplaçament horitzontal

    I el que queda fora de la pantalla ... deixa veure ... res.

    Per tant, la barra de desplaçament no té sentit.

    Una manera fàcil de perdre lectors !!

    • 9

      El contingut es centra a la pàgina @ heenan73: disqus, que proporciona al lector exactament el que necessita. Si perdo lectors perquè tots dos poden veure el contingut I veure una barra de desplaçament horitzontal ... no estic segur que fossin els lectors que busco. Definitivament, hi ha quelcom únic dins del nostre contingut que l’empeny a 1217 px, així que faré un seguiment i solucionar-ho. Aquesta publicació va ser escrita sobre un tema anterior. Gràcies per cridar-lo a la meva atenció.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.