Responsive web design - elastyczne strony

Opublikowany: 01.12.2011 15:30:16 | Komentarzy 9

Problem

Najlepiej będzie posłużyć się przykładem jaki pokazał Ethan Marcotte w swojej książce pt. "Responsive Web Design". Ethat posłużył się malarzem, który musi stworzyć swoje dzieło na płótnie. Jest mały szkopuł, to płutno może mieć różne rozmiary - począwszy od małych karteczek, przez kartki z zeszytu i skończywszy na wielkich płótnach do wieszania na ścianach.

Podobny problem jest dzisiaj ze stronami internetowymi. Laptopy mają różne rozdzielczości, do tego urządzenia mobilne takie jak smartfony (telefony z dotykalskimi ekranami), tablety a nawet konsole do gier!

Jak wielki jest to problem?

Punkt widzenia zależy od punktu siedzenia.

Jedni właściciele stron (blogerzy, sklepikarze, właściciele mniejszych lub większych firm) są mniej świadomi, drudzy zaś wiedzą w czym rzecz. Główne pytanie jakie należy sobie zadać to: czy to się opłaca? Wiadomo, że inaczej na ten problem będzie patrzył właściciel popularnego sklepu, który generuje dużo zamówień i gra o mobilnych klientów może się opłacić. Strony firmowe to też inna bajka. Jedni właściciele będą chcieli iść z biegem czasu (trendami) a innym będzie - mówiąc kolokwialnie - zwisać.

Na pewno ten trend można zauważyć na stronach osób i firm związanych z naszą branżą. Jednak, jak się okaże w dalszej części wpisu - nie tylko :).

Dzisiaj...

Dzisiaj w większości przypadków, jeżeli pojawiają się wersje mobilne stron to zazwyczaj są one tworzone pod specjalnymi adresami. Subdomeny np. m.strona.pl czy nawet katalogi strona.pl/mobile/artykul/2234/... itd. Problem w tym, że takie rozwiązania nie są najlepsze, nie dość, że trzeba tworzyć specjalny kod strony (front-end i backend) to jeszcze dochodzi kwestia pod wyszukiwarki (duplikowanie treści).

Wiem. Nie zawsze się da, ale czy to naprawdę takie trudne/ciężkie?

Media Queries i CSS3

Jeszcze nie tak dawno, tworzenie alternatywnych stylów CSS dzieliło się na:

• Style główne - by stona wyglądała poprawnie na wszystkich przeglądarkach.
• Style do druku - rzadko, ale pojawiały się.
• Pozostałe - rzutniki, dla osób niepełnosprawnych.

Dzięki CSS3 ten wachlarz staje się znacznie większy i możemy tworzyć style ze względu na rozdzielczość ekranu a wszystko za sprawą jednego polecenia przy dołączania stylów w sekcji head:

media="screen and (min-width: XXX) and (min-height: YYY)"

Gdzie XXX i YYY to odpowiednio minimalna szerokość i minimalna wysokość. Z tego co zauważyłem, to min-height rzadko się stosuje. Można jeszcze określać maksymalne szerokości:

media="screen and (max-width: XXX) and (max-height: YYY)"

Jeżeli ktoś woli mieć wszystko w jednym miejscu (pliku) to może zrobić to w następujący sposób;

@media all and (max-width: XXX) and (min-width: YYY) {
   selektor {
      /* ... */
   }
   /* ... */
}

Proces tworzenia elastycznej, skalowalnej i gibkiej strony

Powyższy obrazek przedstawia oficjalną stronę Baracka Obamy, która jest gibka - dostosowuje się do szerokości urządzenia (swoją drogą polecam zajrzeć do źródeł stylów CSS). Dodatkowo na obrazku umieściłem strzałki obrazujący poprawny proces projektowania strony przez grafika i kodera.

Jak widać, grafik zaczyna od największej wersji do najmniejszej. Koder zaś tworzy w odwrotnej kolejności.

Czy warto?

Wiele osób zaraz zacznie lamentować czy warto zawrać sobie tym głowę. Przecież tworzy się tyle dodatkowego kodu css, odpowiednie obrazki, trzeba tworzyć elastyczne marginesy i odstępy. Pracy jest dużo. Wg mnie warto zatroszczyć się o każdego użytkwonika. Stworzyć mu odpowiedni komfort poruszania się po stronie. Po co użytkownik ma coś powiększać, zmniejszać by przeczytać czy nawet kupić?

Zdaję sobie sprawę, że przerabianie istniejącej strony na bardziej elastyczną to może być duży koszt, ale nie popadajmy w skrajności. Dla chcącego nic trudnego. Po za tym, podczas tworzenia zupełnie nowej strony warto zaznaczyć, że strona będzie elastyczna i grafik na pewno weźmie to pod uwagę - chyba, że grafik nas nie lubi :P.

Jeszcze jedno: książka, galerie css

Gdyby ktoś chciał się wgłębić w ten temat na poważnie, to polecam przeczytać książkę Ethana Marcotte'a (na dniach postaram napisać się recenzję) oraz przeglądać co jakiś czas galerię elastycznych stron - mediaqueri.es. Na mediaquesri.es, nie dość, że jest to miejsce w którym można znaleźć inspirację, to można podejrzeć najlepszyć w akcji :).

Tagi: Ethan Marcotte media queries mediaqueri.es responsive web design responsive design