To, w jaki sposób przeglądamy sieć, ewoluuje – dzięki rosnącej liczbie tabletów, smartfonów, laptopów, telewizorów a dziś nawet okularów. Responsywny webdesign nie jest kolejnym trendem. To podejście do projektowania stron www, które koncentruje się na doświadczeniu użytkownika, dopasowując naszą stronę do urządzenia na którym jest wyświetlana. Jeśli na poważnie myślisz o biznesie w sieci, to powinien być obowiązkowy artykuł.
Przyszłość jest dziś. Witamy w erze postpecetowej.
Gdy ktoś ogląda waszą stronę, może to robić na smartfonie, tablecie lub telewizorze. Nieresponsywny design ma jeden rozmiar, jak wydrukowany plakat. To oznacza, że na urządzeniu z małym ekranem zostanie albo zmniejszony do maleńkich, nieczytelnych rozmiarów, albo użytkownik będzie musiał przewijać go w gorę i w dół, w prawo i w lewo. Niefajnie. Na większym ekranie komputera stacjonarnego będą widoczne olbrzymie połacie pustej przestrzeni, a sama strona będzie wyglądać na małą i nieciekawą.
Logicznym rozwiązaniem jest zaoferowanie różnych layoutów strony na podstawie rozmiarów ekranu urządzenia. Ogólnie rzecz biorąc, mobilny układ powinien być wąski, mieć skondensowane informacje i mniej obrazków, a layout dla komputerów stacjonarnych powinien być szeroki, mieć dużo informacji i duże obrazki. Styl strony jest taki sam, zmienia się jej układ. Niektóre elementy, te, które nie są najważniejsze, mogą być ukryte lub zmniejszone. To trochę tak, jak z robieniem tych samych podkoszulków w różnych rozmiarach: S, M, L, XL… w zależności od klienta.
Tworzenie zajmuje więcej czasu. Efekty dają więcej zysków.
Jak można się spodziewać, niezależne projektowanie trzech / czterech różnych układów zajmie więcej czasu. Wiele rzeczy trzeba przemyśleć; które elementy są najważniejsze, ile kolumn powinien mieć każdy layout, jaka jest optymalna długość linijki, przy której tekst będzie czytelny na danym urządzeniu, jak poradzić sobie z obrazkami i reklamami?
A to naprawdę dopiero początek...

Gdy składamy ofertę w sprawie nowego zlecenia, dajemy kilka opcji co do liczby różnych layoutów dla danego designu. Niezbędnym minimum są obecnie dwa designy; dla telefonów i standardowych monitorów komputerów stacjonarnych. Górny limit może wynosić nawet i pięć – spójrzcie raz jeszcze na stronę Microsoftu.
Mobile First! Najpierw wersja mobilna. Sposób projektowania marketingu, który działa.
Obecnie przy projektowaniu i analizie koncepcji wszystko musi zostać wzięte pod uwagę ze względu na elastyczność. Ustalamy style/kolory/ilustracje, ale pozycja i rozmiar nie muszą już być niezmienne. To oznacza, że zrozumienie celów, poznanie odbiorców i hierarchii projektu jest teraz ważniejsze niż kiedykolwiek. To dobrze. W sieci, w której skupienie internauty przypomina skupienie muszki owocówki, trzeba mówić szybko, zwięźle i na temat. A co najważniejsze mówić to w odpowiednim momencie. A Owocni są w tym bezkonkurencyjni.

Bardzo często wersja mobilna dla aplikacji sieciowej lub strony internetowej projektowana i tworzona jest po tym, jak powstanie wersja na PC. Oto trzy powody, dla których powinno się projektować najpierw wersję mobilną.
Wersje mobilne są coraz bardziej popularne.
Mimo, że dostęp do sieci przez urządzenia mobilne jest możliwy od lat, smartfony obsługują w tej chwili olbrzymią część ruchu w aplikacjach mobilnych czy treściach internetowych. Weźcie pod uwagę to, że operatorzy komórkowi obserwują w ostatnich latach wzrost przesyłu danych mobilnych o tysiące procent rocznie. A to dopiero początek.
Tworzenie wersji mobilnej w pierwszej kolejności udostępnia produkt dla niezwykle szybko rozwijającej się grupy użytkowników, która według wielu uważana jest za kolejną ważną platformę komputerową.
Mobilność zmusza do skupiania.
Urządzenia mobilne wymagają od zespołów projektowych skupienia się na tylko najważniejszych danych i funkcjach. Na ekranie o wymiarach 320 na 480 pikseli po prostu nie ma miejsca na zbędne, niepotrzebne elementy. Trzeba nadawać im priorytety.
Dlatego kiedy zespół najpierw projektuje wersję mobilną, efektem końcowym jest produkt skoncentrowany na najważniejszych zadaniach, które chcą zrealizować użytkownicy, bez niepotrzebnych dodatków i ogólnego chaosu w interfejsie, które występują obecnie na stronach odwiedzanych za pośrednictwem komputerów stacjonarnych. To składa się na dobre doświadczenie po stronie użytkownika i jest dobre dla biznesu.
Mobilność zwiększa możliwości.
Nowe platformy dla aplikacji mobilnych wprowadzają ciekawe możliwości, które zostawiają przeglądarki dla komputerów stacjonarnych w tyle. Weźcie pod uwagę niektóre funkcjonalności oferowane deweloperom przez iPhone’y Apple’a czy platformy Google Android: dokładne informacje na temat lokalizacji dzięki systemowi GPS, orientacja w terenie dzięki cyfrowemu kompasowi, wprowadzanie danych za pomocą jednego lub kilku jednoczesnych gestów dzięki opcji multi-touch, pozycjonowanie urządzenia za pomocą akcelerometru i wiele innych.
Tworzenie wersji mobilnej w pierwszej kolejności pozwala wykorzystać całą paletę tych możliwości do stworzenia bogatych, kontekstowych aplikacji bez ograniczania się do coraz starszego zestawu funkcjonalności.
Jak stworzyć responsywną stronę internetową?
Przykłady dla przedsiębiorców i porady dla deweloperów.
Jednym z częstych zarzutów przeciwko responsywnemu projektowaniu stron jest fakt, że tworzy się duże (pod względem rozmiaru pliku) strony internetowe, które spowalniają podstrony. Jednak możemy sprawić, że responsywne strony będą działać dobrze, musimy tylko pracować na tym, by było to możliwe. Według web apart, aż 86% responsywnych designów przesyła takie same dane do każdego urządzenia. Bez sensu. Stwórzcie podstawowy stylesheet dla każdej przeglądarki i ulepszony stylesheet dla nowoczesnych przeglądarek i Internet Explorera.
Elastyczne siatki to chyba najbardziej ekscytująca część projektowania RDW - responsywnych stron www. Wykorzystując podzielony kontekstowo target ustawiamy proporcjonalną siatkę, która obejmuje wszystkie nieznane elementy.

Płynna siatka wypełnia luki na różnych rozmiarów ekranach i pozwala, by treści wypełniły przestrzenie o dowolnych rozmiarach. Oto magia responsive web design.

Media query daje możliwość dopasowania layoutu na podstawie możliwości ekranu. Nie istnieją domyślne zalecane breakpointy. Nie wykorzystujcie breakpointów stworzonych na podstawie najbardziej popularnych urządzeń. Ta lista wciąż się zmienia i możecie sami siebie zapędzić w kozi róg.

Do tworzenia breakpointów wykorzystajcie em, a nie piksele. Dzięki temu będziecie mogli wziąć pod uwagę zmienne poziomy przybliżenia w przeglądarkach. Ustawienie maksymalnej szerokości obrazów i media query na 100% w przypadku takich elementów jak filmiki zapewnia ich elastyczność.

Załadujcie najpierw najważniejsze elementy podstrony. Następnie załadujcie pozostałe elementy w tle, gdy kluczowe treści się już wczytają. Funkcjonalności niezależne od Javascript mają większą wydajność. Użytkownicy nie korzystają z Javascriptu, gdy strona jest w trakcie pobierania.

Obrazki stanowią 66% rozmiaru plików na stronach internetowych. Zarządzanie obrazami dla różnych rozdzielczości jest coraz trudniejsze. Zamiast wykorzystywania obrazów rastrowych dla ikon i tła, możemy z pomocą SVG wykorzystać grafikę wektorową.

Spokojnie to web design, a nie religia. Działamy w jednej z najfajniejszych branży na świecie. Musimy być pokorni i ciężko pracować, a rezultaty pojawią się same.
Pierwsze kroki. Jak rozpocząć tworzenie
responsywnej strony dla mojego binzesu?

Jeżeli jesteś projektantem, lub programistą udaj się na stronę Github’a, który w jednym miejscu zgromadził najcenniejsze zasoby sieci dotyczące responsywnych projektów stron internetowych.
Tu nie chodzi o kolejne “modne” funkcje, tylko o zwiększenie współczynnika konwersji i lepszą zamianę odwiedzających w prawdziwych klientów. Oczywiście zawsze możesz zapytać nas o niezobowiązującą ofertę. Zadzwoń 660 970 980. Jesteśmy tu by Ci pomóc. Zapraszamy.