Projekt responsywny czy adaptacyjny: co jest lepsze dla użytkownika? Znajdź gotowy projekt. Najważniejsze rozdzielczości ekranu w przypadku układu adaptacyjnego

W Ostatnio Technologie i różne urządzenia (tablety, smartfony, monitory), za pomocą których przegląda się strony, rozwijają się coraz bardziej.

W tym obszarze otrzymujemy ogromną różnorodność różnych rozdzielczości ekranu, co z kolei utrudnia pozyskiwanie informacji ze stron internetowych. Aby zapewnić łatwość odczytania i przeglądania informacji na większości urządzeń, opracowano technologię projektowania adaptacyjnego.

Celem projektowania responsywnego jest opracowanie uniwersalnego projektu strony internetowej, który z kolei umożliwi przeglądanie i interakcję z zasobem z różnych urządzeń.

I tę technologię polega na stworzeniu jednej wersji strony internetowej na wszystkie urządzenia, a nie na kilka.

Adaptacyjne projektowanie stron internetowych to projektowanie stron internetowych zapewniające prawidłowe wyświetlanie się witryny różne urządzenia, podłączony do Internetu i dynamicznie dostosowujący się do podane wymiary okno przeglądarki.

Podstawowe zasady projektowania responsywnego:

Adaptacyjny szablon strony internetowej, możliwość dostosowania szablonu do różnych rozdzielczości ekranów urządzeń od monitorów komputerowych po smartfony;
Dostosowanie i przenoszenie bloków treści, możliwość przybierania przez bloki treści wymaganych wymiarów w zależności od rozdzielczości ekranu urządzenia, a także możliwość przemieszczania się w inne miejsce w układzie;
Adaptacja obrazu, możliwość zmiany rozmiaru obrazów w zależności od rozdzielczości ekranu lub załadowania bardziej dostosowanego obrazu o mniejszej wadze i rozmiarze;
Stosowanie elastyczna siatka, pozwala na szybką zmianę projektu układu;
Ukrywanie mniej ważnych bloków przez małe ekrany niektóre bloki mogą być ukryte;
Przerobienie użyteczności elementów nawigacyjnych, gdyż na urządzeniach mobilnych, ze względu na ich niską rozdzielczość, elementy nawigacyjne stają się mniej klikalne, zostają przeprojektowane, dzięki czemu są wygodne w użyciu;
Uproszczenie szeregu elementów strony internetowej, niektóre elementy są uproszczone do obsługi na urządzeniach mobilnych;
Należy wziąć pod uwagę także adaptację treści wideo, adaptację wideo;
Korzystanie z zapytań o media ( zapytanie mediów), pozwalają na stworzenie responsywnego układu;
Najpierw mobilnie ( najpierw mobilnie), projektowanie responsywnego projektu rozpoczyna się od układu przyjaznego dla urządzeń mobilnych.

Jeśli chodzi o ostatni punkt, to, czy jest to prawidłowe, czy nie, jest trudnym pytaniem – twierdzi co najmniej wielu twierdzi, że konieczne jest rozpoczęcie opracowywania układu z wersją na urządzenia mobilne. Mam nieco inne zdanie; łatwiej mi opracować układ maksymalna rozdzielczość z przemyślaną siatką i pełną funkcjonalnością, a dopiero potem dostosowywać ją do innych rozdzielczości.

Wymiary układu responsywnego projektu

Dawno, dawno temu w 2012 roku napisałem krótki artykuł o tym, jakie wybrać przy opracowywaniu projektu - układu dla stałej witryny. Ten artykuł cieszy się dużym zainteresowaniem czytelników; okazuje się, że kwestia ta interesuje wielu początkujących projektantów i programistów. W związku z tym postanowiłem również naświetlić tę kwestię w tym artykule.

Tak więc, wyłącznie z mojej wizji, nakreślę zasadę i wymiary, dla których należy opracować układ.

Jeśli najpierw zastosujesz zasadę mobilną, pojawią się rozmiary rozdzielczości, dla których musisz opracować układ 320px / 480px / 768px / 1024px / 1280px, może więcej zależy od zadań.

Obraz wygląda mniej więcej tak, ale często nie ma potrzeby tworzenia układu dla określonych rozdzielczości, na przykład 480 pikseli. jeśli układ nie pęka w przedziale 768 - 320px.

Oczywiście płótno utworzymy w Photoshopie z uwzględnieniem dopełnienia, paska przewijania i całej reszty, tak jak w przypadku zwykłego układu. dla ułatwienia programowania, a także szybszego projektowania układu. Wiele osób korzysta z frameworków w swojej pracy i dlatego polega na siatce frameworków, na których się rozwijają.

Dzięki temu będziemy mogli pokazać projektantowi układu, jak układ będzie się zachowywał na różnych rozdzielczościach ekranów i urządzeniach. Jako przykład naszkicowałem mały układ, możesz go zobaczyć na zrzucie ekranu poniżej.

Zapytanie o media i rzutnia w responsywnym projekcie

Metatag viewport służy do informowania przeglądarki, jak wyświetlać wymiary strony i zmieniać jej skalę. Ten metatag jest zapisywany w witrynie. Umożliwia programistom ustawienie szerokości ekranu dla urządzeń, która jest napisana w CSS.

Metatag rzutni jest zapisany w następujący sposób:

600)( // Jeśli szerokość jest większa niż 600 pikseli, używany jest arkusz stylów pulpitu $("link").attr((href: "style.css")); ) ) ));

Opcjonalny wyświetlacz treść

Możliwość zmniejszania i zmiany układu elementów w celu dopasowania ich do małych ekranów jest świetna. Ale to nie jest najlepsza opcja. Urządzenia mobilne zazwyczaj oferują szerszy zestaw zmian: uproszczoną nawigację, bardziej ukierunkowaną treść, listy lub wiersze zamiast kolumn.

Oto nasze znaczniki:

Główna zawartość Lewy pasek boczny Prawy pasek boczny

style.css (główny):

#content( szerokość: 54%; float: lewy; margines-prawy: 3%; ) #sidebar-left( szerokość: 20%; float: lewy; margines-prawy: 3%; ) #sidebar-right( szerokość: 20 %; float: lewy; ) .sidebar-nav( display: brak; )

mobile.css (uproszczony):

#content( szerokość: 100%; ) #sidebar-left( display: brak; ) #sidebar-right( display: brak; ) .sidebar-nav( display: inline; )

Jeśli rozmiar ekranu zostanie zmniejszony, możesz na przykład użyć skryptu lub alternatywny plik ze stylami do powiększenia Biała przestrzeń lub zamień nawigację dla większej wygody. Dzięki temu, mając możliwość ukrywania i pokazywania elementów, zmiany rozmiaru zdjęć, elementów i wielu innych, możesz dostosować projekt do dowolnego urządzenia i ekranu.

Niedawno, dosłownie 10 lat temu, tworząc strony internetowe, projektanci stron internetowych kierowali się pewną średnią szerokością ekranu monitorów użytkowników. Początkowo najczęstszą rozdzielczością było 800*600, później wzrosła do 1024*768. W Internecie można spotkać się ze słowami: „Strona jest zoptymalizowana pod taką a taką rozdzielczość”. Wraz ze wzrostem liczby rozmiarów ekranów stało się popularne Układ gumowy serwisy, o których pisałem w Dzięki temu typowi układu możliwe było przeglądanie witryn na monitorach o różnych rozdzielczościach.

Jednak w ostatnie lata gumowy układ przestał być „panaceum”. Z jednej strony pojawiły się monitory o ogromnych rozmiarach ekranów, z drugiej nastąpiła rewolucja mobilna – wzrosła liczba połączeń z Internetem urządzeń mobilnych (laptopy, smartfony, tablety) więcej numeru komputery osobiste. Ruch mobilny rośnie i istnieje potrzeba prawidłowego wyświetlania witryny na ekranach duża liczba różnorodny różne urządzenia. Zakres rozmiarów jest zbyt szeroki.

Jeśli witryna wygląda źle na małych ekranach, użytkownik po prostu ją opuszcza, ruch spada i pogarszają się czynniki behawioralne.

Aby sprawdzić jak Twoja witryna wygląda na różnych urządzeniach możesz skorzystać z usługi Screenfly. Aby to zrobić, wprowadź adres witryny i wybierz żądane urządzenie z dość dużej listy. Mogłoby być komputer stacjonarny i tablety różne rodzaje i telefony komórkowe. Można zmienić orientację ekranu z poziomej na pionową i odwrotnie.

Jak rozwiązać problem normalnego wyświetlania strony na różnych urządzeniach? Istnieją dwa wyjścia:

Korzystaj z dwóch wersji witryny, zwykłej dla komputery osobiste i mobilne.
Użyj responsywnego projektu.

Decyzja, którą z tych opcji zastosować, zależy oczywiście od właściciela lub klienta witryny. Jeśli strona powstała dawno temu, ma ręcznie rysowany projekt będący częścią marki, to może warto coś dla niej zrobić wersja mobilna i zostaw stary. W przypadku nowych stron internetowych warto oczywiście wybrać projekt responsywny.

Co to jest projektowanie responsywne?

Co to za konstrukcja i czym różni się od gumy?

Gumowy szablon nie zmienia swojej konstrukcji wraz ze zmianą szerokości ekranu, a jedynie zmienia jego wymiary. Przykładowo strona internetowa ma trzy kolumny: po lewej stronie menu o szerokości 25% szerokości okna, pośrodku treść – 50%, po prawej stronie pasek boczny – 25%. Przy szerokości okna 1000 px będą one miały rozmiary odpowiednio 250, 500 i 250 px, co jest całkiem normalne. Ale jeśli użyjesz telefon komórkowy przy małym ekranie o szerokości 320 px, wówczas kolumny zmniejszą się do rozmiarów 80, 160, 80 px i staną się nieczytelne.

Jakie jest rozwiązanie? Polega ona na radykalnej zmianie strony internetowej. Zmiana ta polega na tym, że po stopniowym zmniejszaniu szerokości łamów następuje przebudowa struktury strony – rozciągnięcie jej w jedną kolumnę. Ale to nie jedyna różnica.

Responsywne wymagania projektowe

Dostosowuje się do rozmiaru i orientacji ekranu, począwszy od duże monitory komputerów stacjonarnych na telefony komórkowe.
Zmień rozmiar obrazów podczas zmiany rozdzielczości ekranu. Nawet w witrynach o „płynnym” wyglądzie rozmiary obrazów nie zmieniają się, a przy określonej szerokości ekranu poziomy pasek przewiń, aby je wyświetlić. W przypadku projektowania responsywnego obrazy również „dopasowują się” do rozmiaru ekranu.
Usuwanie nieistotnych elementów szablonu. Mogą być jak elementy dekoracyjne oraz oprogramowanie, które nie działa na urządzeniach mobilnych.
Wysoka prędkość pobierania. Prędkość Internet mobilny jest wciąż stosunkowo niewielka i należy to wziąć pod uwagę przy tworzeniu witryny przeznaczonej do przeglądania na urządzeniach mobilnych.
Użycie jest względne duże guziki. Urządzenia mobilne przy opracowywaniu projektu należy uwzględnić wprowadzanie dotykowe i brak kursora.
Praca z funkcjami mobilnymi, takimi jak geolokalizacja.

Jak powstaje responsywny projekt

Ten projekt opiera się na za pomocą CSS zapytania mediów Dzięki tym żądaniom najpierw określane są parametry urządzenia, z którego korzysta odwiedzający, i w zależności od tego wyboru łączony jest odpowiedni styl, czyli przy projektowaniu adaptacyjnym używana jest jedna witryna z zestawem stylów dla różnych urządzenia. Na przykład, jeśli użytkownik uzyskuje dostęp do witryny za pomocą zwykły komputer, jeden arkusz stylów jest podłączony i widzi witrynę z dużym kolorowym nagłówkiem, menu poziome, kilka kolumn treści, a przy korzystaniu z iPada stosowany jest inny styl, a zamiast ogromnego nagłówka wyświetla się małe logo, menu zamienia się w lista pionowa, a zawartość jest gromadzona w jednej kolumnie.

Responsywne szablony

Czy można przerobić istniejący szablon strony internetowej dla wersja adaptacyjna? Oczywiście, że możesz, jeśli masz wystarczającą wiedzę na temat HTML i CSS. Ale jeśli korzystasz z dowolnego systemu zarządzania treścią - WordPress, Joomla!, Drupal, lepiej go znaleźć gotowy szablon, Teraz szablony adaptacyjne wiele zostało opracowanych. Nawiasem mówiąc, w moim artykule powinienem teraz dodać jeszcze jeden punkt „Sprawdzanie szablonu pod kątem adaptacji”.

Można więc powiedzieć, że projektowanie responsywne jest obecnie To jest najbardziej w nowoczesny sposób tworzenie stron internetowych i pomimo swojej względnej złożoności jest to przyszłość. Postęp nie stoi w miejscu, pojawiają się nowe, bardziej złożone urządzenia i oprogramowanie staje się to dla nich również trudniejsze.

Swoją drogą właśnie pojawił się wyjątkowy kurs Andrieja Kudlaya. Korzystając z frameworka Bootstrap, możesz dziś stworzyć stronę internetową o pięknym, przyjemnym, profesjonalnym wyglądzie, bez konieczności posiadania profesjonalnego układu. Korzystając z frameworków, nawet najbardziej początkujący w tworzeniu stron internetowych mogą zaprojektować stronę, stworzyć jednostronicową witrynę lub stronę docelową. Co więcej, strona będzie dość profesjonalna, a czas poświęcony na jej utworzenie jest minimalny.

Wszystko to jest bardzo poważne, ale na przerwę sugeruję ułożenie puzzli i obejrzenie kolejnego obrazu mojego rodaka, Artysty Ludowego Rosji N.P. Erysheva.

Napisz w komentarzu swoją opinię na temat responsywnego projektowania.