Zawartość
- Projektowanie dla nieznanego
- Pragmatyczne podejście do projektowania
- Staje się agnostykiem układu
- Kodowanie progresywne
- Zanurzanie się w marżę
Wygląda na to, że w dzisiejszych czasach wszyscy mówią o responsywnym projektowaniu stron internetowych i nie bez powodu; Ponieważ liczba urządzeń z dostępem do internetu stale rośnie - każde z innymi możliwościami i funkcjami - tworzenie witryn o stałej szerokości nie jest już rozsądne.
Prawda jest taka, że nigdy tak nie było. Jednak do tej pory za najlepszą praktykę uważano projektowanie doświadczeń, które przyjmowały szereg założeń, czy to w odniesieniu do rozdzielczości ekranu, przepustowości czy metody wprowadzania danych. Jeśli kiedykolwiek zaprojektowałeś witrynę internetową o szerokości 960 pikseli, tylko po to, by przeglądać ją na małym netbooku znajomego (i tak, piszę tutaj na podstawie bolesnych doświadczeń), zrozumiesz, dlaczego nie było to szczególnie sprytne podejście. Teraz, gdy w grę wchodzą smartfony i tablety, staje się jasne, że nasze tradycyjne metody nie są już odpowiednie.
Na szczęście pojawienie się zapytań o media CSS i rosnące uznanie, że internet jest medium samym w sobie, oznacza, że zaczynamy rozumieć prawdziwą naturę platformy, akceptując, że jej uniwersalność jest mocną, a nie słabą stroną.
W ciągu następnych pięciu dni poprowadzę Cię przez technikę, która rozpoznaje ten fakt: responsywne projektowanie stron internetowych. Opracowany przez Ethana Marcotte'a, łączy w sobie płynne układy, elastyczne obrazy i zapytania o media, aby pomóc nam tworzyć witryny, które z wdziękiem dostosowują się do każdego napotkanego środowiska.
Zademonstruję to podejście, pokazując, jak zbudować prostą galerię multimediów. W moich przykładach utworzę małą witrynę internetową, aby udokumentować niedawną podróż po Stanach Zjednoczonych, ale możesz dostosować kod i projekt do własnych potrzeb.
Projektowanie dla nieznanego
Znaczna część tego samouczka będzie koncentrować się na aspekcie projektowania responsywnego. Zanim jednak zagłębimy się w jakikolwiek kod, zastanówmy się przez chwilę, jak zaprojektować witrynę internetową, która mogłaby mieć nieskończone układy.
Teraz mam szczęście, że mogę projektować interfejsy i opracuj kod frontendowy, który sprawi, że będą prawdziwe. Nie jest to oczywiście wyjątkowa umiejętność - jeśli pracujesz dla siebie, prawdopodobnie jesteś taki sam. Ale z pewnością dobrze jest zrozumieć, w jaki sposób treść może się dostosowywać i zmieniać jej przepływ podczas tworzenia płynnych projektów.
Pracuję również jako część większego zespołu, w którym moja rola jest bardziej wyspecjalizowana. W takim środowisku projektant wizualny może skupić się wyłącznie na tłumaczeniu wireframe'ów na atrakcyjne, angażujące (podpisane, perfekcyjne w pikselach) kompozycje. Nierzadko zdarza się, że programiści znajdują się oddzielnie, co przekłada te układy na oszczędne i wydajne znaczniki oraz CSS.
Jednak takie liniowe i oddzielne przepływy pracy szybko się psują, gdy zaczniemy oceniać, w jaki sposób projekty dostosują się do różnych środowisk. Podobnie jak w przypadku każdego nowego narzędzia lub technologii, powinniśmy również rozważyć bardziej oparte na współpracy i zwinne sposoby pracy. Wiele najtrudniejszych problemów napotkanych podczas projektowania responsywnych witryn internetowych można rozwiązać po prostu poprzez rozmowę, eksperymenty i iteracje.
Pragmatyczne podejście do projektowania
Nie oznacza to, że projektanci nie mogą myśleć o tym, jak projekt może działać poza ograniczeniami konkretnego urządzenia.
W Clearleft projekt wizualny inicjujemy z perspektywy pulpitu. Zaczynamy od zdefiniowania nadrzędnego języka projektowania i estetyki wizualnej, często opierając wstępne poszukiwania na podstawowym elemencie treści. Na przykład, jeśli projektujemy witrynę z jedzeniem, zaczniemy od strony z przepisami; w przypadku witryny z wiadomościami - stronę z historią.
Jest to nie tylko ważna strona w serwisie, ale prawdopodobnie zawiera wystarczająco ustrukturyzowaną treść, abyśmy mogli stworzyć paletę typograficzną. Zastanowimy się również, jak układ może się dostosować - nawet jeśli na tym etapie jest to tylko z tyłu głowy.
Jednym z przydatnych sposobów testowania projektu w warunkach skrajnych jest pobranie takiej strony i dostosowanie jej do węższego (~ 320 pikseli szerokości) ekranu. Prawdopodobnie odkryjesz, że niektóre aspekty projektu będą wymagały ponownego przemyślenia, aby działały na tej szerokości. Oto kilka przykładów:
- Typografia: Duże nagłówki mogą dobrze działać na szerszych układach, ale na mniejszych ekranach mogą zajmować dużo miejsca w pionie i dlatego wymagają dodatkowego przewijania. Ponieważ zmieniają się długości linii, należy wziąć pod uwagę wysokość linii i inne zabiegi typograficzne.
- Spinki do mankietów: Jak będzie wyglądał Twój projekt na urządzeniach z ekranem dotykowym? Chociaż nie mamy jeszcze łatwego sposobu, aby je wykryć (co oznacza, że powinniśmy wziąć pod uwagę wszystkie aspekty naszego projektu), projektowanie dla węższego ekranu może dać nam możliwość zastanowienia się nad obszarami docelowymi dla linków i innych elementów interaktywnych . Wytyczne iOS zalecają, aby były to co najmniej 44 piksele / punkty kwadratowe, co jest dobrym wynikiem.
- Nawigacja: Będzie to prawdopodobnie najbardziej niewygodny element każdego responsywnego projektu, zwłaszcza jeśli Twoja witryna ma wiele sekcji i głęboką hierarchię. Brad Frost napisał podsumowanie różnych rozważanych obecnie podejść do nawigacji.
- Zbędna zawartość: Czy jakieś treści nie są wymagane? Czy inne treści muszą być wyświetlane tylko w określonych scenariuszach? Nie opowiadam się za ukrywaniem treści na podstawie urządzenia, z którego korzysta użytkownik, ale techniki takie jak ładowanie warunkowe (którym zajmiemy się w dalszej części tygodnia) mogą pomóc nam wyświetlać mniejsze strony, które w razie potrzeby ładują treści uzupełniające.
Zaprojektowanie dwóch kontrastujących układów wzmacnia ideę, że projekt dostosuje się, jednocześnie eliminując potencjalne problemy na wczesnym etapie. Chociaż brzmi to jak podwojenie pracy, pamiętaj, że nie projektujemy każdej strony z precyzją co do piksela. Zamiast tego skupiamy się na budowaniu skalowalnego języka projektowania - takiego, który będzie ewoluował, gdy zaczniemy wdrażać go w kodzie, i takiego, który będzie oparty na pojedynczych modułach i komponentach.
Staje się agnostykiem układu
Nic dziwnego, że w branży, która od dawna traktowała sieć jak druk, układy o stałej szerokości przeniknęły wiele produktów, które produkujemy. Rozpoczynając projektowanie pod kątem adaptowalnego medium, rozważane są nowe podejścia, które pozwolą nam rozwiązywać problemy i przekazywać pomysły, jednocześnie uznając płynną naturę medium. Oto kilka moich ulubionych:
- Diagramy opisów stron: Podczas gdy modele szkieletowe mogą często sugerować układ (a tym samym przyjmować określony typ urządzenia), diagramy opisu strony usuwają to założenie i zamiast tego opisują poszczególne komponenty uporządkowane w dokumencie pod względem priorytetu.
- Styl płytek: Przekazując klientom pomysły projektowe, możemy znaleźć się na przedstawieniu „obrazów stron internetowych”. Jeśli nie będziemy ostrożni, klienci słusznie poproszą o obejrzenie koncepcji, które pokazują, jak projekt będzie wyglądał również na innych urządzeniach. Może to zmusić nas do niezrównoważonej sytuacji polegającej na tworzeniu wielu stron dla wielu urządzeń. Samantha Warren przemyślała ten problem i wymyśliła stylowe kafelki. Znajdują się one gdzieś pomiędzy tablicą nastrojów (ale mniej niejasnymi) a w pełni zrealizowanymi kompozycjami (ale mniej precyzyjnymi) i pomagają nam komunikować typografię, style przycisków i traktowanie tytułów. Zachęcają również do bardziej dojrzałego poziomu dyskusji z naszymi klientami.
- Gra mobilizująca: To ćwiczenie może się bardzo dobrze sprawdzić podczas wspólnych warsztatów projektowych. W tym ćwiczeniu każdy zapisuje na karteczce Post-it elementy, które mogą pojawić się na określonej stronie. Są one następnie przyklejane do ściany w kolejności ich ważności, tak jakby pojawiały się linearyzowane na telefonie komórkowym. Wynik dyskusji może przynieść zaskakujące wnioski. Na przykład możesz zdać sobie sprawę, że nawigacja nie jest najważniejszym elementem strony. Może to prowadzić do projektu, w którym odsyłacz pomijania u góry strony prowadzi do nawigacji w stopce.
Oczywiście wciąż jest miejsce na narzędzia, z których już korzystamy, ale projektując witrynę w szerokim ujęciu, musimy pamiętać, że układ nie jest już znany.
Kodowanie progresywne
Na szczęście nie musimy się martwić o projekt wizualny w przykładzie, nad którym pracujemy, ponieważ ciężka praca została za nas wykonana! Zamiast tego możemy skoncentrować się na zakodowaniu naszego projektu w pełni responsywnej strony internetowej.
Jeszcze jedno, zanim zaczniemy. Należy pamiętać o podstawowej zasadzie medium, z którym pracujemy: uniwersalności. Oznacza to nie tylko budowanie pod kątem dzisiejszych urządzeń z obsługą sieci, ale także zapewnienie kompatybilności z tymi z wczoraj i jutro. John Allsopp opisał, dlaczego ta zasada ma znaczenie w swoim poście The Next 6 Billion:
„Kolejne sześć miliardów to dzieci na obszarach wiejskich w Indiach, Afryce i Chinach, gdzie dostęp do zasilania i sieci może być przerywany. To ktoś na Sumatrze przy dekadzie Wintela. To ludzie, którzy mówią setkami różnych języków, z dziesiątkami różnych systemy pisania. To ludzie, którzy jako pierwsi w swojej rodzinie potrafią czytać i pisać. To 20 procent ludzi na całym świecie, którzy nie potrafią czytać ani pisać.’
Możemy prześledzić nasze rozumienie sieci, patrząc na różne mody (z braku lepszego słowa), które zapanowały w naszym zawodzie: standardy sieciowe, dostępność, dyskretny JavaScript… wszystkie są wariantami tego samego tematu: stopniowego ulepszania. To samo dotyczy responsywnego projektowania witryn internetowych. Aby zbudować naprawdę responsywna strona internetowa polega na stworzeniu witryny, która jest nie tylko kompatybilna wstecz, ale także przyjazna dla przyszłości.
Zanurzanie się w marżę
Dobra, dość preambuły, czas otworzyć edytor tekstu.Nasz projektant dostarczył nam projekt zorientowany na komputer i był na tyle uprzejmy, aby podać przykłady tego, jak może to wyglądać również w węższym obszarze wyświetlania.
Kuszące może być kodowanie ich osobno, ale zamierzam zasugerować inne podejście. Umieszczając oddzielne komponenty - lub wzory - tworzące projekt na jednej stronie, możemy stworzyć portfolio wzorów. To pozwala nam tworzyć komponenty poza granicami dowolnego układu strony i daje nam coś, do czego możemy się później odwołać podczas testów regresji. Zobaczmy początkowe znaczniki na kilku różnych urządzeniach:
Zobacz nasze portfolio z zaznaczonymi wzorami
Cóż, niech mnie diabli - mamy już responsywną stronę internetową! Nasze treści dostosowują się do ograniczeń każdego urządzenia, czy to nowego, fantazyjnego iPada, czy wyrzuconego telefonu z funkcjami. Działa nawet w przeglądarce tekstowej, takiej jak Lynx.
Dzięki podstawowym zasadom uniwersalności sieć jest responsywny domyślnie. To świetnie, ale oznacza również, że wszystko, co od teraz zrobimy z kodem, może zagrozić tej natywnej zdolności adaptacji.
Jutro: Podejdziemy ostrożnie i zaczniemy stosować pierwszy aspekt projektowania responsywnego: typografię i płynne siatki.
