30 Przydatne samouczki dotyczące responsywnego projektowania stron internetowych
Dotarliśmy do końca naszego „Tydzień Responsive Web Design”, dzisiejszy post będzie ostatnim z serii. Robimy wszystko, aby pomóc Ci doskonalić umiejętności manipulowania tymi kodami, aby odpowiadać na nie, gdy są wyświetlane na różnych urządzeniach. Aby to zrobić, prezentujemy 30 Responsive Web Design Tutorials znalezione online. Ta lista nie ma być wyczerpująca, ale pozwoli Ci zrozumieć podstawy projektowania adaptacyjnej strony internetowej, która zaspokoi wszystkie rodzaje rozmiarów ekranu.
Zaczniemy od wstępnych samouczków w „Breaking the Ice”, czymś w rodzaju klasy RWD: 101, w której powinieneś uczestniczyć, aby poznać koncepcję, zanim przejdziemy do ćwiczeń „Start Building”.
Na koniec zakończymy sekcją „Do More”, w której przedstawimy samouczki, które będą bawić się układami poziomymi, „elastycznymi” filmami, rozwijanymi menu i nawigacjami z akordeonem, miniaturami i kleistym problemem z tabelami.
Ale najpierw…
Oto podsumowanie dwóch tutoriali, które zostały przedstawione na początku tego tygodnia przez naszych autorów:
Responsywna nawigacja w witrynie
Przez Thoriq Firdaus - [Zobacz samouczek]
Oto samouczek, który pomoże Ci stworzyć własną, responsywną nawigację po stronie. Jednym z najważniejszych aspektów strony internetowej jest łatwość poruszania się po różnych częściach witryny. Dowiedz się, jak zoptymalizować to za pomocą CSS3 za pomocą tego samouczka.
Responsive Resume
Jake Rocheleau - [Zobacz samouczek]
Jeśli jesteś profesjonalistą internetowym, a życiorys internetowy jest już nieodłączną częścią Twojej kariery, powinieneś skorzystać z okazji, aby włączyć go ponownie. Ułatw pracodawcom i klientom znalezienie Cię na dowolnym urządzeniu. A kiedy jesteś na tym, twoje własne CV może stanowić portfolio tego, co możesz zrobić jako programista.
Przełamywać lody
Gdzie byliśmy? Ach tak, zacznijmy od przełamania lodu!
Przewodnik dla początkujących na temat responsywnego projektowania stron internetowych
Nick Petit - [Zobacz samouczek]
Ten samouczek jest doskonałym punktem wyjścia dla początkujących, ponieważ opisuje, co oznacza projektowanie responsywne w sieci, jak wyszło na jaw, a także wyjaśnienia dotyczące sieci płynów i zapytań o media. Sprawdź także zasoby wymienione na dole samouczka.
Wprowadzenie do Responsive Web Design: Wideo
Nick Petit - [Zobacz samouczek]
Jest to tutorial trwający prawie 9 minut, który prześwietla powierzchnię tego, co dotyczy responsywnego projektowania stron internetowych, jak powstał, jaki ma wpływ na projektowanie strony internetowej i jakie elementy są zaangażowane w tworzenie responsywnego projektu internetowego . Jeśli chcesz zrozumieć, na czym polega responsywne projektowanie stron internetowych, nie rozpoczynając od kodowania, powinieneś zacząć od tego filmu.
Jak zamienić dowolną witrynę w stronę responsywną
Przez Rochester Oliveira - [Zobacz samouczek]
Jest to kolejny samouczek, który zaczyna się od podstaw, ale wszystko zrywa po kawałku, w tym system operacyjny i przeglądarki, na które reagujesz, a także elementy, na które wpływa przeglądanie strony z różnych urządzeń. Autor przedstawił także kilka przydatnych wtyczek WordPress i jQuery, aby ułatwić pracę.
Elastyczne projektowanie w 3 krokach
Nick La - [Zobacz samouczek]
Ten samouczek wyjaśni, w jaki sposób można stworzyć responsywny projekt internetowy z metatagami, strukturą HTML i najważniejszymi zapytaniami o media. Potrzebujesz wiedzy o CSS, aby to zrozumieć…
Projektowanie dla elastycznej sieci
Autor: Max Luzuriaga - [Zobacz samouczek]
Oto artykuł, który nie jest samouczkiem, ponieważ jest przewodnikiem do tworzenia responsywnego projektowania stron internetowych. Powiedziawszy to, autor dosłownie mówi ci nakazy i nakazy responsywnego projektowania stron internetowych. Istnieją wyjaśnienia, dlaczego niektóre funkcje nie są wystarczająco elastyczne, jak pracować z proporcjami i modułami, a co najważniejsze, są stosunkowo krótkie i łatwe do wchłonięcia.
Responsive Web Design: Przewodnik wizualny
Andrew Gormley - [Zobacz samouczek]
Jeśli samouczki wypełnione tekstem nie są opłacalne, spróbuj tego samouczka wideo. Nadal jest dość techniczny, ale jeśli sprawi, że poczujesz się lepiej, nie musisz dużo czytać. To trwa około 25 minut, a twórca filmów naprawdę szybko przegląda części, w których koduje, a następnie powraca, aby wyjaśnić, co robią kody.
Rozpocznij budowę
Dobra, zacznijmy budować niektóre responsywne projekty, zaczynając od…
Płynne siatki
Autor: Ethan Marcotte - [Zobacz samouczek]
Powiedz siatkę, a pomyślisz „sztywne struktury”, powiedzmy płyn, i pomyślisz, że może płynąć z jednej strony ekranu na dół lub na górę lub na bok, kiedy wywierasz nacisk na przeglądarkę, ale połóż te dwie rzeczy razem i prawdopodobnie pomyślisz, że musisz przyjrzeć się temu samouczkowi, aby w pełni docenić, w jaki sposób siatki płynów mogą pomóc w poprawie reakcji twojego projektu.
Obrazy płynów
Autor: Ethan Marcotte - [Zobacz samouczek]
Pod koniec tego artykułu powinieneś wiedzieć, kim jest Ethan Marcotte. Oto wskazówka: to on wymyślił koncepcję i termin dla projektów responsywnych w sieci. Jego imię pojawi się w każdym innym tutorialu na tej liście, więc czemu nie poradzić się płynnych obrazów prosto od samego Mistrza?.
Skalowalne wzorce nawigacji w responsywnym projektowaniu stron internetowych
Michael Mesker - [Zobacz samouczek]
Ten samouczek mówi o lekcjach, których autor nauczył się podczas pracy nad projektem responsywnego projektowania stron internetowych na dużą skalę. Przeczytaj jego „przewodnik” na temat tworzenia szablonów, które są łatwiejsze do skonfigurowania w celu uzyskania przyjaznych dla użytkownika i szybkich wyników. Doskonałe spojrzenie za kulisy w zrozumieniu, jak zaprojektować interfejsy w najlepszy sposób na widoki pulpitu, tabletu i urządzenia mobilnego.
Responsive Web Design z CSS3 Media Queries
Nick La - [Zobacz samouczek]
I kolejny świetny samouczek, dzięki któremu nauczysz się, jak zaprojektować szablon strony odpowiadającej na różne przeglądarki za pomocą HTML5 i CSS3. Jest to podejście krok po kroku i istnieją dema projektu strony internetowej przed i po wdrożeniu zapytań o media, aby lepiej docenić wpływ zapytań o media.
Efekty CSS: Kosmiczne obrazy do dopasowania wysokości tekstu
Z Zoe Mickley Gillenwater - [Zobacz samouczek]
W tym samouczku nauczysz się sztuczki polegającej na tym, że obrazy o stałej szerokości zmieniają swój rozmiar i odstępy, aby dopasować się do tekstu towarzyszącego, bez względu na zmianę rozmiaru okna przeglądarki.
Układy adaptacyjne z zapytaniami o media
Autor: Aaron Gustafson - [Zobacz samouczek]
Dowiedz się, jak używać adaptacyjnych lub elastycznych układów z zapytaniami o media CSS. Wystarczy wykonać ćwiczenie, aby nauczyć się dostosowywać projekt do widoku dwukolumnowego lub widoku jednokolumnowego, a także przygotować projekt na iPhone'a i iPada.
Obrazy responsywne: eksperymentowanie z dopasowywaniem obrazu do kontekstu
Autor: Scott Jehl - [Zobacz samouczek]
Oto samouczek, w którym zastosowano podejście „zbuduj z telefonu komórkowego”. Ta technika określa większy rozmiar obrazów, aby można je było używać w większych rozdzielczościach ekranu, pomijając żądania obrazów oraz wąchania UA.
Rób więcej
Elastyczne filmy wideo
Nick La - [Zobacz samouczek]
Ten samouczek dotyczy skalowania wideo w miarę zmiany rozmiaru okna przeglądarki. Jest to w zasadzie sztuczka CSS i jest demo, aby zobaczyć tę sztuczkę w samouczku.
Ukrywanie i ujawnianie fragmentów obrazów
Z Zoe Mickley Gillenwater - [Zobacz samouczek]
Samouczek jest rzeczywiście zaczerpnięty z książki autora, opisującej, jak ujawnić lub ukryć części obrazów w zależności od rozdzielczości ekranu. Uczy Cię, jak dynamicznie przycinać obrazy, gdy zmienia się rozmiar ekranu, pokazując tylko część pełnego obrazu, gdy jest ograniczona przestrzeń.
Reaguj na Content Navigator za pomocą CSS3
Przez Mary Lou - [Zobacz samouczek]
Wolisz bardziej wyszukany sposób poruszania się po swojej stronie? Następnie powinieneś przeczytać ten samouczek, aby dowiedzieć się, jak kodować niektóre fajne przejścia: zanikanie, slajdy, obroty i zwiększanie skali. Przejścia są zasadniczo warstwami treści, które zostały pokazane lub ukryte z określonym kodowaniem.
Utwórz szablon Responsive Web Design
Przez Harry Atkins - [Zobacz samouczek]
Jest to krótki samouczek, aby stworzyć responsywny szablon internetowy to działa zarówno na pulpicie, jak i na iPhonie.
Elastyczny układ poziomy
Przez Mary Lou - [Zobacz samouczek]
Ten samouczek uczy, jak utworzyć układ poziomy z kilkoma przewijanymi panelami zawartości. Za pomocą Pochodzenie gatunków jako przykładowy tekst każdy rozdział książki jest rozdzielony kolumnami umieszczonymi obok siebie w trybie pełnej przeglądarki, ale po zmniejszeniu do wystarczająco małego układu zmienia się w całkowicie pionową „książkę” przewijania.
Konwertuj menu na rozwijane menu dla małych ekranów
Chris Coyier - [Zobacz samouczek]
Ten samouczek pokaże Ci, jak przekonwertować menu na listę rozwijaną, gdy okno przeglądarki jest wąskie lub gdy jesteś na urządzeniu mobilnym. Rząd linków w prawym górnym rogu strony zostanie przekształcony w menu rozwijane, aby zaoszczędzić miejsce bez poświęcania opcji nawigacji.
Elastyczny akordeon typu Slide-to-Top
Przez Mary Lou - [Zobacz samouczek]
Dowiedz się, jak stworzyć prosty i elastyczny układ akordeonu z przejściami przejścia i regulowanymi szerokościami w zależności od rozmiaru ekranu i rozdzielczości.
Jak korzystać z CSS3 Orientation Media Queries
Ryan Seddon - [Zobacz samouczek]
W oparciu o prostą regułę, która definiuje tryby portret (wysokość większa niż szerokość) i krajobraz (szerokość większa niż wysokość), można napisać zapytanie o media, aby kierować na określone style w oparciu o tryb, w którym jest wyświetlany. Ten samouczek pokaże nam, jak to zrobić, i jest wyposażony w link do zmieniającego kolor kameleona, który używa koloru do zademonstrowania tej zmiany podczas zmniejszania okna przeglądarki.
Tabele danych responsywnych
Chris Coyier - [Zobacz samouczek]
Tabele są źródłem bólu głowy, jeśli chodzi o małe rozmiary ekranu, ale to nie znaczy, że musimy całkowicie unikać tabel. Dowiedz się, jak korzystać z zapytań o media, aby całkowicie zmienić format tabeli po przełączeniu na rozmiary ekranu mobilnego. Obejrzyj prezentację, aby poznać magię, którą możesz stworzyć na podstawie tego samouczka.
Fluid CSS3 Pokaz slajdów z efektem paralaksy
Skrzydło - [Zobacz samouczek]
Utwórz pokaz slajdów CSS3, w którym używane są dwa obrazy tła i po zmianie pozycji tła widoczny jest efekt paralaksy. Poza tym pokaz slajdów jest elastyczny, zmieniając rozmiar, gdy okno przeglądarki zamyka się na nim.
Jak zbudować responsywną galerię miniatur
Joshua Johnson - [Zobacz samouczek]
Jest to idealne rozwiązanie dla witryn zawierających miniatury w galerii. Po zmianie rozmiaru przeglądarki układ zmienia się, aby zajmował między dwiema kolumnami (mniejsze rozmiary ekranu) i pięcioma (maksymalną) kolumnami. Aby uzyskać więcej podobnych pokazów slajdów i suwaków, zapoznaj się z naszym artykułem 10 najlepszych darmowych galerii obrazów responsywnych / pokazów slajdów.
Optymalizacja poczty e-mail dla urządzeń mobilnych
Przez Ros Hodgekiss - [Zobacz samouczek]
Nawet e-maile mogą być zoptymalizowane pod kątem wyświetlania na małym ekranie, tak jak strony internetowe. W większości przypadków tekst w wiadomości e-mail w formacie HTML jest zmieniany do punktu, który nie jest przeznaczony do wygodnego czytania; Dowiedz się, jak zarządzać tym i więcej z tego samouczka.
za pomocą frameworków
Zbuduj responsywną, przyjazną dla telefonu stronę internetową ze szkieletem
Joshua Johnson - [Zobacz samouczek]
Skeleton to świetny framework do budowania z nim responsywnych stron internetowych. Ten samouczek zawiera przewodnik krok po kroku, jak używać szkieletu Skeleton do tworzenia niesamowitych projektów responsywnych. Będziesz zaskoczony, widząc, jak łatwo jest wdrożyć.
Responsive Web Design z HTML5 & Less Framework 3
Autor: Louis Simoneau - [Zobacz samouczek]
Jeśli nie zostałeś poprawnie wprowadzony do Less, najpierw sprawdź nasz własny poradnik Mniej CSS, aby poznać smak Lessa. W tym samouczku ramka Less została użyta, aby wyraźnie zobaczyć efekty zapytań o media.
Wniosek
A to kończy nasze Responsive Web Design seria. Mamy nadzieję, że tematy, narzędzia i inne zasoby zawarte w tej serii pomogły naszym czytelnikom ukazać koncepcję responsywnego projektowania stron internetowych. Ale skąd mamy wiedzieć, jeśli nam nie powiesz?
Daj nam znać swoją opinię w serii i jeśli masz sugestie dotyczące kolejnych pomysłów, które chcesz zobaczyć na hongkiat.com. Napisz do nas lub komentarz poniżej.
