Responsive webdesign stał się przełomowym terminem, aby Twoja strona działała dobrze w niskiej rozdzielczości.
Smartfony zrewolucjonizowały sieć mobilną, a tablety rzucają kolejny klucz do narzędzi z rosnącą popularnością. Biorąc wszystko pod uwagę, dzisiejszą stronę internetową można doświadczyć na smartfonie o niskiej rozdzielczości, na tablecie o średniej rozdzielczości lub na laptopie lub wysokiej rozdzielczości. Kiedy rzucasz ekrany siatkówki do miksu, liczba potencjalnych rozmiarów ekranu jest oszałamiająca. Idealnie, twoja strona będzie wyglądała i działała z wdziękiem na wszystkich powyższych, w dowolnej rozdzielczości.
Responsive webdesign samo w sobie jest procesem tworzenia witryny internetowej na bardzo małych ekranach, bardzo dużych ekranach iw dowolnej rozdzielczości pomiędzy nimi.
W ciągu ostatnich kilku lat branża opracowała wspólnie krótką listę wspólnych najlepszych praktyk. Wiele z tych praktyk koncentruje się na modernizacji stron internetowych przeznaczonych do wysokiej rozdzielczości do mniejszych rozmiarów. Inni zaczynają od urządzeń mobilnych i pracują nad większymi rzutniami, optymalizując je w razie potrzeby. Wszystkie te praktyki można ogólnie sklasyfikować jako układy responsywne lub adaptacyjne.
Układy responsywne generalnie działają lepiej niż układy adaptacyjne, ale w niektórych przypadkach (np. Złożone aplikacje internetowe) podejście adaptacyjne może lepiej służyć użytkownikom. Tak czy inaczej, celem jest, aby Twoja strona zawsze wyglądała najlepiej w pożądanej rozdzielczości.
Większość osób decyduje się na używanie zapytań o media, takich jak są solidne jak skała chyba że potrzebujesz wsparcia dla IE8 lub poniżej. Dla tych z nas, którzy wciąż mają widownię w IE6 - 8, Scott Jehl stworzył JavaScript polyfill o nazwie Respond.js to sprawi, że wszystko będzie działać.
Wcześniej wielu webdesignerów miało minimalną komunikację z programistami aż do przekazania. Teraz jednak projektanci i programiści muszą współpracować zarówno w procesie projektowania, jak i rozwoju, aby wszystko działało sprawnie. Od analityki użytkownika po to, co może lub nie może być rearanżowane podczas zmiany rzutni - projektanci i programiści są bliżsi niż kiedykolwiek, jeśli nie ta sama osoba. Jeśli szukasz inspiracji, jak wyglądają responsywne lub adaptacyjne układy, MediaQueri.es to popularna galeria webdesignów wyświetlająca cztery widoki witryny.
Kiedy idea responsywnego webdesignu zaczęła zyskiwać na popularności, przez pewien czas dominowały techniki adaptacyjne. Łatwiej jest przejść do projektowania i opracowywania dla tych układów, chociaż wymagają one więcej pracy niż ich responsywne konspekty. Jest to również droga, którą wielu ludzi podejmuje, gdy modernizacja istniejącej witryny jest przyjazna dla urządzeń mobilnych. Ze względu na charakter adaptacyjnych układów, dają one o wiele większą kontrolę nad projektowaniem strony internetowej. Musisz zaprojektować tylko dla określonych rzutni, a przeglądarki wyświetlają tylko te najwyższe, które będą pasować do jego szerokości. Te układy są tymi, które "przyciągają" podczas dostosowywania podczas zmiany rozmiaru okna przeglądarki. W rzeczywistości, jeśli zmienisz rozmiar okna do mniejszego niż 1024 piksele, zobaczysz tę nagłą zmianę, o której mówię, ponieważ układ tej strony dostosowuje się, aby skupić się na rzutni o średniej rozdzielczości.
Projektując adaptacyjne podejście do rozwoju, praca jest dość łatwa. Zanim responsive webdesign stał się czymś, po prostu zaprojektowałeś jeden układ, a następnie go opracowałeś. Teraz zaprojektujesz dla wielu rzutni i opracujesz je. Zasadniczo łatwiej jest zacząć od rzutni o niskiej rozdzielczości i pracować szybciej. Jeśli zaczniesz od rzutni o wysokiej rozdzielczości i zejdziesz na dół, może się to skończyć trochę ... kompaktowo. A do czasu, gdy osiągniesz telefon komórkowy, zagracone.
Liczba zaprojektowanych rzutni zależy wyłącznie od Ciebie i programisty, opracuj plan bitwy oparty na użytkownikach. Jeśli bieżąca analityka witryny pokazuje użytkownikom głównie przy użyciu rzutni o niskiej i średniej rozdzielczości, zaplanuj dla nich. Potrzebujesz co najmniej trzech: jednego dla rzutni o niskiej rozdzielczości (smartfony), o średniej rozdzielczości (tablety) i jednego dla rzutni o wysokiej rozdzielczości (komputery stacjonarne i laptopy). W idealnym przypadku planowanie na sześć jest standardem, mając układ o wysokiej i niskiej rozdzielczości dla każdego z trzech wymienionych powyżej widoków. Jednak posiadanie zbyt dużej ilości zbyt wiele sprawi, że rozwój i konserwacja staną się zbyt duże, więc bądź ostrożny.
Opracowanie adaptacyjnego układu jest również całkiem proste. Zakładając, że pracowałeś z projektantem (lub projektantem) od samego początku, to tak, jakbyś tworzył tradycyjną stronę internetową. Zaczniesz od stworzenia witryny w mobilnym oknie o niskiej rozdzielczości. Gdy to zrobisz, użyjemy zapytań o media, aby rozwinąć układ dla rzutni o wyższej rozdzielczości. Poniżej znajdują się zapytania o media w rzutni o niskiej, średniej i wysokiej rozdzielczości:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }To właśnie tu pojawia się "przyciąganie" w podejściu adaptacyjnym. Ponieważ celujemy w wiele typowych rozdzielczości rzutni, przejście od jednego do drugiego podczas zmiany rozmiaru okna może spowodować przeskok układu. Jak wspomniałem wcześniej, projektowanie i rozwój adaptacyjny jest bardzo przydatny w przypadku modernizacji lub złożonych aplikacji internetowych. Projektowanie i tworzenie dla wielu układów niezależnych rzutni jest znacznie bardziej kłopotliwe, jeśli nie jest potrzebne.
Na dzień dzisiejszy elastyczne projektowanie i rozwój to de facto podejście do użytkowania. Chociaż oferuje mniejszą kontrolę nad układem w porównaniu z podejściem adaptacyjnym, znacznie mniej pracy wymaga wdrożenie i utrzymanie, ponieważ technicznie posiadasz tylko jeden układ. Jest również bardziej dostosowany do strony internetowej i jest to kluczowy punkt sprzedaży. Będziesz mógł tworzyć własne punkty przerwania w zależności od tego, kiedy projekt się zepsuje lub nie będzie wyglądał tak, jak zamierzałeś.
Responsywne układy obejmują również układy płynów. Przed przyjęciem responsywnego webdesignu popularne były systemy płynów - układy używające procentów dla szerokości. Podczas gdy w większości przypadków działały dobrze, było tak, zanim mieliśmy smartfony i tablety. Teraz najbardziej płynne układy są rozszerzane o zapytania o media w bardzo niskich i bardzo wysokich rozdzielczościach. W przeciwnym razie możesz otrzymać bardzo kompaktowe lub niezmiernie duże układy.
Chociaż masz bardzo prosty przewodnik do naśladowania z adaptacyjną konstrukcją, responsywny design nie jest tak wyraźny. Istnieje gorąca debata, że projektowanie w przeglądarce to najlepszy sposób, aby to osiągnąć - projektowanie i rozwój w tym samym czasie. Ponieważ zasadniczo planujesz wziąć pod uwagę wszystkie rzutnie, podczas projektowania jest więcej pracy. Idealnie, chcemy zachować wzierniki na uwadze, ale nie projektować żadnego konkretnego. Jeśli to możliwe, spróbuj spotkać się na średnim podłożu; Skoncentruj się na rzutniach o średniej rozdzielczości, pamiętając, że układ będzie musiał później dostosować się do niższych i wyższych rozdzielczości.
Niezwykle ważne jest korzystanie z istniejących analiz użytkowników, jeśli je masz. Jeśli Twoja witryna zawiera już analizy pokazujące, że Twoi odbiorcy czytają głównie o niskiej rozdzielczości, zaprojektuj z naciskiem na te. Kieruj reklamy na swoich odbiorców , nawet jeśli oznacza to ignorowanie niektórych najlepszych praktyk. W końcu Twoja strona będzie je obsługiwała, a nie ludzie gromadzący te "najlepsze" praktyki.
Po zakończeniu fazy projektowania rozwój zaczyna się tam, gdzie zaczyna się prawdziwa zabawa. Jak już wcześniej wspomniano, jeśli masz dane analityczne dotyczące typowych odbiorców, zacznij od tego. Po opracowaniu układu użyjesz zapytań o media, aby dostosować go do swoich potrzeb. Zamiast definiowania ustawionych rzutni, zamiast tego ręcznie zmień rozmiar przeglądarki, aż do zerwania układu. Kiedy tak się dzieje, to jest twoja szerokość punktu przerwania - dodaj zapytanie o media, aby naprawić projekt przerwy i kontynuuj na zmianie rozmiaru. Najlepiej, jeśli robisz to z urządzenia o wysokiej rozdzielczości, dzięki czemu możesz zobaczyć wszystkie rzutnie. Po upewnieniu się, że masz obsługę rzutni o niskiej i wysokiej rozdzielczości, przejdź do testowania.
Rzadko możesz napotkać stronę internetową, która używa niestandardowego rozwiązania, takiego jak {$lang_domain} . Ogólnie rzecz biorąc, większość sieci należy do grup reagujących lub adaptacyjnych, jak opisano powyżej, ale czasami ludzie stają się kreatywni i tworzą własne rozwiązanie. {$lang_domain} robi to zaczynając od standardowych niskich, średnich i wysokich punktów przerwania, a następnie uzupełniając w razie potrzeby pomiędzy nimi, gdy układ się zepsuje. Ponadto układ ma również charakter płynny do ustawionej maksymalnej rozdzielczości. Mając to na uwadze, stań się kreatywny i stwórz coś, co łamie normę!
Niestety, naprawdę nie ma dobrego rozwiązania dla przeglądarki testującej te układy. Najlepszym sposobem na testowanie jest zrobienie tego ręcznie: ładowanie strony na telefonie, tablecie, laptopie i wszystkim innym w pobliżu. Możesz także użyć przeglądarki panoramicznej w przeglądarce, jeśli obsługuje ona takie rozszerzenie. Emulator ripulacji jest rozszerzeniem używanym w chrome do testowania niektórych rzutni o niskiej rozdzielczości. Chociaż ręczne testowanie urządzeń na pewno jest niewygodne, daje to dokładniejszy obraz funkcjonalności witryny. Interfejs użytkownika, który wygląda dobrze na emulatorze, może faktycznie działać dość słabo na rzeczywistym urządzeniu.
Tak obszerny, jak ten artykuł, jest to po prostu elementarz na temat typów układów. Istnieje wiele informacji na temat responsywnych metod projektowania stron internetowych, które nie zostały uwzględnione w tym artykule; Optymalizacja elementów interfejsu użytkownika i typografii, responsywnych obrazów i multimediów, współczynników pikseli urządzeń i wielu innych nie została tutaj wyjaśniona. Istnieje jednak wiele źródeł takiej wiedzy, w znacznie bardziej zwartych formach informacji. Ponieważ pojawił się pomysł responsywnego tworzenia stron internetowych, przyczyniliśmy się do niezmiernie dużego bogactwa wiedzy na ten temat. Mam nadzieję, że wyjaśniając różnicę między typami układu, będziesz w stanie lepiej poradzić sobie z ideą responsywnej strony internetowej ... bez zagubienia króliczej nory.
Społeczność nieustannie tworzy nowe techniki i konstruuje twórcze rozwiązania problemów, z którymi dopiero zaczynamy się spotykać. Tak więc, chociaż istnieje wiele dostępnych informacji na temat responsywnego webdesignu, jest to pojęcie jeszcze w powijakach. Chociaż najlepsze praktyki i typowe przypadki użycia są łatwe do dostosowania, zachęcamy do bycia kreatywnym i układania własnego rozwiązania. Jeśli masz jakieś wskazówki lub sugestie dla tych z nas, którzy dopiero wchodzą, lub poszerzając naszą wiedzę na temat responsywnego tworzenia stron internetowych i rozwoju, rozpal dyskusję poniżej!
Wyróżniony obraz / miniatura, używa obraz responsywny przez Shutterstock.