Twój e-mail
Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

strona responsywna

Jak zrobić stronę responsywną? Czy to trudne?

Takie pytanie przewija się w praktyce od kiedy tylko strony responsywne pojawiły się w internecie. Dostosowują się one do szerokości ekranu i wyglądają dobrze na każdym urządzeniu – od małego telefonu, poprzez tablet i komputer, aż do telewizora. Żadnego powiększania, rozciągania ani wlepiania nosa w ekran, bo literki są za małe.  Jednak pojawienie się stron responsywnych spowodowało też zmianę standardów w tworzeniu stron www.
Z tego artykułu dowiesz się o responsywności stron (część pierwsza) oraz będziesz potrafił samodzielnie stworzyć w pełni responsywną stronę korzystając z poradnika (część druga) oraz kreatora. 

Czyli dobre praktyki oraz poradnik w jednym. Zaczynamy?

Spis treści artykułu o responsywności stron:

  1. Dobre praktyki responsywności stron
  2. Jak zrobić responsywną stronę

 

1. Dobre praktyki responsywności stron

Responsywna strona www – czym jest i o co tyle hałasu?

Jeszcze kilka lat temu strona internetowa powinna tylko dobrze wyświetlać się na komputerach. Chociaż z internetu na urządzeniach mobilnych korzystamy od 20 lat, to strony na telefon zaczęły się pojawiać częściej dziesięć lat temu.
Dzisiaj, gdy ponad 60% ruchu w internecie pochodzi z urządzeń mobilnych – trzeba pójść krok dalej. Tym krokiem jest responsywna strona www. Wyświetli się dobrze na każdym urządzeniu – od małego wyświetlacza telefonu aż do wielkiego telewizora. Responsywna strona www pomaga docierać do nowych użytkowników. Zobacz jak dużo możesz zyskać dzięki stronie responsywnej.

Strona responsywna - co to jest?

Responsywna strona internetowa to wolne tłumaczenie Responsive Web Design (czyli RWD). To strona, która dostosowuje się do rozmiaru wyświetlacza (czyli odpowiada szybko na jego potrzeby) i dobrze prezentuje treść strony www.

responsywna strona www

Obsługa responsywności strony odbywa się przy użyciu media queries na stronie www. Rozpoznają rozdzielczość przeglądarki i pokazują w niej właściwy arkusz stylu. Dzięki temu strona responsywna wygląda dobrze na każdym ekranie.
Jeśli nie masz pewności, czy jakaś strona jest responsywna, wystarczy że wejdziesz na nią korzystając ze smartphone’a lub tabletu.
Musisz powiększać jej elementy – strona nie jest responsywna. Wszystko ładnie się skaluje – właściciel strony zrobił dobrą robotę.

Nowoczesna strona www – responsywna?

Pod koniec ubiegłego roku wymienialiśmy strony responsywne jako jeden z najgorętszych trendów w projektowaniu stron www. Po niedawnej „rewolucji mobilnej” Google’a ten trend staje się standardem tworzenia stron internetowych. Między innymi dlatego projektowanie stron internetowych się zmienia. Teraz zaczyna się często od stworzenia wersji mobilnej, a nie – jak do tej pory – wersji na komputery. Jeszcze trzy lata temu takie podejście uważało za fanaberię. Obecnie staje się ono standardem. Jednym z wyznaczników profesjonalnej strony internetowej jest jej responsywność.

RWD podwyższa dostępność strony www i ułatwia użytkownikom korzystanie z niej. Mnie osobiście bardzo to cieszy. Dzięki takiemu podejściu w projektowaniu stron internetowych mogę szybciej łatwiej znajduję informacje. Nie muszę włączać komputera. Wystarczy, że wyciągnę telefon i mam to, czego szukam – zaprezentowane na stronach, które dobrze wyświetlają się na smartphone’ie.
Jeszcze kilka lat temu musiałbym powiększać i mieć nadzieję, że przeglądarka dobrze ułoży tekst w kolumny. Dzisiaj – to już nie jest problem.

Dołącz do 140 tysięcy ludzi, którzy tworzą responsywne strony www za darmo i  bez kodowania

Kreator stron internetowych WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując darmowy szablon strony www.

STWÓRZ SWOJĄ STRONĘ  WWW ZA DARMO 

Co daje responsywna strona www?

Przede wszystkim – ułatwia życie użytkownikom. A przy okazji ułatwia projektowanie stron internetowych. Ale po kolei. Wyższa dostępność i łatwiejsze korzystanie ze stron na urządzeniach mobilnych bardzo się przydaje.
Zwłaszcza gdy prowadzisz lokalny biznes (Twoi klienci znajdą Cię w kilka chwil i wszędzie, gdzie mają internet), bloga lub jakiś nieduży serwis. Do tego projektowanie strony www, która jest responsywna, pomaga zmienić podejście do pracy. Gdy pomyślisz o tym, że na ekranie telefonu zmieści się mniej rzeczy, to wybierasz te najważniejsze. Dzięki temu użytkownicy szybciej znajdują informacje, które masz dla nich na swojej stronie. Responsywnej stronie. To może wydawać się wymuszaniem minimalizmu na stronach www, ale w rzeczywistości to bardzo pomaga użytkownikom.

Gdy wybierzesz najważniejsze rzeczy, które muszą znaleźć się na stronie w „najmniejszym” z widoków (na telefon), może się okazać, że dokładnie tego potrzebuje Twoja strona. Nic więcej. Użytkownicy dostają wtedy od razu to, czego potrzebują, nawet w wersji na komputer. A to przekłada się na niższy współczynnik odrzuceń i lepsze pozycjonowanie strony internetowej. Oraz – co najważniejsze dla Ciebie – na pozyskanie nowych klientów i czytelników.

responsywna strona internetowa

Czy strona responsywna pomaga w pozycjonowaniu?

Tak, strona responsywna pomaga w pozycjonowaniu. Potwierdza to Google, potwierdzają to też doświadczenia osób zajmujących się SEO. Jednak nie chodzi tylko o anonimowy (i czasem bezlitosny) algorytm. Responsywna strona www ma sporo zalet, które warto wymienić. Przede wszystkim – projektowanie strony internetowej, która ma być responsywna, wymaga wskazania priorytetów. Wspomniałem o tym w poprzednim akapicie. Dzięki temu strona ma niższy bounce rate (użytkownicy znajdują to, czego potrzebują) i lepiej konwertuje. A to jasna informacja dla BrainRank, że ta strona lepiej odpowiada potrzebom użytkowników. I podnosi jej pozycję w wynikach wyszukiwania Google.

Strona responsywna pomaga w pozycjonowaniu. Potwierdza to Google, potwierdzają to też doświadczenia osób zajmujących się SEO.

Tworzenie strony responsywnej wymaga też przyłożenia się do jej szybkości. Czyli kompresja grafik, pilnowanie ich rozmiarów i formatów. Google na początku roku zadeklarowało, że będzie wyświetlać wyżej w wynikach wyszukiwania strony responsywne, które szybciej ładują się na urządzeniach mobilnych. Czyli mniej czekania na to, aż załaduje się strona staje się bardzo ważne!

Do tego dochodzi dopracowanie interfejsu strony (dobre menu strony, dobre wykorzystanie stopki strony i całe tworzenie strony www), który poprawia user experience. A to znowu przekłada się na wyższy czas na stronie.
Dobry projekt strony internetowej zakłada użycie nagłówków i uporządkowanie treści. A od tego już tylko krok do wplecenia w całą stronę odpowiednich słów kluczowych. W końcu wszyscy wiemy, jak ważne są słowa kluczowe przy pozycjonowaniu stron internetowych.

Przykłady responsywnych stron internetowych

Nasza strona www jest oczywiście responsywna :). W każdym z widoków zobaczysz specjalnie dostosowany układ, dzięki któremu łatwiej znajdziesz interesujące Cię rzeczy na każdym urządzeniu.

responsywna strona internetowa - webwave - telefon i tablet

Podobnie jest ze stroną międzynarodowego wydania Guardiana. Każdy z widoków jest dostosowany do rozdzielczości typowych urządzeń, a elementy świetnie się skalują na stronie. Co ciekawe, grafiki w wersjach mobilnych sugerują klasyczny styl czytania tekstu – od lewej do prawej. To doskonały przykład dobrze przemyślanego serwisu pod kątem user experience.

responsywna strona internetowa - guardian - telefon i tablet

Podobnie jest z polską stroną Apple. Widać na niej wyraźnie powtarzalność treści, a zmiana prezentacji grafiki z telefonem jest wisienką na torcie :).

responsywna strona internetowa - apple - telefon i tablet

Co powinna mieć responsywna strona internetowa?

Pomyśl o stronie responsywnej jak o kilku wersjach tej samej strony. Powinny być spójne między sobą, zachować układ i prezentować te same treści.
Przede wszystkim – każdy z widoków powinien być dopracowany. Możesz zrezygnować z bardziej efektownych elementów w widokach mobilnych.
Tylko to też może pomóc Ci wybrać rzeczy, które są najważniejsze. Może ta animacja lub grafika na stronie są niepotrzebne?

Ważna jest spójność struktury linków. Czyli w każdym widoku hiperłącza powinny odsyłać do tych samych miejsc. To największa przewaga stron responsywnych nad mobilnymi. W przypadku tych drugich w adres strony często poprzedzała litera m. (na przykład: m.strona.pl). Dopóki struktura linków była spójna (strony mobilne odsyłają do mobilnych, a desktopowe do desktopowych) problem nie istnieje. Jednak przeoczenie kilku takich linków znacznie pogarszało user experience i może obniżyć pozycję w wynikach wyszukiwania.
 

Ważna jest spójność struktury linków na stronie.
W każdym widoku hiperłącza powinny odsyłać do tych samych miejsc. To największa przewaga stron responsywnych nad mobilnymi.

Ten problem nie występuje na stronach responsywnych – linki odsyłają do tych samych stron, a przeglądarka wyświetla po prostu wersję dostosowaną do konkretnego ekranu. Warto zainteresować się też procentowymi wielkościami obiektów na stronie, zwłaszcza grafik.

Dzięki temu każdy z nich lepiej wypełni konkretny ekran (na przykład baner na naszej stronie ma szerokość 100%, a grafiki w tym tekście – 98% pola tekstowego). Przy okazji grafik – strona responsywna, żeby ładować się szybciej, potrzebuje odchudzonych grafik i obiektów wektorowych.
Format SVG pomaga zmniejszyć rozmiar strony i przyśpieszyć wczytywanie. Do tego skaluje się bezstratnie! Oczywiście warto pamiętać o kompresji plików jpg.
 

Czy trudno zrobić responsywną stronę www?

Tak i nie. Jeśli pracujesz na responsywnym szablonie strony www, to temat jest dosyć prosty. Podmieniasz elementy i nie musisz nic robić ponadto.
Oczywiście poza utrzymaniem strony i sprawdzeniem, czy wszystko jest OK.
Jednak gdy chcesz zrobić stronę responsywną od zera, to możesz stanąć przed sporym wyzwaniem. Zwłaszcza gdy za punkt wyjścia weźmiesz jakiś szablon i musisz stworzyć responsywność dla całej strony, na której znajdą się nowe obiekty. Dodanie responsywności do już istniejącej strony www, zwłaszcza dużej, wymaga na tyle dużo pracy, że czasem lepiej zrobić ją od nowa.

Prostym sposobem na stworzenie responsywnej strony internetowej jest wybór WebWave

Prostym sposobem na stworzenie responsywnej strony internetowej jest wybór WebWave. W naszym kreatorze żaden ze wspomnianych problemów nie istnieje (poza przebudową serwisu zbudowanego w innym CMS-ie).

Możesz wybrać darmowy szablon strony www – jeden z kilkudziesięciu w pełni responsywnych – i na jego podstawie stworzyć własną, responsywną stronę www. Możesz też zacząć od pustego projektu i zbudować każdy z widoków RWD swojej strony samodzielnie.
Wystarczy, że przesuniesz elementy i ustawisz ich układ z dokładnością do jednego piksela. Potem publikujesz stronę i gotowe.

Po co nam responsywne strony internetowe?

Żeby dotrzeć do użytkowników i przekonać ich o profesjonalizmie strony :). Do tego responsywna strona internetowa lepiej się pozycjonuje. Dobrze wykonana szybciej działa i prezentuje użytkownikom dokładnie te informacje, których potrzebują. A to wszystko prowadzi do jeszcze większej konwersji, czyli przekucia użytkowników na klientów lub stałych czytelników.

Przecież o to chodzi nam wszystkim. Spróbujesz zrobić swoja responsywną stronę bez kodowania w WebWave? To nic nie kosztuje, a daje naprawdę sporo frajdy i możliwości!

 

Plusy i minusy mobile design

+ możliwość zaangażowania użytkowników większą liczbą wezwań do działania;

+ zwykle użytkownicy spędzają więcej czasu na stronie,

+ krótki czas ładowania,

+ zazwyczaj tańsza niż RWD,

 

- potrzeba aktualizowania treści na dwóch, zamiast na jednej stronie,

- może nie pasować do urządzeń mobilnych o większych rozmiarach ekranu,

- potrzeba innej domeny,

- konieczność przesuwania i powiększania ekranu, która utrudnia wykonywanie prostych zadań i wybierania opcji.

 

Plusy i minusy Responsive Web Design

+ bardziej przejrzysta i elegancka od mobile design,

+ jedna strona do zarządzania i brak problemów z przekierowaniami,

+ łatwość pozycjonowania - wszystkie strony znajdują się na jednej domenie (www),

+ Google zaleca korzystanie z RWD dla urządzeń mobilnych,

+ poprawnie prezentuje się na wszystkich urządzeniach, niezależnie od wielkości, co także pozytywnie wpływa na user experience,

- uznawana za droższą aniżeli mobile design,

- duże i ciężkie multimedia mogą spowalniać stronę dla użytkowników mobilowych,

- zwykle mniejsza liczba wezwań do działania w porównaniu z wersją desktopową.

 

2. Jak zrobić responsywną stronę
 

Zacznij od najmniejszego ekranu

To złota zasada tworzenia strony responsywnej. Niezależnie od tego, czy tworzysz portal czy prostą stronę firmy – warto zacząć ją budować od wersji na telefon. Tak, wiem, to stawia trochę rzeczy na głowie, ale już tłumaczę dlaczego.

Przede wszystkim – większość ruchu w internecie generują urządzenia mobilne (telefony i tablety). To ponad 52% ruchu i z tym trzeba się liczyć. Kiedyś dominowały w sieci komputery i robiono strony głównie na nie. Dzisiaj przeważają urządzenia mobilne, więc warto utrzymać analogiczne podejście.
Jeśli zaczniesz tworzenie strony od najmniejszego ekranu, to szybko się zorientujesz, że wersja na telefony nie ma ograniczeń. Nic nie musisz upychać, po prostu układasz elementy, a na pozostałych widokach – rozkładasz je nieco inaczej, powiększasz i w gruncie rzeczy masz więcej miejsca :).

Takie podejście pomaga docenić wartość treści na stronie i zmusza do dokładnego przemyślenia układu oraz szeroko pojętego user experience. Chociaż brzmi to wymagająco, to jednak takie nie jest. W dalszych punktach tłumaczę dlaczego.

strona responsywna - jak ją zrobić

Ustaw priorytety

Priorytety, to brzmi złowieszczo. Ale wcale nie musi. Gdy robisz stronę responsywną, to rzeczą, która załatwi ponad połowę roboty jest ustalenie priorytetów na stronie. Co jest najważniejsze. Co mniej. Co może wylecieć (?), a co lepiej żeby zostało. Mały ekran tego wymaga. Nie napchasz na nim tylu elementów, co na stronie desktopowej i… dobrze. Bo taka strona nie ma sensu.

Gdy zaczynasz od najmniejszego widoku strony i planujesz położenie elementów na niej, to od razu zauważysz, że kolejne elementy muszą układać się w jakąś sensowną całość. Jedno powinno wynikać z drugiego, każdy element powinien mieć swój cel lub pomagać realizować cel strony. Dodatkowo – najważniejsze elementy powinny znaleźć się na górze strony. To je użytkownik powinien widzieć w pierwszej kolejności.

Jeśli zastanowisz się nad tym nieco głębiej, to tak powinno wyglądać tworzenie stron internetowych. Zawsze, niezależnie od urządzenia. Po prostu wersje responsywne wymagają respektowania tych zasad. Dzięki temu wiele stron jest dzisiaj o niebo przejrzystszych niż jeszcze kilka lat temu.

 

Idź w minimalizm

Ustalając priorytety warto pamiętać o jednym: minimalizm na stronie internetowej nie jest wymysłem czy tylko trendem. Mniej elementów w najwęższym widoku strony oznacza jedno: zostają tylko te najważniejsze.
Następują po sobie, uzupełniają treść i serio – sprawdzają się.

Jednak niech Cię nie zmyli to, że na takiej stronie jest niewiele elementów – to wcale nie takie pójście na łatwiznę. Mniej w tej sytuacji oznacza więcej. I często wymaga więcej uwagi. Jednak to (naprawdę) popłaca. Bo gdy przechodzisz do rozkładania treści na pozostałych widokach responsywnych, to okazuje się, że wystarczy trochę rozszerzyć tu i tam, powiększyć font, nieznacznie zmienić układ i widok gotowy.
Jak wspomniałem – gdy zaczniesz projektowanie strony od najwęższego widoku mobilnego, każdy kolejny (szerszy) będzie sprawiał wrażenie przestronnego.

Dołącz do 140 tysięcy ludzi, którzy tworzą responsywne strony www za darmo i bez kodowania

Kreator stron internetowych WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony.

STWÓRZ SWOJĄ STRONĘ ZA DARMO 

Duże obiekty

Pewnie doskonale wiesz, że wyświetlacz smartphone’a ma ograniczoną powierzchnię i szerokość. Do tego trudno na nim trafić palcem precyzyjnie w jakiś obiekt. Dla komputerowego kursora to nie kłopot; gorzej z całkiem sporą powierzchnią kciuka.
Więc obiekty na stronie, które mają być klikane, powinny być wystarczająco duże, żeby użytkownik mógł łatwo w nie trafić i – tu Cię zaskoczę – kliknąć. Tak.
Jednak przyciski nie są jedynymi rzeczami, które powinny być wystarczająco duże na stronie.

 

Dobra typografia, czyli rozmiar fontu ma znaczenie

Dobrze dobrane fonty i zachowanie dobrej struktury nagłówków jest kluczowe dla łatwości czytania tekstu na stronie. Zwłaszcza responsywnej. Podstawą dobrej strony internetowej jest dobra treść, a za nią odpowiada najczęściej tekst. Więc warto dopracować jego wygląd, żeby użytkownicy mogli łatwo przeczytać to, co masz na stronie.
Dotyczy to niemal każdego elementu, który jest tekstem na stronie – od informacji w nagłówku, poprzez krótkie bullety, aż po teksty blogowe. Każdy powinien być łatwy w czytaniu.

Pomoże w tym na pewno dobra typografia, czyli dobrze dobrane fonty. W internecie najlepiej czyta się tekst „napisany” fontem bezszeryfowym, czyli bez „kreseczek”. Times New Roman jest szeryfowy, Lato które teraz czytasz – jest bezszeryfowe.
Dodatkowo ważny jest rozmiar tekstu. I pewnie dobrze się domyślasz – powinien być duży. 20 pikseli wysokości dla zwykłego tekstu to absolutne minimum. Taki tekst jest czytelny na urządzeniach mobilnych i naprawdę nie warto dawać mniejszego fontu.

Do tego dochodzą też nagłówki. Powinny być odpowiednio większe, żeby użytkownicy wiedzieli co jest, a co nie jest nagłówkiem (można powiedzieć, że idealną proporcją między wysokością nagłówków a tekstu jest 1,6).
Poza tym nagłówki są dobre dla użytkowników i pozycjonowania strony.

20 pikseli wysokości dla zwykłego tekstu to absolutne minimum. Taki tekst jest czytelny na urządzeniach mobilnych i naprawdę nie warto dawać mniejszego fontu.

Spójność między wersjami

Niedawno wielu właścicieli (w praktyce – niemal wszyscy) dostali miłego maila od Google Search Console, że wchodzi w życie Mobile First Indexing. Czyli że za podstawę indeksowania strony brana jest wersja dostosowana do urządzeń mobilnych. W mailu była też wzmianka o tym, że treści na różnych wersjach strony są spójne lub nie. I to jest właśnie bardzo ważna rzecz.
Jeszcze jakiś czas temu wiele stron miało wersję standardową (na komputer, ze standardowym adresem) i mobilną, z „m.” przed adresem. To były często dwie osobne strony, które czasem dawało się aktualizować jednocześnie, jednak nie zawsze. W przypadku stron responsywnych to nie jest kłopot.

Co nie zmienia faktu, że zachowanie spójności między wersjami strony responsywnej jest bardzo ważne. Nie na darmo pisałem o tym, że gdy zaczniesz robić stronę od widoku urządzeń mobilnych, to potem kolejne wersje będą łatwiejsze do opanowania.

Gdy wybierzesz kluczowe elementy i umieścisz je na najwęższej wersji strony, to potem lepiej jest dostosować ich wielkość, a nie dodawać coś nowego.
Oczywiście – między wersjami mogą być różnice (chociażby menu – mobilne lub „zwykłe”) czy pojawić się jakieś dodatkowe obiekty na stronie desktopowej (animacje, więcej obrazów w galerii czy coś), ale kluczowe rzeczy, takie jak treść, powinny być spójne.

Są też różne sposoby na „rozwijanie” treści strony, od telefonów do komputerów, jednak jest to osobny i dosyć obszerny temat, więc jeśli interesuje Cię ten temat, to Luke Wroblewski, Product Director w Google, bardzo fajnie tłumaczy ten temat na swoim blogu.

 

Responsywne grafiki na stronie i nie tylko

Czyli grafiki wektorowe. Format SVG coraz częściej pojawia się na stronach internetowych. Grafiki w tym formacie mają kilka wad (m.in. mogą być tylko grafikami, a nie zdjęciami), ale ich zalety zdecydowanie przeważają. Warto też wspomnieć, że nie wszystkie programy do tworzenia stron wspierają format SVG (WebWave go wspiera).

Przede wszystkim: szybko się ładują (co jest ważne na urządzeniach mobilnych) i doskonale się skalują (czyli niezależnie od tego, jak bardzo je powiększysz, nie zobaczysz „pikselozy”). Poza nimi dobrze umieszczać na stronach responsywnych grafiki o odpowiednich rozmiarach – najlepiej takie, które co najwyższa pokrywają maksymalną szerokość ekranu (dzisiaj mało który wyświetlacz przekracza szerokość 1920 pikseli), jednak pamiętaj, że na urządzeniach mobilnych ta realna szerokość rzadko przekracza 1000 pikseli.

Bo im większa rozdzielczość, tym większy rozmiar zdjęcia. Im większy rozmiar zdjęcia, tym dłużej trzeba czekać, aż się załaduje. Nawet na najszybszym łączu.
Warto też korzystać z formatów, które łatwo się kompresują (na przykład .jpg lub .png, gdy zależy Ci na tym, żeby grafika nie miała tła). Dzięki temu strona będzie ładowała się dużo szybciej. Serio.

Im większa rozdzielczość, tym większy rozmiar zdjęcia. Im większy rozmiar zdjęcia, tym dłużej trzeba czekać, aż się załaduje. Nawet na najszybszym łączu.

Stonowane tła

Skoro jestem przy grafikach, to warto wspomnieć o stonowanym tle strony; takim, które nie przeszkadza w czytaniu i odbiorze treści.
To trochę taka oczywistość, ale na urządzeniach mobilnych bardzo ważne jest to, żeby tło (strony, bloków tekstowych czy segmentów treści) pomagało w czytaniu. Czyli wysoki kontrast między treścią a kolorem pod spodem jest bardzo wskazany. Oczywiście – warto tu pójść w klasykę, czyli czarne litery i białe tło (jak tutaj), ale nie musisz się ograniczać. Jednak pamiętaj, że kolorowe tła lub ornamenty znacznie pogarszają komfort czytania.

 

Odpowiednia liczba widoków

Chociaż utarło się, że strony responsywne mają trzy widoki (telefon, tablet, komputer), to często problemem okazują się większe telefony, na których najmniejszy widok wygląda trochę nienaturalnie (jest po prostu rozciągnięty), a wyświetlacz nie jest jeszcze na tyle duży, żeby pokazała się wersja na tablet.

Bardzo dobrze ten problem pokazuje grafika z UXplanet.com:

Innymi słowy – czwarty widok, „pośredni” między telefonem a tabletem, może bardzo się przydać. I taki czwarty widok mamy też w WebWave. Nazywamy go „telefon poziomo”, jednak ta szerokość odpowiada też coraz większym wyświetlaczom dużych smartphone’ów i minitabletów.

 

Wykorzystaj możliwości urządzeń mobilnych (nawigacja, dzwonienie)

Czasem się o tym zapomina, ale kiedy chcesz zadzwonić na jakiś numer podany na stronie, to potrafi to zdenerwować. Trzeba go zaznaczyć, skopiować i potem wkleić w okno wybierania. Ale da się to zrobić o wiele fajniej.

Możesz dodać akcję po dotknięciu palcem numeru telefonu lub ikonę (callto), dzięki czemu ktoś, kto chce zadzwonić, zadzwoni szybciej. Podobnie jest z nawigacją – po kliknięciu w odpowiednim miejscu uruchomi się nawigacja, która pokieruje pod wskazany adres. A to tylko kilka luźnych pomysłów :).

 

To w końcu jak zrobić stronę responsywną?

Z głową, smakiem i pomysłem ;). Wymieniłem tylko kilka rzeczy, o których warto pamiętać, więc nie zdziwię się, jeśli znasz jeszcze jakieś tipy związane z dobrymi praktykami przy robieniu stron responsywnych :).

Oczywiście – warto pamiętać o pozostałych prawidłach związanych z projektowaniem stron www: określeniem celu strony, tworzeniem person, dobrym user experience oraz nawigacji.

Jedno jest pewne – stronę responsywną zrobisz bez kłopotu w WebWave. Przesuwasz elementy jak chcesz i gotowe :). Spróbujesz?

Koniecznie przeczytaj podobne artykuły:

 

Autor: Bartek Raducha. Prowadził i konsultował projekty stron internetowych w sektorze kultury. Pracując w agencji reklamowej prowadził i współprowadził projekty stron dla klientów (m.in. Beko, Bonduelle Food Service czy Froneri Polska). W WebWave – człowiek od marketingu i nie tylko.

12 lipca 2018

Blog

Darmowe szkolenie z tworzenia stron internetowych 

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Jak zrobić responsywna strone www? Kompletny poradnik dotyczący responsywności stron

 

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com
+48 731 395 898

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie