Elastyczne projektowanie: dlaczego robisz to źle

Elastyczne projektowanie nie jest modą, która powstała z powodu fajnej techniki CSS, jest odpowiedzią na problem. Zawsze pamiętaj o tym i stale zadawaj sobie pytanie, czy naprawdę odpowiednio rozwiązujesz ten problem. Jeśli używasz funkcji kopiuj i wklej do wstawiania punktów przerwania zapytania o media, Twoje rozwiązanie może być wadliwe.

Omówmy, dlaczego zapytania medialne istnieją i jak możemy je wykorzystać, aby naprawdę rozwiązać rozdźwięk wszechobecnej sieci. Porozmawiajmy o tym, dlaczego treść powinna określać punkty przerwania układu, a nie hipotetyczne rozmiary ekranu.

Ten artykuł jest częścią naszej serii „Spoglądanie poza projektowanie pulpitu”, przygotowanej we współpracy z Heart Internet VPS.

Idea zapytań o media

Aby poprawnie rozpocząć tę debatę, należy omówić, dlaczego zapytania medialne stały się tak popularne. Odpowiedź brzmi oczywiście, że „Responsive Design”, termin wymyślony przez Ethana Marcotte'a, to fantastyczny sposób na rozwiązanie stale rosnącego problemu dla projektantów stron internetowych.

Podczas gdy wszyscy narzekali na to, jak „mobilna sieć” ma wyprzedzić tradycyjną, rewolucja, która miała miejsce, była znacznie bardziej drastyczna: sieć stała się wszechobecna.

Ten „problem” jest świetny dla całego świata, ale stanowi dla nas prawdziwy ból głowy. W ciągu ostatniej dekady światowa sieć zmieniła się w coś nowego. Nie jest już związany ścianami, które wcześniej ustaliliśmy. Mówiłem to wcześniej, ale warto to powtórzyć. Podczas gdy wszyscy narzekali na to, jak „mobilna sieć” ma wyprzedzić tradycyjną, rewolucja, która miała miejsce, była znacznie bardziej drastyczna: sieć stała się wszechobecna.

W tej chwili nie mamy dostępu do sieci z jednego punktu. Nie zrezygnowaliśmy z naszych laptopów na rzecz smartfonów, jak przewidywali „eksperci”. Zamiast tego sieć jest wszędzie, gdzie jesteśmy. Nie tylko w naszych telefonach i komputerach, ale także w naszych tabletach, iPodach, systemach gier, telewizorach, a nawet samochodach.

Ten trend będzie się utrzymywał z biegiem czasu. Elastyczne projektowanie przenosi nas poza sezon tworzenia oddzielnych witryn mobilnych i do epoki, w której opracowujemy jedną witrynę, która ewoluuje i dostosowuje się do urządzenia, na którym jest wyświetlana. Korzystając z zapytań o media, możemy zaprezentować określony CSS dowolnej liczbie różnych rozmiarów rzutni i upewnić się, że każdy ma jak najlepsze wrażenia.

Problem z elastycznym projektowaniem

Powyższy rozdział nie jest półhistorycznym nakazem, który ma wypełnić przestrzeń, to ważne spojrzenie na cele, które ma osiągnąć responsywny projekt. Powstaje zatem pytanie, czy spełnia te cele? Czy responsywne projektowanie odpowiednio rozwiązuje problem wszechobecności?

Odpowiedź jest skomplikowana, co najwyżej mogę powiedzieć: „to zależy od tego, jak to robisz”. To mylące stwierdzenie, prawda? Elastyczne projektowanie jest proste: użyj zapytań o media, aby obsłużyć niestandardowy CSS w różnych rozmiarach rzutni. W ten sposób wszyscy podchodzą do tego, prawda? Jak więc może istnieć właściwy i zły sposób?

Złożoność pojawia się, gdy zaczynamy omawiać kluczową część tej techniki: jakich zapytań medialnych powinienem użyć? Lub inaczej: na które „punkty przerwania” powinienem kierować niestandardowy CSS? Obecna popularna odpowiedź zaczyna się od najlepszych urządzeń mobilnych: iPhone'a i iPada (komentuj gniewne komentarze użytkowników Androida). Z tych archetypów ustalamy tak zwane „ogólne” rozmiary smartfonów i tabletów. Następnie poruszamy się w górę i zajmujemy się laptopami i małymi komputerami stacjonarnymi, a na koniec dużymi ekranami. Standardowy zestaw zapytań o media, taki jak ten z CSS-Tricks, zazwyczaj ma dziewięć lub dziesięć wcześniej ustalonych punktów przerwania.

Co jeśli skoncentrujemy się na potrzebach konkretnego projektu zamiast hipotetycznego przypadku użycia urządzenia? Co jeśli zbudujemy układy, które po prostu działają wszędzie?

Szczerze mówiąc, ten system działa do pewnego stopnia. Wszyscy widzieliśmy wiele świetnych responsywnych stron zbudowanych przy użyciu zestawu podobnego do powyższego Coyiera. Nie mogę jednak nie myśleć, że to w jakiś sposób powtarza ten sam błąd, który popełniliśmy, projektując „witryny mobilne” kilka lat temu. Cała uwaga skupiona jest na urządzeniu przeglądającym witrynę. Zanim zbudujemy witrynę, musimy pamiętać o tych punktach przerwania.

Ale urządzenia się zmieniają. Ustaliliśmy już, że sieć jest podłączana do praktycznie wszystkiego za pomocą przełącznika zasilania, więc dlaczego po raz kolejny kładziemy tak duży nacisk na obecnie popularne rozmiary ekranów? Czy jest lepsza alternatywa? Co jeśli skoncentrujemy się na potrzebach konkretnego projektu zamiast hipotetycznego przypadku użycia urządzenia? Co jeśli zbudujemy układy, które po prostu działają wszędzie?

Responsywny projekt skoncentrowany na treści

Wyżej wymienione problemy z wcześniej ustalonymi zapytaniami medialnymi przyszło mi do głowy tylko wtedy, gdy sam zacząłem kopać i naprawdę zacząć reagować. Teoretycznie standardowe sugestie są świetne, ale gdy zastosujesz je do złożonego projektu, odkryjesz, że te punkty przerwania nie zawsze go obejmują. Problem, jak szybko odkryli projektanci Boston Globe, gdy strona została uruchomiona, polega na tym, że pojawiają się problemy „pomiędzy” (dla przypomnienia, ten projekt jest fantastyczny i wszelkie problemy z układem zostały w dużej mierze rozwiązane). Robi się bałagan, gdy projekt ma rozmiar, którego nie wziąłeś pod uwagę, a po fakcie musisz wejść i załatać dziury.

Mówię to jako zapalony fanboy Apple: przestań projektować strony internetowe dla iPhone'a.

Moje pytanie brzmi: dlaczego nie zaczniemy od tego? Zamiast wchodzić w projekt z zestawem urządzeń, a tym samym zapytaniami medialnymi, dlaczego nie pozwolimy projektowi zdecydować? Każdy układ strony ma punkt, w którym rozmiar przeglądarki zmniejsza jej integralność. Naszym zadaniem jako projektantów, w świetle problemu wszechobecności, jest znalezienie tego rozmiaru i uwzględnienie go, a następnie spienienie, spłukanie i powtarzanie, aż wszystkie słabe punkty zostaną uwzględnione.

Mówię to jako zapalony fanboy Apple: przestań projektować strony internetowe dla iPhone'a. Zamiast tego zaprojektuj stronę internetową, która zachowa swoją integralność, ponieważ jej rozmiar rzutni zostanie zredukowany do dowolnego możliwego stanu. Pamiętaj o określonych urządzeniach jako przewodniku dla swojego projektu (na przykład: mniejsze urządzenia zwykle są oparte na dotyku, więc powiększaj linki), ale nie zakładaj rolet i nie patrz na większy obraz: że twój projekt powinien wyglądać dobrze na każdym ekranie.

Nowy przepływ pracy

Jak więc wygląda przepływ pracy przy projektowaniu responsywnym? To prostsze niż myślisz. Oczywiście potrzebujesz pewnego rodzaju punktu wyjścia. Jeśli chcesz zacząć mobilnie i iść w górę, świetnie. Jeśli chcesz zacząć od dużego i zejść, również świetnie. Osobiście uważam, że bardzo trudno jest naprawdę zagłębić się w projekt i zrobić to dobrze, jeśli zaczynam na poziomie mobilnym, ale istnieje wiele solidnych argumentów przemawiających za zrobieniem tego w ten sposób.

Gdy postępujesz zgodnie z tym procesem, dzieje się coś magicznego.

Hipotetycznie załóżmy, że zacząłeś od dużej witryny o szerokości 1020 pikseli. Sprawdź to na największym ekranie, na który możesz się dostać i upewnij się, że wygląda świetnie. Teraz przeciągnij okno i zmniejszaj, aż projekt stanie się brzydki. Oto twój pierwszy punkt przerwania. Ustaw zapytanie o media dla tego punktu i napraw wszystko, co musisz rozwiązać. Gdy skończysz, chwyć to okno i znajdź kolejny punkt brzydoty. Powtarzaj te kroki, aż będziesz zadowolony z zakresu, który uwzględniłeś.

Ale co z iPadem? Co powiesz na Kindle Fire lub ostatnią próbę bycia istotną przez Samsunga? Gdy postępujesz zgodnie z tym procesem, dzieje się coś magicznego. Właśnie to zrobiłeś, aby układ wyglądał dobrze w prawie każdym rozmiarze. Jeśli zrobiłeś to dobrze, to po wyciągnięciu go na telefonie lub tablecie będzie wyglądać świetnie.

Tylko układ
Pamiętaj, że ta dyskusja dotyczy tylko współczynników układu. Absolutnie nie wychodzisz z funkcji testowania w różnych przeglądarkach i urządzeniach. Elastyczne projektowanie nie ma wpływu na fakt, że różne silniki przeglądarek inaczej interpretują HTML, CSS i JavaScript.

Wniosek

Podsumowując, zapytania medialne i responsywne projektowanie zapewniają nam niezwykle potężne narzędzie do uwzględnienia faktu, że strony są przeglądane na wszystkich rodzajach ekranów i rozmiarów okien. Jednak gdy zaczniemy ustalać nasze projekty na kilku urządzeniach, jesteśmy z powrotem tam, gdzie zaczęliśmy. Zamiast tego Twoim celem powinno być zbudowanie układu tak wszechstronnego, aby mógł obsłużyć niemal każdy rzutnik, jaki został na niego rzucony.

To wszystko jest fajne w teorii, ale gdzie jest przykład? Punktem wyjścia do tej dyskusji była moja ostatnia próba zbudowania responsywnej galerii obrazów. Zapoznaj się z tym artykułem, aby zobaczyć, jak wyglądałby przepływ pracy w trybie responsywnym zorientowanym na treść.