50 фантастичних інструментів для адаптивного веб-дизайну

Автор: Monica Porter
Дата Створення: 17 Березень 2021
Дата Оновлення: 17 Травень 2024
Anonim
50 фантастичних інструментів для адаптивного веб-дизайну - Творчий
50 фантастичних інструментів для адаптивного веб-дизайну - Творчий

Зміст

Як ввів / придумав Ітан Маркотт як у своїй статті "Адаптивний веб-дизайн", так і в своїй бестселері, потрібно три елементи, щоб зробити сайт чуйним:

  1. Гнучка / рідинна сітка
  2. Чуйні зображення
  3. Медіа-запити

Існує безліч інших чудових статей, які висвітлюють мотиви, концепції та технічні прийоми щодо адаптивного веб-дизайну, тому ми зосереджуватимемо увагу на цій статті на деяких найкращих інструментах, які допоможуть вам реагувати відповідально.

Інструменти для початку

Перш ніж почати створювати свій сайт, найкраще намітити, як елементи на сторінці будуть адаптуватися до різних розмірів браузера різних пристроїв, на яких вони будуть переглядатись, і щоб уникнути розриву зв'язку, який часто виникає при думці в першу чергу про дизайн робочого столу та інші реагуючі ітерації як додаткові задуми (див. особливо коментар Стефані (Салліван) Ревіс).

01. Адаптивні аркуші веб-дизайну

Цей набір адаптивних аркушів ескізів, зроблений Джеремі П. Алфордом, є чудовою відправною точкою для того, щоб почати картографувати зміщення розділів сторінки з різною роздільною здатністю.


02. Етюдник з адаптивним дизайном

Якщо ви віддаєте перевагу зберігати всі свої ескізи в одному місці, то, можливо, ви захочете розглянути цю зв’язану дротом книгу з 50 гнучкими аркушами ескізів компанії App Sketchbook.

03. Адаптивний каркас

Однією з труднощів побудови адаптивних веб-сайтів є використання каркасів, щоб показати, як буде працювати адаптивний дизайн. Джеймс Меллерз Adobe зібрав цей експериментальний інструмент, щоб продемонструвати, як може реагувати реактивне каркасне оформлення складних макетів.


04. Шаблони макета для декількох пристроїв

Плануючи адаптивний дизайн, корисно подивитися, як інші люди підходили до нього до вас, тому «Шаблони макета декількох пристроїв» Люка Врублевського, де перелічені популярні шаблони із посиланнями на приклади, є чудовим місцем для початку.

05. Стиль плитки

Плитка в стилі Саманати Уоррен пропонує нову техніку для дизайну у чуйний вік; а не макети дизайну з фіксованою шириною, вони нагадують зразки або дошки настрою, які демонструють загальний підхід до дизайну, не вдаючись до детальних деталей.

Інструменти для гнучкої / рідинної сітки

Як зазначалося раніше, першим компонентом, необхідним для адаптивного дизайну, є гнучка / текуча сітка.Наведені нижче файли вже створені заздалегідь: вам потрібно лише завантажити їх, і ви швидко перейдете до більш адаптивного сайту.


06. Золота сітка

Джоні Корпі, який також розробив Less Framework, нещодавно випустив цю нову версію надійної сіткової системи для адаптивного дизайну. Система Golden Grid, яка вважається "складною", оскільки легко адаптується від 16 до восьми, чотирьох стовпців, а також має невелике накладення на браузер, яке виставляє сітку на ваші сторінки для тестування.

07. Foldy960

Талановиті представники Paravel, Inc. випустили модифіковану сітку 960.gs, яку вони використовують як основу для своїх чуйних проектів.

08. SimpleGrid

SimpleGrid, створений Конором Мюрхедом, був розроблений з урахуванням чутливості, тому легко запустити і запустити ваш адаптивний проект веб-сайту.

09. CSS-сітка 1140 пікселів

Ще однією чудовою адаптивною сітковою системою є CSS Grid 1140 пікселів від дизайнера Мельбурна Енді Тейлора, яка переходить від широкої роздільної здатності робочого столу до мобільної.

10. Колонна система сіток CSS

Сітчаста система Columnal, створена Pulp + Pixels, відомим креативним директором Ніком Горслайном, базується на сітковій системі 1140px, але з деякими додатковими смакотами, такими як набір дизайну з ескізами та шаблонами каркасних каркасів, а також стилі налагодження CSS.

11. Семантична система сіток

Попередньо оброблені розширення CSS, такі як Sass і LESS, стають все більш і більш популярними, і Семантична система сіток Тайлера Тейта використовує їх для максимального ефекту в цій системі сіток, яка стверджує, що не використовує зайвих класів або елементів. Детальніше читайте на coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. СУЗІ

Подібно до семантичної сіткової системи Oddbird's SUSY створив сіткову систему, яка не використовує додаткової розмітки або спеціальних класів, але SUSY орієнтована лише на користувачів Sass (та її розширення, Compass).

13. Грідпак

Gridpak, від Erskine Design, є одним з найновіших адаптивних мережевих генераторів. Це дозволяє встановити стовпці та жолоби на кількість точок зупинку, а потім виводить файли CSS, JavaScript та PNG, щоб уся ваша команда працювала з однієї і тієї ж вихідної точки.

14. Сітка

Над Gridset все ще лежить загадка, оскільки, на момент написання цього матеріалу, він ще не вийшов. Але інструмент від Mark Boulton Design обіцяє індивідуальні, неприпустимі, сіткові системи та спосіб збереження та керування вашими мережами в Інтернеті.

15. Краща сітка Photoshop для RWD

Елліот Джей Стокс пропонує відмовитися від старого де-факто стандарту сітки 960 пікселів і замість цього працювати з базою 1000 пікселів, що полегшує роботу з усіма процентними розрахунками. Якщо ви погоджуєтесь, він зробив PSD, з яким ви можете почати працювати.

16. Рідкі сітки

Якщо ваш дизайн є вузькоспеціалізованим і вам потрібно створити власну сітку на замовлення, ви можете зробити це за допомогою калькулятора рідинних сіток .net Awards, блискучого номінанта Гаррі Робертса.

17. Адаптивний калькулятор

Ще один піксель до калькулятора відсотків, але цей Стю Робсона робить крок далі, ніж інші, генеруючи всі правила CSS для вас, тобто ви можете просто скопіювати та вставити їх у свої таблиці стилів.

Інструменти для адаптивних зображень (і тексту)

Ще одним важливим компонентом адаптивного веб-дизайну є гнучкі зображення. Хоча техніка отримання рідинних зображень проста, оптимізація продуктивності та завантаження сторінок для різних пристроїв видається однією з найбільших проблем у адаптивному веб-дизайні. Ось декілька ресурсів для підходу до проблеми.

18. Чуйні зображення

Група ниток розробила спосіб надсилання зображення відповідного розміру на основі роздільної здатності екрану. Цей експеримент із першими зображеннями для мобільних пристроїв, які реагують на відповідні та відповідальні масштаби, вимагає посилання на два зображення різного розміру.

19. Адаптивні зображення

Метт Вілкокс черпав натхнення в інструменті Responsive Images для створення адаптивних зображень, який використовує PHP та трохи JavaScript для подачі відповідних зображень на пристрій користувача, не вимагаючи додаткової розмітки.

20. Sencha.io Src (раніше Tinysrc)

Sencha надає хмарну послугу, яка надсилає оптимізовані версії розміщених зображень під розмір пристрою, що їх запитує. Щоб дізнатись, як ним користуватися, див. Docs.sencha.com/io/src/.

21. FitText

Ще однією перлиною від Paravel, Inc є FitText.js, плагін jQuery, який робить тип веб-заголовка адаптивним до дизайну та пристрою. Детальніше див. Trentwalton.com/2011/05/10/fit-to-scale/.

22. плитаТекст

Натхненний FitText та алгоритмом SlabType, slabText Брайана Макаллістера - це плагін jQuery, який робить жирні блоки тексту, які швидко змінюють розмір, зберігаючи певну ширину.

Інструменти для медіа-запитів

Тепер, коли ви маєте уявлення про те, як зміниться ваш макет для різних пристроїв, сітки рідини та рідинних зображень, вам потрібні медіа-запити, щоб перевести елементи сторінки в стан реагування.

23. Respond.js

Проблема адаптивного дизайну полягає в тому, що браузери, які не можуть читати медіа-запити, залишаються позаду. Можливо, це не проблема з цільовою аудиторією, але це все-таки хороша практика для розміщення користувачів у старих браузерах. Respond.js, Скотт Джел, підтримує лише властивості min-width та max-width.

Докладніше див. Filamentgroup.com/lab/respojsjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, автор Вутера ван дер Граафа, дозволяє старішим версіям IE та інших браузерів ефективно тестувати та застосовувати всі види медіа-запитів.

25. Adapt.js

Натан Сміт, автор оригінальної сіткової системи 960.gs, написав Adapt.js, скрипт, який визначає розміри браузера і обслуговує лише необхідні таблиці стилів - як медіа-запити, але без медіа-запитів, тобто це працює і в старих браузерах.

26. Categorizr

Це виявлення пристроїв, до якого підходять з протилежного кута - сценарій Бретта Джанкорга Categorizr передбачає, що пристрої мобільні, якщо інше не виявлено як робочий стіл або планшет, що дозволяє вам співчутливо обслуговувати ресурси для браузерів.

Адаптивний дизайн (і мобільний) котлів

У дусі ефективного робочого процесу, що реагує, панелі керування полегшують процес переміщення конструкцій до браузера швидше, ніж пізніше. Більшість з цих моделей поєднують найкращі з вищезгаданих інструментів в один акуратний пакет: гнучку сітку, вдосконалену сценаріями, одночасно реалізуючи мобільну філософію змісту.

27. 320 і вище

Енді Кларк 320 і вище - це перший шаблон для мобільних пристроїв, який інтегрується з багатьма іншими сучасними інструментами веб-дизайну, такими як LESS та Bootstrap (див. No 30). Це легкий та рухливий спосіб швидко запустити веб-сайт. Також перегляньте наше інтерв’ю з Енді, в якому він розповідає нам більше про нову версію.

28. Без сітки

Gridless - це шаблон HTML5 та CSS3, який може служити основою для Ваших чуйних дизайнів, зосереджуючись на типографіці та сумісності між браузерами.

29. Скелет

На відміну від попередніх двох котлів, вихідна точка яких має найменшу роздільну здатність, комплект розробки Skeleton, створений Дейвом Гамачем, базується на сітковій системі 960.gs і масштабується до мобільного. Скелет також може похвалитися чудовою структурою стилів для розробників, щоб будувати стилі поверх.

30. Бутстрап

Створений Twitter і тепер з відкритим кодом, Bootstrap - це фреймворк та серія компонентів для швидкого доступу до веб-сайту, а станом на другу версію всі його основні частини працюють швидко.

Плагіни, прокладки та полізаповнювачі

Хоча сучасні браузери та програмне забезпечення, як правило, пристосовані для реагування, іноді нам доводиться використовувати додаткові інструменти, щоб забезпечити постійний досвід.

31. Адаптивний плагін

Маріос Люблінський написав плагін WordPress, який обіцяє перетворити будь-яку поточну тему WP на чуйну. Як це працює, я ще не знаю, оскільки він не був опублікований на момент написання цього матеріалу, але якщо він виконає свої обіцянки, це може бути дуже корисним.

32. Повалення

Обробка переповнення вмісту добре працює в браузерах для настільних комп'ютерів, але старі мобільні браузери обробляють це непослідовно. Поліфрол Overthrow від працьовитої групи Filament Group додає послідовну витончену деградацію на всіх пристроях, гарантуючи, що всі користувачі мобільних пристроїв отримують найкращий можливий досвід.

33. MediaTable

Плагін jQuery Марко Пегораро, MediaTable, працює з Respond.js, щоб допомогти вам обійти проблему, як відображати великі таблиці даних на пристроях з малим екраном, створюючи чуйні стовпці та додаючи перемикач show / hide, де це підходить.

"Тестування, тестування: 1-2-3 ..."

Іншим аспектом адаптивного робочого процесу є знання своїх цільових пристроїв та дозволів, а потім тестування в них.

34. resizeMyBrowser

resizeMyBrowser, розробник інтерфейсу Чень Ло, має кілька попередньо встановлених розмірів для вікна вашого браузера для тестування адаптивно розроблених сторінок або створення нового пресету, якщо ви не можете знайти той, який відповідає вашим потребам.

35. responsivepx

Подібно до resizeMyBrowser, responsivepx, створений Ремі Шарпом, завантажує ваші сторінки у вікно, де ви можете перевірити ширину та висоту, щоб визначити, наскільки добре спрацьовують ваші медіа-запити та де точки зупинку в дизайні.

36. Адаптивне тестування дизайну

Неймовірно корисний інструмент дизайнера та розробника Метта Керслі: просто введіть URL-адресу вашого адаптивного сайту в Responsive Design Testing, щоб побачити, як він відображається при різних розмірах браузера.

37. Відповідач

Введіть URL-адресу, і Responsinator покаже, як вона відображається у багатьох типових розмірах пристроїв - з безжальною робототехнічною ефективністю. За це відповідають Тама Пагслі та Енді Гові.

38. Чуйний. Є

Інший внутрішньосторінковий емулятор пристрою, Responsive.is, дозволяє вводити URL-адресу, а потім швидко змінювати її розмір між діапазоном різних попередньо встановлених налаштувань. Це зроблено командою, яка стоїть за майбутньою програмою Typecast.

39. Screenqueri.es

Ще один інструмент розмірів браузера, але Screenqueri.es від Mandar Shirke відрізняється тим, що має широкий набір попередньо встановлених налаштувань для мобільних пристроїв та планшетів, а також сітку та лінійки, які значно полегшують точне вимірювання.

40. Аптус

Ще одна програма для тестування сайтів із різними визначеними розмірами, але Aptus є рідною для Mac. Це доступно через Mac App Store, а наявність рідної версії приносить додаткові функції, такі як прості знімки екрана та підтримка в автономному режимі.

41. Адаптивний дизайн букмарклета

Віктор Кулон зробив дуже простий, але ефективний букмарклет; коли ви активуєте його на будь-якій веб-сторінці, він додає панель інструментів, яка дозволяє перемикатися між чотирма загальними розмірами екрана, щоб ви могли бачити, як ваш сайт відображається в різних розмірах.

42. Адаптивний дизайн тестового буклета

Цей букмарклет Бенджаміна Кіна дає змогу налаштувати більше, дозволяючи вам визначати власні розміри пристрою та скільки завгодно чи мало. При активації він відображає сайт у всіх вибраних розмірах, поруч для зручного порівняння.

43. Екран

Screenfly від QuirkTools дозволяє протестувати сайт із різною роздільною здатністю на настільному ПК, планшеті, мобільному телефоні та телевізорі. В даний час тестування настільних ПК обмежене Safari, тоді як планшет та мобільний телефон мають більше можливостей для пристроїв та браузерів. Телебачення обмежене Оперою.

44. Індикатор медіа-запитів

Йохан Брук пропонує чистий спосіб CSS перевірити, коли браузер запускає мультимедійний запит. Індикатор медіа-запитів - ще один хороший інструмент для тестування та грання з критичними точками дизайну.

45. Шим

Одним із інструментів, що використовуються в редизайні Бостонського глобуса, хлопчика, який рухається з руху вперед, Shim - це програма Node.js, яка запускає веб-сторінку на декількох пристроях в одній мережі Wi-Fi, що значно полегшує тестування між пристроями. .

46. ​​Заїзд

Якщо у вас немає сервера Node.js для запуску Shim, Скотт Джел зробив простішу версію, названу Drive-In, яка працює принципово так само, але використовуючи PHP, Apache та файл .htaccess.

47. Adobe Shadow

Adobe продовжує працювати над веб-технологіями за допомогою цього інструменту віддаленої налагодження. Встановіть Shadow та розширення Chrome на Mac або Windows, а також клієнт Shadow на Android або iPhone, і ви зможете обмінюватися веб-сторінками між різними пристроями.

48. Мобільний емулятор Opera + віддалена налагодження

Більш простий спосіб налагодження мобільних сторінок - це встановити Opera та Opera Mobile Emulator та з’єднати обидві функції за допомогою функції віддаленого налагодження. Простий і швидкий в налаштуванні, а також додаткова перевага тестування на більш ніж WebKit.

Подальше натхнення

Хочете отримати уявлення про те, як інші роблять свої дизайни чуйними?

49. MediaQueri.es

Якщо ви цього ще не бачили, на сайті Mediaqueri.es постійно зростає кількість сайтів, які перейшли на чуйну сторону.

50. @RWD

Ітан Маркотт веде обліковий запис у Twitter, де представлені останні новини, інструменти та вітрини зі світу RWD.

Деніз Джейкобс обожнює бути спікером, автором, тренером веб-дизайну та євангелістом творчості, тоді як Пітер Газстон є автором "Книги CSS3" та ветераном-веб-розробником, який веде блоги на Broken Links.

Сподобалось? Прочитайте це!

  • Професійні поради щодо створення мобільного веб-сайту
  • Найкращі методи CSS та JavaScript
  • Як створити додаток
  • Найкращі безкоштовні веб-шрифти для дизайнерів
  • Дізнайтеся, що буде далі з доповненою реальністю
  • Завантажте безкоштовні текстури: висока роздільна здатність і готові до використання зараз
Попередня Стаття

Перероблено: усі 50 державних прапорів Америки
Наступна Стаття

Макети веб-сайтів: 4 популярних підходи для вивчення
Цікаві Посади
10 порад щодо вдосконалення досвіду для успіху додатків iOS
Читати Далі

10 порад щодо вдосконалення досвіду для успіху додатків iOS

Травень 2024
Рекомендації щодо людського інтерфейсу дуже схожі на технічний документ, що може бути дивним, що надходить від Apple, але правила існують, щоб допомогти вам зрозуміти технічні аспекти платформи та, та...
Приготування їжі з Амперсанда
Читати Далі

Приготування їжі з Амперсанда

Травень 2024
Амперсанд часто зображували у багатьох творчих формах. Любіть це або ненавидьте, це стало невід’ємною частиною типографіки. Тут фотограф і любитель шрифтів Емілі Блінко поєднала свої пристрасті для ць...
Виходячи за межі веб-дизайну
Читати Далі

Виходячи за межі веб-дизайну

Травень 2024
Конкуренція в галузі веб-дизайну жорстока як ніколи, щодня з’являється все більше дизайнерів. Потреба залишатися на крок попереду і пропонувати щось інше представляє значний виклик для галузі.Веб-диза...