Marketing treściFilmy marketingowe i sprzedażoweInfografiki marketingoweMarketing mobilny i tabletowy

Co to jest projektowanie responsywne? (Film wyjaśniający i infografika)

Zajęło mi to dekadę responsywny projekt strony (RWD), aby przejść do głównego nurtu od tego czasu Cameron Adams został przedstawiony jako pierwszy koncepcja w 2010 r. Pomysł był genialny – dlaczego nie możemy projektować witryn, które dostosowują się do widoku urządzenia, na którym są przeglądane?

Co to jest projektowanie responsywne?

Responsywne projektowanie stron internetowych to podejście projektowe, które zapewnia, że ​​witryna internetowa zapewnia optymalne wrażenia podczas przeglądania na dowolnym urządzeniu, niezależnie od rozmiaru ekranu lub rozdzielczości. Polega na wykorzystaniu elastycznych układów, układów opartych na siatce i zapytań o media w celu stworzenia witryny, która dostosowuje się do rozmiaru ekranu, na którym jest wyświetlana. Oznacza to, że strona internetowa zaprojektowana z wykorzystaniem responsywnego projektu internetowego będzie dobrze wyglądać i działać na komputerze stacjonarnym, tablecie lub smartfonie.

Innymi słowy, elementy takie jak obrazy można dostosować, a także układ tych elementów. Oto film, który wyjaśnia, czym jest responsywny projekt, a także dlaczego Twoja firma powinna go wdrożyć. Jeśli tworzysz nowy projekt witryny lub aplikację internetową, responsywny projekt strony internetowej jest koniecznością, a nie opcją, biorąc pod uwagę, że ponad połowa całego ruchu w sieci pochodzi z urządzeń mobilnych, które mają różne szerokości i wysokości widocznego obszaru.

Projektowanie responsywne jest również optymalne dla projektantów stron internetowych, którzy nie muszą tworzyć niezależnych doświadczeń, które są unikalne w zależności od urządzenia lub widocznego obszaru. Responsywne projektowanie stron internetowych można osiągnąć za pomocą CSS.

Responsywne zapytania rzutni CSS projektu

Oto przykład arkusza stylów, który dostosowuje rozmiar czcionki na podstawie widocznego obszaru za pomocą zapytania o media:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Przeglądarki są świadome swojego rozmiaru i ładują arkusz stylów od góry do dołu. Wyszukując odpowiednie style dla rozmiaru ekranu, możesz ustawić określone elementy stylów dla każdej minimalnej i maksymalnej szerokości urządzenia. Nie oznacza to, że musisz projektować różne witryny dla każdego rozmiaru ekranu, wystarczy przesunąć niezbędne elementy za pomocą zapytań o media.

Działanie z mentalnością mobile-first jest obecnie podstawowym standardem. Najlepsze w swojej klasie marki myślą nie tylko o tym, czy ich witryna jest dostosowana do urządzeń mobilnych, ale także o tym, aby zapewnić klientom pełną satysfakcję.

Lucinda Duncalfe, dyrektor generalny Monetate

Oto infografika z Monetate ilustrujący potencjalne korzyści z tworzenia jednego responsywnego projektu dla wielu urządzeń:

Infografika responsywnego projektowania stron internetowych

Czy Twoja strona jest responsywna?

Prostym sposobem sprawdzenia, czy witryna jest responsywna, jest po prostu powiększenie lub zmniejszenie okna przeglądarki, aby sprawdzić, czy elementy poruszają się w zależności od szerokości przeglądarki.

Aby uzyskać większą precyzję, wskaż swój Google Chrome przeglądarkę do Twojej witryny. Wybierać Widok> Deweloper> Narzędzia deweloperskie z menu. Spowoduje to załadowanie zestawu narzędzi w panelu lub nowym oknie. Kliknij małą ikonę po lewej stronie paska menu Narzędzi dla programistów, która wygląda jak ikona telefonu komórkowego i tabletu. Możesz wybrać niektóre standardowe urządzenia, a nawet zmienić, czy chcesz oglądać stronę w poziomie, czy w pionie.

  • responsywny tablet z narzędziami programistycznymi Chrome
  • narzędzia programistyczne chrome responsywne mobilne poziome
  • responsywne narzędzia dla programistów chrome
  • responsywny pulpit narzędzi programistycznych chrome

Możesz skorzystać z opcji nawigacji u góry, aby zmienić widok z poziomego na pionowy, a nawet wybrać dowolną liczbę wstępnie zaprogramowanych rozmiarów widoku. Być może trzeba będzie ponownie załadować stronę, ale jest to najfajniejsze narzędzie na świecie do weryfikacji ustawień responsywnych i upewnienia się, że witryna wygląda świetnie na wszystkich urządzeniach!

Douglas Karr

Douglas Karr jest dyrektorem ds. marketingu OtwórzWglądy i założycielem Martech Zone. Douglas pomógł dziesiątkom odnoszących sukcesy start-upów MarTech, pomagał w due diligence ponad 5 miliardów dolarów w przejęciach i inwestycjach Martech i nadal pomaga firmom we wdrażaniu i automatyzacji ich strategii sprzedaży i marketingu. Douglas to uznany na całym świecie ekspert ds. transformacji cyfrowej oraz MarTech i mówca. Douglas jest także autorem przewodnika dla manekinów i książki o przywództwie biznesowym.

Powiązane artykuły

Powrót do góry przycisk
Zamknij

Wykryto Adblock

Martech Zone jest w stanie udostępnić Ci te treści bez żadnych kosztów, ponieważ zarabiamy na naszej witrynie poprzez przychody z reklam, linki partnerskie i sponsoring. Będziemy wdzięczni za usunięcie blokady reklam podczas przeglądania naszej witryny.