Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

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

Chcesz być na bieżąco?

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 52% 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 telefony 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 100 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 - desktop

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 - desktop

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 - desktop

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!

Interesujesz się tworzeniem nowoczesnych stron www? 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.

strona responsywna
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ą!

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

 

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 internetowa za darmo? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com
tel. +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

Porozmawiaj z nami na czacie.

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie