Szerokość strony

Goldenline zmusiło mnie znów do uruchomienia tej reszty szarych komórek których nie zdążyłem bezpowrotnie odłączyć od zasilania. Ktoś zadał banalne pytanie o szerokość pod jaką należy projektować strony – wydawało by się że temat zamknięty bo prawie wszyscy projektujemy pod 1024px … ale pojawiły się pytania które ja zadawałem już pół roku temu, a których rozwiązanie znalazłem już sporo wody w Wiśle wcześniej niż je sformułowałem.

A więc pod tym prostym pytaniem pojawiły się zaraz (poza oczywistymi odpowiedziami) pytania o większe rozdzielczości i kiepski wygląd wąskich stron. Obecnie wg Gemiusa 40% polskich internautów korzysta z monitorów wyświetlających 1024x … dokładniej wygląda to tak:

Szczęściem 800×600 pikseli to już niewiele ponad 2%, choć wydawać się mogło że stare monitory CTR z takimi parametrami to zamierzchła przeszłość. Sumując jednak wielkości widać że rozdzielczości powyżej obecnego standardu to prawie 58% (w tym ~10% to monitory oferujące rozdzielczość wyższą niż 1280!) – tej informacji wg mnie nie można lekceważyć, szczególnie patrząc na tendencje. Monitory dwudziestokilku calowe stały się dostępne cenowo i myślę że spadek procentowy szerokości 1024px w przyszłym roku będzie już dużo bardziej widoczny oraz w rankingu pojawią się niespodziewanie monitory oferujące większe rozdzielczości niż 1680 pikseli.

Jak ja do tego podchodzę, dla mnie podstawową szerokością jest 960px, dla czego? 1024 to szerokość zmaksymalizowanego okna przeglądarki, standardowo w Windows XP 27px w „najpopularniejszej” przeglądarce odchodzi na scroll, zaokrąglimy to do 30px na wszelki słuczaj nie sprawdzając jak sytuacja się przedstawia w innych systemach i przeglądarkach – daje to nam wynik 1024px-30px=994px. Teoretycznie więc mamy 990px (ja przez krótki czas wykorzystywałem taki podział), niestety przy najniższej zakładanej rozdzielczości kontent klei się nam do brzegów i brak nam naokoło projektu światła. Zmniejszyłem więc sobie rozdzielczość do 960px co łatwo pozwala podzielić projekt na kolumny o szerokości 480px, 320px czy 240px (skądś znajome wartości – to też się przydaje :) ale te wiadomości zostawię jeszcze dla siebie). Oczywiście między kolumnami należy zostawić światło wg własnego uznania, dla mnie optymalną wielkością odstępów jest minimum 30px.

A więc projektując obecnie zastanawiam się jak dana strona będzie wyglądać kiedy kontent wypełni całą szerokość ekranu jak i w wypadku kiedy pozostanie mi 1000px „wolnej” przestrzeni. Jestem zwolennikiem stałej szerokości, zmiany zależne od rozdzielczości powodują całkowity brak kontroli nad efektem swojej pracy (choć wierze że komuś się uda fajnie zaprojektować serwis rozciągany dwukrotnie i nie tracący na przekazie i jakości). Tą przestrzeń przede wszystkim wykorzystuje do zaprezentowania w tle grafiki którą bardzo rzadko zamykam w tych 960 pikselach. Pozwala to osobom z mniejszym monitorem swobodnie dotrzeć do informacji a na lepszych monitorach docenić w pełni oprawę graficzną.

Dla leniwych nawet przygotowałem psd slicznie podzielonego slicami na kolumny dodatkowo dzięki plikom z www.designerstoolbox.com z oknami firefoxa w rozdzielczościach 800x600px, 1024x768px, 1280x960px, 1600x1024px, 1680x1200px, 1920x1200px. Poza wykożystaniem podziału na kolumny przy okazji można samemu przyjżeć się własnemu projektowi w różnych rozdziałkach jak i zaprezentować klientowi.