Jaka jest optymalna szerokość strony internetowej?

Zaprojektowanie strony internetowej i ustawienie jej optymalnej szerokości to rozmowa, którą warto przeprowadzić. Wielu z Was zauważyło, że ostatnio zmieniłem szerokość projektu mojego bloga. Zwiększyłem szerokość strony do 1048 pikseli. Niektórzy z was mogą nie zgadzać się z tym posunięciem - ale chciałem podzielić się niektórymi statystykami i powodami, dla których rozszerzyłem temat tak szeroko.

1048 pikseli nie było jednak liczbą losową.

Zwiększenie szerokości mojej strony miało dwa kluczowe czynniki:

  • Zmień szerokość YouTubeYouTube oferuje teraz większe rozmiary osadzania. Jeśli klikniesz mały bieg na pasku bocznym strony wideo YouTube, otrzymasz opcje dla większych rozmiarów, a także motywu. Ponieważ filmy wideo w wyższej rozdzielczości stają się powszechne na Youtube, chciałem umieścić te filmy na moim blogu i wyświetlać je tak szczegółowo, jak tylko mogłem (bez zajmowania całej szerokości strony).
  • Typowe reklamy mają szerokość 125, 250 i 300 pikseli. Wydaje się, że 300 pikseli pojawia się coraz częściej w witrynach z reklamami i chciałem umieścić je starannie na pasku bocznym.

Oczywiście po lewej i prawej stronie strony, zawartości i paska bocznego jest trochę dopełnienia ... więc magiczna liczba wynosiła 1048 pikseli dla mojego motywu:

Optymalna szerokość witryny internetowej

Czy sprawdziłem statystyki czytelników?

Tak oczywiście! Gdyby większość moich gości korzystała z ekranów o niższej rozdzielczości, z pewnością zastanawiałbym się nad rozszerzeniem strony. Szerokość i procentPo wyprowadzeniu rozdzielczości ekranu z mojego pakietu Analytics (w Google jest to Visitors> Browser Capabilities> Screen Resolutions), utworzyłem arkusz kalkulacyjny Excel z wynikami i przeanalizowałem szerokość z pola rozdzielczości.

Google zapewnia rozdzielczość 1600 × 1200, więc musisz wziąć wszystko z lewej strony „x”, pomnożyć to przez 1, aby uzyskać wynik liczbowy, aby można było sortować malejąco, a następnie wykonać SUMA.JEŻELI i zobaczyć, ile odwiedzin są większe lub mniejsze niż szerokość projektu, na którą patrzysz.

= LEWO (A2, ZNAJDŹ ("x", A2,1) -1) * 1

Czy porzuciłem 22% czytelników, którzy używają mniejszej rozdzielczości? Oczywiście nie! Zaletą układu z pozostawioną zawartością i prawym paskiem bocznym jest to, że możesz upewnić się, że zawartość nadal mieści się w szerokości większości przeglądarek. W tym przypadku 99% moich czytelników ma szerokość większą niż 640 pikseli, więc nic mi nie jest! Nie chcę, aby całkowicie przegapili pasek boczny, ale to drugorzędne w stosunku do treści.

Komentarze 9

  1. 1

    Proponuję układ hybrydowy i szerokość kontenera CSS na 100%. Dopóki masz stałą szerokość paska bocznego, nagłówek, stopka i główne obszary zawartości dostosują się do pozostałej szerokości ekranu. Wypełnia 100% okna przeglądarki każdego użytkownika, niezależnie od rozdzielczości monitora użytkownika. Dzięki temu nie musisz już liczyć pikseli ani śledzić statystyk użytkowników dotyczących rozdzielczości monitora.

    • 2

      Bardzo lubię układy hybrydowe, Bob - ale niestety czasami nie współgrają one dobrze z rzeczywistą zawartością. Może jestem leniwy, ale łatwiej jest mi wiedzieć, że w mojej witrynie maks. I min. Wynoszą 640 pikseli. Kiedy piszę posty, trudno jest sobie wyobrazić rozciąganie.

      Myślę, że to tylko osobiste preferencje!

  2. 3

    Zasadniczo zgadzam się z twoim wnioskiem, ale jeśli używam konfiguracji o stałej szerokości, ograniczam szerokość do 960 pikseli.

    Należy wziąć pod uwagę pionowe paski przewijania i inne paski skrótów przeglądarki, które zajmują dodatkową szerokość. Pozostając w granicach 960 pikseli, można mieć pewność, że nie ma przewijania od lewej do prawej na ekranie o rozdzielczości 1024 pikseli.

    Andy Ebon

  3. 4
  4. 5

    bardzo dziwne. W przeglądarce Firefox Twoja witryna ma poziomy pasek przewijania przy 1048 i nie ma czystego wyglądu, dopóki nie dojdziesz do 1090.

    Dzięki za świetne statystyki z postanowień Google

  5. 6

    Skoro masz swój ustawiona na 1048 pikseli, Twoja witryna wyświetla poziome paski przewijania na ekranie o rozdzielczości 1024. Myślę, że byłoby lepiej, gdybyś odgarnął 100 pikseli z szerokości (i wypełnienia) paska bocznego i obszaru zawartości, aby pasował do rozmiaru 728 × 1024. To jest dzisiaj najlepsza praktyka.

    Jedynym argumentem przeciwko temu byłoby, gdyby dane analityczne to potwierdzały… ale ponieważ nie podałeś tych danych w swoim artykule, powiedziałbym, że projekt strony jest wadliwy.

  6. 7
  7. 8

    Głupi człowiek
    Nie wszyscy używają każdego okna na pełnym ekranie - w rzeczywistości założę się, że niewielu to robi. 

    Twój blog jest w 80% oknem… a oto poziomy pasek przewijania

    A co jest poza ekranem… zobaczmy… nic.

    Więc twój pasek przewijania jest bezcelowy.

    Prosty sposób na utratę czytelników !!

    • 9

      Treść jest wyśrodkowana na stronie @ heenan73: disqus, zapewniając czytelnikowi dokładnie to, czego potrzebuje. Jeśli tracę czytelników, ponieważ oni zarówno widzą zawartość, jak i poziomy pasek przewijania… nie jestem pewien, czy byli czytelnikami, których szukam. Z pewnością w naszej zawartości jest coś wyjątkowego, co wypycha ją do 1217 pikseli, więc zamierzam to wyśledzić i naprawić. Ten post został faktycznie napisany o poprzednim temacie. Dziękuję za zwrócenie mi na to uwagi!

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.