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

responsywny projekt strony

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. Pomysł był genialny - dlaczego nie możemy zaprojektować witryn, które dostosowują się do obszaru wyświetlania urządzenia, na którym są wyświetlane?

Co to jest projektowanie responsywne?

Elastyczne projektowanie witryn internetowych (RWD) to podejście do projektowania witryn internetowych mające na celu tworzenie witryn w celu zapewnienia optymalnych wrażeń z oglądania - łatwego czytania i nawigacji przy minimalnej zmianie rozmiaru, panoramowaniu i przewijaniu - na szerokiej gamie urządzeń (od telefonów komórkowych po komputery stacjonarne) monitory). Witryna zaprojektowana za pomocą RWD dostosowuje układ do środowiska wyświetlania, używając płynnych, proporcjonalnych siatek, elastycznych obrazów i zapytań o media CSS3, co stanowi rozszerzenie reguły @media.

Wikipedia

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 projektowanie responsywne, a także dlaczego Twoja firma powinna go wdrażać. Niedawno przebudowaliśmy Highbridge witryna ma odpowiadać i teraz nad nią pracujemy Martech Zone zrobić to samo!

Metodologia budowania responsywnej witryny jest trochę uciążliwa, ponieważ musisz mieć hierarchię stylów, które są zorganizowane na podstawie rozmiaru widocznego obszaru.

Przeglądarki są świadome swojego rozmiaru, więc ładują arkusz stylów od góry do dołu, sprawdzając odpowiednie style dla rozmiaru ekranu. Nie oznacza to, że musisz projektować różne arkusze stylów dla każdego rozmiaru ekranu, wystarczy przesunąć niezbędne elementy.

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 firmy Monetate ilustrująca potencjalne korzyści z utworzenia jednego responsywnego projektu na wiele urządzeń:

Infografika responsywnego projektowania stron internetowych

Jeśli chcesz zobaczyć, jak działa responsywna witryna, wskaż swój Google Chrome przeglądarka (uważam, że Firefox ma tę samą funkcję) do Highbridge. Teraz wybierz Widok> Deweloper> Narzędzia deweloperskie z menu. Spowoduje to załadowanie zestawu narzędzi w dolnej części przeglądarki. Kliknij małą ikonę telefonu komórkowego po lewej stronie paska menu Narzędzi dla programistów.

responsywne-testowanie-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!

Komentarze 3

  1. 1
  2. 2

    Wielkie dzięki Douglas za ten dobrze wyjaśniony artykuł. Muszę się z tym zgodzić po stronie treści. Dla większości stron zrobiony przez nas układ responsywny nie wystarczy. Potrzebujemy responsywnych treści. Ale w przypadku bardziej podstawowych stron internetowych na pewno użyjemy twojego dobrze udokumentowanego artykułu o tym, jak sobie z tym poradzić!

Co o tym myślisz?

Ta strona używa Akismet do redukcji spamu. Dowiedz się, jak przetwarzane są dane komentarza.