Technologia Responsive w projektowaniu sklepu internetowego

Czy wiesz, że twoja strona internetowa nie wyświetla się blisko 60% potencjalnych klientów? Wszystko za sprawą inwazji nowych technologii, w których tradycyjny interfejs nie tylko sobie nie radzi, ale i czyni z twojej witryny przestrzeń pełną bałaganu formalnego i niespójnej treści. Recepta? Responsywne podejście do rozdzielczości, czyli słynne, ale wciąż zagadkowo brzmiące Responsive Web Design. Czym jest i co dobrego może uczynić dla twojej strony www?

Smartfony w Polsce

Era standardowych rozdzielczości ekranów komputerowych minęła bezpowrotnie. W polskich mieszkaniach ze świecą szukać  kilkuczęściowych, ciężkich sprzętów – ich miejsce dawno zajęły laptopy i poręczne notebooki. Wkrótce i one mogą być zepchnięte z podium za sprawą ogromnej popularności urządzeń mobilnych. Jak szacuje IAB Polska Mobile w raporcie “Użytkownicy smartfonów wśród aktywnych internautów”, pod koniec 2012 roku ponad połowa internautów korzystała z sieci za pomocą smartfonów. Ich użytkownicy to najczęściej tzw. ekranożercy, czyli osoby, łączące się z internetem jednocześnie z kilku urządzeń. Każdy z “pożeranych” ekranów charakteryzuje się innymi wymogami technicznymi, ale tym, co rzuca się w oczy najbardziej jest zmienna rozdzielczość. A ta w przypadku tradycyjnego interefjsu w tabletach i smartfonach wypada dramatycznie.

Projektowanie stron www w technologii Responsive

Cały kłopot leży właśnie w niedostosowaniu projektu strony do zmiennej rozdzielczości i nowych rozmiarów ekranów. Sami na pewno wiecie, jak irytująca jest konieczność przewijania strony w pionie i poziomie, by odnaleźć potrzebną informację. Nie raz pewnie doświadczyliście też spotkania z witryną, która przedstawia jeden wielki chaos właśnie na skutek niedopasowania do wymiarów urządzenia, z którego korzystaliście. Jeszcze niedawno, chcąc umożliwić użytkownikom urządzeń mobilnych, informatycy pracowali w pocie czoła, by przygotowany projekt strony internetowej firmy dostępny był w kilku najpopularniejszych rozdzielczościach, dostosowanych do konkretnych wymiarów ekranu. Na szczęście, te czasy wkrótce odejdą w niepamięć. Nowa technologia Responsive Web Design umożliwia projektowanie stron www w taki sposób, by były one atrakcyjne wizualnie dla wszystkich użytkowników, bez względu na to, z jakiego aktualnie urządzenia łączą się z witryną. Elastyczność takiego projektu zapewniają odpowiednio skrojone, płynne obrazy, które automatycznie dostosowują się do rozdzielczości ekranu użytkownika, ułatwiając mu nawigację i optymalny układ treści.

Zobacz, jak działa Responsive

Responsive Web Design w praktyce

Design responsywny odpowiada na dwie dotychczasowe bolączki mobilnych wersji stron www: grafikę i obszerny content. W tradycyjnych projektach witryn grafika była albo ograniczona do minimum, albo w ogóle jej nie było – wszystko po to, by upłynnić nawigację i zminimalizować ryzyko zawieszenia strony. Podobne działania stosowano w przypadku zbyt dużej ilości treści – aby jak najbardziej zwiększyć szansę załadowania się całego contentu, próbowano go okroić i przedstawić użytkownikom mobilnym tylko najważniejszą wartość tekstową. W Responsive Web Design problem ten nie istnieje. Projekt od początku zakłada prezentację 100% grafiki i contentu, dzięki czemu odwiedzający stronę mają dostęp do tych samych funkcjonalności, co użytkownicy tradycyjnych urządzeń.

Strona zaprojektowana w technologii Responsive w trzech zrzutach:

Technologia Responsive na iPada

Ekran laptopa

 

Technologia Responsive na iPhone

Ekran iPhone’a

Technologia Responsive na iPada

Ekran iPada

Masz jakieś pytania? Chcesz dowiedzieć się więcej o RWD? Zostaw komentarz pod tekstem, postaram się rozwiać Twoje wątpliwości.

Komentarz

komentarz