Otrzymałem w komentarzu do wpisu: „Jak się uczyć? Tworzenie ston internetowych, od czego zacząć” zapytanie, jak stworzyć responsywną stronę www, oraz na jakiej zasadzie działają responsywne szablony, postanowiłem więc wyjaśnić zasadę ich działania. Z tego artykułu dowiesz się, co początkujący webdeveloper powinien wiedzieć, od czego zacząć naukę i skąd wziąć punkt zaczepienia – czyli jakie słowa wpisywać w wyszukiwarce google, żeby otrzymać w odpowiedzi satysfakcjonujące nas wyniki.

Szablony i witryny responsywne

mobilne strony internetowe

Dzisiaj każdy ma komórkę, a często nawet kilka. Tworzenie aplikacji dostosowanych pod ich ekrany to obecnie standard.

Słowo „responsywny”, choć brzmi obco, jest proste do wyjaśnienia. Oznacza witrynę lub aplikację dostosowującą się do wyświetlania na różnych urządzeniach – nie chodzi tu tylko o komórki, ale także laptopy i monitory o różnych rozdzielczościach, tablety, netbooki, smartfony oraz czytniki e-booków – czyli wszystko co mobilne.

Jeszcze kilka lat temu, przeglądanie witryn internetowych z urządzeń mobilnych było rarytasem porównywalnym do wody na pustyni. Tak samo rzadkie. Dlatego nie było wymagane od developerów tworzenie stron dostosowanych do wyświetlania na tabletach czy telefonach.

Ten trend się jednak zmienia na korzyść komórek.

Obecnie ponad połowa internautów korzysta z urządzeń mobilnych! Czyli więcej osób przegląda strony na komórkach niż komputerach.

Od 2016 roku więcej osób korzysta z urządzeń moblinych.

Ten fakt zaś wystarcza by uznać witryny responsywne za konieczność. Strona internetowa, która nie dostosowuje się do urządzeń mobilnych to obecnie rozwiązanie amatorskie i mocno przestarzałe, świadczące o braku profesjonalizmu zarówno firmy, do której witryna należy, jak i tej, która witrynę wykonywała.

Obecnie szablony responsywne to standard, dlatego warto wiedzieć, jak ten mechanizm działa i jak go zaimplementować na naszej witrynie, choćby w podstawowej wersji.

Jak działają szablony responsywne?

Przed wprowadzeniem CSS3, zanim responsywność stała się tak popularna, wiele firm tworzyło osobne wersje swoich stron na komórki w subdomench, na przykład z przedrostkiem „m.”. Następnie w nagłówkach strony przygotowany był prosty skrypt do wykrywania urządzenia, przy pomocy którego ładowano naszą witrynę „example.com” dla normalnych komputerów lub przekierowywano na subdomenę „m.example.com” jeśli wykryto ekran o odpowiednio małej rozdzielczości.

Takie rozwiązanie miało swoje zalety jak i wady.

Do zalet należała możliwość wprowadzenia nowej wersji witryny całkowicie równolegle do już istniejącej bez lęku o przerwy w działaniu witryny, czy problemy wynikłe z błędów w implementacji, przez co cały serwis mógłby wyświetlać się źle na wszystkich urządzeniach. Skoro zaś komórek było mniej w internecie, ewentualne błędy wyświetlane jedynie na małych ekranach były tymczasowo dopuszczalne.

Niemniej jednak rozwiązanie to wymagało tworzenia kopii całej witryny pod subdomeną, co niepotrzebnie przeciążało zasoby serwera, a ponadto nie było możliwości, by tworzyć osobne subdomeny dla urządzeń o szerokościach ekranów 480px, 640px, 960px, 1080px… nie były to szablony responsywne, czyli dostosowujące się do rozmiarów ekranów, tylko dwie różne wersje strony.

Dlatego w CSS3 wprowadzono lepsze rozwiązanie.

Dostosowanie witryny do komórek odbywa się obecnie poprzez sprecyzowanie, które mają się ładować dla jakich rozdzielczości ekranu. Można sprecyzować znacznie więcej warunków ładowania ich, jednak aby zrozumieć podstawy działania responsywnych witryn myślę że wystarczy to, co napisałem poniżej.

Atrybut @media  w pliku *.css zawierającym naszej witryny umożliwia na określenie, kiedy zawarte między klamrami będą ładowane. W przykładzie powyżej określiłem minimalną szerokość ekranu urządzenia na 800px, oraz jego maksymalną szerokość na 1280px.

Oznacza to, że wszystkie style zawarte między znacznikami { i } atrybutu @media wykonają się jedynie dla urządzeń o szerokości ekranu między 800px a 1280px. Dla wszystkich innych rozdzielczości będą pomijane. Jeśli więc masz prosty układ blokowy na stronie, zawierający elementy, które chciałbyś wyświetlić jedynie na dużych rozdzielczościach oraz takie, które powinny być widoczne wyłącznie na komórkach, wystylizuj swoją witrynę analogicznie do przykładu poniżej:

Powyżej zamieściłem najprostszy szkielet strony jaki tylko potrafiłem sobie wyobrazić – pominąłem tu tagi, dyrektywę !doctype, oraz całą sekcję <head> witryny. Wnoszę że jeśli myślisz o dostosowaniu witryny do komórek, takie podstawy masz już za sobą. Kolejnym krokiem, kiedy już szkielet witryny jest stworzony, pozostaje Ci tylko dodać odpowiednie style dla różnych klas bloków.

Powyższy kod sprawi, że blok określony klasą .text będzie widoczny cały czas, zaś zależnie od ekranu, na którym będzie wyświetlane okno przeglądarki zostanie załadowany kod opisujący wyświetlanie nagłówka klasy .mobile-text lub .non-mobile-text. W efekcie napisy będą się pojawiać lub znikać zależnie od urządzenia na którym wyświetlana będzie strona. Sprawdzić efekt swoich zmian w kodzie możesz, poprzez przełączenie okna swojej przeglądarki na komputerze z trybu pełnoekranowego i zmniejszenie jego szerokości. W ten sposób stworzyłeś najprostszą możliwą witrynę responsywną.

Zaawansowane szablony responsywne – przystanek bootstrap

Rozbudowane witryny www napisane w PHP, pythonie, javie czy RoR, zawierają setki, tysiące lub miliony linijek kodu. Ostylowanie tych witryn nie jest sprawą banalną, wymaga wielu godzin pracy i sporej dawki wiedzy i doświadczenia, by kod był przejrzysty, zgodny z konwencjami i łatwy w zarządzaniu.

bootstrap szablony responsywne

Strona główna bootstrapa z kompletną dokumentacją i źródłami do pobrania.

Tworząc szablony responsywne od zera osoby odpowiedzialne za FrontEnd często lwią część pracy musiałyby powtarzać przy każdym projekcie. Aby tego uniknąć, pojawił się pomysł na stworzenie frameworka do stylizowania aplikacji sieciowych – pakietu styli css, który jest w dużej mierze zdefiniowany i jedyne, co musi zrobić programista, to dołączyć go do swoich aplikacji oraz zmodernizować układy widoków w taki sposób, by aplikacja wykorzystywała klasy i identyfikatory opisane w plikach .css frameworka.

Przodującym na rynku rozwiązaniem tego typu jest właśnie bootstrap. Na oficjalnej stronie bootstrapa: http://getbootstrap.com możesz pobrać gotowe pliki .css i .js, które umożliwiają dołączenie ich do strony www w bardzo prosty sposób i – bazując na nich – utworzenie wysokiej klasy responsywnych szablonów w czasie wykładniczo krótszym niż gdybyś miał pisać wszystko od zera.

Bootstrap jest o tyle świetnym rozwiązaniem, że jego kod napisany jest przejrzyście przez bardzo doświadczonych programistów, przez co łatwo jest edytować jego źródła i wprowadzać zmiany, by nadać witrynie indywidualne cechy. Ponadto jest rozwiązaniem całkowicie darmowym, co także nie jest bez znaczenia. Na stronie bootstrapa istnieje ogromna ilość dokumentacji tego narzędzia, wraz z tutorialami, jak dodać odpowiednie elementy HTML do witryny, aby wyświetlały się korzystając ze zdefiniowanych stylów bootstrapa.

Podsumowanie

Tworzenie szablonów responsywnych jest, przy wykorzystaniu takich narzędzi jak bootstrap bardzo wygodne i nie wymaga dużego wysiłku ani nakładu czasu. Jeśli nie wiesz od czego zacząć tworzenie stron pod komórki i urządzenia mobilne, jak się zabrać za projektowanie responsywne, jak dostosować swoje strony pod komórki, zacznij od przykładu, który zamieściłem na początku tego artykułu, a następnie zaprzyjaźnij sie z bootstrapem.

Są to dwa kroki, które pozwolą Ci nie tylko zrozumieć działanie szablonów responsywnych, ale też zacząć ją wdrażać od razu na najwyższym poziomie.

Jeżeli zaś programujesz aplikacje internetowe w Ruby on Rails, polecam Ci przeczytać także artykuł, który wprowadza nieco bardziej w ten szczególny temat.

Mam nadzieję że ten artykuł Ci pomógł i teraz będziesz wiedzieć, skąd czerpać informacje, oraz jak budować szablony responsywne dla swoich aplikacji. Jeśli masz pomysły lub pytania na kolejne artykuły, natrafiasz na inne zagadnienia, które wydają Ci się trudne, zostaw wiadomość w komentarzu poniżej.

Sekrety Produktywności

Sekrety Produktywności

DARMOWE szkolenie mailingowe! 10 porad jak zwiększyć produktywność w programowaniu.

Dziękujemy za zapisanie się na kurs. Wkrótce otrzymasz wiadomość email z potwierdzeniem zapisu.

Polub nas na facebooku!

Jeśli podoba Ci się ten blog, polub nas na facebooku! Dzięki temu nie ominą Cię nowe treści!

You have Successfully Subscribed!