W jakiej rozdzielczości robić strony www?

Przy ostatnim projekcie, który realizowałem otrzymałem takie pytanie i postanowiłem podzielić się z Wami moją opinią.

Strony robi się pod rozdzielczość 800x600px lub 1024x768px. Większe rozdzielczości nie są jeszcze brane pod uwagę. Nie pamiętam czy kiedykolwiek była stosowana mniejsza rozdzielczość niż 800x600px, a przynajmniej teraz jest to rozdzielczość najmniejsza pod którą robi się strony. Aktualnie co raz częściej projektuje się witryny pod 1024x768px ze względu na rozwój rozdzielczości domowych wyświetlaczy.
Rzadko zdarza się, aby ktokolwiek korzystał jeszcze z rozdzielczości 800×600 aczkolwiek zdarza się to.

Patrząc na statystykę jednej z moich stron widać, że 2% użytkowników korzysta jeszcze z tej rozdzielczości. statystykiNiby to niewiele, ale w skali miesiąca jest to ponad 450 osób. Zdecydowana większość użytkowników korzysta z rozdzielczości 1024x768px i wyższych.

Teraz warto sobie zadać pytanie czy warto robić witrynę dostosowaną jedynie do 2% użytkowników?
Czy coś stracimy robiąc witrynę pod rozdzielczość 800x600px? Zdecydowanie nie, użytkownicy posiadający nawet większe rozdzielczości zobaczą całą witrynę. Osoby z większymi rozdzielczościami niż 1024x768px będą widziały po prostu dość niewielką stronę z dużą ilością wolnego miejsca po bokach.
Jak wygląda to w przypadku witryny zrobionej pod rozdzielczość 1024x768px? W tej rozdzielczości i większych witryna będzie wyglądała bardzo dobrze jednak w rozdzielczości 800×600 pojawi się problem. Użytkownik nie zobaczy prawej części strony, aby to zrobić będzie musiał przewinąć stronę suwakiem w bok. Nie każdy internauta może się zorientować, że po prawej stronie jest dalsza część witryny dlatego też należy uważać co się tam umieszcza.

Jeśli mielibyśmy zwracać uwagę na użytkowników z rozdzielczościami 800×600 to w poniższym przykładzie “Buen Retiro” błędem byłoby umieszczenie menu po prawej stronie. Zdecydowanie lepszym rozwiązaniem byłoby umieszczenie menu po lewej stronie lub w górnej części w szerz witryny. Aby skorzystać z menu trzeba przewinąć suwakiem witrynę. Wydaje mi się, że na witrynie jest na tyle nie dużo danych, iż można byłoby wszystko zmieścić w rozdzielczość 800×600. Swoją drogą bardzo ładny design prosty czysty i przejrzysty.

Innym rozwiązaniem jest użycie na stronie elementów skalowalnych w css. W takim przypadku witryna powinna dobrze wyświetlać się we wszystkich rozdzielczościach i wypełniać cały obszar ekranu w każdej rozdzielczości. Problemem jest jednak to, iż klient nigdy nie będzie wiedział jak jego witryna wygląda u każdego z poszczególnych użytkowników oraz to, że musimy mocno ograniczyć się z używaniem elementów graficznych na stronie.
O tym może napiszę więcej jeśli zgłosicie taką potrzebę.

Oto przykład strony Allegro, która jest przygotowana pod rozdzielczość 800x600px pokazana w różnych rozdzielczościach.

800x600px 1024x768px 1280x1024px

Jak widać przy rozdzielczości ekranu 800x600px strona zajmuje całą szerokość ekranu. W większych rozdzielczościach widać więcej elementów strony, a po bokach pojawia się puste miejsce.

Kolejny przykład to strona Buen Retiro, przygotowana pod rozdzielczość 1024x768px pokazana w różnych rozdzielczościach.

800x600px 1024x768px 1280x1024px

Jak widać przy rozdzielczości ekranu 800x600px strona nie mieści się i menu z prawej strony nie jest widoczne (fotografia pierwsza pkt2). Dodatkowo wysoki head graficzny spowodował, że na pierwszy rzut oka nie widać żadnych treści na stronie, a jedynie zdjęcie(fotografia pierwsza pkt1). W 1024×768 strona wyświetla się poprawnie. W większych rozdzielczościach dodatkowo po bokach generowane jest całkiem przyjemnie wyglądające tło(fotografia druga pkt1).

Reasumując proponuję dobrze przemyśleć wybór rozdzielczości ze względu na to, że późniejsza jej zmiana może przysporzyć nam masę problemów. Weź  pod uwagę, że większość nowych serwisów jest już projektowana pod wyższą rozdzielczość. Moim zdaniem niewielkie strony firmowe, wizytówki mogą być swobodnie robione pod rozdzielczość 800×600 natomiast większe serwisy z większą ilością informacji powinno się robić w większej rozdzielczości gdyż mamy więcej miejsca do zagospodarowania, aczkolwiek reguły na to nie ma.

Jeśli ten artykuł pomógł Ci, masz co do niego jakieś wątpliwości lub pytania “Zostaw komentarz”, a na pewno na niego odpowiem.
VN:F [1.9.22_1171]
Rating: 4.0/5 (13 votes cast)
W jakiej rozdzielczości robić strony www?, 4.0 out of 5 based on 13 ratings

o autorze

Sławomir Gdak

"Pomagam właścicielom małych i średnich firm w generowaniu ruchu z wyszukiwarek, aby ich biznes był stabilniejszy i bardziej dochodowy, za pomocą każdego rodzaju produktów i usług, jakie w danym momencie pozwalają mi ten cel realizować najlepiej."

8 komentarzy

napisz komentarz
  • Witaj, artykul sliczny, milo sie czyta. Wszystko na tacy, wspomniales rowniez o css i skalowaniu ( mowa tutaj o % ), mysle ze to jest najlepszy wybor. W tej chwili tworze swoja niewielka stronke, lecz pisze ja od 0. I okazalo sie ze strona zrobiona pod rozdzielczoscia 1280 x 1024 to byl zly wybor. Na mniejszych rozdzielczosciach co niektore rzeczy ( jezeli chodzi o dlugosc ) wyjezdzaja po za bordery, nastepnie menu ( ach to cholerne menu, ile ja mam z tym problemow ) nie chce sie wysrodkowac… Bedzie trzeba ostro sie wziasc do roboty i przerobic stronke. Jakby co, zostawiam swoje gg: 3241160

    Pozdrawiam,
    Dariusz.

  • Rzeczywiście z rozdzielczością strony przesadziłeś. Na małych rozdzielczościach sporo rzeczy może być mało widocznych.
    Ze stronami skalowalnymi w CSS jest o tyle problem, że jesteśmy mocno ograniczeniu z elementami graficznymi nie skalowalnymi. Powiedzmy, że mamy stałą grafikę w nagłówku o szerokości 770px, a cała strona jest skalowana i przy rozdzielczości 1027*768 w nagłówku robi nam się dziura na szerokość ponad 200px. Przy robieniu tego typu stron warto je testować w różnych rozdzielczościach i w różnych przeglądarkach, daje to nam trochę dodatkowej roboty.

  • Cześć! Trochę wiekowy wpis, ale pozwolę sobie wtrącić 3 grosze.
    Co do rozdzielczości 800×600 to myślę (ale to moje subiektywne zdanie), że można sobie temat odpuścić, bo te 2% osób powinno sobie zdawać sprawę, że odstają od ogółu i z pewnością już się przyzwyczaili do poziomego suwaka na dole, bo jednak większość stron jest robiona pod 1024×768.
    I myślę, że ta rozdzielczość baaaardzo długo pozostanie standardem mimo coraz większych monitorów. A to z uwagi na coraz większą popularność urządzeń mobilnych – smartfony, tablety, które służą głównie do przeglądania internetu właśnie.

  • Witajcie. Tworzę amatorską stronkę i mam problem z jej dostosowaniem do różnych rozdzielczości… Szukałem po różnych forach i nic nie znalazłem co by mi pomogło. Otóż "trochę" strony już zrobiłem i nie chciałbym budować na każdą rozdzielczość innej wersji bo było by to czasochłonne a ja mimo wszystko stawiam na przekaz informacji aczkolwiek formę chciałbym poprawić….
    Czy ktoś z was pomógł by mi w dostosowaniu strony obecnie istniejącej do różnych rozdzielczości?
    Wystarczy naprowadzić mnie na odpowiedni kurs…. Z góry dziękuję i Pozdrawiam

    • Michał jak chcesz mieć mega uniwersalną to poczytaj o responsive design. Kiedyś czytałem, że żadnemu elementowi nie należy nadawać stałych szerokości, a w % i to załatwia sprawę, jednak na takiej stronie zbytnio nie poszalejesz z grafiką. Chyba, że typową web2.0

  • Bardzo ciekawy artykuł dla początkujących i zastanawiających się jakiej szerokości zrobić stronę. Oczywiście standardem jest 1024x786px i optymalną szerokością dla witryny jest 960px ponieważ trzeba odliczyć ze 20px na boczny pasek przewijania plus drobne miejsce po bokach ok. 30px. Maksymalnie ustawiłbym 1200px pod szerokość ekranu 1280px
    Można też projektować w Responsive Design gdzie szerokość strony dostosowuje się do rozdzielczości ekranu, ale minusem tego jest oszczędna grafika strony aby można było ją skalować.

    • No teraz RD jest bardzo popularny. Kiedyś mówiono o tym żeby strona wyświetlała się poprawnie na różnych rozdzielczościach na kompie teraz komórki, tablety etc. Przy stronach z grafiką typowo web2.0 gdzie duża część grafiki jest skalowana w css da radę to zrobić.

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wyrażam zgodę na przetwarzanie danych osobowych przez firmę GDAQ.PL Multimedia Sławomir Gdak. Zgoda może zostać anulowana w dowolnym momencie. Szczegółowe informacje dotyczące danych osobowych są umieszczone na stronie polityki prywatności.

Wszelkie prawa zastrzeżone. Zabrania się wykorzystywania jakichkolwiek treści bez zgody autora.

Slawek Gdaq

Chcesz, żebym pomógł Ci zwiększyć pozycje, ruch i przychody z Twojej strony?

Sprawdź moją propozycję pozycjonowania.