Responsywne projektowanie stron internetowych stało się niemal powszechnym hasłem w sieci. Spróbuj wyszukać #rwd na Twitterze, aby znaleźć równe treści i spam na Twitterze. Jest to wspólna faza dojrzewania nowego pomysłu. Pamiętam, kiedy AJAX była wściekłością; termin został wbity w ziemię. Teraz niewiele osób mówi o AJAX, ale biblioteki takie jak jQuery są w pełni uwzględnione w przepływie pracy programisty.
Wydaje się to odzwierciedlać to, co dzieje się z responsywnym projektowaniem stron internetowych. Termin jest wszędzie. Moja przyjaciółka jest w magazynie czasopism, niedawno poszła na konferencję, a redaktor znanego nowego magazynu mówił o nadchodzących trendach i wspomniał o responsywnym projekcie strony internetowej. Redaktorzy mogą nie być specjalistami od sieci, ale znają te słowa.
Ponieważ responsywny projekt sieci zyskał popularność, sposób, w jaki budowaliśmy witryny, zmienił się. Ponieważ pojęcie to przechodzi od modnego hasła do wspólnej części każdego projektu związanego z projektowaniem stron internetowych, sposób, w jaki pracujemy jako profesjonaliści w sieci, musi się zmienić. Mając to na uwadze, musimy ustanowić nowe podstawowe zasady dotyczące naszej pracy.
Kiedy ktoś każe ci "sprawdzić tę responsywną stronę", co robisz w pierwszej kolejności? Prawdopodobnie przeskalujesz okno, aby zobaczyć, jak zmienia się układ. Prawdopodobnie nie otworzę go w telefonie i tablecie i nie zacznę zmieniać orientacji ani nie będę uruchamiać testów szybkości strony. Przeskalowuję przeglądarkę i ruszam z moim dniem. To jest nasze doświadczenie jako projektantów i programistów, ale nie jako użytkowników. Kiedy odwiedzam witrynę jako użytkownik, nie mam cierpliwości. Nie obchodzi mnie, czy strona ładnie się wygładzi; Chcę tylko tego, co chcę.
"Squishy" to liniowe skalowanie strony internetowej. Czy witryna zmienia się z chudego na gruby? Zamiast liniowego skalowania, responsywny projekt WWW powinien skupiać się na ustanawianiu rdzenia lokacji i stopniowym ładowaniu stamtąd, w oparciu o możliwości. Wyobraź sobie stronę, która musiała zostać zbudowana dla małego telefonu komórkowego z IE7 w sieci EDGE. To powinna być Twoja strona główna, a następnie skalować w zależności od rozmiaru ekranu i możliwości.
Responsywne projektowanie stron internetowych jest skomplikowane. Tak po prostu jest. Szkoda, że nie było czegoś, co mógłbym ci powiedzieć, żeby ci to ułatwić, ale nie ma. Większość ludzi zareagowała na responsywne projektowanie stron internetowych, dodając coś do swoich przepływów pracy, niezależnie od tego, czy jest to nowy produkt, czy po prostu idzie do programisty i pyta, czy jego projekt będzie działał w sposób responsywny.
Mam znajomego, który pracuje na responsywnej stronie dla klienta. Buduje witrynę w Photoshopie w rozmiarze pulpitu. Po kilku makietach na niektórych stronach chciała pokazać, jak strona będzie wyglądać na tablecie i smartfonie, więc też zrobiła te makiety. Po przedstawieniu klientowi otrzymała kilka twórczych poprawek. Istnieje około 50 plików PSD dla tej witryny w tym momencie. Jej korekta zajmuje jej kilka dni.
Próba samodzielnego dodania nowych projektów spowoduje czasochłonny i niespójny proces. Jednym z najlepszych sposobów rozwiązania tego problemu jest prototypowanie szkieletów i prezentacja ich klientowi. Daje to możliwość bezpośredniego przemawiania do układu strony bez jednoczesnego mówienia o projekcie. Fundacja ZURB to świetne narzędzie do szybkiego budowania prototypów.
Po prostu dodanie prototypów do obiegu pracy nie wystarczy. Aby odnieść sukces w tworzeniu witryn responsywnych, musisz dostosować, co prowadzi nas do kolejnej reguły.
Kiedy zaczynałem budować strony internetowe, użyłem dwóch narzędzi: Photoshop i GoLive. Teraz mam co najmniej sześć programów, których absolutnie potrzebuję, aby zbudować stronę. Nadal używam Photoshopa do tworzenia elementów graficznych, ale głównie projektuję w przeglądarce z Sublime Text 2 i używam narzędzi programistycznych Safari do inspekcji elementów na moim iOS 6. Używam również Codekit do kompilowania mojego wstępnie przetworzonego CSS i Terminalu do kontroli wersji w Git.
Responsywne projektowanie stron internetowych oznacza również zmianę sposobu projektowania. Zamiast układać całą stronę w Photoshopie, używam Samantha Warren's Style Tiles artykułować projekt wizualny. Projektując wizualną markę i elementy interfejsu witryny poza rzeczywistym układem, można bezpośrednio komunikować projekt i łączyć go z układem z prototypu, aby utworzyć responsywną stronę w przeglądarce.
Preprocesory CSS są również ogromną pomocą w każdym responsywnym przepływie pracy. Mówiąc prościej, preprocesory mogą być używane do rozplątania niektórych komplikacji związanych z budowaniem witryny i ułatwienia wielu powtórzeń odziedziczenia po pracy w CSS. Osobiście wolę SCSS, ale LESS jest lepszą alternatywą dla niektórych, ponieważ ma niższą barierę wejścia i ma lepszą dokumentację.
[Sieć] powinna być dostępna z dowolnego sprzętu, który może łączyć się z Internetem: stacjonarny lub mobilny, mały ekran lub duży. - Tim Berners-Lee
HTML i CSS są z natury responsywne. Od początku istnienia HTML sieć miała być na tyle elastyczna, aby pracować na dowolnym sprzęcie z połączeniem internetowym. Dopiero kiedy my, projektanci i programiści, ruszyliśmy w kierunku ustalonych układów, zmieniło się to. Próbując narzucić ustalone wymiary na stronach internetowych, ograniczyliśmy sieć do komputerów stacjonarnych.
Responsywna sieć to taka, która streszcza to, co masz do powiedzenia, od tego, jak to mówisz. Weźmy na przykład niedawne przejście NPR do modelu treści opartego na interfejsie API. Przechodząc do interfejsu API do udostępniania treści, NPR był w stanie zarządzać swoją kolekcją aplikacji i witryn w spójny sposób. Jedyną zmianą jest warstwa prezentacji.
Na tym powinna polegać sieć responsywna. Dowiedzieć się, co masz do powiedzenia, i pozwolić, żeby to, co mówisz, zostało przez nią napędzone. Projektowanie polega na zaspokajaniu potrzeb w sposób wizualnie przyjemny, ale także dostosowany do potrzeb użytkownika.
O to właśnie chodzi w responsywnej sieci, o strony tworzące dla użytkowników, które działają dla osób, które ich używają, jednak mają dostęp do treści. Tworzenie witryn, które mogą same się refaktoryzować na małe ekrany to dopiero początek.
Czy zaakceptowałeś już responsywny projekt strony? Jakie zasady dotyczące elastycznego projektowania chciałbyś dodać? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, rozmiar obrazu przez Shutterstock.