Tworzenie responsywnych stron internetowych

Na przestrzeni ostatnich lat znacznie zwiększyła się liczba ludzi korzystających z internetu za pomocą telefonów komórkowych. W latach 90. gdy dostęp do internetu w Polsce był dość ograniczony mało kto mógł sobie dodatkowo pozwolić na posiadanie komórki. Koszty transferu danych były bardzo duże jak i ceny komórek były podprogowe.

Dzisiaj w Zielonej Górze, przechadzając się po deptaku możemy zaobserwować, że większość ludzi dorosłych i młodzieży posiada telefony komórkowe z których korzysta przeciętnie 2,5 godziny dziennie. Zielona Góra posiada również przepiękne parki. Jednym z nich jest park Piastowski, ale to co przykuwa uwagę jest duża liczba osób, które zamiast podziwiać naturę, wolą ten czas spędzić online lub czytając książki na swoich telefonach komórkowych.

responsywne strony internetowe

Powyższa sytuacja i większy dostęp do technologii spowodował, że zwiększyło się zapotrzebowanie na tworzenie responsywnych stron internetowych, które możemy wygodnie przeglądać na swoich urządzeniach.

Wraz z rozwojem technologii pojawiły się również różne rozwiązania aby proces projektowania responsywnych stron www przebiagał szybciej i wygodniej. Jednym z nich jest Bootstrap – często używany i znany framework lub struktura CSS oparta na kolumnach, która pozwala nam na ułożenie strony www w dowolny dla nas sposób. Framework ten początkowo został stworzony dla znanej nam wszystkim platformie społecznościowej Twitter.

Na czym polega tworzenie responsywnych stron internetowych?

Bootstrap jest oparty na kolumnach, które dzięki odpowiednim klasom CSS możemy skrócić lub wydłużyć zależnie od view portu lub urządzenia z którego oglądana jest strona internetowa. Standardowa liczba tych kolumn to 12, co pozwala na wiele ciekawych rozwiązań.

Możemy na przykład użyć do ważnej dla nas sekcji naszego projektu klasy col-md-8 co spowoduje, że ta sekcja będzie zajmować 2/3 rozdzielczości na naszej stronie internetowej. Obok niej możemy użyć klasy col-md-4, która będzie zajmować resztę view portu czyli 1/3. W ten sposób zostanie zagospodarowanych 12 kolumn, które będą wyświetlone na desktopie w następujący sposób:

Struktura CSS Bootstrap przykład desktop
Struktura CSS Bootstrap przykład – desktop

Jak ta strona będzie wyglądać na telefonie komórkowym?

Te same klasy, które zostały wyżej użyte do naszego przykładowego projektu na urządzeniu mobilnym będą wyglądać inaczej aby user experience był lepszy. Sekcje te nałożą się na siebie i na komórkach zajmować będą teraz całą szerokość urządzenia.

Struktura CSS Bootstrap przykład - komórka
Struktura CSS Bootstrap przykład – komórka

Jest to bardzo wygodne ponieważ Bootstrap z góry zakłada, że strona powinna dobrze wyglądać na telefonach komórkowych więc w powyższym ułożeniu strona będzie:

  • bardziej czytelna dla użytkownika
  • obrazki będą zajmowały mniej miejsca, co za tym idzie
  • mniej transferu potrzeba będzie aby je pobrać i krócej to pobieranie potrwa
  • obniża to koszty użytkownika w przeglądaniu stron internetowych na swojej komórce
  • użytkownik będzie mógł szybciej znaleźć informacje, których szuka, np. siedząc w parku Piastowskim w Zielonej Górze i szukając firm, które projektują strony internetowe w tym mieście