P-Programowanie

Strona responsywna

14 sierpnia 2014, kategoria: Html & Css

Strony responsywne są nowością jeżeli chodzi o strony przeznaczone dla urządzeń mobilnych. Tworzenie stron określonych mianem responsywnych daje nam bardzo dużą elastyczność i wiele możliwości. Strony responsywne same dostosowują się do rozdzielczości urządzenia, na którym są przeglądane, niezależnie czy jest to PC, urządzenie mobilne czy telewizor.

Strony przystosowane do telefonów

Od czasu pojawienia się systemu Android oraz telefonów komórkowych, użytkownicy mobilni stanowią bardzo duży procent odwiedzających. Napisanie strony, która nie jest przystosowania do telefonów jest w dzisiejszych czasach nieodpowiedzialne. Ryzykując w ten sposób musimy liczyć się z faktem stracenia dużej liczby potencjalnych odbiorców i klientów. Nie będę się rozpisywał za wiele na temat stron mobilnych, ponieważ napisałem już o tym artykuł mobilna wersja strony na telefon.

W poprzednim artykule omawiam rozwiązanie, polegające na tworzeniu stron mobilnych w tradycyjny sposób. Zwykle polegało to na przygotowaniu drugiej wersji serwisu, i podmienianiu w zależności od wykrytego systemu. Czasem podmieniany był cały szablon a w innych wypadkach przekierowanie na inną domenę serwisu.

Czym jest strona responsywna?

Obecnie jedynym słusznym rozwiązaniem jest wdrożenie strony responsywnej. Strona responsywna to po prostu responsywny szablon.

Strona responsywna lub ang. responsible web design (RWD) – to strona, która dopasowuje swoją szerokość i układ elementów do rozdzielczości na jakiej jest wyświetlana. Bardzo dobrze współpracują z flat design aczkolwiek nie jest zasadą ich łączenie.

Strony responsywne „narodziły” się od wersji CSS3 (arkusza stylów w wersji 3) ponieważ mocno rozbudowano możliwości Media Queries. Został on wtedy poszerzone o nowe możliwości min-width oraz max-width, dzięki którym możliwe jest rozpoznawanie rozdzielczości okna użytkownika. W zależności od wykrytych rozdzielczości, wczytujemy różne arkusze stylów, które tę samą strukturę HTML wyświetlają w całkiem inny sposób. Niektóre elementy są przesuwane, niektóre (te mniej ważne) całkowicie znikają.

Jak wspomniałem, koncepcja stron responsywnych oraz flat design narodziły się prawie równocześnie i są często łączone.

Flat design – koncepcja projektowania szablonów stron, której głównym założeniem jest prostota. Elementy strony są kwadratowe lub prostokątne, nie występują Cienie ani dodatkowe ozdoby. Strona jest uproszczona do maksimum, co przekłada się na większą czytelność i przejrzystość szablonu.

Najważniejsze zalety stron responsywnych to:

  • brak konieczności aktualizacji treści w dwóch różnych miejscach (istnieje tylko jedna wersja serwisu)
  • brak zamieszania z przekierowaniem domen, przełączaniem szablonów oraz detekcją urządzeń
  • nie trzeba się martwić o duplicate-content
  • jest to sposób oficjalnie rekomendowany przez Google
  • dostosowuje się nie tylko do różnych urządzeń, ale także do różnych rozdzielczości ekranu (jest najbardziej elastycznym rozwiązaniem)

Jeżeli składasz zamówienie na stronę to strona responsywna będzie kosztować Cię więcej. Jeżeli wykonasz ją sam, wszystko będziesz miał za darmo. O stronach responsywnych można przeczytać wiele innych informacji – koniec lania wody.

Tworzenie strony responsywnej

Niezależnie czy chcesz zrobić stronę responsywną od początku, czy chcesz przerobić stary szablon na szablon responsywny, musisz wiedzieć o kilku najważniejszych rzeczach. Pierwszym krokiem zawsze jest dodanie odpowiednich meta-tagów. Zapewniają one poprawne wyświetlanie strony na urządzaniach mobilnych, m.in. zapobiegają skalowaniu.

Meta-tag viewport zapewnia poprawne dostosowanie szerokości oraz brak powiększenia. Jeżeli zapomnisz go umieścić, strona będzie prezentować się źle.

Kolejnym najważniejszym krokiem jest zaplanowanie kompozycji szablonu. Musisz zdecydować jakie elementy mają być wyświetlane na pełnej rozdzielczości, a jakie na telefonie. W standardowej konfiguracji, na pełnej rozdzielczości wyświetlana jest część główna strony oraz boczne menu, co daje razem dwie kolumny. Oczywiście niektóre strony mogą wcale nie mieć menu, lub mieć aż 2 boczne kolumny + środkowa będąca treścią strony.

Musisz mieć świadomość, że każda strona dopasowana do urządzań mobilnych musi być zbudowana na jednej kolumnie. Jedna kolumna jest jedynym rozwiązaniem, jakie zapewnia nam poprawne skalowanie. Kiedy szablon ma jedną kolumnę, ustawiamy jego szerokość na width:100%, dzięki temu szerokość kolumny dopasuje się do ekranu niezależnie od jego wielkości.

Takiej samej zasady trzymam się na tym blogu. Wdrożyłem proste rozwiązanie szablonu responsywnego. W pełnej okazałości strona posiada 2 kolumny, po zmianie wielkości okna cała prawa kolumna menu znika. Wiąże się to oczywiście z ukryciem niektórych informacji ale nie ma innego wyjścia. Musisz przemyśleć, jakie informacje zostaną ukryte dla użytkowników urządzeń mobilnych. Ja telefonom wyświetlam tylko logo + menu + treść strony. Znika ankieta, wtyczka facebooka, linki oraz informacje o autorze. Niestety na ekranie 320×480 nie zmieścimy tyle co na 1280×600. Gdybym się uparł, mógłbym zmieścić jeszcze jeden moduł w układzie jednej kolumny, nad menu lub pod menu, jednak nie są to informacje niezbędne więc nic nie stoi na przeszkodzie aby je ukryć.

Jeżeli zastanowisz się nad kompozycją, czas wziąć się za arkusz stylów.

Jak widzisz są tu tylko dwie reguły Media queries. To ile ich dodasz zależy od Twojego serwisu. Umieszczenie tego kodu w arkuszu stylów powoduje, że dla urządzeń z szerokością ekranu w granicach 1-680px prawe menu znika, natomiast dla urządzeń z rozdzielczością większą niż 680px menu się pojawia. Osobiście na blogu stosuję 3 takie reguły i więcej mi nie potrzeba, używam flat design więc blog posiada mało elementów. Rozbudowane serwisy posiadają po 5-7 reguł, które znacząco zmieniają wygląd strony nawet przy nieznacznych zmianach rozdzielczości.

Istnieje ważna zasada podczas planowania kompozycji. Możesz a nawet musisz ukrywać odpowiednie elementy na mniejszych rozdzielczościach używając display: none. Nie wolno natomiast utworzyć dwóch osobnych menu, jednego dla telefonów drugiego dla komputerów. Nie można pokazywać ich i ukrywać w zależności od wykrytej rozdzielczości. Jest to powielanie treści, przez co strona może być nieciekawa dla wyszukiwarki, a w ekstremalnym wypadku grozi banem duplicate-content.

Na stronie muszą znajdować się pojedyncze elementy, a ich położeniem sterujemy za pomocą arkusza stylów.

Responsywne menu

Budowa responsywnego menu nie należy do najłatwiejszych i wymaga dużo pracy. Menu responsywne charakteryzuje się tym, że zawsze jest poziome i rozwija się dopiero po kliknięciu. Należy wykonać je w CSS oraz JQuery. Ja skorzystałem z gotowej wtyczki o nazwie SlickNav, zamienia ona moje poziome menu na responsywne menu. Ja podaję tylko nazwę dla kontenera wyjściowego #menu2, do którego zostanie przekonwertowane menu główne. Efekt jest następujący:

responsywne menu

Nie musisz używać systemu WordPress aby użyć skryptu SlickNav. SlickNav jest profesjonalnym i dobrze wykonanym narzędziem. Korzystają z niego strony osób prywatnych jak i firm. Skrypt ten jest na tyle popularny, że bardzo często spotykamy go w płatnych szablonach.

Dodatkową zaletą jest to, że SlickNav jest całkowicie darmowy także na stronach komercyjnych. Przerobienie menu na menu responsywne to dwie linijki kodu.

Jedynym warunkiem do użycia tego skryptu jest posiadanie menu zbudowanego w hierarchii ul li.

Obrazki

Ważnym aspektem, na który należy zwrócić szczególną uwagę są obrazki. W szablonie responsywnym obrazki muszą się automatycznie skalować wraz z szerokością strony. Aby osiągnąć taki efekt, można dodać do arkusza stylów takie globalne ustawienie dla obrazków:

Oczywiście reguła sprawdzi się tylko dla obrazków będących statyczną częścią treści strony np. zdjęć w artykule strony.

Elementy graficzne szablonu

Jeżeli korzystasz z koncepcji flat-design a więc uproszczenia strony do minimum – budowa szablonu nie będzie skomplikowana. Tak jak w przypadku obrazków, szerokość elementów graficznych (np. logo lub tytuł menu) powinna być podana w wartościach procentowych.

Jeżeli nie jest możliwe ustalenie wartości procentowych, należy ustawić wartości procentowe dla pojemnika będącego rodzicem, a następnie podmieniać element graficzny (np. logo) na mniejsze gdy braknie na nie miejsca – w zależności od wykrytej rozdzielczości.

Tworząc szablon responsywny możemy ustalać wysokość elementów graficznych stosując bezwzględną jednostkę px. Wynika to z faktu, że strona zbudowana na jednej kolumnie, musi dostosować się do urządzenia poziomo, pionowo nigdy miejsca nam nie braknie.

Strony ze skomplikowaną szatą graficzną

Jeżeli jesteś właścicielem jakiejś firmy, ze skomplikowanym motywem graficznym (np. restauracje), niezbędna podczas przeróbki będzie pomoc grafika, który wykonywał szablon strony.

W takim wypadku przeważnie dla większości elementów graficznych nie można ustalić szerokości procentowej, ponieważ w przypadku zmiany rozmiaru okna grafika będzie niewyraźna (skalowanie).

Niestety, w takim konkretnym przypadku, wszystkie elementy graficzne trzeba ukrywać i zastąpywać mniejszymi odpowiednikami.

Rozmiary elementów i czcionek

W szablonie responsywnym powinniśmy używać jednostek procentowych. Priorytetem jest nadanie procentowej szerokości, aby mogła się zmieniać wraz ze zmianą rozdzielczości. Nie powinniśmy ustalać sztywnych rozmiarów wszelkich obrazków, one także powinny skalować się razem z szablonem.

Wartości stałe powinniśmy natomiast nadawać czcionkom, trudno przewidzieć jak będzie wyglądać czcionka, której rozmiar zależny jest od innych elementów. Ja na blogu stosuję rozmiar 15-16px i jest to jednostka stała.

Czcionki dla komputerów PC są średnio o 1-2px większe niż czcionki dla urządzeń mobilnych.

Testowanie strony responsywnej

Bardzo dobry dodatek do testowania naszego szablonu udostępnia najnowsza wersja przeglądarki Firefox. Pozwala ona z opcji włączyć Narzędzia dla twórców witryn > Widok responsywny. Dzięki temu możemy podglądać stronę w różnych zestawieniach rozdzielczości:

testowanie strony responsywnej

Prosty szablon responsywny

Nie przeczę, że zbudowanie zaawansowanej strony w sposób responsywny może być trudne i czasochłonne. Jednak prosty szablon na potrzeby bloga, każdy da radę zrobić samodzielnie. Przykładem jestem ja ponieważ dałem radę najpierw napisać dla siebie szablon w koncepcji flat design, a po kilku miesiącach przerobić go na szablon responsywny. Pokażę Ci jak łatwo stworzyć prosty responsywny szablon.

Na potrzeby artykułu stworzyłem mało skomplikowany szkielet szablonu. Jego kod HTML jest następujący:

Posiada też kod CSS:

Szablon na na wszystkich rozdzielczościach wygląda tak samo. Jedyną jego zaletą jest szerokość wyrażona w procentach, więc dostosowuje się do szerokości okna przeglądarki. Oto efekt:

szablon responsywny

Nie ma co analizować kodu ponieważ jest to podstawowy szkielet szablonu, najprostszy jaki mógł powstać. W kodzie HTML #content znajduje się wcześniej niż #menu. Z jednej strony jest to lepsze rozwiązanie ze względu na SEO, z drugiej gorsze jeżeli będziemy brać pod uwagę np. osoby niepełnosprawne.

Chceby aby szablon był responsywny i aby prawe menu przesuwało się na górę i zamieniało w menu poziome. W tym celu musimy dodać do arkusza stylów znacznik media queries zmieniający kod CSS poniżej określonej rozdzielczości. Ja użyję rozdzielczości progowej 900px.

Aby menu przeskoczyło na górę, trzeba nadać mu atrybut position: absolute. To przez to, że w kodzie HTML menu jest w kodzie jako drugie. Skoro będzie to menu poziome, należy ustawić jego szerokość na width: 100%. Należy także zwiększyć szerokość treści strony, ponieważ obecnie zajmuje ona tylko 75%. Po przeskoczeniu menu powinna zajmować width: 98%.

Aby linki w menu układały się poziomo wystarczy zmienić im atrybut display i ustawić go na inline. To już wszystko. Ostatnim zabiegiem kosmetycznym jest ukrycie napisu Menu główne oraz dodanie poziomych kresek po każdym elemencie menu. Cały opisany kod wygląda następująco:

Dodaję go na końcu arkusza stylów, szablonu zaprezentowanego wyżej. Oto efekt podczas zmiany wielkości okna:

szablon1

szablon2

szablon3

Mimo, że dodałem tylko jeden element media queries zmieniający orientację menu, szablon będzie poprawnie wyświetlany na wszystkich urządzeniach mobilnych oraz na wszystkich rozdzielczościach. W kodzie CSS brakuje skalowania obrazków, jednak te nie zostały użyte w przykładzie.

Myślę, że tworzenie stron w sposób responsywny to nie dodatkowa umiejętność i nowa technologia dla bogatych, tylko standard, którego trzeba się trzymać podczas projektowania strony lub bloga. Jak widzisz, prosty zabieg dopasowania strony do rozdzielczości, wymaga tylko kilku dodatkowych linijek.

Przykład szablonu zaprezentowanego w artykule możesz zobaczyć klikając w link www.p-programowanie.pl/pliki/responsywny

Komentarze:

Użytkownik absolwent napisał/a:

19 sierpnia 2014


Piszesz że „Na potrzeby artykułu stworzyłem mało skomplikowany szkielet szablonu. Jego kod HTML jest następujący:”

a w deklaracji doctype masz XHTML „”

radzę rzadziej używać ctrl+c i ctrl+v

Poza tym nie poruszyłeś wszystkich wątków responsywności m. in. bootstrap.

Pozdrawiam,

absolwent prywatnej uczelni.

Użytkownik Karol napisał/a:

19 sierpnia 2014


Dobrze odróżniam X/HTML, choć nie różnią się byt wiele. Nigdy nie używam CTRL+C pisząc jakikolwiek artykuł, w każdym zdarzają się jakieś drobne błędy. Bootstrap nijak ma się do RWD, choć można w nim takie strony tworzyć. Artykuł miał mówić o podstawach RWD i tak też jest. Oprócz bootstrap’a istnieje kilka innych dużych frameworków dla fron-end’owców. Opisując bootstrapa należało by to na pewno rozbić na osobny artykuł, a na dodatek musiało by ich powstać wiele, ponieważ nie sposób opisać jakikolwiek framework w jednym artykule. Pozdrawiam również!

Użytkownik absolwent napisał/a:

20 sierpnia 2014


Powyższy przykład layoutu jest skopiowany bo już go kiedyś widziałem, jak szukałem tutoriala jak zrobić responsive website.

Ale zapomniałeś choćby o responsywności dla ramek z youtube (a to ważne bo nie tylko zdjęcia się wrzuca na stronkę).

style css
np.

#kontener embed,
#kontener object,
#kontener iframe {
max-width: 100%;
max-height: 100%;
}

Poza tym przydałby się link np z http://quirktools.com/screenfly/

Użytkownik Jarek K napisał/a:

12 września 2014


Witam, wtrącę się do dyskusji. Przede wszystkim na początek gratulację dla Karola za same chęci tworzenia bloga i mam nadzieję, że starasz się żeby był jak najlepszy ale wiemy wszyscy (zainteresowani), że to jest niezwykle obszerny temat więc warto rozwinąć niektóre tematy na przykład w tej konstruktywnej krytyce użytkownika absolwent. Napisać kolejny post o responsywności ramek z youtube moim zdaniem ciekawy temat i wilk syty i owca cała:)

Użytkownik Grzegorz napisał/a:

30 listopada 2014


Bardzo dużo informacji w pigułce. Dobra robota. Warto zwrócić uwagę, że to coraz częściej używana metoda pomimo kosztów pracy.

Użytkownik Piszczuś napisał/a:

15 grudnia 2014


Witam, bardzo fajnie wszystko opisane :) Pokazane przykłady, co jest ważne by zobaczyć również efekt skompilowanego kodu.

Czytałem wiele stron i rzadko się zdarzało, a nawet prawie w ogóle, że autor nie zamieścił w treści kodu , a to akurat mi pomogło, ponieważ strona wyświetlała się na komórce jako skalowana, a po dodaniu tagu wszystko działa, jak należy :)

Pozdrawiam i życzę wielu sukcesów i równie dobrych artykułów!

Użytkownik Dawid napisał/a:

11 lutego 2015


Witam, zagadnienie bardzo zrozumiale opisane i co najważniejsze z konkretnymi przykładami. Przydatny artykuł, na pewno jeszcze nie raz tu zajrzę ;) Pozdrawiam.

Użytkownik Eleven Byte napisał/a:

20 lutego 2015


Moim zdaniem aktualnie responsive design to już nie jest jakiś wymysł, czy nowość, a standard. To, że wciąż spotykamy strony, które za dobrze nie działają na telefonach, to jeszcze nic nie znaczy i aktualnie każdy, kto na poważnie prowadzi swoją stronę powinien zaprojektować wersję mobilną. Szczególnie jeśli wysyłamy newsletter. W 2014 roku 50% wiadomości została przeczytana na komórkach. Teraz jeśli mamy przekierowanie na naszą stronę, która nie ma wersji mobilnej to zaliczamy małego faila. Swoją drogą właśnie nawet maile aktualnie się dostosowuje pod komórki.

Użytkownik Polso napisał/a:

11 marca 2015


Czy strony w IFRAME też mogą być w responsywnym layoucie, czy trzeba całkowicie pozbyć się ramek na stronie?

Użytkownik Karol napisał/a:

11 marca 2015


Ramki IFRAME nie powinny być stosowane w szablonie responsywnym, a tak w ogóle to nie powinny być już używane wcale. Jeżeli ma Pan absolutną potrzebę użycia takiej ramki z jakiś tajemniczych względów (np. jakiś komponent jest w niej osadzony), musi Pan obudować ramkę DIVem.

Poprzez CSS ustawiamy szerokość diva na 100% oraz dajemy mu atrybut „overflow:hidden”. Ramce IFRAME także ustawiamy szerokość na 100%. Wtedy będzie się odpowiednio skalować.

Użytkownik RP napisał/a:

28 marca 2015


„Ramki IFRAME nie powinny być stosowane w szablonie responsywnym, a tak w ogóle to nie powinny być już używane wcale.”
Jak można powinno się unikać iframe ze względów na SEO. Roboty mają utrudniony dostęp do treści zawartej w iframkach.
Samo stosowanie nie jest naganne. Obecnie dzięki HTML5 znacznik jakby wraca do łask :) Stwierdzenie że nie powinien być używany wcale i w ogóle – stosowałbym raczej ostrożniej…

Użytkownik Greggu napisał/a:

28 czerwca 2015


Bardzo interesujący i przydatny artykuł. Jasno zwięźle podane informacje poparte przykładami oraz kodem.

Proszę tego nie odbierać jako jakąś złośliwość, ale zwracam uwagę na błąd: „trzeba ukrywać i zastąpywać… „. Poprawiłbym na „zastępować”:)
Pozdrawiam

Użytkownik Paulina napisał/a:

26 sierpnia 2015


Dzięki za świetny kurs!

Użytkownik Wiktor napisał/a:

03 stycznia 2016


Bardzo przydatny artykuł, aczkolwiek skoro korzystamy z CSS3 i chcemy być przyjaźni dla Google, to powinniśmy stosować również HTML5.

Początkowo nie byłem przekonany do HTML5 i CSS3, bo myślałem, że jeszcze bardziej skomplikują, ale ostatnio wziąłem się za nadrabianie zaległości i muszę stwierdzić, że zmiany są na plus. Kod jest teraz krótszy i bardziej czytelny, a co za tym idzie można pisać z głowy. Ja nigdy nie pamiętałem jak zacząć stronę, samo zadeklarowanie typu dokumentu i kodowania wymagało kopiowania, a teraz bez problemu lecę z głowy.

Użytkownik Adam napisał/a:

14 stycznia 2016


Czytając wiele opracowań nie mogłem zrozumieć tematu responsywności. Dzięki za informacje.Nauczyłem się dużo.Teraz postaram się to wdrożyć na bardziej skomplikowane szablony.Może mi się uda.

Użytkownik Paweł M napisał/a:

09 sierpnia 2016


Dzięki za przystępne przedstawienie informacji o tworzeniu stron responsywnych.

Użytkownik netteria.net napisał/a:

28 kwietnia 2017


Fajny i obszernie omawiający zagadnienie artykuł. Od siebie dodam, że obrazki w css warto zdefiniować width:auto9; będą ładnie się skalowały na stronie. Warto użyć bootsrapa, który jest świetny do budowy responsywnych stron internetowych.

Zachęcam Cię do zostawienia komentarza!

Ilość znaków: 0

Zachęcam Cię do polubienia bloga na facebooku! Dając lajka wspierasz moją pracę - wszystkie artykuły na blogu są za darmo!