To właśnie z tego powodu ludzie zaczęli eksperymentować, szukać złotego środka, porządku w projektowaniu. Idealnym rozwiązaniem, mówiąc subiektywnie, jest (a być może „był”) 960 grid system. Sposób projektowania i umieszczania elementów, gdzie szerokość witryny (treści) nie powinna przekraczać 960px. 960 jest liczbą, która ma sporo dzielników: 12,16,24,itd. Stąd możliwość podziału strony na kolumny o stałej szerokości i równych odstępach. Tworzenie stron z zachowaniem takiego lub podobnego wzorca sprawia, że design jest bardzo schludny i przejrzysty.
Responsive Web Design
Dość tej dygresji. Responsive Web Design z założenia ma skłonić twórców do projektowania z myślą nie tylko o użytkownikach desktopów. Responsive (od słowa response) można tłumaczyć jako wrażliwy, czuły na zmianę.
Większość z nas zapewne miało do czynienia z witryną, której na smartfonie po prostu nie da się przeglądać. RWD zakłada, że szerokość strony i jej układ powinny dopasowywać się do szerokości ekranu. Projektując stronę w 960gs szerokość witryny wynosi 960px przy założeniu, że minimalna szerokość ekranu to 1024px. Dokonując dzielenia 960/1024 otrzymujemy wynik 93,75, który mógłby posłużyć do określenia zmiennej szerokości 93,75%.
Wiadomym jest, że jeśli smartfon w pozycji „portrait” ma dość ograniczoną szerokość ekranu (około 480px – w zależności od rozdzielczości oczywiście). Wyświetlenie strony 3 kolumnowej, a nawet 2 kolumnowej znacznie utrudnia odbiór, zmusza użytkownika do przybliżenia i scrollowania w poszukiwaniu treści. Przewijanie strony w poziomie jest niewygodne i niemalże niedopuszczalne do zastosowania przez projektanta. Myślę, że nie muszę tłumaczyć dlaczego…
Przykłady zastosowania.
Ułatwienia ze strony CSS3
Istnieje wiele metod, które pozwolą nam jednoznacznie określić wymiary ekranu, rozdzielczość i wiele innych parametrów. Większość rozwiązań opiera się o rozwiązania JavaScriptowe, które mogą posłużyć jako alternatywa dla przeglądarek (zwłaszcza starszych), które nie obsługują poprawnie CSS3.
CSS w wersji trzeciej przyniósł wiele usprawnień i ułatwień. Większość eliminuje konieczność użycia grafiki do nadania niestandardowego obramowania, czy cienia. CSS3 wprowadza możliwość ograniczenia zasięgu styli kaskadowych dla zadanego typu medium: desktop, smartfon, telewizor, wydruk, itp. Choć nie na tym kończy się zaleta tego rozwiązania.
Media Queries pozwalają na użycie różnych styli CSS w zależności od parametrów takich, jak szerokość ekranu urządzenia, wysokość, rozdzielczość, itp. Najprościej zobaczyć to na przykładzie:
wersja online (nowe okno): tutaj- zmieniaj szerokość strony
#menu {
width: 50%;
}
@media screen and (max-width:1000px) {
width: 100%;
}
Menu będzie miało szerokość 100% ekranu tylko w przypadku, gdy szerokość przeglądarki będzie mniejsza równa 1000px. Max-width określa maksymalną szerokość, dla jakiej możliwe jest zastosowanie zdefiniowanych styli. Warunki można łączyć:
@media screen and (max-width: 1000px) and (min-width:500px) {/*css*/}
Zakończenie
Każde rozwiązanie ma swoje wady. Jedną z najbardziej poważnych jest znaczny wzrost wagi strony. Pliki CSS, jaki i kod HTML przybiorą na wadze i stracą na przejrzystości i czytelności. Kilka wariantów układu (przynajmniej 3-4 podstawowe) to sporo zmian, dodatkowa grafika i kod. Szczególnie ucierpią użytkownicy smartfonów. Strona wydaje się przyjazna, jednak „od środka” już taka nie jest.
Mimo tych wad warto inwestować w praktykę z RWD, rynek urządzeń mobilnych jest bardzo dynamiczny. Nie zapominajmy, że codziennie pojawiają się nowe, lepsze urządzenia. A co będzie za kilka lat? RWD nie jest tylko modą, a koniecznością. Niestety rzadko spotykaną u polskich projektantów. Domyślam się, że tylko dlatego, że klienci nie są bardzo wymagający. Co z tego, że strona wyświetla się poprawnie na smartfonach, jeśli korzystanie z niej to katorga? Warto się zastanowić.
