Wprowadzenie do projektowania responsywnych stron internetowych: pseudoelementy, zapytania mediów i nie tylko

W dzisiejszych czasach Twoja witryna będzie odwiedzana przez wiele różnych urządzeń: komputery stacjonarne z dużymi monitorami, średniej wielkości laptopy, tablety, smartfony i nie tylko.

Aby osiągnąć optymalne wrażenia użytkownika jako inżyniera front-endu, Twoja witryna powinna dostosować swój układ do różnych urządzeń (tj. do ich różnych rozdzielczości i wymiarów ekranu). Proces odpowiadania na formę urządzenia użytkownika określany jest jako (zgadliście) responsywne projektowanie stron internetowych (RWD).

Dlaczego warto poświęcić czas na przestudiowanie przykładów responsywnych projektów internetowych i przeniesienie uwagi na RWD? Na przykład niektórzy projektanci stron internetowych poświęcają swoje życie na zapewnienie stabilnego doświadczenia użytkownika we wszystkich przeglądarkach, często spędzając wiele dni na rozwiązywaniu drobnych problemów z Internet Explorerem.

To głupie podejście.

Mashable nazwał 2013 rokiem responsywnego projektowania stron internetowych. Czemu? Ponad 30% ich ruchu pochodzi z urządzeń mobilnych. Przewidują, że do końca roku liczba ta może osiągnąć 50%. Ogólnie w całej sieci 17,4% ruchu w sieci pochodziło ze smartfonów w 2013 roku. Jednocześnie na przykład korzystanie z Internet Explorera stanowi zaledwie 12% całego ruchu w przeglądarce , co oznacza spadek o około 4% w porównaniu z tym okresem ubiegłego roku (według do szkół W3). Jeśli optymalizujesz pod kątem konkretnej przeglądarki, a nie globalnej populacji smartfonów, brakuje Ci lasu dla drzew. W niektórych przypadkach może to oznaczać różnicę między sukcesem a porażką — responsywny projekt ma wpływ na współczynniki konwersji, SEO, współczynniki odrzuceń i inne.

Responsywne podejście do projektowania stron internetowych

Powszechnie przemilczane w RWD jest to, że nie chodzi tylko o dostosowywanie wyglądu Twoich stron internetowych; zamiast tego należy skupić się na logicznym dostosowaniu witryny do użytku na różnych urządzeniach. Na przykład: korzystanie z myszy nie zapewnia takich samych wrażeń użytkownika jak, powiedzmy, ekran dotykowy. Nie zgadzasz się? Twój responsywny układ mobilny i komputerowy powinien odzwierciedlać te różnice.

Jednocześnie nie chcesz całkowicie przepisywać swojej witryny dla każdego z dziesiątek różnych rozmiarów ekranu, na którym może być wyświetlana — takie podejście jest po prostu niewykonalne. Zamiast tego rozwiązaniem jest wdrożenie elastycznych, responsywnych elementów projektu, które wykorzystują ten sam kod HTML, aby dostosować się do rozmiaru ekranu użytkownika.

Z technicznego punktu widzenia rozwiązaniem jest ten samouczek dotyczący responsywnego projektowania: za pomocą zapytań o media CSS, pseudoelementów, elastycznych układów siatki i innych narzędzi do dynamicznego dostosowywania się do danej rozdzielczości.

Zapytania o media w responsywnym projektowaniu

Typy mediów pojawiły się po raz pierwszy w HTML4 i CSS2.1, co umożliwiło umieszczenie oddzielnych CSS dla ekranu i druku. W ten sposób można było ustawić odrębne style wyświetlania strony w komputerze w stosunku do jej wydruku.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

lub

 @media screen { * { background: silver } }

W CSS3 możesz definiować style w zależności od szerokości strony. Ponieważ szerokość strony jest skorelowana z rozmiarem urządzenia użytkownika, ta możliwość pozwala zdefiniować różne układy dla różnych urządzeń. Uwaga: zapytania o media są obsługiwane przez wszystkie główne przeglądarki.

Ta definicja jest możliwa dzięki ustawieniu podstawowych właściwości: max-width , device-width , orientation i color . Możliwe są również inne definicje; ale w tym przypadku najważniejszymi rzeczami do zapamiętania są minimalna rozdzielczość (szerokość) i ustawienia orientacji (pozioma vs. portretowa).

Poniższy przykład responsywnego CSS pokazuje procedurę inicjowania określonego pliku CSS w odniesieniu do szerokości strony. Na przykład, jeśli maksymalna rozdzielczość ekranu bieżącego urządzenia to 480px, zostaną zastosowane style zdefiniowane w main_1.css.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Możemy również zdefiniować różne style w tym samym arkuszu stylów CSS, tak aby były używane tylko wtedy, gdy spełnione są pewne ograniczenia. Na przykład ta część naszego responsywnego CSS byłaby używana tylko wtedy, gdy bieżące urządzenie miałoby szerokość powyżej 480 pikseli:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

„Inteligentny zoom”

Przeglądarki mobilne wykorzystują tak zwany „inteligentny zoom”, aby zapewnić użytkownikom „doskonałe” wrażenia z czytania. Zasadniczo inteligentny zoom służy do proporcjonalnego zmniejszania rozmiaru strony. Może się to objawiać na dwa sposoby: (1) powiększenie zainicjowane przez użytkownika (na przykład dwukrotne dotknięcie ekranu iPhone'a w celu powiększenia bieżącej witryny) oraz (2) początkowe wyświetlenie powiększonej wersji strony internetowej na Załaduj.

Biorąc pod uwagę, że możemy po prostu użyć responsywnych zapytań o media, aby rozwiązać dowolny problem, na który może być skierowany inteligentny zoom, często pożądane (a nawet konieczne) jest wyłączenie zoomu i upewnienie się, że zawartość strony zawsze wypełnia przeglądarkę:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Ustawiając initial-scale na 1, kontrolujemy początkowy poziom powiększenia strony (czyli wielkość powiększenia po załadowaniu strony). Jeśli Twoja strona internetowa jest responsywna, płynny, dynamiczny układ powinien w inteligentny sposób wypełniać ekran smartfona, bez konieczności początkowego powiększania.

Dodatkowo możemy całkowicie wyłączyć zoom za pomocą user-scalable=false .

Szerokości strony

Załóżmy, że chcesz zapewnić trzy różne responsywne układy stron: jeden dla komputerów stacjonarnych, jeden dla tabletów (lub laptopów) i jeden dla smartfonów. Jakie wymiary strony należy kierować jako odcięcia (np. 480 pikseli)?

Niestety nie ma zdefiniowanego standardu szerokości strony, na którą ma być kierowana, ale często używane są następujące przykładowe wartości responsywne:

• 320px
• 480 pikseli
• 600px
• 768px
• 900px
• 1024px
• 1200px

Istnieje jednak szereg różnych definicji szerokości. Na przykład 320 i więcej ma pięć domyślnych przyrostów CSS3 Media Query: 480, 600, 768, 992 i 1382px. Wraz z podanym przykładem w tym samouczku dotyczącym tworzenia responsywnych stron internetowych, mógłbym wymienić co najmniej dziesięć innych podejść.

Przy użyciu dowolnego z tych rozsądnych zestawów przyrostów możesz kierować reklamy na większość urządzeń. W praktyce zwykle nie ma potrzeby oddzielnego zajmowania się wszystkimi wyżej wymienionymi przykładami szerokości strony — siedem różnych rozdzielczości to prawdopodobnie przesada. Z mojego doświadczenia wynika, że ​​najczęściej używane są 320px, 768px i 1200px; te trzy wartości powinny wystarczyć do kierowania na smartfony, tablety/laptopy i komputery stacjonarne.

Pseudo-elementy

Opierając się na responsywnych zapytaniach o media z poprzedniego przykładu, możesz również chcieć pokazać lub ukryć pewne informacje programowo na podstawie rozmiaru urządzenia użytkownika. Na szczęście można to również osiągnąć za pomocą czystego CSS, jak opisano w poniższym samouczku.

Na początek ukrycie niektórych elementów ( display: none; ) może być świetnym rozwiązaniem, jeśli chodzi o zmniejszenie liczby elementów na ekranie w układzie smartfona, gdzie prawie zawsze brakuje miejsca.

Ale poza tym możesz również wykazać się kreatywnością za pomocą pseudoelementów (selektorów) CSS, np. :before i :after . Uwaga: po raz kolejny pseudoelementy są obsługiwane przez wszystkie główne przeglądarki.

Pseudoelementy są używane do zastosowania określonych stylów do określonych części elementu HTML lub do wybrania określonego podzbioru elementów. Na przykład pseudoelement :first-line pozwala zdefiniować style wyłącznie w pierwszym wierszu określonego selektora (np. p:first-line zastosuje się do pierwszego wiersza wszystkich p s). Podobnie pseudoelement a:visited pozwoli Ci zdefiniować style a wszystkich s z linkami wcześniej odwiedzanymi przez użytkownika. Oczywiście mogą się przydać.

Oto prosty przykład projektowania responsywnego, w którym tworzymy trzy różne układy dla przycisku logowania, po jednym dla komputera stacjonarnego, tabletu i smartfona. Na smartfonie będziemy mieli samotną ikonę, podczas gdy tablet będzie miał tę samą ikonę, której towarzyszy „Nazwa użytkownika”. Na koniec dodamy również krótki komunikat instruktażowy na pulpicie („Wstaw swoją nazwę użytkownika”).

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Używając tylko pseudoelementów :before i :after , uzyskujemy:

Aby dowiedzieć się więcej o magii pseudoelementów, Chris Coyier ma dobry opis sztuczek CSS.

Więc od czego mam zacząć?

W tym samouczku ustaliliśmy kilka elementów konstrukcyjnych do projektowania responsywnych stron internetowych (tj. zapytania o media i pseudoelementy) i przedstawiliśmy kilka przykładów każdego z nich. Dokąd idziemy stąd?

Pierwszym krokiem, który powinieneś zrobić, jest uporządkowanie wszystkich elementów strony internetowej w różnych rozmiarach ekranu.

Zerknij na desktopową wersję układu przedstawionego powyżej. W tym przypadku zawartość po lewej stronie (zielony prostokąt) może służyć jako rodzaj menu głównego. Jednak gdy w użyciu są urządzenia o niższej rozdzielczości (np. tablet lub smartfon), sensowne może być wyświetlanie tego menu głównego w pełnej szerokości. W przypadku zapytań o media możesz zaimplementować to zachowanie w następujący sposób:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Niestety, to podstawowe podejście jest często niewystarczające, ponieważ Twój front-end staje się coraz bardziej skomplikowany. Ponieważ organizacja treści witryny często różni się znacznie między wersjami mobilnymi i komputerowymi, wrażenia użytkownika ostatecznie zależą od zastosowania responsywnego CSS, ale także HTML i JavaScript.

Przy określaniu responsywnych układów dla różnych urządzeń ważne jest kilka kluczowych elementów. W przeciwieństwie do wersji na komputery stacjonarne, w których mamy wystarczająco dużo miejsca na treść, rozwój smartfonów jest bardziej wymagający. Bardziej niż kiedykolwiek konieczne jest grupowanie konkretnych treści i hierarchiczne definiowanie ważności poszczególnych części.

Ważne są również różne zastosowania Twoich treści. Na przykład, gdy użytkownik ma mysz, może ustawić kursor nad pewnymi elementami, aby uzyskać więcej informacji, więc Ty (jako programista) możesz pozostawić pewne informacje do zebrania w ten sposób — ale to nie będzie przypadku, gdy użytkownik korzysta ze smartfona.

Ponadto, jeśli zostawisz w swojej witrynie przyciski, które następnie renderują się na smartfonach jako mniejsze niż typowy palec, spowodujesz niepewność w użytkowaniu i poczuciu Twojej witryny. Zwróć uwagę, że na powyższym obrazku standardowy widok sieciowy (po lewej) renderuje niektóre elementy całkowicie bezużyteczne, gdy są oglądane na mniejszym urządzeniu.

Takie zachowanie zwiększy również prawdopodobieństwo popełnienia błędu przez użytkownika, spowalniając jego działanie. W praktyce może się to objawiać mniejszą liczbą odsłon, mniejszą sprzedażą i mniejszym ogólnym zaangażowaniem.

Inne responsywne elementy projektu

Korzystając z zapytań o media, należy pamiętać o zachowaniu wszystkich elementów strony, a nie tylko tych, na które są kierowane, zwłaszcza w przypadku korzystania z płynnych siatek, w którym to przypadku (w przeciwieństwie do stałych wymiarów) strona zostanie wypełniona w dowolnym momencie. moment, proporcjonalnie zwiększając i zmniejszając rozmiar treści. Ponieważ szerokości są ustawiane w procentach, elementy graficzne (tj. obrazy) mogą zostać zniekształcone i zniekształcone w takim płynnym układzie. W przypadku obrazów jedno rozwiązanie jest następujące:

 img { max-width: 100% }

W podobny sposób należy postępować z innymi elementami. Na przykład świetnym rozwiązaniem dla ikon w RWD jest użycie IconFonts.

Kilka słów o systemach płynnych sieci

Omawiając proces pełnej adaptacji projektu, często patrzymy na optymalne wrażenia wizualne (z perspektywy użytkownika). Taka dyskusja powinna uwzględniać maksymalne ułatwienie użytkowania, znaczenie elementu (na podstawie widocznych obszarów strony), ułatwienie czytania i intuicyjną nawigację. Wśród tych kategorii jednym z najważniejszych elementów jest dopasowanie szerokości treści . Na przykład tak zwane systemy płynnej siatki mają ustawione elementy, tj. elementy oparte na względnych szerokościach jako procenty całej strony. W ten sposób wszystkie elementy w responsywnym systemie projektowania stron internetowych automatycznie dopasowują się do rozmiaru strony.

Chociaż te systemy płynnej siatki są ściśle związane z tym, o czym tutaj dyskutowaliśmy, tak naprawdę są zupełnie oddzielną jednostką, która wymagałaby dodatkowego samouczka, aby szczegółowo omówić. Dlatego wspomnę tylko o kilku głównych frameworkach, które wspierają takie zachowanie: Bootstrap, Unsemantic i Brackets.

Wniosek

Do niedawna optymalizacja stron internetowych była terminem zarezerwowanym wyłącznie dla dostosowywania funkcjonalności w oparciu o różne przeglądarki internetowe. Oprócz nieuniknionej walki z różnymi standardami przeglądarek, z którą mamy dziś do czynienia, termin ten zakłada teraz również dostosowywanie się do urządzeń i rozmiarów ekranu za pomocą responsywnego projektowania stron internetowych. Aby wykorzystać go w nowoczesnej sieci, Twoja witryna musi wiedzieć nie tylko , kto ją ogląda, ale także w jaki sposób .