Wakacyjny kurs Responsive Web Design cz. 1

W poprzednim artykule poznaliśmy podstawy. Wiemy już co oznacza RWD i z czym to się je. Dzisiaj dostaniemy kolejną porcję mięsa.

Zanim to nastąpi poznajmy plan zajęć 🙂

1. Czy Responsive Web Design jest dla mnie?
2. Narzędzia ułatwiające pracę
3. Moja pierwsza strona
4. Dodajemy galerię zdjęć

 Dzisiaj zajmiemy się dwoma pierwszymi punktami.

 1)   Czy Responsive Web Design jest dla mnie?

RWD często kojarzone jest z mobilnością i na tym rozumieniu się skupimy teraz.

Na LinkedInie obserwuje nas ponad 100 tys. osób. Jesteś tam z nami?

Obserwuj

Załóżmy, że posiadamy już działającą stronę internetową i stwierdziliśmy, patrząc w jej statystyki, że wiele osób odwiedzających ją, korzysta z telefonów czy tabletów. Zastanawiamy się co z tym zrobić. Mamy 3 możliwości:

#NMInsights: Polskie podcasty o marketingu i e-commerce warte słuchania

 a)   Nie robimy nic

Współczesne przeglądarki w telefonach czy tabletach w znakomity (lub prawie znakomity) sposób radzą sobie z wyświetlaniem „zwykłych” stron. Możemy je czytać, nawigować po nich. Czyli zawartość jest dostępna. Acz może nie w sposób tak wygodny i szybki jak strony przygotowane specjalnie pod urządzenia mobilne. Czasami trzeba powiększać fragmenty, by trafić link i ciężko się wybiera bliskie sobie elementy menu…

 b)   Przygotowujemy specjalną stronę mobilną

Możemy stworzyć stronę mobilną dla urządzeń dotykowych i stronę mobilną dla urządzeń „bez dotyku”. Zrobił tak choćby Facebook — strony te to odpowiednio: http://touch.facebook.com/ i http://m.facebook.com/.

Mamy newsletter, który rozwija marketing w Polsce. A Ty czytasz?

Rozwijaj się

Specjalne strony mobilne często przygotowują też portale czy gazety: http://m.onet.pl/, http://m.gazeta.pl/ itp.

Wydaje się to być rozwiązaniem idealnym i w licznych przypadkach tak jest.

Ma to swoje zalety: serwisy prezentujące informacje, w sposób przygotowany specjalnie dla urządzeń mobilnych, są (powinny być) zoptymalizowane, by szybko się wczytywały itp.

Ma także wady: musimy stworzyć dwa (trzy, cztery…) oddzielne serwisy i w przypadku zmian — zmieniać je wszystkie, czy też ciągle dodawać urządzenia mobilne, by nasz system przesyłał im wersję mobilną, a nie zwykłą.

 c)   Przebudowujemy stronę zgodnie z RWD

Powinienem raczej napisać — tworzymy od nowa stronę zgodnie z RWD. Dlaczego? Bo łatwiej (zaufaj mi teraz, w kolejnej części dowiesz się dlaczego) zbudować stronę od nowa niż próbować ją zmieniać. Być może strona będzie wyglądała nawet tak samo na ekranie komputera. Acz kod HTML i CSS będzie zupełnie inny.

Zalety znamy z poprzedniego artykułu: jesteśmy gotowi na przyszłe urządzenia mobilne (o dowolnych wielkościach i rozdzielczościach).

Największą wadą jest, że strona może nie być tak optymalna i tak szybko się wczytywać na urządzeniach mobilnych jak specjalnie do tego stworzona wersja tylko mobilna. Będziemy musieli często przesyłać zbędne dane.

Jak odpowiedzieć na postawione wyżej pytanie? Sądzę, że każdy musi to zrobić samemu.

Jeśli nasza strona to tylko wizytówka z danymi adresowymi — to raczej nie ma sensu jej zmieniać.

Jeśli dysponujemy dużym serwisem informacyjnym czy portalem społecznościowym — drugie rozwiązanie może być najlepsze dla naszych odbiorców; Otrzymają szybko wczytujące się i zoptymalizowane strony.

Jeśli zaś myślimy o stronie firmowej — dla mnie jednoznaczny jest wybór wersji RWD.

Oczywiście nie zawsze i dla każdego taki podział zadziała. Na przykład sztandarowy przykład zastosowania RWD to strona The Boston Globe. A to  strona informacyjna!

 Na potrzeby naszego kursu zakładam, że wybierzemy jednak Responsive Web Design

  2) Narzędzia ułatwiające pracę

 Zanim rozpoczniemy pracę warto przygotować kilka narzędzi. W kolejnym odcinku z cyklu przydadzą nam się:

 a)   Stary telefon komórkowy sprzed czasu „dotykalskich”

Wbrew pozorom wiele osób jeszcze ma takie telefony (choćby służbowe BlackBerry) i warto sprawić by też mogły nawigować po naszej stronie WWW.

 b)   http://www.studiopress.com/responsive/ — podgląd naszej strony w kilku popularnych wielkościach ekranu

 c)   http://spriteme.org/ — bookmarklet, który ułatwi nam optymalizację przesyłanych danych

 d)   http://developer.yahoo.com/yslow/ — wtyczka, bookmarklet, który pomoże nam sprawdzić jak szybko wczytuje się strona i co jest jej wąskim gardłem.

 e)   Otwarta i chłonna głowa – Acz to oczywiste w przypadku naszych czytelników.

 Jeśli masz pytania, wątpliwości, coś chciałbyś dodać albo uzupełnić dopisz to w komentarzach do artykułu. 

—

kolejne części kursu: druga, trzecia >>>

galeria stron responsywnych >>>