62 корисних інструменту для адаптивного дизайну (Responsive web design)


62 корисних інструменту для адаптивного дизайну (Responsive web design)

Переклад вкрай цінної статті «Responsive Web Design Techniques, Tools and Design Strategies» популярного інтернет-видання для розробників Smashing Magazine.Ще в січні ми опублікували статтю про адаптивний дизайн «Responsive Web Design: What It Is and How To Use It»(Адаптивний веб-дизайн: Що це таке і як ним користуватися). Адаптивний веб-дизайн продовжує привертати до себе багато уваги, але, з огляду на, наскільки він відрізняється від традиційних методів розробки сайтів, він може здатися захмарно складним для тих дизайнерів і розробників, які його не пробовалі.По цієї причини ми склали огляд ресурсів, корисних при створенні адаптивних сайтів. В огляд увійшли докладні керівництва, підходи, інструменти, статті, що містять практичні поради, необхідні для створення вашого власного адаптивного сайту.

Техніки Responsive web design

1. CSS Transitions and Media QueriesCSS Transitions і Media QueriesElliot Jay Stocks докладно розповідає про метод поєднання CSS Media Queries і CSS transitions. Основна ідея в наступному: розробляючи адаптивний сайт за допомогою Media Queries, ви постійно змінюєте ширину вашого браузера, щоб подивитися, як сайт поводиться при цьому. Але кожен раз, коли відпрацьовує один з ваших Media Queries, видно жорсткий перехід між стилями (перший, наприклад, для десктопів, другий – для планшетів). Чому б не використати CSS transitions для згладжування цих жорстких переходів за допомогою анімації?2. Responsive Data TablesАдаптивні таблиці данихChris Coyier і Scott Jehl експериментують з техніками адаптивного дизайну для коректного відображення таблиць (<table>). Таблиці можуть бути широкими, і від цього нікуди не дітися. Можна зменшити масштаб і побачити всю таблицю цілком, але тоді текст стає занадто малий для читання. Можна збільшити масштаб, щоб можна було прочитати, але тоді вам доведеться прокручувати таблицю по вертикалі і горизонталі, щоб переглянути її полностью.Однім з рішень є переформатувати таблицю для зручності читання. Інше – відобразити кругову діаграму даних. І третє рішення – це адаптація таблиці в міні-зображення для маленьких екранів, яке при натисканні відкриє її повністю.3. Responsive Navigation Menus: Convert a Menu to a Dropdown for Small ScreensАдаптивне меню: Перетворення меню в список, що випадає на невеликих екранахChris Coyier описує техніку перетворення довгих рядів посилань в випадають пункти меню на малих дозволах. Коли користувач переглядає сайт на маленькому екрані і натискає на меню, що випадає, він бачить великі і красиві пункти меню, які легко вибрати. Очевидно це набагато краще, ніж відображення крихітної посилання, по якій навіть важко клікнути.4. CSS Media Queries and Using Available SpaceCSS Media Queries і раціональне використання доступного місцяУ керівництві описано, як при різних дозволах екрану за допомогою Media Queries вносити невеликі зміни в зовнішній вигляд сайту. Наприклад, в боковій колонці вам необхідно вказати e-mail. На малих дозволах e-mail можна доповнити іконкою, на великих – написати пошту текстом, на ще більших поєднати і те, і інше і так далі.

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

5. Fluid ImagesГумові зображення (масштабування засобами браузера)Гумові зображення – одна з центральних тем в адаптивному веб-дизайні. У статті Ethan Marcotte наведено детальний огляд створення їх за допомогою класичного фрагмента коду img {max-width: 100%; }, а також всі необхідні деталі, необхідні для початку работи.6. Responsive Image: Experimenting With Context-Aware Image SizingАдаптивні зображення (зміна фізичних розмірів зображення)Альтернативний підхід до гумових зображень належить Filament Group. Їх метод дозволяє розробникам створювати адаптивні макети, які подають різні розміри зображення для різних дозволів. Фактично, це дозволяє подавати оптимізовані під мобільні пристрої зображення для невеликих екранів і їх версії з високою роздільною здатністю для великих екранов.Метод, розроблений Filament Group, використовує .htaccess і javascript файли для подачі зображень різних розмірів виходячи з ширини екрану відвідувача. Альтернативним рішенням є використання таких інструментів, як TinySrc (інструмент є тепер частиною Sencha).7. Responsive Images and Context-Aware Image SizingАдаптивні зображення і контекстно-залежні зміни розмірів зображеньCraig Russell розробив метод, який використовує скрипт на стороні сервера (на PHP), для подачі зображень різних дозволів і обсягів. Ідея полягає в тому, що в PHP-скрипт використовується масив, в який вносяться файли зображень і їх відносні масштаби в процентах. Атрибут SRC тега IMG повинен бути встановлений таким чином, щоб отримати ID запитуваної зображення, але без вказівки масштаба.javascript обчислює відношення ширини зображення у відсотках до максимальної ширині батьківського блоку, і ця цифра потім додається в кінці атрибута SRC як параметр масштабу. У коментарях до статті можна знайти кілька корисних порад про те, як можна вдосконалити даний метод.8. Responsive Images Right NowАдаптивні зображення прямо заразHarry Roberts подав ідею використовувати комбінацію DIV і IMG для вибору найбільш підходящого для поточного прилади зображення. У батьківського DIV велике зображення зберігається в background-image, а в IMG – версія для мобільних пристроїв. За допомогою Media Queries буде вибрано маленьке зображення з IMG або велике з фону DIV:<div class = "r-img" style = "background: url (link / to / large / version); width: [width-of-image] px; height: [height-of-image] px;">   <img src = "link / to / small / version" /></ div>9. Responsive Images Using CSS3Адаптивні зображення засобами CSSМетод Nicolas Gallagher спирається на використання Media Queries (нічого собі! – прим. перекладача), Властивості content і вирази attr (). На жаль, цей метод цікавий тільки з точки зору ідеї – він не працює ні в одному з існуючих на даний момент браузерів.10. Responsive Images Using CookiesАдаптивні зображення за допомогою Cookies Keith Clark пропонує використовувати cookies для подачі зменшених зображень мобільним користувачам. Кожен раз, коли браузер запитує файл з сервера, він автоматично передає cookies разом із запитом. Якщо ми використовуємо javascript для створення cookies з інформацією про розміри поточного екрану, то всі наступні запити браузера будуть віддавати ці дані на сервер.Другімі словами, сервер буде знати розмір екрану пристрою ще до того, як браузер почне завантажувати зображення з html. Це можна використовувати для того, щоб зменшувати розміри зображень на стороні сервера.11. Responsive Images With ExpressionEngineАдаптивні зображення за допомогою ExpressionEngineJohn Faulds представив метод для створення адаптивних зображень, істотно відрізняється від наведених вище. За допомогою user agent визначається, чи є пристрій мобільним чи ні. За результатами перевірки створюється глобальна змінна, яка використовується в шаблонах для зміни розміру зображення на виході. Виходить, що тільки одне зображення надсилається в браузер, але для мобільних відвідувачів воно одне, а для відвідувачів з десктопа вже інше.12. CSS: Elastic VideosCSS: адаптивні відеоNick La на основі застосування max-width: 100% до відео представляє метод, який робить HTML5 відео, object- і iframe-вбудовані відео адаптивними. Що стосується останнього, метод дуже простий. Просто вставте згаданий код в блок DIV і вкажіть padding-bottom від 50% до 60%. А для дочірніх елементів (таких як iframe, object embed) – властивості width і height рівними 100% плюс абсолютно спозіціоніруйте. Це змусить вбудовані елементи розширюватися на всю ширину автоматично. Спочатку даний метод запропонував Thierry Koblentz.13. Resizeable Images (At Full Resolution!)Зображення із змінними розмірамиКороткий посібник зі зміни розмірів зображення в залежності
від обсягу тексту.

Адаптивні листи електронної пошти

14. Optimizing Your Email for Mobile Devices With the Media QueryОптимізація електронної пошти для мобільних пристроїв за допомогою Media QueriesДля перегляду великих листів часто необхідна горизонтальна прокрутка, особливо коли до листа докладено велике зображення. В даному дослідженні Campaign Monitor пояснює, як електронні листи можуть бути оптимізовані для мобільних пристроїв за допомогою Media Queries і запропоновано кілька корисних методів і фрагментів коду для використання на практиці.15. Responsive Design for Email, the Largest Mobile AudienceАдаптивний дизайн для електронної пошти, інструменту з найбільшою кількістю мобільного аудиторіїУ статті наведено цікавий досвід і роздуми команди Beanstalk по застосуванню Media Queries для створення mobile friendly (доброзичливою до користувачів) мобільної пошти.16. Media Queries in HTML EmailsMedia Queries в HTML листахУ цій статті розглядається використання Media Queries під конкретні мобільні поштові кліенти.17. Guide to CSS Support in EmailКерівництво по підтримці CSS поштовими клієнтамиСтворення пошти на HTML, яка відображалася б однаково коректно у всіх основних поштових клієнтів, може бути вкрай довгим і трудомістким. Підтримка навіть простого CSS значно відрізняється між клієнтами і навіть між різними версіями одного і того ж клієнта. Campaign Monitor зібрали керівництво, щоб заощадити ваш час і нерви на з’ясування всіх цих деталей. Протестоване на 24 різних поштових клієнтів, воно охоплює всі популярні програми електронної пошти.

Інструменти для адаптивного веб-дизайну

Ви можете проектувати адаптивний дизайн з нуля або використовувати інструменти, перераховані нижче, щоб прискорити і спростити процес його созданія.18. Respond.jsЕто швидкий і малий за обсягом Polyfill (фрагмент коду, який додає підтримуваний браузером функціонал) створений Scott Jehl для підтримки властивостей min-width і max-width з CSS3 Media Queries в IE6-IE8 і више.Css3-mediaqueries-js – це інший скрипт, який дозволяє працювати CSS3 Media Queries в IE 5 +, Safari 2 і Firefox 1+.19. WebPutty: Scientific Progress CSS EditingWebPutty: прорив в редагуванні CSSЦей інструмент являє собою веб-редактор CSS вашого сайту з функцією автозбереження і перегляду результату в реальному часів. WebPutty підтримує SCSS, Sass, LESS і Compass. Щоб скористатися цим інструментом, просто вставте посилання перед закриває тегом </ head> на вашому сайті.20. Debugging CSS Media QueriesНалагодження CSS3 Media QueriesПри створенні адаптивного веб-дизайну доводиться працювати з великою кількістю Media Queries. Johan Brook ділиться невеликим секретом про те, як дізнатися, яке саме правило Media Queries відпрацьовує в даний момент. Стаття також містить mixin для розробників, які використовують Sass.21. Responsive Design Testing Тестування адаптивного дизайнуЦей інструмент призначений для всіх, кому потрібен швидкий і простий спосіб перевірити створений сайт при різній ширині екрану. Перевірити сайт можна як онлайн, так і скачавши код з Github.22. Responsive Containers: Selector Queriesадаптивні блокиjavascript Andy Hume дозволяє застосовувати різні класи до HTML елементам на основі їх ширини.23. Resize My BrowserЗмінюйте розмір вашого браузераЯкщо вам потрібно, щоб браузер відображав контент при певному розмірі вікна, то це – те, що вам потрібно. Просто натисніть на розмір, який необхідний, і подивіться, як виглядає ваш сайт при цьому розмірі. Чи не працює в Chrome і Опера через проблеми з подією «ResizeTo».24. Media Query BookmarkletЗакладки Media QueryЗручний інструмент, який показує, які Media Queries активні при поточній ширині браузера. Перетягніть його на панель закладок і в разі потреби просто запустіть.25. ResponsivepxІспользуйте інформацію з цього маленького Інтрументи для створення адаптивного сайту.26. ProtoFluidІнструмент для швидкого прототипування адаптивного дизайну. Ви можете спроектувати CSS для різних популярних розмірів екранів, орієнтацій і браузерів, будь то телефони (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), планшети (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), монітори або телевізори ( 720p, 1080p) .Ви можете ознайомитись з результатами проектування прямо в браузері і використовувати звичні вам кошти розробки, такі як Firebug. Також спробуйте альтернативний інструмент ScreenFly.27. Fluid Grid CalculatorКалькулятор гумової сіткиHarry Roberts розробив калькулятор і генератор гумової сітки. Просто вкажіть кількість стовпців, ширину одного стовпчика, відступ, і інструмент згенерує гумову сітку CSS по вашим параметрам. Дуже зручно!28. Free HTML5 / CSS3 WordPress 3.1+ Theme With Responsive Layout: YokoБесплатная HTML5 / CSS3 WordPress 3.1 тема з адаптивним макетом: YokoYoko – сучасним і гнучка WordPress тема. Завдяки адаптивному макету на основі CSS3 Media Queries тема налаштовується під різні розміри екрану. Дизайн оптимізований для великих екранів десктопів, планшетів і невеликих екранів смартфонів. Щоб надати сайту індивідуальність, ви можете використовувати нові формати постів (наприклад, галереї, бічні колонки або цитати). Виберіть свій логотип і зображення в шапці, налаштуйте фон і колір посилань.29. Scherzo, a Responsive WordPress ThemeScherzo, Адаптивна тема для WordPressЦя тема WordPress є чудовим прикладом адаптивного дизайну, відображаючись однаково добре практично на всіх пристроях і екранах.

Макети адаптивного дизайну

30. 320 and UpІнструмент 320 and Up заснований на принципі mobile first (Спочатку мобільні пристрої), при якому дизайн створюється спочатку для екранів мобільних пристроїв, а потім розширюється для планшетів, настільних ПК і великих екранів. Він добре працює як в якості доповнення до HTML5 boilerplate, так і отдельно.31. Mobile BoilerplateЕто налаштовуються шаблони для створення багатофункціональних, високопродуктивних мобільних веб-додатків. Ви отримаєте кроссбраузерность для смартфонів класу А і хорошу підтримку для старих BlackBerry, Symbian і IE Mobile. А також велика кількість різних оптимізацій для мобільних браузерів.32. Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly DevelopmentSkeleton: Відмінний Boilerplate для адаптивної розробкиSkeleton – це невелика колекція CSS і javascript файлів, які допоможуть вам в швидкій розробці сайтів, однаково зручних на будь-якому екрані, будь це 17-дюймовий ноутбук або iPhone. Skeleton є добре організовану і спроектовану сітку, яка адаптивна аж до мобільного телефону. У ній також є стилі для більшості HTML елементів, які можна використовувати як основу для свого дизайну.

Фреймворки для адаптивного дизайну

33. 1140 CSS Grid1140 CSS Grid оптимізований для роботи на екранах від розміру мобільних пристроїв до моніторів 1280px в ширину. Це проста і гнучка сітка, яка використовує Media Queries.34. inuit.cssЕтот CSS-фреймворк – хороша основа для розробки на крихітних екранах (наприклад, телефони) і невеликих екранах (наприклад, планшети) прямо з коробки з мінімальними зусиллями. Крім цього є генератор для створення гумового CSS-фреймворка під себе.35. FluridFlurid – це гумова сітка на 6, 7, 8, 9, 10, 12 і 16 колонок.36. FluidGridsFluidGrids – генератор модульної сітки, який створює макети з 6, 7, 8, 9, 10, 12 або 16 колонок.37. Less Framework 4CSS-фреймворк для створення адаптивних макетів. Він містить 4 базових макета і три набори тіпографікі.38. Fluid Grid SystemРезіновий фреймворк з упором на тіпографіку.39. Tiny Fluid GridTiny Fluid Grid допоможе вам створити свою власну гумову сітку з 12, 16 or 24 колонок, задати їх максимальну і мінімальну ширину і відступ у відсотках.

Стратегії адаптивного дизайну

40. The Responsive Designer’s WorkflowWorkflow розробника адаптивного веб-дизайнуLuke Wroblewski законспектировал презентацію Ethan Marcotte про застосування принципів адаптивного веб-дизайну в модернізації сайту однією з провідних газет. Серед іншого, Ethan пояснює, як він підходить до методології проектування адаптивного веб-дизайну і що з себе представляє процес прототипирования в контексті адаптивного веб-дизайну.41. The Goldilocks Approach to Responsive Web DesignПідхід Goldilocks до Responsive web designGoldilocks розглядає макети, засновані на em, які відмінно виглядають незалежно від пристрою, з якого проглядаються.42. Content Choreographyхореографія вмістуУ статті ви зможете прочитати про те, як правильно планувати свій сайт, щоб відповідати стандартам сьогоднішнього дня. Почніть управляти контентом, щоб він був поданий найкращим чином при будь-якій ширині.43. Спочатку структурований контентВ даній презентації Stephen Hay описує неприємності, з якими ви можете зіткнутися при створенні адаптивного сайта.Stephen показує, що ми повинні думати спочатку про правильну структуризацію контенту, що зробить його універсальним і зручно доступним як з маленького екрану, так і з текстового браузера. Ваш контент повинен бути готовий до використання в будь-якому месте.44. Design for a Target Experience FirstДизайн для Target Experience FirstЩе один цікавий погляд на створення адаптивного дизайну. Nathan C. Ford фокусує увагу на поведінці своїх відвідувачів, а потім на основі нього створює користувальницькі сценарії і Media Queries. «У кожного сайту є цілі, які виходять за рамки простого читання, де недолік різних можливостей може фактично знищити приємний досвід взаємодії. Я працюю над таким проектом в даний час. Наш підхід полягає в тому, щоб вивчити все і сформувати оптимальну взаємодію для найбільш ймовірних користувальницьких сценаріїв. Працюючи таким чином, ми до досконалості вигострюємо кожен Media Query ».45. More Responsive Design, PleaseЩе більше адаптивного дизайну, будь ласкаУ статті Jason Things розмірковує про проблеми адаптивного дизайну. Стаття дуже добре продумана і, що називається, «must read».46. ​​Breaking DevelopmentLuke Wroblewski робив нотатки на Конференції Breaking Development під час виступу Stephen Hay про реалії проектування для різних пристроїв.47. Шаблони для Multiscreen СтратегійЗверніть увагу на цю просту, але дуже корисну презентацію, щоб отримати уявлення про те, які основні чинники відіграють вирішальну роль в концепціях многоекранності.48. Responsive Web Design from the FutureАдаптивний Веб-дизайн з майбутньогоЗа словами Kyle Neath, адаптивний веб-дизайн – це більш широке поняття, ніж просто розмір екрану. Kyle написав про те, як GitHub обробляє посилання, про адресному рядку, про часткове оновлення сторінки і пояснив, чому він вважає, що HTML5 History API – це найважливіше, що відбулося в front-end розробці з часів появи Firebug. Дуже надихає презентація.49. Розробка прогресивної мобільного стратегіїУ цій презентації Dave Olsen представляє прогресивну мобільну стратегію, яка складається із стратегій аудиторій, контенту і платформи. Dave вважає, що для розвитку стійкої і масштабованої мобільного стратегії, ви повинні відповісти на наступні питання: «Яку цінність представляє цей контент для цільової аудиторії?». 50. How to Use CSS3 Media Queries to Create a Mobile Version of Your WebsiteЯк використовувати CSS3 Media Queries для створення мобільної версії сайтуУ цій статті на Smashing Magazine Rachel Andrew пояснює, як використовуючи всього кілька правил CSS, ви можете створити iPhone версію свого сайту за допомогою CSS3, яка буде працювати прямо зараз. У статті наведено дуже простий приклад і процес додавання стилів для мобільних пристроїв на сайт, щоб показати, як легко ми можемо додати мобільно-орієнтовані стилі на вже існуючий сайт.Вам також можуть бути цікаві такі статті на цю тему: Aaron Gustafson «Адаптивні макети з Media Queries »і Emily Lewis« Адаптація для різних пристрої з CSS3 Media Queries ».

Дискусії та різні точки зору на адаптивний веб-дизайн

Дані статті, хоча це і не підручники, можуть дати вам цінну інформацію про те, чому вам потрібно використовувати техніки адаптивного веб-дизайну (і коли не потрібно цього робити) .51. Responsive by DefaultАдаптивність за замовчуваннямAndy Hume пояснює, що на його думку, адаптивність це наше все. Це те, що робить сайт робочим, коли він завантажується через невідомий браузер на невідомому пристрої невідомої людини.52. Responsive Web Design or Separate Mobile Site? Eh, It DependsАдаптивний веб-дизайн або окремий мобільний сайт? Залежить від обставин.Цікава стаття про плюси і мінуси адаптивного веб-дизайну в порівнянні з мобільним сайтом.53. The Case Against Responsive Web DesignПроти адаптивного веб-дизайнуЦілком логічно включити в даний огляд думки про те, коли адаптивний дизайн доречний, а коли ні. В даній статті обговорюється, чому адаптивний дизайн не завжди має сенс з точки зору користувача взаємодії. Зверніть увагу на цікаві коментарі до статті. Аналогічну думку має і Luke Jones.54. A Responsive Mindадаптивний розумОбговорення в блозі Jeremy Keith про необхідних складових адаптивного дизайну і про те, як ефективно створювати різні макети на основі різних розмірів екрану. З прімерамі.55. Responsive EnhancementОтлічное введення в адаптивний дизайн як спосіб мислення, а не як інструмент або техніку. Jeremy Keith стверджує, що адаптивний веб-дизайн не може бути просто доданий в якості етапу до існуючого робочого процесу. Замість того щоб домагатися досконалості пікселів, ми повинні домагатися досконалості пропорцій.56. Mobile-First Responsive Web DesignПублікація є поєднанням філософії і стратегії для акумулювання кращих практик в області адаптивного дізайна.57. Where are the Mobile First Web Designs?Чи далеко пішов Mobile first веб-дизайн?У цій статті Jason Grigsby розповідає про результати свого дослідження про адаптивний дизайн, його особливості, а також робить кілька зауважень про поточний стан справ в області адаптивного сайтобудування.

додаткові ресурси

Публікації про адаптивний дизайн, які не вписуються в категорії више.58. Media QueriesРегулярно оновлювана колекція веб-сайтів, які використовують Media Queries.59. Responsive Web Design, by Ethan MarcotteКнига Responsive Web Design, автор Ethan MarcotteЦя книга, написана Ethan Marcotte і опублікована видавництвом A Book Apart – джерело знань по розробці адаптивних сайтів. Вона охоплює основи адаптивного дизайну, модульні сітки, адаптивні зображення і Media Queries, що досить для розуміння того, як створити адаптивний сайт.60. The Big Web Show епізод # 9: Responsive Web DesignВ 9 серії The Big Web Show Jeffrey Zeldman і Dan Benjamin запросили Ethan Marcotte, щоб обговорити адаптивний дизайн.

На закуску

61. Останні тенденції в HTML5У презентації розглядаються маловідомі аспекти HTML5, які можуть будуть реалізовані в браузерах в найближчому майбутньому. Серед іншого, Media Queries на стороні сервера з javascript і виявлення форм-фактора пристрою.

Ссылка на основную публикацию