Prosty przewodnik po tworzeniu responsywnej strony internetowej

Czy zawsze zastanawiałeś się, ile nowoczesnych stron internetowych wydaje się „pasować” tak idealnie, niezależnie od urządzenia, na którym je przeglądasz? Kodowanie responsywnej strony internetowej jest powszechną praktyką, która jest obecnie szeroko rozpowszechniona w wielu nowych witrynach internetowych. Responsywne strony internetowe wykonują sprytną sztuczkę, zmieniając swój rozmiar, aby dopasować się do ekranu urządzenia używanego do przeglądania witryny. Oznacza to, że świetnie wyglądają na iPhonie lub komputerze stacjonarnym i wszystkim pomiędzy.

Ta „reakcja” dzieje się tak płynnie, że być może nawet tego nie zauważyłeś. Świetnie responsywny projekt strony internetowej powinien płynnie przepływać z urządzenia na urządzenie, zapewniając jednocześnie optymalne wrażenia z przeglądania. Responsywne strony internetowe zmieniły się z funkcji „miło mieć” w coś, co jest teraz prawie obowiązkowe dla każdej witryny. Czemu? Po prostu dlatego, że liczba osób, które obecnie korzystają z urządzeń mobilnych do przeglądania Internetu, wzrosła w ostatnich latach, a ten trend w kierunku urządzeń mobilnych (a tym samym mniejszych ekranów) nie wykazuje oznak spowolnienia.

Spójrz na poniższe dane (dzięki uprzejmości statcounter.com). Zobaczysz, że zdecydowanie najbardziej rozpowszechnione rozmiary ekranów są małe (tj. ekrany mobilne).

Wyobraź sobie, że wszystkie te miliony użytkowników musiałyby patrzeć na niereagujące strony internetowe na tych urządzeniach. Byliby bardzo sfrustrowani, ponieważ wymagałoby to wielu działań typu „uszczypnij i powiększ”, aby móc odpowiednio zobaczyć zawartość tych witryn. Szanse są wysokie, że ci użytkownicy porzucą te witryny na rzecz responsywnego odpowiednika.

Jeśli utrata potencjalnych klientów nie wystarczy, aby przekonać Cię o wartości posiadania responsywnej strony internetowej, być może myśl o utracie rankingów wyszukiwania może być. Google od jakiegoś czasu karze strony internetowe, które nie oferują jakiejś formy responsywnego lub adaptacyjnego projektowania dla użytkowników mobilnych. Oznacza to, że jeśli Twoja witryna nie działa dobrze na telefonie komórkowym, spodziewaj się kary w rankingu. Co oznacza „ładnie działa” na telefonie komórkowym? Cóż, treści muszą być wyświetlane w sposób przyjazny dla użytkownika. Oznacza to, że musi być czytelny bez szczypania i powiększania. Musi się również szybko ładować (interesuje Cię, w jaki sposób buforowanie WordPress może pomóc w osiągnięciu celów dotyczących szybkości, a następnie zapoznaj się z tym artykułem „Buforowanie WordPress – jak to działa i dlaczego warto go używać !')

Responsywne strony internetowe a adaptacyjne strony internetowe

Jeśli cofniemy się o dekadę lub dwie, telefony komórkowe nie były tak powszechne, jak obecnie. Z pewnością te, które wykonały dobrą robotę, umożliwiając przeglądanie sieci, tak naprawdę zaczęły pojawiać się dopiero w 2005 r. (o ile wydaje się to niewiarygodne, iPhone nie pojawił się na scenie aż do 2007 r.). Sieci komórkowe również nie były w stanie przenosić dużej ilości danych, co oznaczało ograniczone możliwości przeglądania stron internetowych przez telefon komórkowy. Wszystko to szybko się zmieniło w ciągu ostatniej dekady, a strony internetowe musiały nadrobić zaległości, aby nadrobić zaległości, aby lepiej służyć swoim klientom w nowym świecie opartym na urządzeniach mobilnych, w którym teraz się znajdujemy.

Projektanci stron internetowych pracowali na kilka sposobów, aby rozwiązać problem konieczności dopasowania witryny „komputerowej” do ekranu urządzenia mobilnego. Na samym początku powstały samodzielne strony internetowe „tylko na urządzenia mobilne”, które działały wraz z główną „komputerową” wersją strony internetowej. Były one zwykle dość prymitywne w projektowaniu i często oferowały pozbawione funkcjonalności przeglądanie, które pomijało wiele funkcji ich większego, stacjonarnego rodzeństwa.

Po tym na scenie pojawił się Adaptive Design. Dzięki temu wersja mobilna polegająca na udostępnianiu specjalnie zaprojektowanej witryny mobilnej była o krok dalej. Tworzy się wiele układów statycznych, które zapewniają użytkownikowi bardziej atrakcyjne wrażenia z przeglądania mobilnego. Wczytywany jest rozmiar ekranu urządzenia korzystającego ze strony i podawany jest najbardziej odpowiedni rozmiar. Zazwyczaj konstruuje się sześć rozmiarów, aby obsłużyć ekrany od dużego komputera stacjonarnego po telefon komórkowy. Adaptacyjny projekt jest jednak nieco ograniczający i zdecydowanie nie jest odporny na przyszłość, ponieważ nie jest w stanie zaspokoić rozmiarów ekranu, które nie mieszczą się dokładnie w zestaw 6 kategorii, które zostały zbudowane. Jest to również zasobożerne z punktu widzenia projektowania, ponieważ trzeba zbudować 6 wersji witryny.

Podstawowe wady projektów adaptacyjnych zostały rozwiązane dzięki Responsive Design. Zamiast udostępniać gotowy układ na podstawie rozmiaru ekranu, responsywne projekty dostosowują sposób renderowania w zależności od urządzenia. Oznacza to, że powinieneś otrzymać dobrze wyglądającą i przyjazną dla użytkownika stronę internetową bez względu na urządzenie (i odpowiadający rozmiar ekranu) używanego do przeglądania strony.

Projektowanie responsywne jest obecnie uważane za standard branżowy dla witryn mobilnych. Właściwie to sami Google polecają Responsive Web Design. W tym samouczku przyjrzymy się początkującemu projektowi responsywnemu i temu, jak można to zastosować do układu witryny.

Jak działają responsywne strony internetowe?

Responsywne witryny internetowe używają tak zwanych CSS Media Queries, aby modyfikować układ witryny w oparciu o szerokość ekranu. Zapytania o media CSS to potężne narzędzie, które w rzeczywistości jest dość proste do wdrożenia, jeśli masz podstawową wiedzę na temat CSS. Zanim zagłębisz się w proces tworzenia responsywnej strony internetowej, warto przyjrzeć się kilku przykładom na żywo. Najlepiej zrobić to na ekranie komputera stacjonarnego lub laptopa. Otwórz przeglądarkę, taką jak Chrome, i przejdź do popularnej witryny. Możesz spróbować naszych własnych na pressidium.com.

Zmniejsz rozmiar okna przeglądarki, a następnie, najeżdżając na prawą krawędź okna przeglądarki, zacznij przesuwać okno, aby stało się węższe. Zobaczysz, że w miarę zmniejszania się zmienia się układ witryny. To, co się dzieje, polega na tym, że gdy witryna osiąga wstępnie zdefiniowany rozmiar (na przykład szerokość 1000 pikseli), uruchamiane jest zapytanie o media CSS, które nakazuje przeglądarce użycie stylów CSS, które odnoszą się do tej szerokości ekranu. Strona internetowa płynnie przepływa lub reaguje na ten nowy rozmiar ekranu i odpowiednio się wyświetla. Całkiem sprytnie!

Więc teraz mamy podstawową wiedzę na temat tego, co się dzieje, zanurzmy się w sedno sprawy i zobaczmy, jak sami moglibyśmy zbudować responsywną stronę internetową.

Tworzenie responsywnej strony internetowej

W tym samouczku nie będziemy używać żadnego kodu zaplecza, więc nie ma potrzeby uzyskiwania dostępu do serwera, aby to zrobić. Po prostu utwórz folder na pulpicie i dodaj do niego pliki robocze.

Krok 1: HTML

Utwórz plik index.html w swoim nowym folderze. Otwórz ten plik w swoim ulubionym edytorze tekstu/kodu, a następnie wstaw następujący kod:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

Krok 2: Zewnętrzny CSS

Będziesz musiał dodać zewnętrzny plik style.css. Aby to zrobić, utwórz plik o nazwie style.css i umieść go w tym samym folderze, co plik index.html. Następnie dodaj następujący kod:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

W tym momencie, jeśli otworzysz plik index.html w przeglądarce internetowej (w tym przykładzie użyliśmy Chrome), to, co powinieneś zobaczyć na swojej stronie, wygląda mniej więcej tak:

Przyjrzyjmy się teraz narzędziom programistycznym naszej przeglądarki (w tym przykładzie ponownie używamy Chrome). Otwórz Chrome i naciśnij F12 i ustaw go na widok po prawej stronie.

Zmień rozmiar okna, przesuwając kursor separatora i obserwuj zmianę rozdzielczości ekranu w czasie rzeczywistym.

Krok 3: Jednostki względne CSS

W naszym przykładzie zobaczysz, że jeśli przeciągniesz go do szerokości 1396 pikseli, zauważysz, że prawy pasek boczny z menu przesunie się poniżej głównej zawartości, ponieważ nie będzie już pasować.

Stało się tak, ponieważ ustawiliśmy stałą szerokość 900px na div#main i 300px na div#sidebar . Zmieńmy format tych wartości i zamiast tego użyjmy wartości procentowych. (Pamiętaj, że dopełnienia i marginesy są również liczone według szerokości, więc te wartości również muszą zostać przeliczone na wartości procentowe.)

Po dokonaniu tych zmian plik style.css powinien wyglądać tak:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

To jest teraz ekscytujące, ponieważ mamy stronę, która staje się bardziej responsywna!

Chociaż sytuacja się układa, obszar postów wymaga dalszej edycji CSS. Im mniejsza szerokość, tym „brzydsze” stają się skrzynki pocztowe. Aby obejść ten problem, musimy edytować post CSS, aby uzyskać ładniejszy i bardziej responsywny układ.

Zauważysz, że problemy wizualne pojawiają się tylko wtedy, gdy ekran się zwęża. Aby rozwiązać ten problem, będziemy musieli użyć kilku zapytań o media CSS, aby poza pewnym punktem pojawił się alternatywny CSS, który tworzy lepiej wyglądający układ.

To, co zamierzamy zrobić, to przekonwertować nasz „szeroki ekran” obszar postów z 3 kolumnami na obszar z 2 kolumnami, który będzie lepiej pasował do węższego ekranu. W tym celu korzystamy z zapytań o media CSS.

Krok 4: Zapytania o media CSS

W naszym trybie „szerokiego ekranu” wprowadzimy zapytanie o media CSS, takie jak to: @media screen and (min-width: 1396px) . To zapytanie znajduje się na górze naszego arkusza stylów CSS i obejmuje cały zestaw CSS, który chcemy uruchomić, gdy nasz ekran ma co najmniej 1396 pikseli szerokości.

Możemy teraz skopiować cały ten kod i powielić go w naszym arkuszu stylów CSS (skopiuj i wklej poniżej bieżącego CSS, aby mieć dwie identyczne wersje w jednym pliku). Teraz edytuj zapytanie o media CSS u góry drugiej partii CSS, aby odczytać @media screen and (max-width: 1395px) . To teraz mówi naszej przeglądarce, że jeśli jest mniejsze niż 1395 pikseli, powinna uruchomić ten CSS. Teraz to już zrobione, możemy dostosować CSS w tej „mniejszej” sekcji, aby zmienił układ naszej strony internetowej, aby lepiej pasował do mniejszego ekranu. W tym przykładzie zamierzamy poprawić i tam powinniśmy poprawić procent div.post z 31,1% do 45%.

Powinieneś mieć teraz plik CSS, który wygląda tak:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Teraz, gdy pola postów mają inny styl dla ekranów o szerokości mniejszej niż 1395px, zobaczmy, jak to się przekłada w akcji:

Miły!

Zauważysz, że podczas zmniejszania i przekraczania szerokości 760 pikseli rzeczy nadal robią się dziwne.

Aby to posortować, możemy użyć tej samej sztuczki, której używaliśmy, aby przejść z 3 kolumn do 2. Tym razem użyjemy „punktu przerwania” 760 pikseli i zmienimy nasz div.post w CSS na 94%. Jeśli to zrobimy, otrzymamy trzy zapytania o media CSS, które powinny wyglądać tak:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

Nasz @media screen and (max-width: 760px) CSS będą zawierać nasz edytowany div.post , który będzie wyglądał tak:

 div.post { width: 94%; float: left; padding: 2%; }

Wszystko w porządku, powinieneś teraz zobaczyć coś takiego jak poniżej, gdy zmniejszysz szerokość przeglądarki do szerokości poniżej 760 pikseli:

I to wszystko! Stworzyliśmy teraz responsywną stronę internetową, która działa na większych ekranach, tabletach i telefonach komórkowych!

Korzystanie z tego szablonu pozwala na większą zabawę i eksperymentowanie z innymi stylami CSS. Można się wiele nauczyć, bawiąc się tym przykładem i stosując różne reguły CSS, które później można wykorzystać do tworzenia pięknych i responsywnych stron internetowych.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

Wniosek

Jeśli korzystasz z CMS, takiego jak WordPress, możesz się zastanawiać, dlaczego konieczne jest zagłębienie się w podstawowe CSS i zapytania o media, które napędzają responsywną stronę internetową. W końcu każdy przyzwoicie zakodowany motyw WordPress powinien już mieć wbudowany responsywny projekt. Chociaż to prawda, zrozumienie, dlaczego witryna działa w ten sposób, w oparciu o określone szerokości przeglądarki, może być niezwykle pomocne. Może się zdarzyć, że z jakiegoś powodu początkowy projekt responsywny dodany przez autora motywu również nie działa tak, jak tego potrzebujesz. Wiedząc, jak zastosować zapytania o media, aby zmienić, który CSS jest wyświetlany w określonych punktach przerwania, możesz swobodnie wprowadzać zmiany, które skutkują wymaganym wyglądem i funkcją.

A jeśli kiedykolwiek planujesz zbudować własny motyw WordPress, solidne zrozumienie zapytań o media jest absolutną koniecznością! Mam nadzieję, że ten artykuł dał ci wgląd w to, co dzieje się za kulisami dzisiejszych responsywnych stron internetowych. Miłego responsywnego kodowania!