Projektowanie responsywne (znane również jako projektowanie „adaptacyjne”), w którym ta sama strona prezentuje najlepszą wersję dwóch lub więcej ręcznie wykonanych układów w zależności od szerokości przeglądarki, jest najmocniejszą opcją dla większości stron internetowych. Aby zobaczyć, dlaczego warto przyjrzeć się wszystkim opcjom dostępnym dla projektantów stron internetowych:
Naprawiono układy
Stała szerokość strony, przy której szerokość treści jest taka sama niezależnie od szerokości przeglądarki, zapewnia jednolity wygląd i działanie na różnych urządzeniach i może wymagać mniej kodowania, myślenia i konserwacji niż bardziej elastyczne projekty.
Niektórzy uważają, że układy o stałej szerokości są reliktem minionej epoki, w której ludzie pragnęli doskonałości pikseli i jednolitego wyglądu we wszystkich przeglądarkach. Andy Clarke, autor Hardboiled Web Design, uważa, że ten sposób myślenia jest martwy:
„W przeszłości standardową praktyką była ciężka walka o stworzenie witryny, która wyglądałaby i działała tak samo we wszystkich przeglądarkach - bez względu na ich możliwości. W tym celu trzeba było iść na kompromisy i unikać korzystania z technologii nieobsługiwanych przez wszystkie przeglądarki.
Czy to jest na twardo?
Nie oszukuj się, słodkie policzki. To nie jest sposób na ewolucję naszego statku lub zbudowanie lepszej sieci. Ten rodzaj staromodnego myślenia nas powstrzymuje. Zmusza nas do szukania wymówek, aby nie robić tego, co wiemy, że jest słuszne. Najgorsze, co my, jako obecni opiekunowie sieci, możemy zrobić, aby pozwolić cokolwiek ograniczyć to, co jest możliwe ”.
- Andy Clarke, Hardboiled Web Design, s. 6 [edycja PDF dostępna tutaj ]
Chociaż niektórzy postrzegają stałe układy jako wysokość lenistwa, projekty o stałej szerokości są nadal wybierane przez bardzo inteligentne zespoły projektowe zamiast układów płynnych lub adaptacyjnych. Na przykład Apple obecnie obsługuje ten sam układ w komputerach iMac, co w przypadku iPadów i iPhone'ów. Dlaczego firma odpowiedzialna za masowe przeglądanie Internetu mobilnego nie optymalizuje witryny pod kątem urządzeń mobilnych?
Ponieważ to nie wydaje się konieczne.
Zamiast dostosowywać swoją stronę internetową do małych ekranów, Apple zbudował sprzęt i oprogramowanie, aby wygodnie obsługiwać szerokie witryny na tych ekranach. Apple uważa, że „zoptymalizowane pod kątem urządzeń mobilnych” najlepiej jest dostarczać w natywnej aplikacji, a nie w oknie przeglądarki. Dlatego oferuje aplikację Apple Store zamiast obsługiwać sklep internetowy zoptymalizowany pod kątem urządzeń mobilnych. I dlatego zachęca wydawców do oferowania aplikacji magazynowych zamiast dostosowanych stron internetowych. Obecna filozofia projektowania stron internetowych firmy Apple jest jasna: jeden układ do rządzenia nimi wszystkimi działa dobrze. Do wszystkiego innego służy aplikacja.
Tylko z tego powodu niektórzy twierdzą, że ustalone układy pozostają tak samo aktualne jak zawsze; powiedzieliby, że płynne i adaptacyjne układy to tylko luki, gdy czekamy na ulepszenie oprogramowania przeglądarki mobilnej, a HTML i JavaScript ewoluują i kuszą programistów od wyciszonych sklepów z aplikacjami.
Moim zdaniem jednak, szczypanie, stuknięcie, przeciąganie, przewijanie w Internecie przez dowolny czas na urządzeniu mobilnym wcale nie jest fajne, nawet na iPhonie. Jeśli uważasz, że najlepsze wrażenia internetowe to takie, które sprawiają, że czytanie, publikowanie i interakcja ze stronami internetowymi stają się przyjemnością, a nie obowiązkiem, niezależnie od używanego urządzenia, w pewnym momencie musisz przyznać, że serwowanie treści jest dostosowane do każdego odwiedzający jest warty rozważenia.
Płynne układy
Płynne układy, w których szerokość strony przepływa w celu wypełnienia ekranu (często aż do narzuconej maksymalnej szerokości), obiecują lepsze wrażenia na różnych platformach, dostarczając treść o szerokości bardziej dostosowanej do okienka ekranu.
W praktyce płynne układy powodują więcej problemów niż rozwiązują, jak zauważył Cameron Moll w tym quidzie:
„... płynne projekty rozwiązują każdy problem z układem w taki sam sposób, jak komputery czynią biura bez papieru, czyli nie”.
- Cameron Moll, „Czy wszystkie strony powinny być płynne?”, Wrzesień 2006 r
Przyjmując płynny układ, rezygnujesz z kontroli nad swoim projektem i akceptujesz, że tekst zostanie zawinięty, obrazy zostaną zalane, długości linii będą się nieprzewidywalnie różnić, tekst, obrazy i elementy nawigacyjne mogą zmiażdżyć się na małych szerokościach, a kolumny będą skakać i unosić się na powierzchni dookoła tylko na złość.
Płynny układ, jak niektórzy mogą powiedzieć, jest również leniwą opcją. Jest to strzelbowe podejście do adaptacyjnego projektowania stron internetowych. Zamiast oferować dostosowane do potrzeb wrażenia z trzema lub czterema starannie przemyślanymi projektami o stałej szerokości, oferujesz nieprzewidywalne wrażenia w nadziei, że może on działać na dużych i małych ekranach, i mam nadzieję, że zatniesz wszystkie luki, których nie w pełni wziąłeś pod uwagę pomiędzy.
To nie czyni bezużytecznymi układami płynów. Istnieją sposoby na to, aby działały. Na przykład blog 456 Berea St przyjmuje płynny układ do określonej szerokości, po czym używa ustalonego do wszystkiego większego. Przy naprawdę małych szerokościach pasek boczny znika, aby użyć pojedynczej kolumny, która ułatwia czytanie na małych ekranach. Ale to nie jest już płynny układ. To jest coś lepszego. Jest to responsywny projekt.
Elastyczne układy
„Responsywny” lub „adaptacyjny” układ - w którym ta sama strona internetowa przedstawia jedną wersję dwóch lub więcej spreparowanych układów w zależności od szerokości przeglądarki użytkownika - jest kluczowym elementem stopniowego ulepszania, którego celem jest poprawienie wyglądu strony internetowej może dla każdego odwiedzającego.
Zdaniem Aarona Gustafsona, autora Adaptive Web Design, wybór adaptacyjnego układu to „doskonała obsługa klienta” . Mówi, że jeśli dobrze zaprojektujemy nasze witryny, odwiedzający powinni mieć doskonale wykonane doświadczenia, nie zdając sobie sprawy, że robimy z nich zamieszanie:
„Jako projektanci stron internetowych i programiści powinniśmy starać się być tak dobrzy w swojej pracy, jak ten uprzejmy, dyskretny kelner, ale nie jest to proste zadanie. Podobnie jak kelner nie ma pojęcia, czy klient wchodzący przez drzwi będzie wymagał częstych uzupełnienia lub kilka, nie możemy w żaden sposób poznać potrzeb konkretnego użytkownika, gdy dotrze on na naszą stronę. Zamiast tego musimy powstać, aby zaspokoić te potrzeby. Jeśli jesteśmy naprawdę dobrzy, możemy to zrobić, nawet jeśli nasi klienci nie zdają sobie sprawy, że jesteśmy biorąc pod uwagę szczególne względy. Na szczęście dzięki stopniowemu ulepszaniu podejścia opartemu na użytkownikach i treści (w przeciwieństwie do podejścia polegającego na najnowszej przeglądarce z wdzięczną degradacją) jest to łatwe do osiągnięcia ”.
- Aaron Gustafson, Adaptive Web Design, str. 12 [edycja PDF dostępna tutaj ]
Uświadomienie sobie, że naszym zadaniem jako projektantów stron internetowych jest dostosowanie się do naszych gości, a nie zmuszanie ich do dostosowania się do nas - jak Apple może nam w to uwierzyć - jest dość nowym osiągnięciem w dziedzinie projektowania stron internetowych. Moim zdaniem jest to swego rodzaju renesans: skończyliśmy z wiśnią, wybierając dobre nawyki z lat projektowania grafiki. Teraz musimy wyrzucić kajdany narzucone przez pracę w określonym miejscu na wydrukowanej stronie.
Kiedy kiedyś traktowaliśmy przeglądarkę jako stałe płótno, teraz akceptujemy, że w ogóle nie ma zdefiniowanego płótna, a staje się to coraz wyraźniejsze z powodu ogromnej kombinacji rozmiarów ekranu, które bez wątpienia zaczynają być widoczne w statystykach użytkowników . Zamiast traktować każde nowe urządzenie jako unikalny „rozmiar strony”, który ma być celem (a następnie musieć zbierać żołnierzy, gdy pojawi się nowe urządzenie), możemy zastosować bardziej przyszłościowe konwencje.
Możemy myśleć w kategoriach pasm - „duży”, „średni” i „mały” - zamiast myśleć o konkretnych telefonach i tabletach, a następnie projektować witryny tak, aby wyglądały najlepiej w tych pasmach. Niezależnie od tego, jakie nowe urządzenia wyjdą, zmieszczą się w jednym lub drugim paśmie, a nawet jeśli są na granicy dwóch pasm, nadal mamy większą kontrolę nad doświadczeniem, niż gdybyśmy użyli stałego lub płynnego układ.
W responsive Web Design Ethan Marcotte oferuje to wezwanie do broni:
„Musimy odpuścić.
Zamiast tworzyć niepowiązane projekty, z których każdy jest dostosowany do konkretnego urządzenia lub przeglądarki, powinniśmy traktować je jako aspekty tego samego doświadczenia. Innymi słowy, możemy tworzyć witryny, które są nie tylko bardziej elastyczne, ale mogą dostosować się do mediów, które je renderują.
Krótko mówiąc, musimy przećwiczyć
responsywne projektowanie stron internetowych. Możemy skorzystać z elastyczności związanej z siecią, nie rezygnując z kontroli wymaganej przez nas jako projektantów. Wszystko przez osadzenie w naszej pracy technologii opartych na standardach i wprowadzenie niewielkiej zmiany w naszej filozofii projektowania online ”.
- Ethan Marcotte, Responsive Web Design, p8 [edycja PDF dostępna tutaj ]
Ale jakich zespołów używasz? Ethan Marcotte zaleca następujące trzy w zakresie elastycznego projektowania stron internetowych. (Aby dowiedzieć się, co robią i zrozumieć ostrzeżenia, możesz sięgnąć po książkę ).
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Istnieje również szereg frameworków CSS zaprojektowanych, aby pomóc w tworzeniu adaptacyjnych stron internetowych, w tym Less Framework Joni Korpi .
Zamiast używać dowolnych punktów przerwania, być może lepiej pozwolić, aby projekt Twojej witryny dyktował pasma. Zmniejsz szerokość ekranu przeglądarki i za każdym razem, gdy Twój projekt się zepsuje, ta szerokość powinna być jednym z „punktów przerwania”. Zmniejszaj szerokość i dodawaj punkty przerwania za pomocą zapytań o media CSS, aż twój projekt będzie wyglądał dobrze na wszystkich szerokościach. W ten sposób Twój projekt będzie wyglądał dobrze na wszystkich urządzeniach, a nie tylko na kilku rozmiarach ekranów, w których próbujesz go zaszufladkować. Jeśli używasz Chrome, włączenie Narzędzi dla programistów (Widok> Deweloper> Narzędzia dla programistów) i zmniejszenie szerokości przeglądarki zapewnia pomocny odczyt bieżącej szerokości w prawym górnym rogu, którego możesz użyć do ustalenia, gdzie powinny znajdować się punkty przerwania.
Innym popularnym podejściem do rozważenia jest responsywny projekt Mobile First , w którym główny arkusz stylów obsługuje style dla najmniejszych urządzeń, a zapytania o media dotyczą większych szerokości ekranu, a nie odwrotnie. Może to spowodować wyższą wydajność na urządzeniach mobilnych, szczególnie jeśli używasz wielu obrazów tła CSS. (Konstruujesz punkty przerwania w ten sam sposób - po prostu zacznij od szerokości przeglądarki na minimalnym poziomie i pracuj w górę. I nie zapomnij przetestować na tylu rzeczywistych urządzeniach, na ile możesz się dostać - rozważ wizytę na Otwartym urządzeniu Lab .)
Krótko mówiąc, gdy jest dobrze wykonany, projektowanie adaptacyjne jest przyjemnością, aby zobaczyć i doświadczyć zarówno jako projektant stron internetowych, jak i wspólny użytkownik ogrodu. Przejdź na stronę japońskiej firmy Information Architects , na przykład:
Na iPhonie
Na iPadzie
Na komputerze iMac
Tak jak przepowiedział Aaron Gustafson, nawet nie wiesz, że jesteś zaspokojony, dopóki nie zobaczysz wzorów na tej samej stronie.
Doświadczenie nie może być przyjemniejsze w każdym przypadku; nie musisz myśleć ani wchodzić w interakcję ze stroną, aby zacząć czytać zawartość, spędzać czas na zastanawianiu się, dlaczego wygląda ona dziwnie na ekranie, lub powiększać, aby zobaczyć elementy nawigacyjne przed ich dotknięciem, ponieważ ktoś już rozwiązał te problemy ty. I że dlatego reaguje konstrukcja niemal zawsze przebija inne opcje.
Płynny układ jest najłatwiejszy do stworzenia i utrzymania. Następnie możesz również użyć mobilnego arkusza stylów, aby „naprawić” wszelkie problemy, które mogą wystąpić na bardzo małych urządzeniach.
źródło
Użyłbym dwóch arkuszy stylów.
Ten, który jest elastyczny, aby pasował do większości zwykłych użytkowników komputerów stacjonarnych.
Kolejny na urządzenia mobilne.
źródło
Obecnie zalecanym najlepszym podejściem jest użycie tak zwanego „responsive web design”, w którym musisz zaspokoić różne urządzenia i rozmiar / rozdzielczość ekranu za pomocą jednego podejścia.
Świetny artykuł opisujący, jak i dlaczego responsive web design można znaleźć na stronie http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and- zasoby/
źródło
To zależy, jak styl wpływa na Twój projekt. Istnieje wiele czynników, wymagań klientów i treści stron trzecich, które ograniczają elastyczność pod względem wielkości.
Jeśli możesz zbudować witrynę, która wygląda dobrze i jest wysoce użyteczna dla wszystkich użytkowników, która skaluje się do dowolnego rozmiaru, to świetnie, zrób to!
Kolejną opcją jest styl o minimalnej szerokości podyktowany niektórymi elementami, takimi jak menu pionowe, pomoc nawigacyjna itp., I zmiana rozmiaru głównej kolumny zawartości w celu wypełnienia pozostałej dostępnej przestrzeni. Jednak nie zawsze jest to łatwe w zależności od niektórych treści (banery reklamowe, widżety, wideo itp.).
Większość witryn kończy się układem wspólnego mianownika o stałej szerokości. Uwaga: NIE powiedziałem najniższego wspólnego mianownika . Jeśli spojrzysz na statystyki, własne lub te z w3schools , zauważysz, że 85,1% ludzi ma ekrany o szerokości większej niż 1024 piksele, a 98,9% ludzi ma szerokość co najmniej 1024 pikseli. Pomyśl o łatwości implementacji układu o szerokości 1024 pikseli i wymaganym wysiłku, aby 1,1% więcej osób nie musiało przewijać w poziomie, a zobaczysz, dlaczego jest to niezwykle powszechny wybór w projektowanych witrynach internetowych.
Oczywiście, weź pod uwagę odbiorców, może nie pasować do odwiedzających w3schools. Możesz także celowo odseparować więcej odwiedzających, jeśli nie odpowiadają twoim potrzebom. Stuck In Customs został zaprojektowany bardzo szeroko, ponieważ celem są osoby zainteresowane grafiką i fotografią, które działają głównie na dużych wyświetlaczach. To sprawia, że doświadczenie jest dla nich znacznie odważniejsze.
źródło