Mobilna rewolucja w e-learningu - responsive e-learning design

Mobilna rewolucja nie jest już jedynie nowinką, ale zaczyna skutecznie konkurować z tradycyjnym dostępem do treści internetowych w przeglądarce komputera stacjonarnego, czy laptopa. Wyzwaniem przed jakim stajemy jest dopasowanie treści kursów e-learningowych do różnych rozdzielczości. A różnorodność jest naprawdę duża. Projektowanie kursów e-learningowych dla różnych urządzeń, wymaga, jak mam nadzieję pokażę, zmiany mentalności i naszych przyzwyczajeń co do wyglądu, czy nawigacji w kursie. Nie możemy zlekceważyć responsywnego projektowania, gdyż sprawa dotyczy projektowania kursów spełniających kryteria użyteczności.



Co to jest responsive web design?
Trendem jaki się ostatnio pojawił jest nie osobne projektowanie na urządzenia mobilne, lecz projektowanie na różne urządzenia. Pojawił się nowy sposób projektowania określany jako responsive web design, czyli tworzenie stron dopasowujących się do różnych rozdzielczości, przystosowanych do różnych rozdzielczości. Responsive web design pomoże nam odpowiedzieć na pytanie jak stworzyć kurs, który będzie dobrze się wyświetlał na różnych urządzeniach od notebooków i komputerów stacjonarnych poprzez tablety do telefonów komórkowych. E-learning designerzy dzięki zastosowaniu  responsywnego projektowania będą mogli tworzyć pojedynczy, jeden kurs na desktop, tablet, telefon.

Pierwsza cecha responsive web design - dopasowanie do różnych szerokości strony
Czym więc jest responsive web design? Responsive design jest odpowiedzią na dokuczliwy w tej chwili problem, z którym coraz częściej spotykają się projektanci stron internetowych. Problemem tym jest rosnąca liczba wyświetlaczy o różnych szerokościach. Przykładem witryny zaprojektowanej zgodnie z zasadami responsive web design jest witryna gazety The Boston Globe.

Najpierw widzimy 3 główne kolumny.

Przewijając stronę w dół  widzimy 5 kolumn, potem znów 3. Kolumny zbudowane są w układzie siatki. 

Jeżeli teraz zaczniemy zmniejszać okno przeglądarki poczynając od prawej strony, zauważymy, że elementy zaczną się przemieszczać, ale pozostaja w tych samych proporcjach. Kolumny proporcjonalnie zmniejszają swoją szerokość, a następnie zmniejsza się ich liczba z 3 do dwóch. 

Dalsze zmniejszanie szerokości przeglądarki powoduje, że widzimy już tylko jedną kolumnę. 

Jest to szerokość strony dopasowana do telefonu komórkowego. 

Strona zaprojektowana jest w układzie płynnej siatki (fluid grid). Poniżej możesz zobaczyć układy siatki, w programie Adobe Dreamweaver CS6, dostosowane do różnych urządzeń 

Jak zauważyłeś wraz ze zmniejszaniem się szerokości strony zmniejszała się liczba kolumn, bowiem fluid grids (pływająca siatka) z definicji jest strukturą elastyczną i reagującą w miarę możliwości na szerokość ekranu. 

Druga cecha responsive web design - layout mający sens dla oglądającego

Dodać trzeba, że nie jest to jakiś bezsensowny, przypadkowy układ strony. Responsive web design to bowiem takie projektowanie, które zapewnia że strona będzie miała sens dla ludzi ją oglądających.

Wnioski dla responsive e-learning design

Jakie wnioski wynikają z responsive web design dla responsive e-learning design? Na pewno dwa:

1) kursy projektowane powinny być tak aby dostosowywały się do różnych szerokości ekranów,

2) dostosowanie musi być sensowne - layout kursu, nawigacja, układ treści musi być dostosowana do urządzenia mobilnego i mieć sens dla osoby zapoznającej się z kursem e-learningowym. 

Wrócę jeszcze do tego tematu w kolejnym poście na blogu.

Na zakończenie polecam artykuł Ethana Marcotte dotyczący responsive web design, autor artykułu pracował nad przygotowaniem Boston Globe i jest niewątpliwie ekspertem i prekursorem omawianych rozwiązań.