Newsletter

Grupa MagazynyInternetowe

Online: 909

Wyszukiwarka

Projekt strony WWW

Ile zobaczą internauci?

Ile zobaczą internauci? Większość internautów korzysta z zaskakująco małego okna przeglądarki. Jak ułożyć treść, aby zobaczyli to co ważne?

Marcin Kosedowski

Badania przeprowadzone przez pracowników Google pozwoliły pokazać, jaka część strony mieści się w oknie przeglądarki typowego internauty. To ważna informacja, bo o tej pory statystyki mówiły głównie o tym, jakiej z rozdzielczości korzystają odwiedzający. Miało to mały związek z wyglądem strony, bo maksymalizowanie przeglądarki przy dużych, panoramicznych monitorach nie ma dużego sensu. Teraz wiemy dokładnie co widzą użytkownicy.

Czy w Google Analytics obok rozdzielczości ekranu pojawią się rozmiary okien przeglądarek? Czy w Google Analytics obok rozdzielczości ekranu pojawią się rozmiary okien przeglądarek?

Tylko 600 pikseli w pionie!

Na stronie projektu Google Browser Size (http://browsersize.googlelabs....) możemy dokładnie przyjrzeć się wynikom i nałożyć je na własną witrynę. Niestety programiści Google nie wzięli pod uwagę tego, że strony często są centrowane i nałożyli grafikę od lewego górnego rogu, co w przypadku niektórych witryn może wymagać manipulowania oknem.

Czy w Google Analytics obok rozdzielczości ekranu pojawią się rozmiary okien przeglądarek? Czy w Google Analytics obok rozdzielczości ekranu pojawią się rozmiary okien przeglądarek?

Na pierwszy rzut oka zaskakujące mogą wydawać się wyniki pokazujące, że 50% internautów zobaczy jedynie pierwszych 600 pikseli strony w pionie. Wynikają one z wciąż popularnej w laptopach rozdzielczości 1024 x 768. Miejsce w pionie zajmuje jeszcze pasek zadań, paski narzędziowe przeglądarki, belka z tytułem okna, pasek stanu... Łącznie mogą zająć 1/4 powierzchni ekranu!

Wysokość strony, której nie zobaczy dany procent internautów Wysokość strony, której nie zobaczy dany procent internautów

Duży wpływ na takie wyniki może mieć sprzedaż netbooków, których standardowa rozdzielczość wynosi 1024 x 600 pikseli i urządzeń mobilnych, gdzie przekroczenie 480 pikseli to rzadkość.

Na wykresach widać wyraźnie, że nawet jeśli liczba posiadaczy monitorów panoramicznych jest duża, to i tak mało kto korzysta z okna szerokiego na więcej niż ok. 1300 pikseli. Nie warto więc robić tak szerokich stron.

Szerokość strony, której nie zobaczy dany procent internautów Szerokość strony, której nie zobaczy dany procent internautów

Jak ułożyć treść?

Graficy projektujący wygląd strony mogą być zaszokowani tym, jak mały jej fragment będzie widzialny dla zwykłego użytkownika, który nie korzysta z 30" monitora. Strona powinna być zaprojektowana tak, żeby nie trzeba było jej zbyt dużo przewijać.

Najnowsze informacje powinny znaleźć się na pierwszym widocznym ekranie, aby użytkownicy od razu wiedzieli, że mają przejść do nowego artykułu albo strony z polecanym produktem.

Stosunkowo mała szerokość okna jest też argumentem za umieszczaniem menu po prawej stronie – jeśli część strony zostanie obcięta, to nie będzie to treść.

Dobrym pomysłem jest umieszczenie poziomego menu (ale nie za szerokiego) po lewej stronie, a mniej ważnej wyszukiwarki – po prawej. Często jest dokładnie odwrotnie. Pozwala to na szybkie przejście do żądanej strony np. przez użytkowników komórek – tam przestrzeń jest wyjątkowo ważna.

Pamiętaj o dużych monitorach

Nie można zapominać o osobach korzystających z rozdzielczości większych niż przeciętne. W takiej sytuacji zdarza się, że 60% okna zajmują białe marginesy po obydwu stronach tekstu albo obrazek w tle zaczyna się powtarzać. Przykładem może być samo Google Browser Size, którego twórcy chyba nie przewidzieli, że ktoś może otworzyć ich stronę w wysokiej rozdzielczości.

Przykład powielania grafiki przy dużym oknie przeglądarki (2048 x 1576). Przykład powielania grafiki przy dużym oknie przeglądarki (2048 x 1576).

Jeśli jesteś grafikiem, dodaj przygotowaną przez Google grafikę jako warstwę w Photoshopie i miej ją na uwadze przy projektowaniu. Użytkownicy będą wdzięczni.

8 marca 2010

Powiązane publikacje

Jak uzyskać nowoczesną stopkę w CSS?

Jak uzyskać nowoczesną stopkę w CSS?

Rozdzielczość ekranu, szerokość okna przeglądarki

Rozdzielczość ekranu, szerokość okna przeglądarki

 
Skomentuj
ten artykuł

Komentarzy: 2

Kod obrazkowy
(Kliknij, aby zmienić)
 
Przejdż do tego postu na forum środa, 10.03.2010 13:41Piotr

Eh nie ma to jak szerzyć mity na temat web designu. Proponuję zapoznać się z artykułem na http://iampaddy.com/lifebelow600/

Przejdż do tego postu na forum poniedziałek, 8.03.2010 15:16Pluto

21" na pivocie - 99% stronek miescie sie wszerz i widac duuuzo wiecej w dol. Monitor oczywiscie jako drugi wink.gif

Zobacz wszystkie komentarze »

Autor

Marcin Kosedowski

Marcin Kosedowski - programista i mimo wykształcenia typowo technicznego autor artykułów o tematyce dotyczącej Internetu i bezpieczeństwa w sieci. Hobbystycznie prowadzi bloga, na którym porusza sprawy związane z programowaniem i Internetem.

Adres bloga like-a-geek.jogger.pl

Artykuły tego autora:

Newsletter

Jesli chcesz być na bieżąco z tym co się dzieje na stronie magazynu INTERNET Maker zapisz się do naszego newslettera.