Jak zrobić stronę responsywną

Jak zrobić stronę responsywną

Posiadanie własnej strony internetowej nie jest w dzisiejszych czasach niczym dziwnym. Żyjemy bowiem w bardzo nowoczesnej epoce, w której można śmiało stwierdzić, że dana osoba lub firma nie istnieje jeśli nie posiada własnej witryny internetowej, za pośrednictwem której reklamuje swoje usługi, udziela ludziom informacji czy też po prostu stara się czymś zaciekawić osoby przeglądające zasoby Internetu.

Warto dodać, że aktualnie coraz większą grupę internautów stanowią osoby odwiedzające witryny przy pomocy urządzeń mobilnych, takich jak telefony komórkowe, smartfony czy też tablety wyposażone w systemy operacyjne, takie jak na przykład Android. Dla takich użytkowników tworzone są strony mobilne, a ostatnimi czasy coraz większą popularność zyskują witryny responsywne czyli dopasowujące się do wyświetlających je urządzeń.

Planowanie i tworzenie strony responsywnej

W zależności od tego czy dana osoba chce zrobić stronę rezponsywną od zera lub planuje przerobić istniejący szablon, powinna wiedzieć o kilku ważnych sprawach. Niezwykle istotne jest dodanie właściwych meta-tagów, które umożliwiają wyświetlanie strony w urządzeniach mobilnych oraz zapobiegają skalowaniu. Dzięki nim można przystosowywać menu oraz konfigurować różne szablony. To z kolei przekłada się na atrakcyjny wygląd danej strony internetowej niezależnie od rodzaju urządzenia, na którym jest wyświetlana.

Jeśli chodzi o budowę menu responsywnego to należy zwrócić uwagę na to, że jest ono poziome i otwiera się dopiero po kliknięciu danej pozycji w menu. Taki rodzaj menu jest wykonywany w CSS oraz JQuery np. przy pomocy wtyczki o nazwie SlickNav, która zmienia zwykłe menu poziome na responsywne. Wtyczka ta jest darmowa i może być używana również na stronach komercyjnych, które nie są oparte na WordPressie.

Obrazki i elementy graficzne

Jeśli chodzi o obrazki to w szablonie responsywnym muszą być one skalowane automatyczne razem z szerokością strony internetowej. W przypadku koncepcji typu flat-design obejmującej upraszczanie strony do minimum, elementy graficzne nie będą skomplikowane, a ich szerokość powinna być podawana w wartościach procentowych. Takie rozwiązania przydają się w mniej złożonych stronach. W przypadku witryn posiadających bardziej skomplikowaną grafikę konieczne będzie korzystanie z pomocy speca z dziedziny grafiki, który stworzył daną stronę. W przypadku czcionek również konieczne jest nadanie im procentowej szerokości, która będzie się zmieniać razem ze zmianą szerokości. Warto pamiętać o zasadzie mówiącej iż czcionki dla komputerów są zazwyczaj o 1-2px większe od czcionek przeznaczonych na urządzenia mobilne.

Po przygotowaniu strony warto ją przetestować. W przeglądarce Firefox dostępne są narzędzia dla twórców witryn, a wśród nich widok responsywny pozwalający na przeglądanie strony w różnych rozdzielczościach.Cały proces tworzenia strony responsywnej może się wydawać bardzo skomplikowany, jednak taki nie jest. Wystarczy odrobina chęci i znajomość kilku podstawowych zasad. Po kilku próbach oraz pewnych modyfikacjach, strona będzie z pewnością spełniać konkretne oczekiwania.

1 Star2 Stars3 Stars4 Stars5 Stars (Brak głosów)
Loading...

O Łukasz

Student informatyki na Politechnice Warszawskiej. Założył bloga o tematyce programowania, aby dzielić się posiadaną wiedzą.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *