Rozmiar Stron WWW i Responsive Web Design

Jednym z największych problemów współczesnych projektantów stron WWW jest wybranie optymalnego rozmiaru dla tworzonego layoutu. W tym kontekście kluczowa wydaje się być wiedza na temat popularnych rozdzielczości i działania urządzeń mobilnych, do których teraz musimy dostosować swoje projekty.

Idea takiego projektowania jest związana z Responsive Webdesign i polecam zapoznanie się z wstępem do tego tematu w artykule: Responsive Webdesign – Wprowadzenie. Natomiast kompleksowe opracowanie na praktycznych przykładach znajdziesz w najnowszym kursie: Elastyczne Strony WWW – Projektowanie na wiele rozdzielczości, Polecam także Warsztat mojego autorstwa Projektowanie na wiele urządzeń i rozdzielczości w ramach Eduweb Live.

Wprowadzenie

Nasza praca, jako projektanta, będzie sprowadzać się w zasadzie do przygotowania kilku alternatywnych wersji layoutu strony, ponieważ w dobie tak wielu urządzeń posiadających przeglądarki (od telefonów po telewizory), nie jest możliwa optymalna prezentacja treści w ramach jednego projektu. Rezultatem naszej pracy będzie zatem kilka plików .psd czy .ai, w których odpowiednio zaprojektujemy widoki dla telefonów, tabletów oraz urządzeń desktopowych – komputerów stacjonarnych i laptopów.

Tak czy inaczej, będziemy musieli zastanowić się nad docelowymi rozdzielczościami, które będziemy targetować i dla których przygotujemy końcowy układ. Ponieważ na rynku funkcjonuje mnóstwo urządzeń oferujących różne rozdzielczości, zastanówmy się najpierw co powinniśmy w ogóle brać pod uwagę.

Czym jest DPI i aspect-ratio?

DPI (Dots Per Inch), czy inaczej PPI (Points/Pixels Per Inch) to po prostu ilość pikseli, jaka jest wyświetlana w jednym calu ekranu. Na niektórych urządzeniach pixele mogą być bardziej skupione, na innych są rozmieszczone rzadziej. Rezultat jest oczywiście taki, że na ekranach o większej wartości DPI będziemy mieli wyższą rozdzielczość przy tej samej przekątnej. I, rzecz jasna, dużo ostrzejszy obraz. Większość takich rewelacyjnych wyświetlaczy jest już w urządzeniach mobilnych, choć zaczynają one być również powszechne w laptopach (nowy MacBook Pro z wyświetlaczem Retina). Najprostszy przykład do porównanie dwóch generacji iPada, z których iPad 2 oferuje rozdzielczość 1024×768 przy identycznej przekątnej co iPad 3 z szaloną rozdzielczością 2048×1536. Zatem jeśli wielkość ekranu jest taka sama – zagęszczenie pixeli musi być większe i w praktyce zwiększa się właśnie DPI (z 132 do 264). Przy okazji – nie wiem czy zauważyłeś, ale urządzenie, które mieści się w dłoni ma rozdzielczość wyższą niż 60-calowe telewizory plazmowe. Ma to oczywiste przełożenie na czytelność treści – choć telewizor oglądamy z większej odległości, naturalnie łatwiej będzie na nim dostrzec detale niż na skupionym ekranie iPada. Stąd pewne sztuczki producentów polegające na skalowaniu zawartości, o którym napiszę za chwilę.

Z kolei aspect-ratio to proporcje ekranu, czyli stosunek jego szerokości do wysokości. I tutaj spotykamy się z dwoma popularnymi proporcjami – 16:9 oraz 4:3. Niestety, nie można powiedzieć że ekrany panoramiczne, czyli ze stosunkiem 16 do 9, są lepsze czy popularniejsze od 4:3. Choć w desktopach nie spotykamy się już z takim stosunkiem, to w tabletach jest on dość popularny (chociażby iPad). Aspect ratio jest rzeczą, która może przyprawić o ból głowy projektanta, ponieważ co naturalnie w różnych proporcjach content będzie prezentował się inaczej i w zasadzie nie ma na to na razie żadnej skutecznej metody, poza testowaniem.

Wyświetlacze Retina i inne dużej rozdzielczości

Wyobraź sobie, że identyczna grafika zoptymalizowana pod szerokość 1280px jest wyświetlana równocześnie na telefonie komórkowym oraz dużym monitorze 30”. Rzecz jasna komfort użytkowania będzie skrajnie się różnił. Na telefonie grafika zostanie zeskalowana w dół i trudna w odbiorze bez powiększania. Dlatego producenci urządzeń z wysokiej jakości wyświetlaczami, wprowadzili skalowanie zawartości jako pewien półśrodek do większego komfortu użytkowania. W rezultacie, przykładowo Apple zastosował przyjazne dla designerów rozwiązanie i powiększył rozdzielczości urządzeń z iOS dokładnie 2x w najnowszych odsłonach. Przykładowo, iPhone 3 miał rozdzielczość 320×480, a iPhone 4 – 640×960. Na czym więc polega skalowanie? Producenci zdają sobie sprawę, że na małym ekranie mniej widać i dlatego „z automatu” powiększają grafikę – w przypadku urządzeń z iOS x2. W ten sposób ostatecznie dla użytkownika prezentowana jest większa grafika. Podobnie mają się sprawy u innych producentów. Na przykład, pod Windows 8 mamy skalowanie:

• 100% bez skalowania
• 140% dla 1920 x 1080 i minimum 174 DPI
• 180% dla 2560 x 1440 i minimum 240 DPI

W tym przypadku, aby uzyskać jak najbardziej ostrą grafikę – należy przygotować 3 zestawy obrazków o wielkości 100, 140 i 180%. W przypadku iPhone’a 4, który, jeśli chodzi o rozdzielczość, dalej „myśli” że jest iPhonem 3, można przygotować 2 zestawy obrazków 100 i 200%.

Jak widzisz, grafika którą stworzysz i dopracujesz co do pixela i tak może zostać zeskalowana, co jest równoznaczne z pogorszeniem jej jakości. Czy możemy jakoś sobie z tym radzić? Owszem, przykładowo, dla urządzeń z iOS możemy zaprojektować grafikę 2x większą podłożyć ją wykrywając ratio z pomocą CSS3 Media Queries i właściwości pixel-aspect-ratio.

[css]
only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {

}
[/css]

Możemy także zmusić urządzenia z iOS do wyświetlania grafiki niezeskalowanej, czyli innymi słowy domyślne skalowanie ustawić na 100%, czyli na wartość 1. Odbywa się to z pomocą specjalnego meta-tagu viewport, szczegółowo opisanego na MDN: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

[html]
<meta name=”viewport” content=”width=device_display, initial-scale=1.0″ />
[/html]

Wszystko sprowadza się do pikseli

Uwzględniając skalowanie, o którym napisałem wyżej, w zasadzie możemy jednak przyjąć zasadę, że przy projektowaniu na ekrany, wszystko sprowadza się do pikseli. Ekrany z większą ilością DPI będą wyświetlały bardziej ostre obrazy, jednak będą miały także większą rozdzielczość. Moim zdaniem nie powinniśmy zatem przykładać wagi do typu urządzenia, DPI oraz aspect-ratio, ponieważ tak czy inaczej wszystko będzie sprowadzało się do wysokości i szerokości w px. W ten sposób nasz layout będzie dobrze się prezentował i na ekranie tabletu i lodówki czy pralki, jeśli producenci zdecydują wyposażyć te urządzenia w przeglądarki.

Ponadto, rozdzielczość, czyli resolution w Photoshopie, absolutnie nie wpływa na tworzony przez nas plik do momentu jego wydrukowania lub zapisania do .pfd. Także tę wartość możemy kompletnie zignorować przy tworzeniu na ekrany i wziąć pod uwagę jedynie wartości width oraz height.

Jaką rodzielczość wybrać?

Tworząc układy elastycznych stron WWW, zgodnych z zasadą Responsive Design, często decydujemy się na przygotowanie układu dla:

• Monitorów (Desktop + Laptop)
• Telefonów / Smartphone’ów
• Tabletów

Jest to dobry punkt wyjścia i rzeczywiście najlepszą drogą będzie przygotowanie layoutów pod te konkretne rodzaje urządzeń. Trudniejsze pytanie dotyczy jednak konkretnej rozdzielczości, pod którą powinniśmy projektować. Wielu autorów przyjmuje różne mobilne „breakpointy”, czyli podziały określające, jakie rozdzielczości wziąć pod uwagę.

Ciekawe podsumowanie znajduje się na stronach Wikipedii pod adresem: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Możesz tam znaleźć wszystkie popularne rozdzielczości urządzeń pogrupowane w ramach producentów. Można od tego wszystkiego dostać konkretnego bólu głowy. Jak widzisz jest tu dużo więcej rozdzielczości niż trzy modelowe, jednak nadal jestem zdania, że przynajmniej te trzy układy powinniśmy zaprojektować.

Rozdzielczość Desktopowa

Przyjrzyjmy się statystykom na stronie ranking.pl aby ocenić, z której rozdzielczości użytkownicy korzystają najczęściej: http://ranking.pl/pl/rankings/screen-resolutions.html

Przyjmijmy, że wysokość nie ma w przypadku stron WWW kluczowego znaczenia. Czy jest to słuszne podejście – można dyskutować w dobie ekranów panoramicznych, tabletów, Windows 8 UI  i faktu, że większość stron WWW wyświetla się z wielkimi białymi paskami po bokach. Jednak to pewnie temat na osobne opracowanie. Na razie przyjmijmy za pewnik, że scroll w myszce jest w pione a użytkownicy są przyzwyczajeni do przewijania góra-dół. W takiej sytuacji znaczenie ma szerokość. Skoro tak, to spróbujmy w pierwszej dziesiątce wyników odnaleźć najmniejszą z możliwych. Niestety trafiamy już na trzeciej pozycji na 1024, która ma niemal 15% udział w rynku. Jak to 1024? Kto korzysta z rozdzielczości 1024? Poza zacofanymi instytucjami rządowymi, które nie zmieniały monitorów od 10 lat, chyba nikt, prawda? Nie, nieprawda. A tablety? A netbooki? A rozdzielczość iPada2? No właśnie, to wszystko prowadzi nas do wniosku, że rozdzielczości 1024, mimo że jej udział w rynku spada, nie można ignorować.

To znaczy, że tworzymy layouty dla 1024px?

Zgadza się, ale mam propozycję, aby tę rozdzielczość zacząć wykorzystywać jako nasz drugi breakpoint, czyli breakpoint tabletowy. Natomiast dla desktopu możemy przygotować większą rozdzielczość. O tabletach napiszę później – teraz skoncentrujmy się na desktopie. Hipotetycznie zignorujmy 1024px. Kolejna najmniejsza szerokość to już 1280px, pomijając 1152px, która ma niecałe 3% rynku. I właśnie pod tą rozdzielczość powinniśmy projektować teraz układ desktopowy. Czy to oznacza, że mamy do dyspozycji całe 1280px? Nie, ponieważ sam interfejs przeglądarki zajmuje też jakąś część szerokości naszego ekranu. Zwykle jest to około 16px bez scrollbara oraz 30px z scrollbarem pionowym. Jednak w zależności od przeglądarki te wartości mogą wahać się +/- 15 px. Ponadto, w przypadku desktopu, elegancko będzie dać użytkownikowi jednak jakiś „oddech” po prawej i lewej stronie, czyli zostawić ok. 20px wolnego miejsca. Przy rozdzielczości 1024 px i odjęciu tych wartości wychodzi magiczna liczba 960 px. Teraz już wiesz, skąd wziął się 960 Grid System, prawda? Przy 1280 px optymalnie będzie przyjąć za wyjściową szerokość około 1200 px. I tym sposobem desktop mamy z głowy. Wysokość, tak jak pisałem ma mniejsze znaczenie – starajmy się jednak, aby najważniejsze treści na naszej stronie mieściły się w wysokości 740 px, co dotyczy także widoku tabletowego.

Rozdzielczość tabletowa

W tym przypadku dochodzi kilka istotnych czynników do rozważenia. Przede wszystkim, tabletem można operować w widoku wertykalnym i horyzontalnym. Obracając tablet, przeglądarka się przekręci i nasza strona będzie wyświetlana w innej rozdzielczości. Na szczęście, typowa dla tabletów szerokość to przedział 768px – 1024px a z kolei te tablety z ratio 4:3, które mają szerokość 1024px, będą miały wysokość 768px. Jak widzisz, całkiem sensownie nam się to zgrywa. W przypadku wyższych rozdzielczości również nie ma większego problemu, ponieważ wtedy obsłużona zostanie już nasza rozdzielczość desktopowa a na tablecie to „pół biedy” w porównaniu z telefonem.

W przypadku tabletów mniejszej rozdzielczości, zagadką będzie jeszcze wysokość i możesz o nią zadbać, jednak tak czy inaczej w układzie portretowym nasza witryna będzie prezentowała się doskonale.

Jedyne zastrzeżenie to skalowanie treści (patrz wyżej zwłaszcza skalowanie dla Windows 8), jak również coraz bardziej popularne panoramiczne tablety z rozdzielczością 1366 x 768 px. Jeśli masz trochę więcej czasu, można wziąć pod uwagę również tą rozdzielczość.

W rezultacie, dla tabletu przygotujemy wersje pod szerokość:

• 1024 px
• 768 px
• ewentualnie 1366 px

W przypadku tabletu oraz telefonu nie musimy brać pod uwagę dodatkowych pixeli przeglądarki na szerokość, ponieważ zwyczajowo przeglądarki na urządzeniach mobilnych nie mają żadnych ramek. Nie zostawiamy też „oddechu” po bokach dla użytkownika, tylko projektujemy layout na całą dostępną szerokość. Zatem tutaj nie musimy już nic odejmować.

Rozdzielczość telefonowa

W tym przypadku również mamy do czynienia z widokiem horyzontalnym i wertykalnym, choć użytkownicy są bardziej skłonni do korzystania z przeglądarki w układzie pionowym. Typowa rozdzielczość smartphone’ów jest w przedziale 320 – 480 px na szerokość, oraz 640 – 960 px na wysokość. Przypominam, że iPhone 4, który ma rozdzielczość 960×640, domyślnie wyświetla grafiki tak, jakby był iPhonem 3 z 2x mniejszą rozdzielczością. Popularna Nokia Lumia ma rozdzielczość 480×800 px i w mojej ocenie ta rozdzielczość może być uznana za bazową na telefon. Jak wiadomo, większość telefonów i tabletów zeskaluje zawartość więc jeśli tylko będzie to „w okolicy” 480 px na szerokość, będzie wyświetlało się całkiem dobrze. Chodzi tutaj o zdefiniowanie breakpointu, a za taki możemy uznać szerokość 480 px.

Podsumowanie

Warto rozpocząć od projektowania przynajmniej 3 wersji layoutu. Będą to wersje odpowiednio dla:

• Monitorów (Desktop + Laptop) – 1200 px szerokości
• Telefonów / Smartphone’ów – 480 px szerokości
• Tabletów – 1024 px szerokości

Mając te wersje wyjściowe, można zastanowić się nad obsłużeniem dodatkowych breakpointów:

• 1366 px
• 800 px
• 768 px
• 320 px

Często będziemy mogli to zrobić już z pomocą Responsive Webdesign oraz CSS3 Media Queries. W związku z tym sam układ w Photoshopie można w modelowej sytuacji przygotować na trzy urządzenia.

Praktyczny przykład kompletnej strony, która zgodna jest z założeniami Responsive Desgin oraz dobrze wyświetla się na wielu rozdzielczościach oraz więcej cennych wskazówek znajdziesz w kursie Elastyczne Strony WWW – Projektowanie na wiele urządzeń i rozdzielczości, dostępnym na eduweb.pl już od 3.09.2012r. Polecam także kurs mojego autorstwa Projektowanie na wiele urządzeń i rozdzielczości.

Serdecznie pozdrawiam,
Grzegorz Róg