Nowe podejście do projektowania stron mobilnych

Nowe podejście do projektowania stron mobilnych

Brief.pl / Inspiracje

Projektanci stron internetowych muszą dziś myśleć w kategoriach funkcjonalnych, dążąc do tworzenia atrakcyjnych wizualnie i przede wszystkim czytelnych serwisów, które będą wyświetlane na różnych typach urządzeń. Z pomocą przychodzi technika projektowania oparta na założeniach Responsive Web Design.

-

Wykorzystuje ona reguły CSS3 Media Queries  w celu projektowania układu layoutu stron internetowych, automatycznie dostosowujących się do rozmiarów, rozdzielczości i orientacji ekranu, na którym będą wyświetlane.

Optymalizacji podlega nie tylko wygląd layoutu, ale także sposób nawigowania i układ elementów na stronie, ze scrollowaniem ograniczonym do jednej osi góra - dół. W rezultacie możliwe jest odejście od tworzenia odrębnych wersji strony internetowej, przeznaczonej dla PC oraz pozostałych urządzeń mobilnych na rzecz technologii, która pozwala na dostosowanie sposobu wyświetlania strony do specyfiki urządzenia z poziomu którego użytkownik łączy się z siecią.

W konsekwencji, niezależnie od urządzenia, z którego użytkownik korzysta, otrzymuje on dostęp do tych samych treści, jakie wyświetliłyby się na stacjonarnym PC, przedstawionych zgodnie z założeniami User Experience (UX).

Idzie nowe

Jeszcze do niedawna projektowanie stron na urządzenia mobilne oznaczało konieczność tworzenia dodatkowych stylów CSS, których celem było definiowanie jaki rodzaj plików ma zostać wyświetlony w zależności m.in. od przeglądarki czy urządzenia, na którym miała być wyświetlona dana treść. Opracowania na tej podstawie technika CSS3 pozwalała na tworzenie alternatywnych i elastycznych stylów wyświetlania w zależności od wymiarów i orientacji ekranu danego urządzenia mobilnego. Zmieniający się wygląd witryny wymagał wraz z tym by napisane skrypty CSS posiadały wyznaczone granice rozdzielczości – tzw. breaking pionts, które ze względu na zastosowanie zdefiniowanych stylów CSS, skutkują zmianą layoutu. Oznacza to, że w procesie projektowania responsywnych interfejsów tworzone są dwa rodzaje skrytów CSS – pierwsze wspólne dla wszystkich odpowiadają za kolorystykę, czcionkę i tym podobne elementy interfejsu. Drugie z nich zawierają uśrednione zakresy poszczególnych punktów rozdzielczości, wspólnych dla określonej grupy urządzeń.

Działając zgodnie z RWD, projektant musi dokładnie planować, jak dana stron będzie zachowywała się na poszczególnych urządzeniach, mając na uwadze w szczególności właściwe rozmieszczenie breaking points. Przykładowo rozdzielczość 960 px obejmuje zarówno wysokiej rozdzielczości tablet jak również klasyczny laptop. Z kolei stosunkowo szeroka rozdzielczość 750 px wyświetli się na Iphone5, który ma stosunkowo mały ekran. Dlatego tak ważne jest dobre rozmieszczenie granic rozdzielczości oraz dokładne przemyślenie architektury serwisu.

 

Plusy i minusy RWD

Responsive Web Design eliminuje konieczność tworzenia odrębnej strony internetowej przeznaczonej na urządzenia mobilne, która często znajduje się pod innym adresem URL. Zastosowanie tego rozwiązania pozwala na dostosowanie parametrów strony do każdego urządzenia, na którym będzie ona wyświetlana, zachowując przy tym wyjątkową elastyczność i wygodę dla użytkownika. Jednocześnie technika eliminuje konieczność tworzenia oddzielnych wersji witryn dla urządzeń mobilnych. Dodatkową korzyścią jest tylko jednorazowa optymalizacja SEO, która będzie działała na różnych wersjach serwisu, zaś indeksowanie strony przez roboty wyszukiwarki będzie bardziej efektywne ze względu na to, że strona stworzona zgodnie z założeniami RWD nie musi być indeksowana za pomocą kilku różnych Googlebotów. Wreszcie, udostępnianie treści w ramach jednego adresu URL ułatwia użytkownikom dzielenie się treścią, zaś wyszukiwarkom przypisanie właściwości indeksowania do zawartości strony. Linki prowadzące do standardowej wersji witryny są jednocześnie linkami do wersji mobilnej serwisu, dzięki czemu sygnały popularności witryny są kumulowane.

Wśród podstawowych wad dla tego rodzaju rozwiązania wymienić należy w szczególności brak możliwości obsługi CSS3 i reguł Media Queries  nadal obecnych w starszych wersjach przeglądarek internetowych oraz ograniczoną możliwość optymalizacji UX użytkowników urządzeń mobilnych. Zastosowanie RDW powoduje również wzrost transferu danych zaś implementacja projektu jest czasochłonna, ze względu na konieczność gruntownego przebudowania strony internetowej oraz długotrwały proces testowania projektu.

Zaczynając od końca

Projektowanie zgodnie z filozofią Responsive Web Design zakłada, że tworzenie strony musi zacząć się od „końca”, a więc stworzenia jej wersji na urządzenia mobilne. Tworzenie pod kątem ograniczonego środowiska wyświetlania się treści kładzie wymóg na projektantów dotyczący dokonania prawidłowej hierarchizacji danych oraz takiego rozmieszczenia elementów nawigacji, które w prosty i szybki sposób pozwolą wykonać użytkownikowi czynność lub odnaleźć określone informacje.

Nawa technologia szybko zyskała uznanie w opinii Google. Z całą pewnością technika projektowania responsywnych interfejsów będzie rozwijała się w najbliższym czasie, wzbogacając się jednocześnie o nowe, zwiększające użyteczność rozwiązania.

 

 

Zobacz inne polecane artykuły

Skanska zainwestuje w Business Link. Największa inwestycja globalnej korporacji w polski startup

Magazyn / Aktualności

Skanska zainwestuje w Business Link. Największa inwestycja globalnej korporacji w polski startup
Skanska zainwestuje w Business Link. Największa inwestycja globalnej korporacji w polski startup

Business Link i Skanska będą współtworzyć innowacyjny ekosystem w regionie Europy Środkowo-Wschodniej (CEE) dla startupów, małych i średnich firm oraz sektora usług biznesowych. Deweloper zainwestował w Business Link, największą sieć coworkingu i prywatnych biur na wynajem w Polsce. Dzięki planowanej ekspansji Business Link stanie się największą tego typu siecią w Europie i drugą na świecie, a Skanska stworzy najbardziej kompleksową ofertę biurową dla różnorodnych podmiotów na rynku CEE.

Ruszyły zgłoszenia do 7. edycji rankingu 50 Najbardziej Kreatywnych w Biznesie

Brief.pl / Aktualności

Ruszyły zgłoszenia do 7. edycji rankingu 50 Najbardziej Kreatywnych w Biznesie
Ruszyły zgłoszenia do 7. edycji rankingu 50 Najbardziej Kreatywnych w Biznesie

7 lat, blisko 300 firm i ponad 400 laureatów. Ranking 50 Najbardziej Kreatywnych w Biznesie to najstarsza, bo trwająca już 7. rok inicjatywa, która pomaga budować i promować segment innowacyjnego oraz kreatywnego biznesu w Polsce. Jej celem jest porządkowanie rynku oraz otwieranie przed przedsiębiorcami możliwości networkingowych i biznesowych. W tym roku, przy okazji 7. urodzin, ranking doczekał się kilku zmian...

Już ponad 3000 osób pobrało aplikację Quertes. Łączy ich miłość do domowego jedzenia

Brief.pl / Aktualności

Już ponad 3000 osób pobrało aplikację Quertes. Łączy ich miłość do domowego jedzenia
Już ponad 3000 osób pobrało aplikację Quertes. Łączy ich miłość do domowego jedzenia

Na czym polega aplikacja Quertes? To zupełnie nowe spojrzenie na dzielenie się. Przypadki AirBnB czy Ubera pokazują, że ekonomia współdzielenia staje się coraz bardziej popularna. Odchodzimy od sztywnych reguł, a ludzie chcą wykorzystywać i monetyzować swoje umiejętności. Na tej zasadzie powstała aplikacja Quertes, miejsce które łączy ludzi gotujących prywatnie tymi, którzy chcą przełamać rutynę i zjeść coś nowego, pysznego i domowego. Pobierając darmową aplikację ludzie gotujący prywatnie w domach mogą sprzedać to, co przygotują, a Foodies mają możliwość kupienia domowego jedzenia.