21 чудовий інструмент для адаптивного веб-дизайну
Як веб-дизайнер, ми знаємо, що адаптивний веб-дизайн залишився. Ви витратили час, щоб створити дуже красивий і надійний веб-сайт із значною кількістю трафіку на ваш сайт із пошукових систем. Тоді ви потрапляєте в реальність пристроїв. Який пристрій використовуватиметься для відкриття вашого сайту?. Як щодо висоти та ширини пристрою? Є тисячі пристроїв, а також кілька розмірів і вікон перегляду.
Як веб-дизайнери, ми знаємо, що наш дизайн буде переглядатися з різних пристроїв і браузерів, і в той же час наші блоки коду будуть виконуватися різними пристроями.
Відбулося величезне збільшення кількості пристроїв із підтримкою Інтернету, а також значної щільності пікселів, взаємодії, роздільної здатності тощо. Крім того, судячи з сучасних тенденцій у технологіях, буде більше пристроїв, за допомогою яких люди зможуть отримати доступ до Інтернету.
Той факт, що адаптивний веб-дизайн необхідний для кожної мережі, не означає, що це так просто, враховуючи той факт, що вам потрібно врахувати кілька пристроїв, а також розміри та вікна перегляду. Завдання полягає в тому, що ми повинні створити інтерфейс, який буде масштабуватись практично з усіма пристроями, від маленьких до великих екранів у залі театру.
Це просто змусило всі веб-сайти реагувати на різні пристрої для зручної навігації та покращення взаємодії з користувачем.
Якщо ви бачили одну з наших минулих публікацій про корисні інструменти адаптивного веб-дизайну, то ви знаєте, що в Інтернеті є так багато інструментів для адаптивного веб-дизайну. Але з мого багаторічного досвіду роботи веб-дизайнера, розробника та консультанта в поєднанні з ретельними дослідженнями, які я провів, я поділюся 21 чудовим інструментом і ресурсом для адаптивного веб-дизайну. Майте на увазі, для дизайнерів, які ще не звикли до адаптивного веб-дизайну. Рекомендую прочитати «Важливість і причини адаптивного веб-дизайну», ви також можете поставити своє запитання, і експерт відповість вам на вашу електронну адресу. Після цього ви можете продовжити тут із 21 чудовим інструментом для адаптивного веб-дизайну.
01 Фонд ЗУРБ
ZURB Foundation — це одна з найпоширеніших у світі фреймворків для адаптивного сайту. ZURB витратив багато ресурсів на фреймворк, на додаток до кількох зусиль, які були спрямовані на проект з відкритим кодом на фреймворку.
ZURB Foundation має величезну стратегію вдосконалення, оскільки ви можете збільшувати складність шару залежно від розміру екрана та можливостей дизайну. Крім того, ви також знайдете повну бібліотеку, що складається з кількох компонентів інтерфейсу користувача, що полегшить вам створення прототипу будь-якого інтерфейсу, який ви можете собі уявити.
02 Jetstrap
У процесі дизайну wed відбулися значні зміни, оскільки каркас не показує, як певний дизайн виглядатиме в кількох веб-середовищах. Щоб використовувати деякі інструменти створення прототипів, необхідні знання програмування.
Саме тут приходить Jetstrap. Це дозволяє дизайнеру швидко збирати прототип, просто перетягуючи компоненти з інтерфейсу користувача на полотно. Для початку не потрібні навички розробки інтерфейсу, і ви отримаєте веб-сторінку, яка дихає. Вам потрібно лише використовувати інструменти перетягування в інтерфейсі.
03 Тижневик адаптивного дизайну
Веб-розробник Джастін Ейвері витрачає час на надсилання спеціального інформаційного бюлетеня про ресурси, інструменти та методи адаптивного веб-дизайну. Як дизайнер, я витрачаю частину свого часу на твіттер, читаючи стрічки адаптивного веб-дизайну. Деякі канали містять найновіші ресурси та корисні поради щодо створення адаптивного веб-дизайну. Приєднання до обговорення адаптивного веб-дизайну в LinkedIn безсумнівно покращить ваші навички та дасть вам найновіші ідеї щодо сучасних тенденцій у адаптивному веб-дизайні.
04 Прототип стилю
Прототип стилю — це HTML-сторінка, яка показує стиль кнопки, типографіку, колір, стиль фотографії, перекидання та інші елементи для пропонованого сайту.
Однією з головних цілей прототипу стилю є створення корисних і відтворюваних результатів. Хоча немає правил для створення прототипу стилю, ви повинні включити деякі основні елементи, як-от стиль кнопки, типографіку, колір і рол-вер, крім інших елементів, які можна включити.
Прототип стилю дозволяє додавати анімацію, колір та інші елементи у веб-середовище.
05 Елемент колажів
Під час створення повних макетів сторінок одна з найскладніших речей, з якою нам доводиться стикатися як дизайнеру, — це розробка хвилини кожної сторінки. З професійної точки зору доцільно витрачати більше часу на розробку основних повідомлень на домашній сторінці, ніж витрачати більше часу на решту сторінок.
Як дизайнеру, створювати макети сайту у Photoshop не рекомендується з огляду на сучасні тенденції в галузі веб-розробки, оскільки у вас є багато інших справ.
Засновник агентства SuperFriendly Ден Молл пішов ще далі в спрощенні речей за допомогою Element Collages.
Element Collages має дуже хороший інтерфейс користувача для візуального вивчення компонентів інтерфейсу. Колажі допомагають вам у візуальному напрямку, і вам не потрібно створювати весь компонент самостійно, враховуючи той факт, що ви не проектуєте лише для одного пристрою.
06 Груші
Деякі важливі переваги посібників із стилю зовнішнього інтерфейсу включають полегшення тестування, кращий робочий процес, спільний словниковий запас і слугування посиланням, до якого можна повертатися. Pears — це тема WordPress з відкритим кодом, створена Деном для створення посібника зі стилю інтерфейсу.
Pears дозволяє дизайнерам легко використовувати загальну бібліотеку для узгодженої системи проектування.
07 Icomoon
Retina та інші дисплеї з високою роздільною здатністю швидко стають розпорядком дня, растрові піктограми не дуже добре масштабуються на цих пристроях з високою роздільною здатністю. На щастя, індустрія веб-розробки справляється з цим завданням.
Ефективним рішенням для цього є створення піктограми, незалежної від роздільної здатності, чого можна досягти, створивши власний шрифт піктограми та вставивши його за допомогою CSS @font-face.
Iconmoon просто полегшує процес створення та відображення шрифту значка. Ви зможете вибрати з бібліотеки піктограм із опціями завантаження своєї піктограми. Звідти ви можете створити власний шрифт значка та завантажити пакет, який містить шрифт і відповідний CSS. Коли справа доходить до створення піктограми незалежної роздільної здатності, Iconmoon є важливим інструментом.
08 Foresight.js
Різні пристрої мають різні способи відображення растрових зображень, але, як дизайнер, ви повинні мати на увазі, що завантаження зображень високої роздільної здатності може збільшити вагу сторінки. Foresight.js detects має здатність виявляти дисплей пристрою та підключення, щоб визначити, чи завантажувати компоненти високої роздільної здатності чи ні.
09 Детектор
Виявлення пристроїв і профілювання іноді можуть бути складними, оскільки бібліотекою пристроїв важко керувати. Оскільки виявлення функцій залежить від виявлення на стороні клієнта, тож лише залежність від нього може призвести до певних обмежень у гнучкості під час надання функціональних можливостей широкому діапазону пристроїв.
Це призвело до створення детектора Дейвом Олсеном із використанням сценарію PHP і браузера на основі Javascript разом із безліччю бібліотеки виявлення функцій. Модернізація користувачів бібліотеки та виявлення агента користувача для визначення класів пристроїв. Детектор має здатність самостійно адаптуватися до нових пристроїв і браузерів без необхідності отримувати інформацію з центральної бази даних браузера.
10 Enquire.js
Кожен дизайнер знає про важливість використання медіа-запитів у CSS. Тоді що станеться, коли ви захочете змінити якийсь досвід у певний момент? Це можна легко виконати за допомогою сценарію Enquire.js.
Сценарій Enquire.js використовує uses matchmedia для умовного виконання деяких функцій і завантаження певного сценарію, якщо виконуються певні умови. Завдяки цьому ви можете очікувати кращої взаємодії з користувачем і простоти від користувачів.
11 SocialCount
Завантаження віджетів соціальних мереж, таких як Facebook, Twitter і Google, займає 19 віджетів HTTP-запитів і додає додаткові 246,7 КБ до ваги сторінок, що часто збільшує час для завантаження веб-сторінок і споживає більше пропускної здатності.
Зак Лезерман вирішив це, створивши легке рішення під назвою social count. Це невеликий скрипт, який ліниво завантажує соціальні віджети, щоб користувачі взагалі не були покарані.
12 FitVids
Кілька медіа-об’єктів, зокрема відео, відрізняються від зображень у тому сенсі, що вони не зберігають частину свого співвідношення сторін після зміни розміру. Це створює проблему масштабування під час перегляду відео з безлічі різних пристроїв із підтримкою Інтернету.< br/> Крісу та іншому дизайнеру вдалося розробити плагін під назвою FitVids.js. Плагін здатний виявляти та використовувати правильне співвідношення відео або будь-якого іншого медіа-об’єкти під час зміни розміру. Завдяки цьому ви можете отримати правильний коефіцієнт зміни розміру під час зміни розміру вашого відео, і в результаті отримати точно відображені медіа-об’єкти, включаючи відео, у ваших програмах.
13 Зручний для IE CSS для мобільних пристроїв
Кожен дизайнер знає, наскільки важливі медіа-запити, але справа в тому, що Internet Explorer не підтримує медіа-запити. У той же час, як дизайнер, ви не можете вирішити відмовитися від медіа-запитів лише тому, що хочете підтримувати старий IE. Цю проблему можна легко подолати за допомогою Sass. Sass допоможе нам створити стилі на мобільних пристроях і водночас забезпечить відповідні стилі робочого столу для старої версії IE.
14 робочих місць.
Як дизайнер, якщо ви шукаєте в Інтернеті інструменти тестування вікна перегляду, ви знайдете багато інструментів тестування порту перегляду. Але проблема полягає в тому, що більшість інструментів тестування вікон перегляду покладаються на популярні пристрої з шириною, як-от 320, 768, 1024 тощо.
Іш класифікує та виводить загальні діапазони (малий, середній, великий тощо), щоб переконатися, що ти виявляє загальний спектр роздільної здатності.
15 пропорційних медіа-запитів
Деякі дизайнери все ще використовують значення пікселів для встановлення контрольних точок, у той час як ми використовуємо ширину, вимірювання та одиниці шрифту відносно різних точок огляду пристроїв. Лайза Гарднер надала хороший підручник, який пояснює, як ми можемо використовувати відносні одиниці для точок зупину, щоб створити кращий досвід користувача.
16 MQTest.io
Як дизайнеру іноді може бути складно відстежувати медіа-запити, які підтримує певний браузер. Це легко вирішити за допомогою MQTest.io, розробленого Вільямі Салміненом. Інструмент допоможе вам розпізнавати та аналізувати різні медіа-запити, на які відповідають різні веб-браузери. Завдяки цьому ви також можете використовувати медіа-запити, які зазвичай не використовуються.
17 Букмарклет медіа-запиту Sparkbox
Sparkbox — це букмарклет для медіа-запитів, який допомагає визначати запити для поточних або медіа-файлів, що використовуються. Для дизайнерів вкрай важливо мати доступ до розмірів екрана, оскільки це економить час і також допомагає визначати пропорційні медіа-запити.
18 BrowserStack
Як розробники, ми знаємо, наскільки дорогим, складним і навіть страшним може бути тестування в репрезентативному наборі браузерів і пристроїв. Це легко вирішити, якщо ми використовуємо BrowserStack.
Стек веб-переглядача забезпечує віддалений доступ до кількох пристроїв і середовищ, таким чином дозволяючи вам виконувати певне тестування якості. BrowserStack настільки ж вражаючий, як будь-що інше, а також ефективний під час тестування на старих версіях Internet Explorer.
19 Мобітест
Продуктивність є одним із найважливіших аспектів веб-дизайну. За допомогою Mobitest ви зможете побачити, як працюють ваші проекти за допомогою певного аналізу.
Під час тестування вашого дизайну на Mobitest вам потрібно лише ввести веб-адресу, після чого інструмент відобразить сайт на реальному пристрої та в той же час надасть вам багато статистики продуктивності, оскільки ви також зможете знати навантаження час і середній розмір сторінки, а також інші статистичні дані.
20 Adobe Edge Inspect
Для веб-дизайнера неможливо переоцінити важливість тестування на реальному пристрої, оскільки перед публікацією вам потрібно побачити та проаналізувати, яку продуктивність ваш дизайн принесе користувачеві. Adobe Edge Inspect зробив тестування на реальному пристрої дуже простим і простим, оскільки у вас є інструмент, який автоматично оновлює всі підключені пристрої. Ви також можете протестувати код на широкому спектрі пристроїв.
21 Codepen Pro
CodePen — це інструмент, який швидко допомагає продемонструвати адаптивні шаблони та техніки. Це інструмент, який також допомагає працювати з нашими проектами на різних пристроях і комп’ютерах, продовжуючи вводити текст.
CodePen — це потужний інструмент, який допомагає вам бачити результати коду на кількох пристроях і комп’ютерах під час введення.
Висновок
Усі 21 згаданий вище інструмент підходять для адаптивного веб-дизайну. Але кожен із інструментів має різну функціональність, особисто я не маю жодних переваг, оскільки всі інструменти ефективні, хоча з різним інтерфейсом та функціональністю. Вибір за вами.