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:
| rozdzielczość | I kwartał 2008 | II kwartał 2008 | III kwartał 2008 |
| 1024×768 | 41,0% | 40,8% | 40,3% |
| 1280×800 | 17,8% | 17,9% | 18,3% |
| 1280×1024 | 18,2% | 18,2% | 18,1% |
| 1440×900 | 5,8% | 5,9% | 6,0% |
| 1152×864 | 6,1% | 6,1% | 6,0% |
| 1680×1050 | 3,2% | 3,2% | 3,3% |
| 1280×960 | 2,4% | 2,4% | 2,4% |
| 800×600 | 2,3% | 2,3% | 2,2% |
| 1280×768 | 0,9% | 0,9% | 1,0% |
| 1280×720 | 0,4% | 0,5% | 0,5% |
| 1400×1050 | 0,4% | 0,4% | 0,4% |
| 1600×1200 | 0,2% | 0,2% | 0,3% |
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.
Powiazane wpisy:
- Nowe zakładki na Facebooku a szerokość
Dwa dni temu pisałem o szerokości zakładek w facebooku (Zakładki facebooka) a tu niespodziewanka, zmiana. Teraz na stronach mamy mieć... - Białe misie na ulicach i czarno-białe monitory
Na początku stycznia, naprawdę po ciężkich bojach, oddaliśmy klientowi stronę do akceptacji. Mimo trzymania się briefu, przez te 1,5 miesiąca... - Za duże projekty
Ostatnimi czasy przez ostrą zmianę rozdzielczości zacząłem przejmować się pozostającą przestrzenią naokoło projektu przeznaczonego pod rozdzielczość 1024px. Już na monitorze...
21 grudnia 2008, godzina 20:15
A mi nasuwa się jeszcze jedno „doktrynalne” pytanie – jaką wysokość okna przyjąć za najpowszechniejszą/domyślną? Chyba każdemu zdarza się czasem produkować coś co powinno mieścić się na ekranie w pionie, bo np. klient chce żeby cała strona była dostępna bez przewijania okna przeglądarki. I nie da się facetowi wytłumaczyć, że różne są monitory.
Przypadek z życia wzięty – klient korzystał z laptopa o roz. 1280×800 i miał pasek narzędzi Visty wysoki na 2 poziomy + jakieś toolbary w IE7. Na nasze argumenty odpowiadał, że „wszyscy” mają tak jak on :) Strona musiała się zmieścić na 500px wysokości – piekło projektanta :)
W innych przypadkach kiedy trzeba się zmieścić na wysokość staram się nie wykraczać po za próg „laptopowy” 600-630px, ale tutaj chyba nie ma zasady. Choć wydaje mi się, że za pół roku-rok to laptopy będą dyktowały standardy wymiarów stron www.
20 stycznia 2009, godzina 20:27
Po treści witryny http://960.gs/ przestałem korzystać z innych wielkości ekranu.
1 grudnia 2009, godzina 12:05
Przydatne info , dzięki