Responsywne zasady projektowania stron internetowych

W dzisiejszych czasach powszechną praktyką jest budowanie strony internetowej lub aplikacji, która dostosowuje swój interfejs użytkownika w zależności od przeglądarki lub urządzenia. Istnieją dwa podejścia do osiągnięcia tego celu. Pierwszy polega na tworzeniu różnych wersji witryny lub aplikacji na różne urządzenia. Ale jest nieefektywny i może prowadzić do nieprzewidywalnych błędów.

W poszukiwaniu niezawodnego, przyszłościowego podejścia wymyślono responsywny — lub adaptacyjny — projekt. Koncentruje się na tworzeniu jednej wersji układu, która automatycznie dostosowuje się do różnych przeglądarek lub urządzeń.

W tym artykule dowiemy się o responsywnym projektowaniu stron internetowych i podstawowych zasadach, które pomogą Ci stworzyć niesamowitą stronę internetową.

Responsywne składniki do projektowania stron internetowych

Responsywne projektowanie stron internetowych nie jest tak skomplikowane, jak się wydaje. To zestaw praktyk, których możesz użyć podczas pisania CSS, a nie osobna technologia, której będziesz musiał uczyć się od zera. Być może już przestrzegasz kilku z tych zasad, nie zdając sobie z tego sprawy. Możesz zrozumieć responsywne projektowanie stron internetowych, badając jego cztery składniki: układy płynne, jednostki responsywne, elastyczne obrazy i zapytania o media.

Układy płynne

Dzięki płynnemu układowi możesz tworzyć strony internetowe, które dostosowują się do aktualnej szerokości i wysokości rzutni. Powszechna praktyka obejmuje używanie maksymalna szerokość zamiast dawać elementowi stałą szerokość. Również za pomocą procentu (%), wysokość rzutni (vh) lub szerokość rzutni (vw) pomaga poprawić adaptacyjność, która nie jest możliwa w przypadku pikseli (px). Dlatego następnym razem, gdy będziesz tworzyć układ, wprowadź te małe zmiany i zacznij korzystać z responsywnych technik projektowania.

Responsywne jednostki

Gdy przejdziesz do bardziej zaawansowanego CSS, często zobaczysz użycie Rem oraz em jednostki długości zamiast px jednostki. Dzieje się tak, ponieważ Rem jednostka sprawia, że ​​skalowanie całego układu jest bardzo łatwe. Domyślnie 1rem to 16px, ponieważ jest proporcjonalne do rozmiar czcionki elementu, zwykle 16px. Możesz jednak ustawić 1rem na 10px (lub dowolną inną wartość), aby ułatwić obliczenia, dostosowując rozmiar czcionki najwyższego poziomu.

Elastyczne obrazy

Obrazy są głównym problemem podczas projektowania nawet najbardziej podstawowego układu. Zawsze musisz zadbać o ich odpowiedni rozmiar, aby pasowały do ​​​​projektu. Ponadto domyślnie nie skalują się wraz ze zmianami w rzutni. Więc powinieneś użyć % dla wymiarów twoich obrazów, wraz z maksymalna szerokość własność.

Możesz ożywić responsywne witryny za pomocą zapytań o media. Siatki płynne są dobre na początek, ale przekonasz się, że jest kilka punktów, w których układ zaczyna się załamywać. Dodanie punktów przerwania dla tych szerokości rzutni dostosowuje układ dla różnych urządzeń. Zapytania o media pomagają selektywnie stosować CSS na podstawie wyników testów funkcji mediów. Możesz odkrywać nowe Funkcje CSS do stworzenia responsywnej strony internetowej w krótszym czasie.

Responsywne zasady projektowania stron internetowych

Chociaż responsywne projektowanie stron internetowych jest wybawieniem, jeśli chodzi o problemy z wieloma ekranami, możesz nie mieć stałego fizycznego ograniczenia, do którego możesz się odnieść. Dlatego istnieje sześć podstawowych zasad responsywnego projektowania stron internetowych, od których należy zacząć podczas projektowania responsywnego układu.

Użyj punktów przerwania opartych na treści

Jedna z podstawowych zasad projektowania mówi, że projekt witryny powinien wspierać treść, a nie odwrotnie. Treści medialne, takie jak filmy, zdjęcia i treści tekstowe, takie jak długie i krótkie kopie internetowe, powinny być optymalnie renderowane na wszystkich ekranach. Kluczem do responsywnego projektowania stron internetowych jest użycie punktów przerwania opartych na treści, a nie na urządzeniach.

Mądrze wybieraj czcionki internetowe i czcionki systemowe

Czcionki internetowe wyglądają oszałamiająco! Masz wiele możliwości modyfikowania swojego projektu za pomocą fajnych czcionek internetowych. Ale powinieneś wiedzieć, że przeglądarki będą musiały pobrać każdą czcionkę internetową. Więcej czcionek internetowych, dłuższy czas pobierania. Natomiast czcionki systemowe działają błyskawicznie. Jeśli użytkownik nie ma na swoim lokalnym urządzeniu nazwanej czcionki systemowej, powróci do następnej czcionki w stos rodziny czcionek. Dlatego przy wyborze czcionek należy wziąć pod uwagę czas ładowania i wymagania projektowe.

Optymalizuj obrazy bitmapowe i wektory

Czy masz na swojej stronie różne ikony, wspierające treść? Często dobrą praktyką jest używanie formatu bitmapowego, jeśli ikony mają dużo szczegółów. Z drugiej strony formaty wektorowe są sposobem na uzyskanie ikon, które ładnie skalują się w górę iw dół. Wektory są często małe, ale wadą jest to, że niektóre starsze przeglądarki mogą ich nie obsługiwać. Zdarzają się również przypadki, w których wektory są cięższe niż mapy bitowe, na przykład gdy obraz jest bardzo szczegółowy. Dlatego zawsze upewnij się, że optymalizujesz obrazy bitmapowe i wektory, zanim zostaną udostępnione online.

Przeprowadź testy responsywnego pierwszego złożenia

Pierwsza fałda strony internetowej to widok, który widzą odwiedzający po pierwszym załadowaniu, przed jakimkolwiek przewijaniem. Często zawiera sekcję bohatera z responsywny pasek nawigacyjny, tekst wprowadzający i multimedia oraz wezwanie do działania. Responsywność nie ogranicza się tylko do urządzeń mobilnych. Powinieneś rozważyć również tablety, konsole do gier i inne ekrany. Kluczem jest więc przeprowadzanie częstych testów przynajmniej dla pierwszego rzutu strony. Możesz użyć Chrome DevTools (Latarnia morska), aby przetestować jakość strony internetowej.

Nie ukrywaj treści na mniejszych ekranach

Wiele osób zakładało, że użytkownicy mobilni zawsze się spieszą, szukając informacji o niewielkich rozmiarach, podczas gdy użytkownicy komputerów stacjonarnych bardziej interesują się długimi treściami. Teraz zdajemy sobie sprawę, że nie jest to prawdą w dzisiejszym świecie. Ludzie wszędzie korzystają z urządzeń mobilnych, szukając pełnej zawartości i pełnego dostępu do wszystkich usług. Powinieneś upewnić się, że zamiast ukrywać zawartość, zarządzasz układem i punktami przerwania, aby zaprezentować je tak łatwo i bez wysiłku, jak to możliwe.

Zarządzaj układem za pomocą zagnieżdżonych obiektów

Prawidłowe zbudowanie układu strony i pozycjonowanie elementów wymaga sporego wysiłku. Możesz również mieć trudności z zarządzaniem wieloma elementami, które są od siebie zależne. Dlatego powinieneś rozważyć zapakowanie powiązanych elementów w kontener lub. Pomaga to zredukować zadanie układania kilku elementów do jednego, w którym układasz tylko jeden element.

Responsywny projekt: czy powinieneś najpierw wybrać komputer stacjonarny, czy najpierw mobilny?

Podejście na pierwszym miejscu na komputer oznacza, że ​​napiszesz CSS dla dużych ekranów, a następnie zastosujesz zapytania o media, aby zmniejszyć projekt dla mniejszych ekranów. W przeciwieństwie do tego, podejście mobile first polega na pisaniu CSS dla urządzeń mobilnych z mniejszymi ekranami, a następnie zastosowaniu zapytań o media w celu rozszerzenia projektu na większe ekrany. Głównym celem jest zredukowanie strony internetowej i aplikacji do absolutnych podstaw.

Jeśli dopiero zaczynasz z responsywnym tworzeniem stron internetowych, powinieneś wybrać najpierw komputer stacjonarny podejście, bo pod koniec dnia będziesz musiał ułożyć kontener jeden na drugim na urządzeniu mobilnym urządzenia. Chociaż jest to całkowicie osobista decyzja, podejście mobile first pomaga w konstruowaniu HTML w lepszy sposób, podczas gdy podejście zorientowane na komputery pomoże Ci z układem i odstępami techniki.

6 najlepszych kursów do nauki projektowania UX

Jeśli chcesz nauczyć się projektowania UX lub poprawić swoje umiejętności, oto sześć najlepszych kursów online, na które możesz wziąć udział.

Czytaj dalej

O autorze