Wrażliwa Projektowanie stron internetowych


Original: http://alistapart.com/article/responsive-web-design

przez Ethan Marcotte

25 maja 2010

Kontroli, które projektanci wiedzą w postaci drukowanej, często pragną w środowisku WWW, jest po prostu funkcją ograniczenia drukowanej stronie. Należy przyjąć, że w internecie nie ma tych samych ograniczeń i projektowanie dla tej elastyczności. Ale najpierw musimy “zaakceptować przypływy i odpływy rzeczy.”

John Allsopp  Dao of Web Design

Angielski architekt Christopher Wren zażartował kiedyś, że jego wybrane pole “dąży do wieczności”, i że jest coś pociągającego w tym wzorze: W przeciwieństwie do sieci, które często czuje się jak dążenie do przyszłego tygodnia, architektura jest dyscypliną bardzo określone przez jego trwałość. Budynku jest podstawą określa jego ślad, który określa jej ramkę, która kształtuje fasadę. Każdy etap procesu jest bardziej architektonicznej niezmienne, bardziej niezmienna, niż ostatnio. Kreatywne decyzje dosłownie kształtowania przestrzeni fizycznej, określające sposób, w jaki ludzie przejść przez swoje granice dziesięcioleci czy nawet wieków.

Praca w sieci jest jednak zupełnie inna sprawa. Nasza praca jest określony przez jego przemijania, często rafinowany lub wymienić w ciągu roku lub dwóch. Szerokości okien, niespójne rozdzielczości ekranu, preferencje użytkownika i użytkownik odwiedzający zainstalowane czcionki są, ale kilka niematerialnych negocjujemy, kiedy opublikujemy naszą pracę, i na przestrzeni lat, staliśmy się bardzo biegły w ten sposób.

krajobraz przesuwa się, być może szybciej niż może nam się podobać. Mobilny dostęp do internetu ma wyprzedzić dostęp oparty na pulpit ciągu trzy <a rok . Dwa z trzech konsol do gier wideo mają dominujących przeglądarek internetowych (i href=”http://www.nintendo.com/consumer/systems/wii/en_na/channelsInternet.jsp”> <a jeden z nich jest dość doskonałe). Jesteśmy projektowania dla myszy i klawiatury, na T9 klawiatur, na przenośnych kontrolerami gier dla interfejsów dotykowych. Krótko mówiąc, mamy do czynienia z większą liczbą urządzeń, trybów wejściowych i przeglądarkami niż kiedykolwiek wcześniej.

W ostatnich latach byłem spotkanie z większej liczby przedsiębiorstw, które wymagają “iPhone strony” w ramach projektu. To ciekawe zdanie: Na wartości nominalnej, oczywiście, że mówi do jakości Komórka oprogramowania WebKit w przeglądarce, a także potężny analizy biznesowej myślenia poza pulpit. Ale jako projektantów, myślę, że często podejmują komfort w takich wyraźnych wymagań, ponieważ pozwalają nam compartmentalize problemów przed nami. Możemy kwarantanny mobile doświadczenie na oddzielne subdomen , obowiązuje odrębny i niezależny od “strony nie iPhone.” Ale co dalej? IPad stronie? N90 stronie? Czy naprawdę możemy nadal zobowiązują się do wspierania każdego nowego agenta użytkownika z własnego doświadczenia zamówienie? W pewnym momencie, to zaczyna czuć się grą o sumie zerowej. Ale jak my i nasze projekty-przystosować?

Elastyczny fundament

Rozważmy np. projektowanie . Zbudowałem prostą stronę dla hipotetycznego magazynu, jest to prosta dwukolumnowy układ zbudowany na siatki płynu , z nie kilku  zdjęć elastycznych z pieprzem w całym. Jako wieloletni zwolennik układów niestacjonarnych, mam długi, że były bardziej “przyszłościowe”, po prostu dlatego, że były agnostyk układ. I do pewnego stopnia, to prawda: elastyczne konstrukcje sprawiają żadnych założeń o szerokości okna przeglądarki, a dostosowanie pięknie do urządzeń, które mają portret i tryby krajobrazu

Ogromne obrazy są ogromne. Nasz układ, elastyczne choć jest, nie reaguje na zmiany rozdzielczości lub rozmiaru rzutni.

Ale nie design, stałe lub płynne, wagi bezproblemowo poza kontekst, w jakim zostały pierwotnie przeznaczone. a np. projektowanie Wagi doskonale także zmianę rozmiaru okna przeglądarki, ale stres punkty szybko pojawiają się w niższych rozdzielczościach. Patrząc na rzutni mniejszej niż 800 × 600, rysunek za logo szybko staje się przycięcia, tekst nawigacji można zawijać w nieprzyzwoity sposób, a obrazy po dnie stają się zbyt zwarta, aby pojawić się czytelne. I to nie jest tylko dolny koniec spektrum rozdzielczości, które jest dotknięte: podczas przeglądania projektu na szerokoekranowym wyświetlaczu, obrazy szybko urosnąć do nieporęcznych rozmiarów, wypierania kontekst otaczający.

Krótko mówiąc, nasza elastyczna konstrukcja działa na tyle dobrze, na desktop-centric kontekście, dla których zostały zaprojektowane, ale nie jest zoptymalizowane do sięgają daleko poza to.

Becoming reaguje

Ostatnio wschodzących nazywa dyscyplina ” reaguje architektura ” rozpoczął pytaniem, jak fizyczne przestrzenie mogą odpowiedzi na obecność osób przechodzących przez nich. Poprzez połączenie wbudowanych robotyki i materiałów na rozciąganie, architekci eksperymentują z instalacji a sztuki i Konstrukcje ścienne , które bend, flex, i rozszerzenia jak tłumy nich zbliżyć. Czujniki ruchu mogą być połączone z systemami klimatyzacji, aby dostosować temperaturę pomieszczenia i oświetlenia otoczenia, jak wypełnia się ludźmi. Firmy już produkowane inteligentnych technologii szkła”, która automatycznie staje się nieprzezroczysty , gdy pokój jest okupanci osiągnąć pewien próg gęstości, co daje im dodatkową warstwę prywatności.

w książce Architektury Interactive , Michael Fox i Miles Kemp opisano to bardziej adaptacyjne podejście jako “wielokrotnego pętli system, w którym jeden wchodzi w rozmowie; ciągły i konstruktywną wymianę informacji . “moje podkreślenie, ponieważ myślę, że jest subtelna, ale potężny rozróżnienie:. zamiast tworzenia niezmienne, niezmienne obowiązuje, które określają szczególne doświadczenie, sugerują mieszkańca i struktury mogą i powinni-wzajemnie wpływają na siebie

To nasza droga. Zamiast krawiectwo odłączone wzorów do każdego z coraz większej liczby urządzeń internetowych, możemy traktować je jako aspekty tego samego doświadczenia. Możemy zaprojektować dla optymalnego oglądania, ale osadzić opartych na standardach technologii do naszych projektów, aby były nie tylko bardziej elastyczne, ale dostosowuje się do mediów, które czyni je. Krótko mówiąc, musimy ćwiczyć reagującego projektowanie stron internetowych . Ale w jaki sposób?

Poznaj kwerendy mediów

Od czasów CSS 2.1 , nasze arkusze stylów cieszą pewien stopień świadomości urządzenia poprzez rodzaje materiałów . Jeśli kiedykolwiek napisana href=”http://www.alistapart.com/articles/goingtoprint/”> <a arkusz stylów wydruku , jesteś już zaznajomiony z koncepcją:

 
 

W nadziei, że bylibyśmy projektowania więcej niż ładnie sformatowanych wydruków stron, stylów CSS specyfikacja dostarczyła nam grono dopuszczalne typy mediów , każdy przeznaczony do ukierunkowana na konkretną klasę urządzenia web-ready. Ale nigdy większość przeglądarek i urządzeń naprawdę przyjęli ducha specyfikacji, pozostawiając wielu mediów realizowane niedoskonale lub całkowicie ignorowane.

szczęście, W3C utworzone mediów pytania jako część CSS3 specyfikacja, poprawa na obietnicy typów nośników. Query mediów pozwala nam kierować się nie tylko pewne klasy urządzeń, a faktycznie sprawdzić właściwości fizyczne urządzenia, które czynią naszą pracę. Na przykład, po niedawnym wzroście telefonu WebKit, pytania mediów stał się popularny po stronie klienta technika dostarczania dostosowanego arkusza stylów do iPhone, telefony z systemem Android, i im podobni. Aby to zrobić, możemy włączyć kwerendę w link Arkusz stylów Eda mediów atrybut:

   

zapytanie zawiera dwa składniki:

  1. typ nośnika ( ekranu ), a
  2. rzeczywistego zapytania ujęty w nawiasy, zawierający określoną funkcję nośnika ( max-device-width ), aby sprawdzić, a następnie wartości docelowej ( 480px ).

W prostym języku angielskim, pytamy urządzenia, jeśli jego rozdzielczość pozioma ( max-device-width ) jest równa lub mniejsza niż 480px . Jeśli test zakończy się pomyślnie, innymi słowy, jeśli mamy przeglądania naszej pracy na urządzeniu małym ekranem, jak iPhone, a następnie urządzenie załaduje shetland.css . W przeciwnym razie, związek jest całkowicie ignorowane.

Projektanci

​​eksperymentowali z układami rozdzielczość-świadomych w przeszłości, głównie opierając się na JS rozwiązań takich jak oparte na Cameron Adams ‘. Ale specyfikacja zapytania mediów zapewnia href=”http://www.w3.org/TR/css3-mediaqueries/#media1″> <a szereg funkcji multimedialnych , która wykracza daleko poza rozdzielczością ekranu, znacznie rozszerzającą Zakres tego, co możemy sprawdzić na nasze pytania. Co więcej, można przetestować wiele wartości nieruchomości w jednym zapytaniu przez łańcuchowych je razem z oraz Hasło:

   

więcej, nie jesteś ograniczony do włączenia mediów zapytań w naszym linku s. Możemy włączyć je do naszej CSS albo jako część @ mediów zasada:

  @ mediów ekran i (max-device-width: 480px) {
  . Column {
    float: none;
  }
} 

albo jako część @ importu dyrektywa:

  @ import url ("shetland.css") ekran i (max-device-width: 480px) 

Ale w każdym przypadku, efekt jest taki sam: Jeśli urządzenie przechodzi test przedstawianej przez naszego zapytania mediów, istotne stylów CSS stosuje się do naszej marży. Zapytania mediów są, krótko mówiąc, komentarzy warunkowych dla reszty z nas. Zamiast kierowania konkretnej wersji określonej przeglądarki, możemy chirurgicznie skorygować problemy w naszym układzie, jak skaluje poza wstępny, rozmiar idealny.

Adapt, odpowiada, i przezwyciężyć

Zwróćmy uwagę na obrazach u podstawy naszej stronie. W ich układ domyślny, istotne stylów CSS aktualnie wygląda tak:

 . rysunek {
  float: left;
  margin: 0 +3,317535545023696682% 1.5em 0 / * 21px / 633px * /
  width: +31,121642969984202211% / * 197px / 633px * /
} Li # f-Mycroft,
li # f-zima {
  margin-right: 0;
} 

mam pominąć szereg właściwości typograficznych skupić się na układ:. Każdy rysunek elementem jest wielkości mniej więcej w jednej trzeciej kolumnie zawierającej, z prawej margines wyzerowany dla dwa zdjęcia na koniec każdego wiersza ( li # f-Mycroft, li # f-zima ). I to działa dość dobrze, aż rzutnia jest albo znacznie mniejszy lub większy niż nasz oryginalny design. Z zapytaniami mediów, możemy zastosować rozkład specyficznych spotfixes, dostosowując nasze projekty, aby lepiej reagować na zmiany na wyświetlaczu.

Przede wszystkim, niech zlinearyzować naszą stronę po raz rzutnia spadnie poniżej pewnej uchwały próg-powiedzmy, 600px . Więc na dole arkusza stylów, stwórzmy nową @ mediów blok np. tak:

  @ media screen (max-width: 600px) {
  . Maszt,
  . Intro
  . Głównym,
  . Footer {
    float: none;
    width: auto;
  }
} 

Jeśli zobaczyć naszą zaktualizowaną stronę w nowoczesnej przeglądarce pulpitu i zmniejszyć rozmiar okna poniżej 600px , kwerenda media wyłączyć pływaków na projektowaniu głównych elementów, układanie każdy blok na szczycie siebie w obiegu dokumentów. Więc nasza zminiaturyzowany projekt zapowiada się ładnie, ale zdjęcia nadal nie dostosowała inteligentnie. Jeśli wprowadzimy kolejne zapytanie mediów, możemy zmienić ich układ odpowiednio:

  @ media screen (max-width: 400px) {
  . Postać,
  li # f-Mycroft {
    margin-right: +3,317535545023696682% / * 21px / 633px * /
    width: 48,341232227488151658% / * 306px / 633px * /
  } Li # f-Watson,
  li # f-Moriarty {
    margin-right: 0;
  }
} 

Nasze dane mogą responsively zmienić  układu w celu lepszego dopasowania mniejszych wyświetlaczy .

nie przeszkadza brzydkich procentowych, jesteśmy po prostu przeliczenie Szerokości siatki płynu w celu uwzględnienia nowo liniową układ. Krótko mówiąc, jesteśmy przejście z układu trzech kolumn z dwóch kolumn układ , gdy szerokość rzutni za spadnie poniżej 400px , co sprawia, że ​​zdjęcia bardziej widoczne.

Możemy rzeczywiście podjąć takie samo podejście do panoramicznych wyświetlaczy, too. Dla większych rozdzielczościach, możemy przyjąć sześć całej traktowanie naszych zdjęć, umieszczając je  w tym samym wiersz.

  @ mediów ekran i (min-width: 1300px) {
  . Postać,
  li # f-Mycroft {
    margin-right: +3,317535545023696682% / * 21px / 633px * /
    width: +13,902053712480252764% / * 88px / 633px * /
  }
} 

nasze obrazy działają pięknie  obu końcach spektrum rezolucji , optymalizacji ich układu na zmiany szerokości okna i rozdzielczości urządzenia podobne.

Określając szerszy min-width w nowej kwerendy mediów, może się przesuwać nasze obrazy do pojedynczy układ row .

Ale to tylko początek. Praca z zapytaniami mediów mamy zakorzenione w naszej stylów CSS , możemy zmienić wiele więcej niż umieszczenie kilku zdjęć: możemy wprowadzenie nowych, alternatywnych układów dostrojone do każdego zakresu rozdzielczości, być może czyni nawigację bardziej widoczne w panoramicznym widokiem, lub zmiany położenia go nad logo na mniejszych ekranach.

projektowaniu responsywność, możemy nie tylko zlinearyzować naszą treść na mniejszych urządzeniach, ale także optymalizacji prezentacji w wielu wyświetlaczy .

reaguje projekt nie ogranicza się do zmian układu. Zapytania mediów pozwala nam ćwiczyć niektóre niezwykle precyzyjne dostrojenie w nasze strony zmienią się: możemy zwiększyć obszar docelowy na linki do mniejszych ekranów, lepiej spełniający Fitts ‘Law na urządzeniach dotykowych; selektywnie pokazać lub ukryć elementy, które mogą wzbogacić strony w nawigacji, możemy nawet ćwiczyć reaguje nabieranie , aby stopniowo zmieniać rozmiar i prowadzącą z naszego tekstu, optymalizacji doświadczenie czytania na ekranie zapewniając go.

Kilka uwag technicznych

Należy zauważyć, że pytania mediów cieszyć niezwykle solidne poparcie wśród nowoczesnych przeglądarkach. Pulpit przeglądarek takich jak Safari 3 +, Google Chrome, Firefox 3.5 + oraz Opera 7 + wszystkie natywnie analizować pytania mediów, podobnie jak nowsze mobilnych przeglądarek takich jak Opera Mobile i telefon WebKit. Oczywiście starsze wersje tych przeglądarek desktopowych nie obsługiwać zapytania mediów. I choć Microsoft zobowiązał się do mediów wsparcia kwerenda w IE9 , Internet Explorer obecnie nie oferuje natywną realizacji.

Jednakże, jeśli jesteś zainteresowany w realizacji wsparcia starszego zapytań do przeglądarki mediów, jest JavaScript przyciemniane Silver Lining:

  • jQuery plugin od 2007 oferuje nieco ograniczone zapytania mediów wsparcie realizacji tylko min-width i max-width właściwości nośnika, gdy załączone do rozdzielenia łącza elementy.
  • Niedawno CSS3-mediaqueries.js został zwolniony, bibliotekę, która obiecuje “zrobić IE 5 +, Firefox 1 + i Safari 2 przejrzysty analizować, test, i zastosować CSS3 Media Pytania “, gdy poprzez @ mediów bloki. Choć bardzo release 1.0, ja osobiście uważam, że jest dość mocna, i mam zamiar oglądać swój rozwój.

Ale jeśli za pomocą JavaScript nie przemawia, to jest całkowicie zrozumiałe. Jednak, że wzmacnia argumenty na rzecz budowania układu szczycie href=”http://www.alistapart.com/articles/fluidgrids/”> <a siatki elastycznej , zapewniając swój projekt cieszy się pewną elastyczność w mediach query-blind przeglądarek i urządzeń.

rozwiązaniem

Również w Emisji № 306

Szybkie Testing and Dirty Remote User

przez Nate Bolt

Kratki Fluid, elastyczne obrazy i zapytań mediów są trzy składniki techniczne reagującego projektowanie stron internetowych, ale także wymaga innego sposobu myślenia. Zamiast kwarantanna nasze treści do rozproszonych, doświadczeń dla danego urządzenia można użyć kwerendy mediów stopniowo poprawić naszą pracę w ramach różnych kontekstach oglądalności. To nie znaczy, że nie ma uzasadnienia ekonomicznego dla osobnych stron dostosowanych do konkretnych urządzeń, na przykład, jeżeli cele użytkowników na witrynie komórkowej są bardziej ograniczony zakres niż jego odpowiednik, wówczas stacjonarnego obsługującego różne treści do każdego może być najlepszym podejście.

Ale to rodzaj myślenia projektu nie musi być naszym domyślnym. Teraz, bardziej niż kiedykolwiek, jesteśmy projektowania prac ma być oglądany wzdłuż gradientu różnych doświadczeń. Wrażliwa projektowanie stron internetowych oferuje nam drogę do przodu, w końcu pozwala nam “zaprojektować na przypływy i odpływy rzeczy.”

O autorze

Ethan Marcotte

Ethan Marcotte jest web designer i programista, który troszczy się głęboko o piękny design, kod elegancki i przecięcie dwóch. Z biegiem lat, Ethan cieszył pracy z takimi klientami jak: Sundance Film Festival, Stanford University, New York Magazine i The Today Show. Przysięga obficie  na Twitterze , a chcieliby być a unstoppable ninja robota , gdy dorośnie. Jego najnowsza książka Wrażliwa a Web Design .

Więcej w tym Autora