Rozmiar jednak ma znaczenie czyli html’owa moda – chapter 1
adminDla grafika projektowanie pod html to nuda: użyteczność przede wszystkim, do tego badania eyetrackingowe, badania zachowań użytkowników, zasady webusability, pozycjonowanie i masa ograniczeń programistycznych….można myśleć i tak.
Patrząc trochę z dystansu, to dziedzina sztuki użytkowej jak każda inna: architektura, elementy codziennego użytku czy moda. Ma przede wszystkim swoje funkcjonalne zadania do spełnienia, ale pozostawia też pewne pole do popisu dla inwencji, wyczucia stylu i koloru. Kieruje się tymi samymi zasadami co inne dziedziny użytkowe, więc z pewnym przymrużeniem oka można wyciągnąć analogie.
Najprostszy przykład - MODA.
Poniżej kilka powiązań, lekko tylko przejaskrawionych:
1. Rośniemy wszerz.
Na szczęście nie tylko w rozmiarach XL i XXL , które wchodzą na salony i ulice, ale także w internecie. I ta druga zmiana znacznie bardziej cieszy oko.
2. Zawsze pewna klasyka.
Czyli mała (czarna) biała internetu.
3. Wielki comeback.
Czas na kolor – powrót koloru na ulice, a czerni do designu biznesowego.
4. Trendy sezonu.
Te modowe można znaleźć jednym kliknieciem w Google. O zbiór htmlowych trochę trudniej (z otwartymi ramionami powitalibyśmy polski Smashing Magazine). Ale też przeżyliśmy już niejedno:były i falki (łezka mi się w oku kręci… kto pamięta te piękne czasy?) i błyszczące wypukłości (glossy style) i kolorowe wektory. Teraz wagę przejmuje tło - świetliste kompozycje, kolaże, styl vintage/retro i ręcznej grafiki.
Dziś kilka uwag o rozmiarze
Powszechnie przyjmuje się już od paru lat, że dominująca rozdzielczość monitorów to 1024x768px. Poniżej zestawienie kilku badań tego tematu.
Niestety, najbardziej wiarygodne są badania z kwietnia 2007 roku, bo przeprowadzone na największej i reprezentatywnej grupie użytkowników (2 miliony użytkowników dzielone na 20 tysięcy odwiedzających, ze 100 krajów każdego dnia). Widać jednak jak bardzo, od zeszłego roku, zmienił się procentowy udział monitorów o wyższej rozdzielczości. Badanie Hobo-web (Wielka Brytania) to 65 tysięcy użytkowników od stycznia do marca 2008. Badanie IDG (rynek polski) to tylko 271 użytowników, więc nie są to dane reprezentatywne. Mimo wszystko, obydwa tegoroczne zestawienia pokazują podobną tendencję. Odsetek rozdzielczości 1280 (na 800 lub na 1024 px - zestawienie tych wysokości zostało połączone żeby lepiej zobrazować dominującą szerokość ekranu, co ma znaczny wpływ na kształtowanie grafiki) jest proporcjonalny do odsetka rozdzielczości 1024. Możemy się domyślać, że na ten moment (listopad 2008) już go przewyższa. Podaję też procent rozdzielczości 1920x1200px, bo dla „grona graficznego” ten rozmiar staje się powszedni.
A jaki to ma wpływ na strony html’owe?
Na początku tego roku Jacek Opaluch zwrócił uwagę na, nareszcie pojawiające się na rodzimym rynku, pełnoekranowe flashe. W ciągu tego roku powiększony obszar zaczął oddziaływać także na layouty htmlowe, nie tylko w strefie programowania (rozciągalne sklepy czy fora znamy już od dawna), ale także w grafice. Coraz większa ilość stron htmlowych „wychodzi poza ramki”, rezygnuje z wydzielania treści ostrymi granicami i wykorzystuje pełny obszar okna przeglądarki jako miejsca na kompozycję graficzną.
Sposoby są różne: od szerokich, poziomych pasów kolorów czy grafiki, które często pojawiały się już wcześniej, po pełnoekarnowe obrazy, na których tle zamieszczane są informacje już najczęściej bez wydzielania granic dla boksów i modułów. Do tego działanie starannie formatowanym, dużym tekstem(odejście od malutkich, dziesięciopunktowych fontów już też staje się standardem. To kolejny efekt powiększania rozdzielczości – im większa rozdzielczość tym trudniej odczytać mały rozmiar fonta) i jedynie gdzieniegdzie delikatnymi, porządkującymi liniami.
Poniżej kilka przykładów zarówno ze światowego, jak i naszego podwórka.
Wszystkie screeny zostały przygotowane w rozdzielczości 1280x1024px, żeby łatwiej ocenić oddziaływanie tła.
1. Rozwiązania dość zachowawcze – podział okna przeglądarki na poziome pasy.
Podobne układy funkcjonują z powodzeniem od dość dawna. Jak do tej pory były jednymi z rzadkich htmlowych rozwiązan, pozwalających na wykorzystanie pełnego obszaru okna przeglądarki jako spójnej calości.
Pixele
Prosta, niemal biznesowa strona, której jedyna ozdobą i zapamiętywalnym elementem jest graficzny top na pełną szerokość ekranu.
Cinq7
Podobny układ i czysta stylistyka, dodatkowo losowo zmieniane topy wzbogacają atrakcyjność calości.
Macsbeer
Przykład w stylu retro, który jest nadal aktualny w tym roku.
2. Inny rodzaj rozwiązania – pełnoekranowe tło otaczające wydzielony graficznie prostokątny obszar z treścią. Czyli nadal strona jest “wycięta” z okna przeglądarki, ale zakomponowanie tła łagodzi to wrażenie.
Adobe
Ten przykład to “klasyka gatunku” – czytelność informacji, przy jednoczesnym przełamaniu monotonii grafiką w tle. Warto zwrócic uwage, że nawet przyciąganie strony do lewego brzegu przeglądarki, co obecnie właśnie ze względu na różnorodność rozdzielczości staje się rzadkością (np. strona o szerokości 900px, na ekranie o rozdzielczosci 1920 przyciagana do lewego wygląda jak biedny, zagubiony prostokącik) nie daje wrażenia spadania layputu, bo grafika umieszczona po prawej równoważy kompozycję. Działa tutaj nie tylko tło, ale i umieszczone u góry pole wyszukiwarki.
Niestety, juz przy rozdzielczości 1920 jest…słabo.
MTV
Kolejna „klasyka” – tutaj również losowość i zmiennośc tła oddaje charakter marki.
Blog Radu Ceuca
Coraz częściej światowa blogosfera też sięga po te rozwiązania… nam chyba przyjdzie jeszcze zaczekać w tym temacie na ciut szybsze łącza.
Free theme layouts
Inny przykład bloga.
My kid took these
Czyste i proste, czegóż więcej trzeba? ( …noo, może trochę podrasować fotkę)
Get London reading
Ta sama, prosta zasada, inny efekt.
3. Kilka modułow rozłożonych na graficznym tle, często wprowadzane przezroczystości (ustawiane na warstwach w htmlu lub w formie pngów), gdzie od wejścia IE7 nie ma już przeglądarki, która opierałaby się temu pomysłowi. Treść w formie tekstów i grafika tła zaczynają się przenikać.
My Kinetic Kreation
Poniżej moje ulubione przkłady – zapożyczenia przezrocztystości z flasha wreszcie dobrze sprawdzają się też w htmlowej kategorii. Oczywiście jeśli się pamięta o czytelności.
YOULOVE.us
Tutaj grafika może nie jest zachwycająca, ale na uwagę zasługuje interakcja oprogramowania z grafiką w technologii html.
4. I jeszcze kilka linków z polskiego rynku.
Sensus
Chyba pierwszy z niezależych od korporacji, szerzej znanych przykładów, jaki pewien czas temu pojawił się na naszym rynku. Niestety IE sobie z nim nie radzi, nawet wersja 7.0.
MTV
Marki podległe światowym korporacjom wprowadziły te trendy jako jedne z pierwszych. Szkoda, że w porównaniu z layouem międzynarodowym, nasz polski wygląda jakoś blado.
Coca Cola
Zgodnie z trendami korporacji, Coke.pl stosuje takie rozwiązania już jako standard. Z mniejszym lub większym powodzeniem. Poniżej jedna z bardziej zachowawczych, ale za to bardziej udanych wersji.
RMF
Nowy RMF MAXX. Jestem za.
Activeweb Medical Solutions
Ładnie, czysto i na temat. Szkoda, że png brzydko sie marszczy, co niestety widać… i waży jak prawdziwy XXL.
Ginekolog.pl
Komuś nie leży tematyka? Mnie sie podoba.
Dominika Kwol
Dyrektor Artystyczny
c.d.n.
Rewelacyjny artykuł, z jednej strony zgadzam się, że mniejsze rozdzielczości wciąż są popularne i nie należy lekceważyć użytkowników nieodpowiednim layoutem strony, jednak nie zawsze warto się na siłę dostosowywać. Zwłaszcza w przypadku stron, na których ma się znaleźć od razu dużo informacji. Łatwiej stronę przewinąć na boki niż doszukiwać się informacji na podstronach.
W przypadku wizytówek i prostszych stron taktyka dzielenia na paski jest bardzo dobrym pomysłem. Ale mają one zupełnie inną funkcję.