Artykuł sponsorowany

Z tego artykułu dowiesz się, co każdy początkujący webmaster powinien wiedzieć o responsywnych stronach.

Responsywne strony — to rozwiązania webowe, których układ dostosowuje się do wyświetlania na różnych urządzeniach — komórkach, laptopach lub monitorach o różnych rozdzielczościach, tabletach itd. Z tego artykułu dowiesz się, co każdy początkujący webmaster powinien wiedzieć o responsywnych stronach.

Dzisiaj prawie każdy ma telefon komórkowy, więc tworzenie aplikacji, które są dostosowane pod ich ekrany stało się standardem. Dzisiaj strona www, która nie dostosowuje się do ekranów urządzeń mobilnych świadczy o braku profesjonalizmu jej twórcy.

Jak działa responsive template?

Zanim responsywny układ stał się tak popularnym, wielu webmasterów tworzyło osobne wersje stron dla komórek w subdomench. To rozwiązanie miało zarówno zalety jak i wady. Jedną z głównych wad było tworzenie kopii całej strony pod subdomeną, co przeciążało zasoby serwera. W dodatku nie było możliwości, by utworzyć osobne subdomeny dla urządzeń o różnych szerokościach ekranów.

Dlatego w CSS3 pojawiło się lepsze rozwiązanie. Dostosowanie strony do rozmiarów ekranu odbywa się poprzez sprecyzowanie, które mają się ładować dla jakich rozdzielczości ekranu.

Atrybut @media w pliku *.css pozwala na określenie, kiedy zawarte między klamrami będą ładowane. To oznacza, że wszystkie style zawarte między znacznikami { i } atrybutu @media wykonają się jedynie dla urządzeń o ustalonej szerokości ekranu (w naszym przykładzie — 800px a 1280px). Dla wszystkich innych — będą pomijane.

Podany powyżej kod sprawi, że blok określony klasą .text będzie pozostawał widoczny przez cały czas, w ten czas gdy zależnie od ekranu urządzenia, 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.

Bootstrap

Podczas tworzenia szablonów z responsywny układem od podstaw, bez względu na to czy są to szablony Joomla lub szablony Magento, często korzysta się z frameworka do stylizowania aplikacji sieciowych, tzw. pakietu stylów css, który trzeba tylko dołączyć go do aplikacji oraz zmodernizować układy widoków by szablon wykorzystywał klasy i identyfikatory opisane w plikach .css frameworka.

Jednym z najbardziej popularnych dziś rozwiązań tego typu jest Bootstrap. Na oficjalnej stron tego frameworka można pobrać gotowe pliki .css i .js i dołączyć je do strony. Ponieważ kod tego frameworka jest napisany przejrzyście przez doświadczonych programistów, jest on łatwy w edycji i pozwala aby bezproblemowo nadać stronie indywidualne cechy. Ponadto jest to całkowicie darmowe rozwiązanie. W dodatku na stronie Bootstrap znajdziesz mnóstwo dokumentacji na temat tego narzędzia, różne tutoriali itd.