30 Корисні відгуки Підручники з веб-дизайну
Отже, ми дійшли до кінця "Чуйний тиждень веб-дизайну", Сьогоднішній пост стане останнім із серії. Ми намагаємося допомогти вам удосконалити свої навички в управлінні цими кодами, щоб відповідати за бажанням, коли відображаються на різних пристроях. І для цього ми показуємо 30 чуйних підручників веб-дизайну знайдено в Інтернеті. Цей список не є вичерпним, але він допоможе вам розпочати розуміння основ розробки адаптивного веб-сайту, який задовольнятиме всілякі розміри екранів..
Ми почнемо з вступними навчальними посібниками у "Розриві льоду", щось на кшталт RWD: 101 клас, який ви повинні відвідувати, щоб повісити концепцію, перш ніж ми перейдемо до вправ "Початок будівництва".
Нарешті, ми завершимо розділ "Do More", в якому ми покажемо навчальні посібники, які грають з горизонтальними розкладками, "еластичними" відео, випадаючими меню та навігаційними акордеонами, мініатюрами та липкою проблемою з таблицями.
Але спочатку…
Ось підсумок двох навчальних посібників, які були представлені на цьому тижні нашими авторами:
Адаптивний веб-сайт Навігація
Торік Фірдаус - [Переглянути посібник]
Ось підручник, який допоможе вам створити власну швидку навігацію сайту. Одним з найважливіших аспектів веб-сайту є те, наскільки легко переміщатися по різних частинах сайту. Дізнайтеся, як оптимізувати це за допомогою CSS3 з цим підручником.
Чуйне резюме
Джейк Роше - [Переглянути посібник]
Якщо ви є веб-професіоналом і онлайн-резюме вже є невід'ємною частиною вашої кар'єри, то ви повинні скористатися можливістю, щоб перетворити цю резюме також. Зробіть роботодавцям і клієнтам легше знайти вас на будь-якому пристрої. І в той час, як ви на ньому, ваш власний резюме подвоює як портфель того, що ви можете зробити в якості розробника.
Порушення льоду
Тепер, де ми були? Ах, так, давайте запустимо деяку дію на льоду!
Посібник для початківців для адаптивного веб-дизайну
Ніка Петі - [Переглянути посібник]
Цей посібник є чудовою відправною точкою для початківців, оскільки він описує, що означає веб-дизайн, як він з'явився на світ, а також пояснення щодо рідинних сіток та медіа-запитів. Ознайомтеся з ресурсами, переліченими в нижній частині підручника.
Вступ до чудового веб-дизайну: відео
Ніка Петі - [Переглянути посібник]
Це навчальний посібник довжиною близько 9 хвилин, який переглядає поверхню того, на що реагує веб-дизайн, як він з'явився, вплив, який він має на дизайн веб-сайту, і які елементи беруть участь у створенні адаптивного веб-дизайну. . Якщо ви хочете зрозуміти, про що реагує веб-дизайн, а не переходити до кодування, вам слід почати з цього відео.
Як перетворити будь-який веб-сайт на адаптивний сайт
Автор: Рочестер Олівейра - [Переглянути посібник]
Це ще один навчальний посібник, який починається з основ, але розбиває все, що стоїть трохи, в тому числі ОС і браузери, які ви перетворюєте на свій сайт, а також елементи, які впливають на перегляд веб-сайту з різних пристроїв. Автор також представив деякі корисні плагіни WordPress та JQuery, які допоможуть зробити вашу роботу набагато простішою.
Чуйний дизайн у 3 кроки
Нік Ла - [Переглянути посібник]
У цьому підручнику буде пояснено, як можна створити адаптивний веб-дизайн з мета-тегами, структурою HTML і важливими медіа-запитами. Щоб зрозуміти це, потрібно знати CSS ...
Проектування для адаптивної мережі
Макс Лузуріага - [Переглянути посібник]
Ось стаття, яка є не стільки підручником, скільки посібником для створення чуйного веб-дизайну. Тим не менш, автор буквально розповідає вам, що потрібно робити і чого не треба робити у веб-дизайні. Існують пояснення, чому деякі особливості недостатньо чутливі, як працювати з пропорціями та модулями, а найкраще - відносно коротким і легким для поглинання.
Чуйний веб-дизайн: візуальний посібник
Ендрю Гормлі - [Переглянути посібник]
Якщо підручники, заповнені текстом, не є доцільними, спробуйте замість цього відео підручник. Це все ще досить технічно, але якщо це змушує вас почуватися краще, вам не доведеться багато читати. Це близько 25 хвилин, і відео-виробник насправді швидко переходить через частини, які він кодує, а потім повертається, щоб пояснити, що коди роблять.
Початок будівництва
Добре, давайте почнемо створювати деякі чуйні проекти, починаючи з ...
Рідинні сітки
Етан Маркотт - [Переглянути посібник]
Скажіть, сітка, і ви думаєте, "жорсткі структури", кажуть рідина, і ви могли б подумати, що він може протікати від однієї сторони екрану до дна або зверху або збоку, коли ви застосовуєте тиск до браузера, але ставите ці два разом і Ви, напевно, думаєте, що вам потрібно поглянути на цей підручник, щоб цілком оцінити, як рідина може допомогти зробити ваш дизайн більш чуйним.
Зображення рідини
Етан Маркотт - [Переглянути посібник]
До кінця цієї статті ви повинні знати, хто є Етан Маркотт. Ось підказка: він є тим, хто придумав концепцію і термін для веб-дизайну. Його ім'я буде в значній мірі з'являтися в будь-якому іншому підручнику в цьому списку, так чому б не взяти поради про зображення рідини прямо з Майстра?.
Масштабована навігація шаблони в чуйним веб-дизайну
Майкл Мескер - [Переглянути посібник]
Цей підручник розповідає про уроки, які автор дізнався з роботи над масштабним реагуючим проектом веб-дизайну. Прочитайте його «проходження» про те, як створювати шаблони, які легше налаштовувати для зручних та чуйних результатів. Це чудовий погляд за лаштунками в розумінні того, як розробляти інтерфейси найкращим чином для перегляду настільних ПК, планшетів і мобільних пристроїв.
Адаптивний веб-дизайн з медіа-запитами CSS3
Нік Ла - [Переглянути посібник]
І ще один чудовий посібник, який допоможе вам навчитися розробляти шаблон веб-сайтів, що відповідає крос-браузерам, з HTML5 і CSS3. Це покроковий підхід, а до впровадження мультимедійних запитів і демонстрації веб-дизайну, щоб краще оцінити вплив медіа-запитів.
Ефекти CSS: космічні зображення на висоту відповідності тексту
За Zoe Mickley Gillenwater - [Переглянути посібник]
У цьому навчальному посібнику ви дізнаєтеся, як зробити зображення з фіксованою шириною, змінивши їх розмір і відстань, щоб вирівнятися з супровідним текстом, незалежно від того, як змінюватиметься розмір вікна веб-переглядача..
Адаптивні макети з медіа-запитами
Автор: Аарон Густафсон - [Переглянути посібник]
Дізнайтеся, як використовувати адаптивні або гнучкі макети з медіа-запитами CSS. Просто дотримуйтесь вправи, щоб навчитися адаптувати свій дизайн до перегляду з двома стовпцями або одного стовпця, а також підготувати дизайн для iPhone та iPad.
Адаптивні зображення: Експериментуйте з розміром зображень із контекстом
Скотт Джел - [Переглянути посібник]
Ось підручник, який використовував підхід build-from-mobile-first. Цей метод визначає більший розмір зображень для використання на більших дозволах екрану, мінус запитів на зображення, а також UA.
Зробити більше
Еластичні відео
Нік Ла - [Переглянути посібник]
Цей підручник стосується масштабування відео, коли змінюється розмір вікна веб-переглядача. Це по суті трюк CSS, і є демо, щоб побачити трюк на роботі в самому навчальному посібнику.
Приховування і виявлення частин зображень
За Zoe Mickley Gillenwater - [Переглянути посібник]
Навчальний посібник фактично взято з книги автора, що описує, як розкрити або приховати частини зображень залежно від роздільної здатності екрана. Вона навчить вас динамічно обрізати зображення, коли змінюється розмір екрана, показуючи вам лише частину повної картини, коли є обмежений простір.
Адаптивний навігатор вмісту з CSS3
Мері Лу - [Переглянути посібник]
Віддайте перевагу любителям пересуватися навколо вашої сторони? Потім, ви повинні прочитати цей підручник, щоб дізнатися, як кодувати в деяких прохолодних переходах: затухання, слайди, повороти і масштабування. Переходи - це, по суті, шари вмісту, які були показані або приховані зі специфічним кодуванням.
Створіть адаптивний шаблон веб-дизайну
Автор: Гаррі Аткінс - [Переглянути посібник]
Це короткий навчальний посібник для створення чуйного відгуку веб-шаблон що працює як на робочому столі, так і на iPhone.
Адаптивний горизонтальний макет
Мері Лу - [Переглянути посібник]
Цей підручник навчить вас, як створювати горизонтальний макет з кількома панелями вмісту, що прокручуються. Використання Походження видів як зразок тексту, кожен розділ книги розділений у стовпцях, розташованих поруч один з одним у повноекранному режимі, але коли він зменшився до достатньо малого, макет змінюється на повністю вертикальну "книгу" прокрутки.
Перетворення меню на випадаюче меню для невеликих екранів
Автор: Кріс Койєр - [Переглянути посібник]
Цей посібник покаже вам, як перетворити меню в розкривний список, якщо вікно веб-переглядача звужене, або коли ви перебуваєте на мобільному пристрої. Рядок посилань у верхньому правому куті сторінки перетворюється у спадне меню, щоб заощадити місце, не жертвуючи навігаційними параметрами.
Гнучка згортання вгору
Мері Лу - [Переглянути посібник]
Дізнайтеся, як створити простий і гнучкий макет акордеонів, з переходом плавного переходу та регульованою шириною на основі розміру екрану та роздільної здатності.
Використання медіа-запитів CSS3
Райан Седдон - [Переглянути посібник]
Виходячи з простого правила, що визначає портретний (висота більше, ніж ширина) і ландшафтний (ширина більше, ніж висота) режими, ви можете написати медіазапит для націлювання на певні стилі на основі режиму, на якому ви його переглядаєте. Цей навчальний посібник покаже нам, як це зробити, і він поставляється з посиланням на зміну кольору хамелеона, який використовує колір, щоб продемонструвати цю зміну, коли ви зменшуєте вікно веб-переглядача.
Відповідні таблиці даних
Автор: Кріс Койєр - [Переглянути посібник]
Таблиці є джерелом головного болю, коли мова йде про малі розміри екранів, але це не означає, що нам потрібно повністю уникати таблиць. Дізнайтеся, як використовувати медіазапити, щоб повністю змінити формат таблиць під час перемикання на розміри екранів мобільних пристроїв. Перегляньте демо, щоб отримати уявлення про магію, яку ви можете зробити на основі цього підручника.
Fluid CSS3 Слайд-шоу з ефектом паралакса
За крилом Крила - [Переглянути посібник]
Створіть слайд-шоу CSS3, де використовуються два фонові зображення, і коли позиції фонів змінюються, видно ефект паралакса. Крім того, слайд-шоу є гнучким, змінюючи розміри, коли вікно браузера закривається на ньому.
Як створити адаптивну галерею мініатюр
Джошуа Джонсон - [Переглянути посібник]
Це дуже зручно для веб-сайтів, які містять мініатюри в галереї. Зміна розмірів вікна веб-переглядача змінює розташування між двома стовпцями (меншими розмірами екрану) і п'ятьма (максимум) стовпцями. Для більш подібних слайд-шоу та повзунків, ознайомтеся з нашою ТОП-статтею про 10 безкоштовних адаптивних галерей / слайд-шоу.
Оптимізація електронної пошти для мобільних пристроїв
Рос Ходжкісс - [Переглянути посібник]
Навіть електронні листи можуть бути оптимізовані для перегляду на невеликому екрані, як веб-сайти. Велику частину часу текст в електронній пошті HTML змінюється на точку, яка не є зручною для читання; Дізнайтеся, як керувати цим і більше з цього підручника.
використання фреймворків
Створіть чуйний мобільний сайт зі скелетом
Джошуа Джонсон - [Переглянути посібник]
Скелет - це приголомшлива структура для створення відповідних веб-сайтів. Цей підручник приведе вас у покроковому керівництві про те, як використовувати каркас «Скелет» для створення чудових адаптивних конструкцій. Ви будете приголомшені, побачивши, як легко реалізувати.
Адаптивний веб-дизайн з HTML5 & Less Framework 3
Луї Сімоно - [Переглянути посібник]
Якщо ви не були введені належним чином до Less, то перевірте наш власний Less CSS підручник спочатку, щоб отримати смак Less. У цьому підручнику рамки Less використовувалися для того, щоб ви могли чітко бачити наслідки медіа-запитів.
Висновок
І це закінчується нашим Чуйний веб-дизайн серії. Ми сподіваємося, що теми, інструменти та інші ресурси, представлені в цій серії, допомогли читачам розкрити концепцію адаптивного веб-дизайну. Але як би ми знали, якщо ви не скажете нам?
Повідомте нам свої відгуки на серії, і якщо у вас є пропозиції для більше ідей, які ви хочете побачити на hongkiat.com. Напишіть нам рядок або коментар нижче.
