Zawartość
- Responsywne obrazy
- Występ
- Ładowanie warunkowe i leniwe
- Responsywna typografia
- Zapytania o media w JavaScript
- Progresywne ulepszanie
- Układ
- Układ siatki CSS
- Wreszcie
Responsywne projektowanie stron internetowych brzmi niesamowicie prosto. Wybierz elastyczne siatki dla układu, używaj elastycznych mediów (obrazów, wideo, ramek iframe) i stosuj zapytania o media, aby zaktualizować te pomiary, aby jak najlepiej rozmieścić zawartość w dowolnym widocznym obszarze. W praktyce nauczyliśmy się, że nie jest to takie łatwe. Drobne problemy, które pojawiają się podczas każdego projektu, powodują, że drapimy się po głowach, a czasami nawet wycinamy rowki po paznokciach na naszych biurkach.
Odkąd zacząłem być kuratorem biuletynu Responsive Design Weekly, miałem szczęście porozmawiać z wieloma członkami społeczności internetowej i poznać ich doświadczenia. Chciałem się dokładnie dowiedzieć, czego społeczność naprawdę chciała się nauczyć, więc rozesłałem ankietę do czytelników. Oto najlepsze wyniki:
- Responsywne obrazy
- Poprawa wydajności
- Responsywna typografia
- Zapytania o media w JavaScript
- Progresywne ulepszanie
- Układ
Pamiętając o tych tematach, przygotowałem serię podcastów, w których pytałem niektórych naszych liderów z branży o ich przemyślenia. W ich odpowiedziach jeden punkt był jednomyślny: skup się na opanowaniu podstaw, zanim zaczniesz martwić się ekscytującymi i zaawansowanymi technikami. Cofając się do podstaw, jesteśmy w stanie stworzyć niezawodny interfejs dla każdego, nakładając na siebie funkcje, gdy pozwala na to urządzenie lub kontekst użytkownika.
„Więc… co z tymi zaawansowanymi technikami?” - pytasz. Myślę, że Stephen Hay najlepiej podsumował to, kiedy powiedział: „Ostateczną techniką RWD jest rozpoczęcie od niestosowania żadnych zaawansowanych technik RWD. Zacznij od ustrukturyzowanych treści i rozwijaj się. Dodaj punkt przerwania tylko wtedy, gdy projekt się zepsuje i treść na to dyktuje i ... to wszystko. ”
W tym artykule zacznę od podstaw i dodam warstwy złożoności, jeśli pozwala na to sytuacja, aby przejść do tych zaawansowanych technik. Zacznijmy.
Responsywne obrazy
Media płynne były kluczową częścią RWD, kiedy po raz pierwszy zdefiniował je Ethan Marcotte. szerokość: 100%; , maksymalna szerokość: 100%; nadal działa, ale responsywny krajobraz obrazu stał się znacznie bardziej skomplikowany. Wraz ze wzrostem liczby rozmiarów ekranu, gęstości pikseli i obsługiwanych urządzeń pragniemy większej kontroli.
Trzy główne problemy zostały zdefiniowane przez Responsive Images Community Group (RICG):
- Rozmiar w kilobajtach obrazu, który przesyłamy przez kabel
- Fizyczny rozmiar obrazu, który wysyłamy na urządzenia o wysokim DPI
- Kadrowanie obrazu w formie kierunku graficznego dla określonego rozmiaru rzutni
Yoav Weiss, z pomocą Indiegogo, wykonał większość pracy nad implementacją Blink - rozwidleniem WebKit firmy Google. Zanim to przeczytasz, będzie on dostępny w przeglądarkach Chrome i Firefox. Safari 8 będzie dostarczać srcset, jednak atrybut size jest dostępny tylko w nocnych kompilacjach, a picture> nie jest jeszcze zaimplementowany.
Wraz z pojawieniem się czegoś nowego w naszym procesie tworzenia stron internetowych, rozpoczęcie może być trudne. Przeprowadźmy krok po kroku przez przykład.
img! - Zadeklaruj obraz zastępczy dla wszystkich przeglądarek nie obsługujących obrazów -> src = "horse-350.webp"! - Zadeklaruj wszystkie rozmiary obrazów w srcset. Uwzględnij szerokość obrazu, używając deskryptora w, aby poinformować przeglądarkę o szerokości każdego obrazu. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w „! - Rozmiary informują przeglądarkę o układzie naszej witryny. Tutaj mówimy, że dla każdego obszaru roboczego, który jest 64ems i większy, użyj obrazu, który zajmie 70% obszaru roboczego -> size = "(min-width: 64em) 70vw,! - Jeśli widok nie jest taki duży, to dla dowolnego obszaru roboczego, który jest 37,5ems i większy, użyj obrazu zajmującego 95% obszaru roboczego -> (min-width: 37,5em) 95vw,! - a jeśli widok jest mniejszy niż ten, użyj obraz zajmujący 100% obszaru roboczego -> 100vw "! - zawsze ma tekst alternatywny. -> alt =" Koń "/>
Z punktu widzenia wydajności nie ma znaczenia, czy użyjesz min-width czy max-width w atrybucie size - ale kolejność źródła ma znaczenie. Przeglądarka zawsze będzie używać pierwszego pasującego rozmiaru.
Pamiętaj też, że na stałe wpisujemy atrybut rozmiarów, który ma być bezpośrednio zdefiniowany w naszym projekcie. Może to powodować problemy z posuwaniem się naprzód. Na przykład, jeśli przeprojektujesz swoją witrynę, będziesz musiał ponownie odwiedzić wszystkie img> lub picture> s i ponownie zdefiniować rozmiary. Jeśli korzystasz z systemu CMS, możesz temu zaradzić w ramach procesu tworzenia.
WordPress ma już wtyczkę, która może pomóc. Definiuje srcset na standardowych odmianach obrazu WP i pozwala zadeklarować rozmiary w centralnej lokalizacji. Kiedy strona jest generowana z bazy danych, zamienia wszelkie wzmianki w img> i zastępuje je znacznikami obrazu.
Podstawowy
- Zastanów się, czy naprawdę musisz dołączyć obraz. Czy obraz jest główną treścią, czy dekoracyjną? Jeden obraz mniej oznacza szybsze ładowanie
- Zoptymalizuj obrazy, które musisz dołączyć, za pomocą ImageOptim
- Ustaw nagłówki wygaśnięcia dla obrazów na serwerze lub w pliku .htaccess (szczegóły w sekcji „Wydajność”)
- PictureFill zapewnia obsługę wypełniaczy polyfill dla obrazów
zaawansowane
- Leniwe ładowanie obrazów za pomocą wtyczki Lazy Load jQuery
- Użyj HTMLImageElement.Sizes i HTMLPictureElement do wykrywania funkcji.
- Zaawansowana wtyczka PictureFill WP, znaleziona na Github, pozwoli Ci zdefiniować niestandardowe wartości szerokości i rozmiarów obrazu
Występ
Aby uzyskać najszybszą postrzeganą wydajność na naszych stronach, potrzebujemy całego kodu HTML i CSS wymaganego do renderowania górnej części naszej strony w pierwszej odpowiedzi z serwera. Ta magiczna liczba wynosi 14 kb i jest oparta na maksymalnym rozmiarze okna przeciążenia w pierwszym czasie w obie strony (RTT).
Patrick Hamann, główny techniczny frontend w Guardian, i jego zespół zdołali przełamać barierę 1000 ms przy użyciu kombinacji technik frontendowych i backendowych. Podejście Guardiana polega na zapewnieniu, że wymagana treść - artykuł - zostanie dostarczona do użytkownika tak szybko, jak to możliwe, w ramach magicznej liczby 14kb.
Spójrzmy na ten proces:
- Użytkownik klika link Google do wiadomości
- Do bazy danych artykułu wysyłane jest pojedyncze żądanie zablokowania. Nie są wymagane żadne powiązane historie ani komentarze
- Wczytywany jest kod HTML zawierający krytyczny CSS
- w głowie>
- Wykonywany jest proces „Wytnij musztardę” i ładowane są wszelkie elementy warunkowe oparte na funkcjach urządzenia użytkownika
- Wszelkie treści związane z samym artykułem lub wspierające go (powiązane obrazy artykułów, komentarze do artykułów itp.) Są ładowane z opóźnieniem
Taka optymalizacja krytycznej ścieżki renderowania oznacza, że nagłówek ma> 222 linie. Jednak krytyczna zawartość, którą zobaczył użytkownik, nadal mieści się w początkowym ładunku 14 kb po skompresowaniu gzipem. To właśnie ten proces pomaga przełamać barierę renderowania 1000 ms.
Ładowanie warunkowe i leniwe
Ładowanie warunkowe poprawia wrażenia użytkownika na podstawie funkcji jego urządzenia. Narzędzia takie jak Modernizr umożliwiają testowanie tych funkcji, ale pamiętaj, że tylko dlatego, że przeglądarka twierdzi, że oferuje wsparcie, nie zawsze oznacza pełne wsparcie.
Jedną z technik jest wstrzymanie ładowania czegoś, dopóki użytkownik nie wykaże zamiaru użycia tej funkcji. Zostałoby to uznane za warunkowe. Możesz wstrzymać ładowanie ikon społecznościowych, dopóki użytkownik nie najedzie na ikony lub nie dotknie ich, lub możesz uniknąć ładowania iframe Google Map w mniejszych rzutniach, w których użytkownik prawdopodobnie wolałby połączyć się z dedykowaną aplikacją mapującą. Innym podejściem jest „pokroić musztardę” - szczegółowe informacje na ten temat znajdują się w ramce powyżej.
Leniwe ładowanie jest definiowane jako coś, co zawsze zamierzasz ładować na stronie - obrazy, które są częścią artykułu, komentarze lub inne powiązane artykuły - ale nie muszą tam być, aby użytkownik zaczął korzystać z treści.
Podstawowy
- Włącz gzipowanie plików i ustaw nagłówki wygaśnięcia dla całej zawartości statycznej (netm.ag/expire-260)
- Użyj wtyczki Lazy Load jQuery. Spowoduje to wczytanie obrazów podczas zbliżania się do rzutni lub po pewnym czasie
zaawansowane
- Skonfiguruj Fastly lub CloudFlare. Sieci dostarczania treści (CDN) dostarczają statyczną zawartość do użytkowników szybciej niż Twój własny serwer i mają kilka bezpłatnych warstw
- Włącz SPDY dla przeglądarek obsługujących protokół http2, aby korzystać z funkcji protokołu http2, takich jak równoległe żądania http
- Social Count umożliwia warunkowe ładowanie ikon społecznościowych
- Korzystanie ze Static Maps API pozwoli Ci na przełączenie interaktywnych map Google na obrazy. Spójrz na przykład Brada Frosta pod adresem netm.ag/static-260
- Ajax Include Pattern ładuje fragmenty treści z atrybutu data-before, data-after lub data-replace
Responsywna typografia
Typografia ma na celu ułatwienie przyswajania treści. Elastyczna typografia rozszerza to, aby zapewnić czytelność na wielu różnych urządzeniach i w wielu różnych widocznych obszarach. Jordan Moore przyznaje, że ten typ to jedyna rzecz, na którą nie chce się ruszyć. Upuść jeden lub dwa obrazy, jeśli potrzebujesz, ale upewnij się, że masz świetny typ.
Stephen Hay sugeruje ustawienie rozmiaru czcionki HTML na 100 procent (czytaj: po prostu zostaw to tak, jak jest), ponieważ każdy producent przeglądarki lub urządzenia ustawia rozsądnie czytelną wartość domyślną dla określonej rozdzielczości lub urządzenia. W przypadku większości przeglądarek na komputerze jest to 16 pikseli.
Z drugiej strony Moore używa jednostki REM i rozmiaru czcionki HTML, aby ustawić minimalny rozmiar czcionki dla niektórych elementów treści. Na przykład, jeśli chcesz, aby wiersz artykułu zawsze miał 14 pikseli, ustaw go jako podstawowy rozmiar czcionki w elemencie HTML i ustaw .byline {font-size: 1rem;}. Gdy skalujesz treść: rozmiar czcionki: aby dopasować go do rzutni, nie będziesz mieć wpływu na styl .by-line.
Ważna jest również dobra długość linii do czytania - staraj się mieć od 45 do 65 znaków. Istnieje bookmarklet, którego możesz użyć do sprawdzenia treści. Jeśli projekt obsługuje wiele języków, długość linii może się również różnić. Moore sugeruje użycie: lang (de) article {max-width: 30em}, aby rozwiązać wszelkie problemy.
Aby zachować rytm pionowy, ustaw margin-bottom względem bloków zawartości, ul>, ol>, blockquote>, table>, blockquote> i tak dalej, na taką samą, jak wysokość linii. Jeśli rytm zostanie przerwany wraz z wprowadzeniem obrazów, możesz to naprawić, dodając Baseline.js lub BaselineAlign.js.
Podstawowy
- Oprzyj swoją czcionkę na 100-procentowej treści
- Pracuj we względnych jednostkach em
- Ustaw marginesy na wysokość linii, aby zachować pionowy rytm w projekcie
zaawansowane
- Popraw wydajność ładowania czcionek dzięki Enhance.js lub odroczonemu ładowaniu czcionek
- Użyj Sass @includes dla nagłówków semantycznych.
- Często musimy użyć stylu h5 w widżecie paska bocznego, który wymaga znaczników h2. Użyj Bearded's Typographic Mixins, aby kontrolować rozmiar i pozostać semantycznym za pomocą poniższego kodu:
.sidebar h2 {@include header-5}
Zapytania o media w JavaScript
Odkąd byliśmy w stanie kontrolować układ w różnych widocznych obszarach za pomocą zapytań o media, szukaliśmy sposobu, aby powiązać to również z uruchomieniem naszego JavaScript. Istnieje kilka sposobów uruchamiania JavaScript na określonych szerokościach, wysokościach i orientacjach rzutni, a niektórzy sprytni ludzie napisali kilka łatwych w użyciu natywnych wtyczek JS, takich jak Enquire.js i Simple State Manager. Możesz nawet zbudować to samodzielnie, korzystając z matchMedia. Jednak występuje problem polegający na tym, że musisz zduplikować zapytania o media w CSS i JavaScript.
Aaron Gustafson ma fajną sztuczkę, która oznacza, że nie musisz zarządzać zapytaniami o media ani dopasowywać ich w swoim CSS i JS. Pomysł pierwotnie wyszedł od Jeremy'ego Keitha iw tym przykładzie Gustafson doprowadził go do pełnej realizacji.
Używając getActiveMQ (netm.ag/media-260), wstrzyknij div # getActiveMQ-watcher na końcu elementu body i ukryj go. Następnie w ramach CSS ustaw # getActiveMQ-watcher {font-family: break-0;} na pierwsze zapytanie o media, font-family: break-1; do drugiej, rodzina czcionek: przerwa-2; do trzeciego i tak dalej.
Skrypt używa funkcji watchResize () (netm.ag/resize-260), aby sprawdzić, czy rozmiar widoku zmienił się, a następnie odczytuje z powrotem aktywną rodzinę czcionek. Teraz możesz użyć tego do zaczepienia ulepszeń JS, takich jak dodanie interfejsu z zakładkami do dl>, gdy pozwala na to rzutnia, zmiana zachowania lightbox lub aktualizacja układu tabeli danych. Zapoznaj się z kodem getActiveMQ Codepen pod adresem netm.ag/active-260.
Podstawowy
- Zapomnij o JavaScript dla różnych rzutni. Udostępnianie treści i funkcji witryny internetowej użytkownikom w taki sposób, aby mogli uzyskać do nich dostęp we wszystkich rzutniach. Nigdy nie powinniśmy potrzebować JavaScript
zaawansowane
- Rozszerz metodę Gustafsona, używając Breakup jako predefiniowanej listy zapytań o media i automatyzując tworzenie listy rodzin czcionek dla getActiveMQ-watcher
Progresywne ulepszanie
Powszechnym błędnym przekonaniem na temat stopniowego ulepszania jest myślenie: „No cóż, nie mogę użyć tej nowej funkcji”, ale tak naprawdę jest odwrotnie. Stopniowe ulepszanie oznacza, że możesz udostępniać funkcję, jeśli jest obsługiwana tylko w jednej przeglądarce lub nawet w żadnej przeglądarce, a z czasem ludzie będą się lepiej czuć, gdy pojawią się nowe wersje.
Jeśli spojrzysz na podstawową funkcję dowolnej witryny internetowej, możesz dostarczyć ją jako HTML i zlecić stronie serwera wykonanie całego przetwarzania. Płatności, formularze, polubienia, udostępnianie, e-maile, dashboardy - to wszystko da się zrobić. Po zbudowaniu podstawowego zadania możemy nałożyć na to niesamowite technologie, ponieważ mamy siatkę bezpieczeństwa, aby złapać te, które wpadną. Większość zaawansowanych podejść, o których tutaj mówiliśmy, opiera się na stopniowym ulepszaniu.
Układ
Elastyczny układ jest łatwy do powiedzenia, ale ma wiele różnych podejść. Twórz proste układy siatki z mniejszą liczbą znaczników, używając selektora: nth-child ().
/ * zadeklaruj pierwszą mobilną szerokość siatki * / .grid-1-4 {float: left; szerokość: 100%; } / * Gdy rzutnia ma co najmniej 37,5em, ustaw siatkę na 50% na element * / @media (min-width: 37,5em) {.grid-1-4 {width: 50%; } / * Wyczyść float co drugi element PO pierwszym. Dotyczy to 3., 5., 7., 9. ... w siatce. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Usuń poprzedni wyczyść * / .grid-1-4: n-ty-typ (2n + 1) {wyczyść: brak; } / * Wyczyść float co czwarty element PO pierwszym. Dotyczy to 5., 9. ... w siatce. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Pożegnaj się z używaniem pozycji i pływaka w swoich układach. Chociaż do tej pory dobrze nam służyły, ich użycie do układu było koniecznym hackem. Mamy teraz dwoje nowych dzieci w bloku, które pomogą naprawić wszystkie nasze problemy z układem - Flexbox i Grids.
Flexbox świetnie sprawdza się w przypadku pojedynczych modułów, kontrolując układ treści w każdym z modułów. Istnieją układy, które staramy się dostarczyć, które można łatwiej osiągnąć za pomocą Flexbox, a jest to jeszcze bardziej prawdziwe w przypadku responsywnych witryn. Aby uzyskać więcej informacji, zapoznaj się z przewodnikiem CSS Tricks dotyczącym Flexbox lub Flexbox Polyfill.
Układ siatki CSS
Siatka jest bardziej dla układu na poziomie makro. Moduł układu siatki zapewnia doskonały sposób opisania układu w arkuszu CSS. Chociaż w tej chwili jest to jeszcze w wersji roboczej, polecam ten artykuł o układzie siatki CSS autorstwa Rachel Andrew.
Wreszcie
To tylko kilka wskazówek, które pozwolą Ci poszerzyć responsywność. Zbliżając się do nowej responsywnej pracy, cofnij się o krok i upewnij się, że dobrze znasz podstawy. Zacznij od treści, HTML i ulepszonych warstw, a nie będzie żadnych ograniczeń co do miejsca, w którym możesz zabrać swoje projekty.
Ten artykuł ukazał się pierwotnie w numerze 260 z magazyn sieciowy.
