Rozmiar strony WWW
Wybór rozmiaru strony www to pierwszy dylemat, przed którym staje projektant internetowych witryn. Decyzja ta ma kluczowe znaczenie i to od niej zależy późniejszy układ treści na stronie. Jednak jak to zrobić z głową i jakie czynniki wziąć pod uwagę? Postaram się mój punk widzenia przedstawić w tym artykule.
Przede wszystkim proponuję rozróżnić dwa podstawowe rodzaje rozkładu treści na stronie:
- Technika Solid
- Technika Liquid
Technika Solid polega na tym, że układ strony jest sztywny i jej rozmiary nie zmieniają się w zależności od rozdzielczości. Najprościej zaobserwować to zmieniając rozmiary okna przeglądarki. Przy zastosowaniu techniki Solid elementy strony zawsze mają te same rozmiary. Przykład: http://www.wp.pl . Technicznie wszystkie elementy strony, np. kontenery <div> mają w CSS ustalony stały rozmiar, np:
#przykładowy_div { width: 900px; }
Technika liquid polega na tym, że elementy strony zmieniają się w zależności od rozdzielczości ekranu a co za tym idzie również w zależności od rozmiarów okna przeglądarki. Przykład strony z takim układem to http://www.w3.org - aby się o tym przekonać wystarczy przeskalować okno przeglądarki.
Z technicznego punktu widzenia, w kodzie strony z układem typu Liquid posługujemy się zamiast określonych, sztywnych wartości np. px, jednostki skalowalne jak % czy pt. W ten sposób możemy stworzyć kontener, który zajmie bez względu na rozdzielczość całą szerokość strony w ten sposób:
#przykładowy_div { width: 100%; }
Jaki układ strony stosować?
Jeśli chodzi o moje zdanie, jestem raczej zwolennikiem układów typu Solid. Ma to związek z faktem, iż w statycznych układach dużo łatwiej zapanować nad treścią oraz elementami strony. Dużą wadą układu Liquid jest fakt, że treść na naszej stronie będzie pływać i nigdy nie będziemy w stanie kontrolować rozkładu tekstu i kolumn. Z typograficznego punktu widzenia, istnieją pewne optymalne wartości jak np. ilość znaków w linii – stosując układ Liquid tracimy nad tą właściwością kontrolę. Problem powstanie również wówczas, gdy wstawimy na stronę obrazki, które mogą nie mieścić się w “pływającej” kolumnie. Dla mnie osobiście takie strony nie tylko trudniej się tworzy, ale również ciężko się je przegląda. Sam jestem przyzwyczajony do optymalnej rozdzielczości, a dysponując monitorem 24′ i rozdzielczością HD przeglądanie stron z układem Liquid oznacza dla mnie skalowanie okna przeglądarki.
Złoty środek
Czy jestem zatem absolutnym zwolennikiem układu “sztywnego”? Nie do końca. Istnieją profesjonalnie zaprojektowane i przemyślane strony w których układ Liquid sprawdza się znakomicie. Wiele z nich możecie znaleźć tutaj:
http://www.cssjuice.com/css-liquid-layout-design/
Obserwując te przykłady wprawny designer zauważy, że wiele z nich zawiera zarówno elementy float (pływające), jaki i sztywne. I to jest właśnie najlepszy sposób na przygotowanie dobrej witryny, która zachowuje pełnię estetyki tam gdzie trzeba – z pomocą elementów o sztywnych rozmiarach – a gdzie indziej dopasowuje się do rozdzielczości z pomocą atrybutu float. Przykładowo tło możemy umieścić w kontenerze o szerokości 100%, a tekst osadzić wewnątrz, w kolumnie o szerokości 300 px. W ten sposób dzięki kombinacji technik Solid i Liquid otrzymujemy w pełni użyteczny, dobrze wyglądający układ!
Kiedy jeszcze stosować Liquid?
Wiele osób wykorzystuje cechy układu pływającego np. do umieszczania strony w środku okna przeglądarki. Najprostszym sposobem, z którego korzystają, jest osadzenie strony w tabeli:
<table width=”100%” height=”100%”>
<tr>
<td width=”100%” height=”100%” align=”center”>
treść strony
</td>
</tr>
</table>
To bardzo proste i skuteczne rozwiązanie.
Rozmiary strony w układzie Solid
Jeśli korzystamy z układu Solid, stajemy przed problemem wyboru właściwych rozmiarów strony. Oczywiście główny problem to szerokość, ponieważ w przypadku, gdy nasza strona jest za szeroka, pojawi się poziomy pasek przewijania – jedna z najbardziej irytujących rzeczy to scrollowanie strony w poziomie. Jeśli chodzi o wysokość nie musimy być aż tak ostrożni, przewijanie w pionie jest naturalne i nie jest oczywiście błędem na stronie.
Praktyczna wskazówka: Wiele badań dowodzi, że użytkownik przykłada największą wagę do treści, które znajdują się w górnej części strony, której nie musi przewijać. Proponuję więc zamieszczać właśnie na górze najważniejsze informacje.
To, jak u kogo będzie wyświetlała się strona, zależy od rozdzielczości jego monitora. Jednak musimy wziąć pod uwagę fakt, iż np. przy rozdzielczości 1024×768 wysokość (768 px) widoczna w oknie przeglądarki będzie pomniejszona np. o pasek adresu, pasek menu, poziomy scroll, a szerokość (1024 px) np. o ulubione czy pionowy scroll.
Optymalny rozmiar
Oczywiście nie istnieje coś takiego jak optymalny rozmiar. Może się bowiem okazać, że naszą stronę przygotowaną pod 1024×768 będzie oglądać osoba z rozdzielczością 800×600, wówczas zawsze zobaczy poziomy scroll. Jak więc wybrać najlepszy rozmiar? Wbrew pozorom nie wystarczy wybór najbardziej typowej rozdzielczości. Warto zastanowić się jeszcze nad procentem osób w sumie używających rozdzielczości mniejszej i większej niż typowa.
Aktualne statystyki dotyczące rozdzielczości znajdziesz tutaj:
http://www.ranking.pl/index.php?page=Ranks:RanksPage&stat=23|OW
Wynika z nich, że najpopularniejsze rozdzielczości to:
| Rozdzielczości – trzy ostatnie tygodnie | ||||||||
|---|---|---|---|---|---|---|---|---|
| lp | Rozdzielczości | Odsłony | ||||||
| 13 I 2009 – 19 I 2009 | 20 I 2009 – 26 I 2009 | 27 I 2009 – 2 II 2009 | ||||||
| 1 | 1024×768 | 3 818 598 721 | 39.2% | 4 009 588 763 | 39.1% | 4 042 911 905 | 38.9% | |
| 2 | 1280×800 | 1 869 089 914 | 19.2% | 1 984 915 833 | 19.4% | 2 017 814 391 | 19.4% | |
| 3 | 1280×1024 | 1 727 380 864 | 17.7% | 1 800 753 149 | 17.6% | 1 820 821 146 | 17.5% | |
| 4 | 1440×900 | 614 868 125 | 6.3% | 646 248 817 | 6.3% | 659 231 243 | 6.3% | |
| 5 | 1152×864 | 579 606 043 | 5.9% | 612 161 447 | 6.0% | 623 275 337 | 6.0% | |
Jakie możemy wyciągnąć wnioski?
- Najwięcej osób korzysta z rozdzielczości 1024×768 – ok 39%
- Aż 97,5% osób korzysta z rozdzielczości 1024×768 i większej!
- Prawie 60% osób korzysta z rozdzielczości większej niż 1024×768!
Ostatni wniosek jest wart uwagi, ponieważ prezentuje tendencję wzrostową rozdzielczości. Możemy również przeanalizować następujący wykres:
Widać wyraźnie, że popularność rozdzielczości 1024×768 spada, natomiast coraz więcej osób korzysta z rozdzielczości 1280×1024.
Wnioski
- Optymalna rozdzielczość pod jaką powinniśmy projektować serwisy www to 1024×768
- Należy pamiętać, że rozdzielczość monitora to nie rozdzielczość strony w przeglądarce! Ponieważ nie każdy ma zmaksymalizowane okno przeglądarki, a nawet jeśli, to interfejs przeglądarki zajmuje miejsce na ekranie. Z tego powodu optymalne rozmiary to:
Z przygotowanego przeze mnie zestawienia wynika, że przy projektowaniu strony pod 1024×768 bezpieczną szerokością dla wszystkich przeglądarek będzie 1004 px, ja jednak polecam zostawić jeszcze drobny margines dla większej czytelności i tworzyć strony o szerokości 980-990 px.
Jeśli jesteście ciekawi, jak mają się sprawy w przypadku wysokości – bezpieczna wysokość to:
- 800×600 – 576 px
- 1024×768 – 744 px
- 1280×1042 – 1018 px
Narzędzia
Istnieją narzędzia, które pozwolą Ci przetestować stronę pod różnymi rozdzielczościami. Ze swojej strony polecam add-on do przeglądarki Firefox – Web Developer Toolbar, który posiada funkcję resize. Dostępny jest na stronie:
https://addons.mozilla.org/pl/firefox/addon/60
Drugie narzędzie to Window Resizer, również add-on do Firefoxa:
https://addons.mozilla.org/en-US/firefox/addon/1985
Autor: Grzegorz Róg
Więcej o dobrych praktykach oraz rozmiarach stron internetowych dowiesz się z kursów na http://www.eduweb.pl
39 Odpowiedzi na “Rozmiar strony WWW”
Napisz odpowiedz
Mistrzowski artykuł \o/ Wielki dzieki
No może i mistrzowski, mam jedno ale ;)
Otóż mam ekran tak powiedzmy o rozdzielczości 2500×1600 :)
raz pionowo raz poziomo
(czyli czasem 1600×2500)
i mało jest stron ślicznie do mnie dopasowanych. W sumie wszystko bazuje na 1080 czy cóś… Trochę mnie to śmieszy, chyba muszę sobie zaimplantować własny szablon stron… :( Dziwne, żeby ignorować obfitych w piksele użytkowników neta… ;)
Wielkie dzięki za tego newsa!
PS. Zapraszam na:
http://www.digart.pl/grupy/871/grupa/forum/temat/172321.html
Gdzie obywatel ~soyek ładnie odpowiedział na dwa pytanka o podobnej tematyce. Niestety jeszcze nie miałem okazji tego przetestować.
Bardzo ciekawy artykuł – właśnie tego typu artykułu o tej tematyce szukałem :)
PS: W kursie była mowa o tym że na stronie http://www.webmonkey.com/ można znaleźć zalecane rozdzielczości ale po 10 minutach szukania tego artykułu sobie odpuściłem ;)
Dzięki i pozdrawiam
Witam. Bardzo ciekawy artykuł. W ogóle wszystkie artykuły jak i kursy, które można kupić na allegro są bardzo ciekawe. Zakupiłem już 3 z nich i jestem w 100% zadowolony. Może ma Pan w planach kurs o pozycjonowaniu stron? Na pewno przydałby się taki :) Serdecznie Pozdrawiam. Rafixxx
Odkryłem pewną ciekawostkę. Spójrzcie na stronkę:
http://2advanced.com/
Tło na tej stronie jest zawsze na pełen ekran, ponieważ jest zrobione pod ogromną rozdzielczość, dzięki czemu na mniejszych rozdziałkach również poprawie działa:
http://img3.imageshack.us/img3/9517/2aatrreturnofthesakura1.jpg
Ktoś wie, jak zrobić coś takiego we flashu?
według mnie kursy prowadzone przez pana Grzegorza jak i wiedza są na mistrzowskim poziomie, nie wazelinując musze przyznać, że jest pan chyba jedyną osobą w PL, która publikuje kursy za pośrednictwem których bez bólu czytania wodolejących książek można nauczyć się wszystkiego 10x szybciej.
Pozdrawiam… i osobiście czekam jeszcze po premierze stron www kursu Adobe Illustratora lub InDesigna
Ogólnie artykuj całkiem fajny, uwage mam co do rady żeby osadzić stronę w tabeli i wyśrodkować. Lepiej DIV’a zastosować.
A można wiedzieć jak w tym wszystkim zamiast firefoxa wygląda seamonkey?
Kurczę!
Już sam nie wiem, czy do tworzenia strony zastosować tabelki, czy divy…
kolejny problem to Flash, czy może łatwiejszy na początek HTML. Strony we Flashu wyglądają zachęcająco ale chyba jednak dobry jest HTML z elementami Flasha w celu ożywienia strony.
Co do szerokości layoutu to już sam nie wiem.
Jakieś sugestie?
Aha. A czy layout lepiej tworzyć w Photoshopie, czy może w Dreamweaverze?
Witam serdecznie, zajmuje się designem stron www. Z tego co ja czytałem na zagranicznych forach i blogach to najczęściej stosowaną szerokością stron internetowych jest 960px grid. Jest to z tego co czytałem złoty środek jak narazie. Ludzkie oko dość szybko przemieszcza się po takiej szerokości strony i jeżeli w dobrych miejscach tzn regułą 3×3 i umieścimy najważniejsze elementy na przekątnej góra lewo, dół prawo, a ważne elementy na przecięciu tego grida to powinniśmy uzyskać dużo lepsze wyniki niż po prostu stosując “bezpieczne” szerokości i wysokości. Polecam poszukać artykułów na http://smashingmagazine.com
Oczywiście gratulacje za napisanie dość ciekawego posta który przyciąga uwagę i zawiera wiele interesujących przemyśleń :]
Fajny artykuł, zwraca uwagę na ważne rzeczy. Bardzo rażący jest przykład “wyśrodkowania” strony… przy pomocy tabelek!!
Mario,
Dziękuję za opinię, jeśli chodzi o metodę tabelkową – oczywiście zgadzam się, że tabelki nie są dobrym sposobem na przygotowanie strony www, ale proponuję jednak nie popadać w skrajności :-) W tym konkretnym przypadku moim zdaniem nie jest wielkim grzechem użycie tabelek.
Jeśli możesz, proponuję, abyś zamieścił tu rozwiązanie oparte na divach, na pewno się przyda!
Serdecznie pozdrawiam,
Grzegorz Róg
Grzegorzu,
Chciałbym też zauważyć, że rozjeżdża Ci się post. Sprawdź wygląd tego posta w Chrome.
Ta tabelka pod “Rozdzielczości – trzy ostatnie tygodnie” wystaje poza wyznaczone miejsce posta. ;)
Pozdrawiam,
Teachmeter
Teachmeter, efekt jest zamierzony ;)
Pozdrawiam,
Grzegorz Róg
Skoro tak to ok ;)
Pozdrawiam,
Teachmeter
Świetny tutorial, i w związku z tym, mam pytanie. Czy mogłabym umieścić go na forum graficznym grafart.org, oczywiście napisze, że to twój tutorial, a nie mój, i podam link do niego. :)
Świetny post. Wielkie dzięki za “wykład”. Pozdr.
”
1. Najwięcej osób korzysta z rozdzielczości 1024×768 – ok 39%
2. Aż 97,5% osób korzysta z rozdzielczości 1024×768 i większej!
3. Prawie 60% osób korzysta z rozdzielczości większej niż 1024×768!
Ostatni wniosek jest wart uwagi, ponieważ prezentuje tendencję wzrostową rozdzielczości. Możemy również przeanalizować następujący wykres:
”
poprawcie to proszę – te same rozdzielczości ????
BArtku, rozdzielczości te same, ale wnioski inne – proponuję wczytać się w te punkty, zapewniam, że wszystko jest ok :-)
eeee tam, widziałeś takie coś:
{margin: 0,0 auto;
}
i masz środek bez kmbinowania z tabelkami
Obecnie coraz więcej osób ma monitory szerokie na 1280 px lub więcej, nawet w laptopach. Już pierwsze serwisy ustawiają się na taką szerokość, np:
Start24.pl
Tylko pytanie brzmi. Czy latwiej czyta sie sie gazete, gdzie teoretycznie kolumna ma rozmiar calej strony czy tekst jest podzielony na dajmy na to cztery kolumny? Tu chodzi o wygode i ergonomie czytania dla oczu.
http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
tu jest opisane na Smashing Magazine. Co do tabel to nalezy sobie odpuscic. Od tabel juz dawno sie odchodzi. Uzywac ich nalezy do typowo tabelarycznych rzeczy. Tabele nie sa zdrowe nawet dla wyszukiwarek
cygii,
W pełni się zgadzam, do wyśrodkowania strony powinniśmy wykorzystać kod CSS:
#div { margin: 0px auto; }
ALE… z czystej ciekawości, zapytam – czy jesteś w stanie podać jakiś konkretny powód, dlaczego struktura z artykułu jest zła i jak to może wpłynąć na wyszukiwarki? :-) Poza tym, że nie powinno się stosować metody tabelkowej do osadzania layoutu “bo nie” ;-) I może jeszcze wyprzedzę jeden argument – czy kodu na pewno jest więcej? I czy potrafisz wyśrodkować stronę w pionie i w poziomie z pomocą CSS i mniejszej ilości kodu? :-)
Ps. To tak tylko, do dyskusji. Jeszcze raz podkreślam jestem przeciwnikiem stosowania tabelek do czegokolwiek innego niż danych tabelarycznych.
Pozdrawiam,
Grzegorz Róg
Panie Grzegorzu,
czytalem ostatnio ciekawa ksiazke o css i bylo w niej napisane, ze tabele stosujemy tylko wtedy, gdy na stronie ma byc umieszczona… tabela ;)
Oznacza to, ze nie powinnismy wykorzystywac tabel np. do srodkowania elementow. Dlaczego nalezy to robic za pomoca css?
Po pierwsze, podstawowa zasada poprawnego projektowania stron www mowi: oddzielaj warstwe tresci od wygladu. Tresc – to plik html, a wyglad – arkusz css. Zalozenie jest takie, ze plik html ‘jakos’ wyglada nawet bez pliku css.
Po drugie, coraz bardziej powszechne w dzisiejszych czasach urzadzenia mobilne z dostepem do internetu (np. telefony komorkowe) maja mniejsze ekrany. Uklad tabelkowy nie zawsze jest na nich wyswietlany poprawnie. Css – tak. No i ilosc kodu – tabela ze swoimi table, tr, td zajmuje wiecej kb, niz poprawny css.
Tyle ode mnie. Nie chce byc odebrany, ze sie wymadrzam, ale ksiazka, o ktorej wspomnialem na poczatku naprawde do mnie ‘przemowila’. Kiedys sam czesto projektowalem strony oparte na tabelach. Dzis jest to css.
Pozdrawiam serdecznie!
Witam ponownie,
jeszcze ciekawy link, choc w sieci nie brakuje stron ‘table vs css’.
http://stopdesign.com/present/2004/ddw-seattle/tables/
Pozdrawiam serdecznie!
#content {margin:0 auto}
albo inaczej:
body {position:relative}
#content{position:absolute; left:50%; margin-left:-400px}
a tabelki wykorzystane do centrowania to przezytek z lat 90 :)
Co do plynnych layoutow – takie sa najbardziej uzyteczne, ale fakt ze najtrodniej osiagalne. Nawet nie chodzi o techniki kodowania (trzeba troche namacic w CSS by osiagnac pelna “plywalnosc”), co o sam layout.
Korzystam z Google Analytics. Wg raportów 31.80% użytkowników strony
http://www.gitart.com.pl
ma u siebie rozdzielczość 800×600, na drugim miejscu jest 1280×1024.
Dodam, że zdecydowana większość osób mieszka w Warszawie, a dane dotyczą ostatniego miesiąca- marca i dotyczą 461 niepowtarzalnych użytkowników.
Skąd taka rozbieżność z danymi na gemiusRanking?
jak dobrze pamiętam, to stosowanie tabelek nie jest zgodne ze standardem W3C, dlatego powinno się używać divów, pozdrawiam
Rafał > i bardzo dobrze pamiętasz, to spory błąd semantyczny.
Tabela służy (jak z resztą Grzegorz już powiedział) do prezentowania danych tabelarycznych i umieszczanie w niej całej zawartości strony z całą pewnością jest niepoprawne. W czasach gdy SEO jest tak bardzo integralne z samym projektowaniem witryn lepiej się w tych sprawach pilnować.
Niemniej artykuł naprawdę ciekawy i bardzo przydatny, serdecznie pozdrawiam.
Liquid – osadzenie strony w tabeli? Hm… chyba nie od tego są tabele w xhtml-u.
ja bym jednak polecił 960, pod tym adresem więcej na temat http://960.gs/
Pozdrawiam serdecznie
No tak oczywiście teraz nagle ożywienie wśród web’masterów’,
ale proszę bardzo niech któryś z tych mądrali napisze w pełni zrozumiały tutek dla początkującego (jak ja).
eehhh ludzie :/
wg mnie tutek bardzo dobry, zrozumiały i co najważniejsze działa.
Pozdrawiam
dobry artykuł, może się czepiam :> ale mówisz ze najlepsza rozdziałka to 980px, a ta strona ma 950px :D osobiście jak projektuje strony to robię je na maksymalnie 1000px.
Pozdrawiam
jeszcze jedno, pod przegladarka chrome napis “odpowiedz” nie miesci sie w przycisku, a wartości z rankingi.pl nie mieszcza się w bilaym divie :>
w IE przycisk jest podzielony na dwie części, znów się czpiam, sorry :D
Dziękuję za wiadomość i za krytykę. Jest ona dla mnie zawsze bardzo cenna. Stale udoskonalam serwisy eduweb.pl dlatego zanotuję sobie również Twoje uwagi. Warto jednak czasem udostępnić coś już w wersji 95% niż dopieszczać aż do skutku i trzymać w szufladzie, mam nadzieję, że się zgodzisz :) Ponadto, jeśli chodzi o szerokość, chodziło tutaj o max. rozmiary, nie widzę przeszkód w węższej stronie, jeśli ma to korzystny wpływ np. na czytelność tekstu (np. warto ograniczyć ilość znaków w linii dla wygody użytkownika).
Serdecznie pozdrawiam,
Grzegorz Róg
Zgadzam się w 100% pomimo kilka małych wad i tak bardzo podobają mi się strony firmowe, kursy i inne rzeczy które widziałem w sieci Twojego autorstwa. Przy Tobie jestem jeszcze mało doświadczonym grafikiem.
Ile według Ciebie powinno być znaków w linii aby tekst nie stracił na czytelności przy czcionce 12px?