Nowości

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…

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
lpRozdzielczościOdsłony
13 I 2009 – 19 I 200920 I 2009 – 26 I 200927 I 2009 – 2 II 2009
11024×7683 818 598 72139.2%4 009 588 76339.1%4 042 911 90538.9%
21280×8001 869 089 91419.2%1 984 915 83319.4%2 017 814 39119.4%
31280×10241 727 380 86417.7%1 800 753 14917.6%1 820 821 14617.5%
41440×900614 868 1256.3%646 248 8176.3%659 231 2436.3%
51152×864579 606 0435.9%612 161 4476.0%623 275 3376.0%

Jakie możemy wyciągnąć wnioski?

  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:

Rozmiar strony tendencje

Widać wyraźnie, że popularność rozdzielczości 1024×768 spada, natomiast coraz więcej osób korzysta z rozdzielczości 1280×1024.

Wnioski

  1. Optymalna rozdzielczość pod jaką powinniśmy projektować serwisy www to 1024×768
  2. 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

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Darmowe

10 portali dla designerów – część I

Nowości

Kolejna edycja Bootcampu Web Design i UX wktótce!

Nowości

Kurs Webpack 2 – Wydajna Praca z JavaScript już dostępny!

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności