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

responsywny projekt strony

It’s taken a decade for 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

In other words, elements like images can be adjusted as well as the layout of those elements. Here’s a video that explains what responsive design is as well as why your company should be implementing it. We recently redeveloped the DK New Media 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.

Browsers are self-aware of their size, so they load the stylesheet from top to bottom, querying the applicable styles for the size of the screen. This doesn’t mean you have to design different stylesheets for every size screen, you just need to shift the elements necessary.

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

Here’s an infographic from Monetate illustrating the potential benefits of creating one responsive design for multiple devices:

Infografika responsywnego projektowania stron internetowych

If you’d like to see a responsive site in action, point your Google Chrome przeglądarka (uważam, że Firefox ma tę samą funkcję) do DK New Media. 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

You can use the navigation options up top to change the view from landscape to portrait, or even select any number of preprogrammed viewport sizes. You may have to reload the page, but it’s the coolest tool in the world for verifying your responsive settings and ensuring your site looks great on all devices!

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.