30 Уроци за полезен отзивчив уеб дизайн
Така стигнахме до края на нашето "Отзивчива седмица на уеб дизайна", тази вечер ще бъде последната от поредицата. Ще ви помогнем да усъвършенствате уменията си в манипулирането на тези кодове, за да отговаряте по желание, когато се показват на различни устройства. И за да направим това, ние представяме 30 Учебници за отговорен уеб дизайн намерени онлайн. Този списък не е предназначен да бъде изчерпателен, но ще ви помогне да започнете да разбирате основите на проектирането на адаптивен уебсайт, който ще се погрижи за всички видове размери на екрана.
Ще започнем с уводни уроци в "Breaking the Ice", нещо като клас RWD: 101, който трябва да посетите, за да получите представата за концепцията, преди да преминем към упражненията "Start Building"..
Накрая ще приключим с раздела „Направете повече“, в който ще се представят уроци, които се играят с хоризонтални оформления, „еластични“ видеоклипове, падащи менюта и плъзгащи се нагоре навигации, миниатюри и лепкав проблем с таблици.
Но първо…
Ето едно резюме на двете уроци, които бяха представени по-рано тази седмица от нашите автори:
Отзивчиви сайтове за навигация
От Торик Фирдаус - [Преглед на урок]
Ето един урок, който ще ви помогне да направите своя собствена отзивчива навигация в сайта. Един от най-важните аспекти на уебсайта е колко лесно е да се движите в различни части на сайта. Разберете как да оптимизирате това с CSS3 с този урок.
Отзивчиво възобновяване
От Джейк Роше - [Преглед на урок]
Ако сте уеб професионалист и онлайн автобиография вече е част от вашата кариера, тогава трябва да се възползвате от възможността да превърнете това възобновяване също така. Улеснявайте работодателите и клиентите да ви намерят на всяко устройство. И докато сте в него, вашето собствено резюме се удвоява като портфейл от това, което можете да направите като разработчик.
Разрушаване на леда
Сега, къде бяхме? Ах да, нека да започнем с разбиване на леда!
Ръководство за начинаещи за реагиращ уеб дизайн
От Ник Пети - [Преглед на урок]
Този урок е чудесна отправна точка за начинаещи, тъй като описва какво означава уеб реагиращ дизайн, как е излязъл на светло, както и обяснения за течни мрежи и медийни заявки. Вижте ресурсите, изброени в долната част на урока, както добре.
Въведение в отговорен уеб дизайн: видео
От Ник Пети - [Преглед на урок]
Това е урок, който е близо до 9 минути, който прелиства повърхността на отговорен уеб дизайн, как е станал, въздействието му върху дизайна на уеб сайта и какви елементи са включени в създаването на отзивчив уеб дизайн. , Ако искате да разберете какво е отговорен уеб дизайн, без първо да се заемате с кодиране, трябва да започнете с това видео.
Как да превърнете всеки сайт в отзивчив сайт
От Рочестър Оливейра - [Преглед на урок]
Това е още един урок, който започва от основите, но прекъсва всичко по малко, включително операционната система и браузърите, които препращате към вашия уебсайт, както и елементите, които са засегнати, когато уебсайтът се гледа от различни устройства. Авторът също така включва някои полезни WordPress и jQuery плъгини, които да ви помогнат да улесните работата си.
Отзивчиви проекти в 3 стъпки
От Ник Ла - [Преглед на урок]
Този урок ще ви обясни как можете да създадете отзивчив уеб дизайн с мета тагове, HTML структура и всички важни медийни запитвания. Трябва да знаете CSS, за да го разберете ...
Проектиране за отзивчива мрежа
От Макс Лузуриага - [Преглед на урок]
Ето една статия, която не е толкова урок, колкото е ръководство за създаване на отзивчив уеб дизайн. Въпреки това, авторът буквално ви казва как да направите това и какво не трябва да правите в уеб дизайна. Има обяснения защо някои характеристики не са достатъчно отзивчиви, как да работят с пропорции и модули, и най-доброто от всичко е, че е сравнително кратко и лесно да се абсорбират.
Отзивчиви уеб дизайн: Визуално ръководство
От Андрю Гормли - [Преглед на урок]
Ако напълнените с текст ръководства не са приложими опции, опитайте вместо това с този видеоурок. Все още е доста технически, но ако ви кара да се чувствате по-добре, не е нужно да правите много четене. Това е около 25 минути и видео-мейкърът всъщност бързо прелиства частите, където кодира, след това се връща, за да обясни какво правят кодовете.
Започнете сградата
Добре, нека започнем да изграждаме някои отзивчиви проекти, като започнем с…
Течни решетки
От Итън Маркот - [Преглед на урок]
Кажете решетката, и бихте си помислили, че "твърдите структури", казват флуид и бихте си помислили, че може да тече от едната страна на екрана на дъното или отгоре или отстрани, когато прилагате натиск върху браузъра, но поставите тези две заедно и вероятно ще мислите, че трябва да погледнете този урок, за да оцените напълно колко течни мрежи могат да помогнат да направите дизайна по-отзивчив.
Флуидни изображения
От Итън Маркот - [Преглед на урок]
До края на тази статия трябва да знаете кой е Итън Маркот. Ето един намек: той е този, който измисли концепцията и термина за уеб отзивчиви проекти. Неговото име ще се появи много във всеки друг урок в този списък, така че защо да не вземем съвети за течни изображения направо от самия Учител?.
Мащабируеми модели за навигация в отговорен уеб дизайн
От Майкъл Мескер - [Преглед на урок]
Този урок говори за уроците, които авторът е научил от работа по мащабен отзивчив уеб дизайн проект. Прочетете неговото „ръководство“ за това как да създавате шаблони, които са по-лесни за конфигуриране за лесни и отзивчиви резултати. Това е чудесен поглед зад кулисите в разбирането как да се проектират интерфейси по най-добрия начин за десктоп, таблет и мобилни изгледи.
Отзивчиви уеб дизайн с медийни заявки CSS3
От Ник Ла - [Преглед на урок]
И още един отличен урок, който ще ви накара да научите как да създадете шаблон за уебсайтове, отговарящи на различни браузъри, с HTML5 и CSS3. Подходът е стъпка по стъпка и има демонстрации на уеб дизайн преди и след въвеждането на медийните заявки, за да се оцени по-добре въздействието на медийните заявки.
CSS Ефекти: Космически изображения, за да съответстват на височината на текста
От Zoe Mickley Gillenwater - [Преглед на урок]
Този урок ви накара да научите трика да правите изображения с фиксирана ширина, за да промените техния размер и разстояние, за да се подредят с придружаващия текст, без значение как се променя размерът на прозореца на браузъра..
Адаптивни оформления с медийни заявки
От Аарон Густафсон - [Преглед на урок]
Научете как да използвате адаптивни или гъвкави оформления с CSS медийни заявки. Просто следвайте упражнението, за да се научите да адаптирате дизайна си към изгледа с две колони или един колона, както и да подготвите дизайна за iPhone и iPad.
Отзивчиви изображения: Експериментиране с оразмеряване на изображения, съобразено с контекста
От Скот Джел - [Преглед на урок]
Ето един урок, който използва подхода за изграждане от мобилния. Тази техника определя по-голям размер за изображенията, които да се използват при по-големи разделителни способности на екрана, минус заявки за изображения, както и надушване на UA.
Направи повече
Еластични видеоклипове
От Ник Ла - [Преглед на урок]
Този урок се занимава с мащабирането на видеоклипове при преоразмеряване на прозореца на браузъра. По същество това е трик за CSS и има демо, за да видите трика в работата си в самия урок.
Скриване и разкриване на части от изображения
От Zoe Mickley Gillenwater - [Преглед на урок]
Обучението всъщност е взето от книгата на автора, като описва как да разкрие или скрие части от изображения в зависимост от резолюциите на екрана. Той ви учи как динамично да изрязвате изображения, когато размерът на екрана се промени, показвайки ви само част от пълното изображение, когато има ограничено пространство.
Отзивчиви навигатор на съдържание с CSS3
От Мери Лу - [Преглед на урок]
Предпочитате един по-красив начин за потребителите да навигират около вас? След това трябва да прочетете този урок, за да научите как да кодирате в някои хладни преходи: избледняване, слайдове, завъртания и мащабиране. Преходите са съдържателни слоеве, които са показани или скрити със специфично кодиране.
Създайте шаблон за отговорен уеб дизайн
От Хари Аткинс - [Преглед на урок]
Това е кратък урок за създаване на отзивчив уеб шаблон който работи както на работния плот, така и на iPhone.
Отзивчиво хоризонтално оформление
От Мери Лу - [Преглед на урок]
Този урок ви учи как да създадете хоризонтално оформление с няколко панела със съдържание за превъртане. Използвайки Произход на видовете като примерен текст всяка глава от книгата е разделена на колони, поставени един до друг в режим на пълнофункционален браузър, но когато се свива до достатъчно малък, оформлението се променя на напълно вертикално превъртане „книга“.
Конвертиране на меню в падащо меню за малки екрани
От Крис Койер - [Преглед на урок]
Този урок ще ви покаже как да конвертирате меню в падащ списък, когато прозорецът на браузъра е тесен или когато сте на мобилно устройство. Редът от връзки в горния десен ъгъл на страницата се превръща в падащо меню, за да се спести място, без да се жертват опциите за навигация.
Гъвкава хармония с плъзгач до върха
От Мери Лу - [Преглед на урок]
Научете как да създадете просто и гъвкаво оформление на акордеон, с преливащи се преходи и регулируеми ширини на базата на размера на екрана и резолюциите.
Как да използваме медийните заявки за ориентиране на CSS3
От Райън Седън - [Преглед на урок]
Въз основа на простото правило, което определя режими за портрет (височина по-голяма от ширина) и пейзаж (ширина по-голяма от височина), можете да напишете медийна заявка, за да насочите конкретни стилове въз основа на режима, в който го виждате. Този урок ще ни покаже как да направим точно това и той е включен с връзка към хамелеон с променящ се цвят, който използва цвят, за да демонстрира тази промяна, когато свивате прозореца на браузъра..
Отзивчиви таблици с данни
От Крис Койер - [Преглед на урок]
Таблиците са източник на главоболия, когато става въпрос за малки размери на екрана, но това не означава, че трябва напълно да избягваме таблиците. Научете как да използвате медийните заявки, за да направите таблиците си напълно различни, когато превключите на размер на екрана за мобилни устройства. Разгледайте демото, за да получите представа за магията, която можете да направите въз основа на този урок.
Fluid CSS3 Слайдшоу с ефект на паралакс
По крилото на пръстена - [Преглед на урок]
Създайте слайдшоу CSS3, където се използват две фонови изображения и когато позициите на фона се променят, се наблюдава ефект на паралакс. Освен това, слайдшоуто е гъвкаво, преоразмерявайки се, когато прозорецът на браузъра се затвори в него.
Как да създадете отзивчива галерия с миниатюри
От Джошуа Джонсън - [Преглед на урок]
Това е чудесно за уебсайтове, които имат миниатюри в галерия. С преоразмеряването на прозореца на браузъра оформлението се променя между две колони (по-малки размери на екрана) и пет (максимум) колони. За повече подобни слайдшоута и плъзгачи, разгледайте нашата статия за 10-те безплатни отзивчиви галерии / слайдшоу.
Оптимизиране на имейла ви за мобилни устройства
От Рос Ходжкис - [Преглед на урок]
Дори имейлите могат да бъдат оптимизирани за изглед в малък екран, какви са уеб сайтовете. По-голямата част от времето текстът в HTML имейл се преоразмерява до точка, която не е създадена за удобно четене; научете как да управлявате това и повече от този урок.
използване на рамки
Създайте отзивчив мобилен сайт със скелет
От Джошуа Джонсън - [Преглед на урок]
Скелетът е страхотна рамка за изграждане на отзивчиви сайтове с нея. Този урок ще ви отведе в стъпка по стъпка ръководство за това как да използвате скелетната рамка за изграждане на страхотни отзивчиви проекти. Ще бъдете зашеметени, за да видите колко лесно е да се изпълни.
Отзивчиви уеб дизайн с HTML5 & Less Framework 3
От Луи Симоно - [Преглед на урок]
Ако не сте правилно въведени в Less, тогава проверете нашия собствен Less CSS урок първо, за да получите вкус на Less. В този урок рамката Less беше използвана, за да ви позволи да видите ясно ефектите от медийните заявки.
заключение
И това завършва нашето Отзивчиви уеб дизайн серия. Надяваме се, че темите, инструментите и другите ресурси, включени в тази серия, помогнаха на читателите да разкрият концепцията за отзивчив уеб дизайн. Но как ще знаем, ако не ни кажеш?
Споделете вашите отзиви в поредицата и ако имате предложения за повече идеи, които искате да видите на hongkiat.com. Оставете ни ред или коментар по-долу.
