6.4: Веб-розробка

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

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

Оцінка ваших потреб у розвитку

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

Контент-менеджмент

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

Управління веб-сайтом є спільним і залучає різних людей, в різних ролей, які працюють над матеріалом, такі як творці, редактори, видавці, адміністратори і навіть відвідувачі вашого сайту. CMS надає інструменти, що дозволяють користувачам з невеликим знанням мов веб-програмування або мов розмітки створювати та керувати вмістом веб-сайту. CMS дозволяє бізнесу керувати та оновлювати власний веб-сайт без необхідності веб-розробника (Johnston, 2015).

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

електронної комерції

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

Дізнайтеся більше в нашому розділі електронної комерції.

Сайт брошури

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

Малюнок\(\PageIndex{1}\): Статична брошура сайт адаптований від HFM Columbus, 2017

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

Варіанти розробки

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

Готові рішення

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

Розробка на замовлення

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

Переваги та недоліки готової та індивідуальної розробки

Таблиця 6.4.1 (Купер, 2015)

Поза полицею		На замовлення
переваги	недоліки	переваги	недоліки
Дешевше	Надмірно складний з великими секціями, які ви ніколи не будете використовувати	Створено спеціально для потреб бізнесу	Дорожче
Складне програмне забезпечення завдяки широкому спектру ресурсів, що вводяться для розробки	компроміс особливостей	Індивідуальний та унікальний	Потрібні досвідчені розробники для обслуговування
Легко знайти підтримку та літературу широко доступні	Тривалий час, щоб вчитися і внутрішнє навчання потрібно	Налаштовано для інтерфейсу з програмним забезпеченням, яке ви вже використовуєте	Менше майбутні докази, пов'язані з конкретним агентством для підтримки
Легко обмінюватися файлами як програмне забезпечення, широко використовуване та доступне	Робочий процес, можливо, доведеться змінити, щоб відповідати дизайну програмного забезпечення	Більш інтуїтивно зрозумілий спосіб роботи вашого бізнесу	Великі вкладення часу на розробку, тестування
Немає часу компанії, необхідного для специфікації та тестування	Функції, які вам потрібні, можуть бути недоступними	Більш гнучкий, може бути змінений і змінений за потребою	Займає набагато більше часу на реалізацію
Доступно раніше	Індивідуальні запити до габаритних розробників не несуть ваги	Отримайте кращу підтримку	Важко отримати підтримку, якщо розробник не надає її
	Довгий час, щоб все було виправлено, якщо через корпорацію, яка розробила програмне забезпечення	Забезпечити значну перевагу бізнесу	Складно вибрати відповідного розробника, який забезпечить надійне і стабільне програмне забезпечення.
	Важко отримати перевагу конкурента	Можливість продажу заявки іншим особам (якщо ви володієте правами)

Відкритий вихідний код проти пропрієтарних

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

Деякі широко використовувані рішення CMS з відкритим кодом включають:

WordPress (www.wordpress.com)

Друпал (www.drupal.com)

Блогер (www.blogger.com)

Joomla (www.joomla.org)

Таблиця 6.4.2 (Роббінс, 2015)

Фірмова		З відкритим вихідним кодом
переваги	недоліки	переваги	недоліки
передбачуваність	Менш поточні настільки великі інвестиції в застарілі системи	Налаштування	Авансова вартість може бути високою, якщо ви хочете високо налаштований продукт
Безліч варіантів	Ліцензійні збори	Гнучкість	Менше «З коробки» функції та функції, які вам потрібні, може бути дорогим для створення
Надійний і наповнений функціями	Підтримується тільки компанією, яка її продає, або її агентами	Підтримується інтернет-спільнотою, а не компанією	Менш передбачувана підтримка, яка відбувається лише за потребою, а не регулярно
Відносно економічно ефективним для реалізації	Відсутність налаштування	Існуючі фреймворки для роботи з	Менш передбачуваний
	Відсутність гнучкості	Нова технологія допомагає бути в курсі помилок і виправлень
		Ви володієте налаштованими версіями

CMS слід вибирати з урахуванням цілей і функцій веб-сайту. CMS повинна бути в змозі масштабувати разом з веб-сайтом і бізнесом, який вона підтримує, а не навпаки. Багато систем управління контентом прославилися певними потребами.

Приклади включають:

• WordPress для особистих блогів або сайтів типу брошури
• Drupal для більш складних спільнот і видавничих сайтів
• Magento для сайтів електронної комерції.

Фреймворки розробки

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

Мови та фреймворки на стороні сервера

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

При виборі мови на стороні сервера потрібно враховувати:

Вартість: Вартість варіюється в залежності від мови, яку ви вибрали для вашого проекту веб-розробки, оскільки деякі з них більш складні, ніж інші, розробник може стягувати більше. Так що обрана мова може безпосередньо впливати на зарплату розробника. Якщо інформація обробляється там, де розміщується ваш веб-сайт, на відміну від комп'ютера клієнта, це збільшує витрати. Деякі мови також вимагають постійного управління та обслуговування веб-сайтів, що є додатковою вартістю.

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

Деякі з найбільш поширених і популярних мов на стороні сервера включають PHP, Java, Ruby, .NET і Python. Попросіть вашого веб-розробника порадити вам найкращу мову для вашого конкретного проекту (Фергюсон, 2016).

Малюнок\(\PageIndex{2}\): Логотипи для деяких популярних фонових мов розробки Адаптовано від Lotusnotus, n.d.

Деякі поширені фонові фреймворки Django, Zend Framework і Ruby on Rails

Мови та фреймворки розробки на стороні клієнта

Примітка

Є багато безкоштовних ресурсів в Інтернеті, які навчать вас, як кодувати. Одним з них є академія коду: www.codeacademy.com

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

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

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

Вартість: витрати на розробку мови Front-end порівняно нижчі, ніж витрати на серверні; хоча розробники багатих інтерфейсів часто вимагають преміальних ставок.

Особливості: HTML, CSS і JavaScript мови з відкритим вихідним кодом часто використовуються разом і сумісні з більшістю апаратних і програмних засобів. Вміст, розроблений в них, також є більш дружнім для пошукових систем. Сьогодні Flash використовується рідко, незважаючи на свої інтерактивні мультимедійні можливості. У багатьох випадках багатший досвід може бути досягнутий за допомогою HTML, CSS та JavaScript. Те, що ваші кінцеві користувачі зможуть переглянути, завжди має бути найважливішим фактором.

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

Підтримка браузера та ОС: За допомогою інтерфейсних мов ви повинні задовольнити підтримку браузера та операційної системи. Веб-сайт буде виглядати по-різному в кожному браузері та операційній системі, і це потрібно враховувати. Якщо функція не може бути відображена за певних умов, необхідно реалізувати обхідні шляхи. Зазвичай це стосується старих версій Internet Explorer.

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

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

HTML5

HTML - мова для створення веб-сайтів, а HTML5 - п'ята ітерація мови. Це також назва для ряду технологій, які дозволяють сучасні функції веб-перегляду. Це специфікація, опублікована органом веб-стандартів, W3C, описує, які функції доступні та як ними користуватися. HTML5 відрізняється від власного веб-програмного забезпечення, такого як Adobe Flash тим, що специфікація є результатом внесків багатьох організацій і може бути реалізована будь-ким без необхідності платити за роялті або ліцензійні збори. Однак ви платите за інструменти розробки, що надаються компаніями.

Малюнок\(\PageIndex{3}\): HTML5, JavaScript і CSS логотипи адаптовані з Codecondo, 2016.

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

HTML5 дозволяє браузерам відтворювати мультимедійний контент без використання Flash або подібного плагіна. Існує також технологія під назвою Canvas, яка дозволяє розробникам створювати багатий інтерактивний досвід без обмежень, що постачалися з попередніми версіями HTML. Наприклад, 3D-анімаційне відео тепер можна відтворювати, те, що раніше вимагало використання Flash або Silverlight.

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

CSS

CSS розшифровується як каскадні таблиці стилів і є мовою таблиць стилів, яка використовується для вказівки браузеру, як візуалізувати HTML-код. Наприклад, звичайний текст на веб-сторінці включений в HTML-код, а CSS визначає, як він буде відображатися. CSS може встановлювати безліч властивостей, включаючи розмір, колір і інтервал навколо тексту, а також розміщення зображень та інших елементів, пов'язаних з дизайном. CSS попередньо процесори, такі як LESS, SASS і Stylus також доступні, щоб зробити CSS більш легко обслуговуються і масштабовані. Вони дозволяють більш функціональну компіляцію CSS. Останній стандарт CSS CSS3. Він назад сумісний з усіма версіями CSS і надає набагато більше корисних функцій, таких як текстові ефекти, 2D/3D перетворення та анімації, щоб назвати декілька (w3shools, n.d).

JavaScript

Це найпоширеніша мова на стороні клієнта, яка використовується для створення багатих динамічних веб-властивостей. Оскільки це мова з відкритим вихідним кодом, багато розробників додали функціональність, яку можна швидше реалізувати. Наприклад, існує понад 1 000 різних галерейних систем, створених розробниками JavaScript для розробників JavaScript.

Спалах

Adobe Flash — це мова для створення насиченого інтерактивного досвіду. Він підтримує відео і часто використовується для створення ігрових веб-досвіду. Хоча широко підтримується настільними браузерами, він має обмежену (і зменшує) підтримку на мобільних пристроях і не використовується на пристроях Apple, таких як iPhone і iPad. Він має історію проблематичності для SEO, хоча є способи обійти більшу частину цього.

Використання спалаху знижується, оскільки деякі отвори в безпеці були викриті, і багато хто вважає, що він знаходиться на шляху до виходу. У лютому 2016 року компанія Google оголосила, що її рекламні мережі AdWords і DoubleClick більше не підтримуватимуть Flash. Оголошення потрібно буде оновити до HTML5 (Google AdWords, 2016). YouTube оголосив, що більше не буде використовувати Flash плеєр за замовчуванням. Він перейшов на HTML5 для всіх останніх браузерів. Adobe припинила виробництво Adobe Professional CC і випустила Adobe Animate CC, який зараз є головним інструментом Adobe для підтримки вмісту HTML5. Залишилося ще кілька слідів від Flash, оскільки він все ще використовується як відеоплеєр і для створення онлайн-ігор.

Каркаси

Фреймворки - це пакети, які складаються з структури файлів і папок стандартизованого коду (наприклад, HTML, CSS і JavaScript), які можуть бути використані в якості основи для розробки веб-сайтів. По суті, фреймворки - це шаблони, які забезпечують загальну структуру веб-сайтів, так що розробникам не потрібно щоразу починати з нуля. Фреймворки економлять багато часу і грошей.

Деякі приклади включають Backbone.js, AngularJS, EmberJS, React.js і дуже популярні бібліотеки JQuery. Bootstrap також зростає в популярності в якості переднього кінця рамки.

Розробка кращих практик

Налаштування мета-тегів і title

Вибрана або створена вами CMS повинна дозволяти вводити власні метатеги для кожної сторінки, а також дозволяти повну настройку тегів title для кожної сторінки. Важливо відзначити, що Google більше не використовує метатеги ключових слів для ранжирування (Lincoln, 2015).

URL-адреси

Замість використання динамічних параметрів, CMS повинна дозволяти чисті URL-адреси за допомогою перезапису на стороні сервера. Чисті URL-адреси складаються лише з шляху до веб-сторінки без додаткового коду. Чистий URL може виглядати так: example.com/cats, тоді як нечистий URL може виглядати так: example.com/index. phppage=cats. Він повинен дозволяти створювати URL-адреси, які є:

• статичний
• перезаписуваний
• багатий ключовим словом.

Будьте обережні при створенні чистих, описових та динамічних URL-адрес із вмісту CMS. Якщо ви використовуєте заголовок новин, наприклад, «Шторм», як частину вашої URL-адреси (www.site.com/cape/storm), а хтось змінює заголовок на «Торнадо» (www.site.com/cape/tornado), це змінить URL-адресу, і пошукові системи індексують це як нову сторінку, але з тим самим вмістом, що і URL-адреса, яка мала старий заголовок. Майте це на увазі, перш ніж додавати динамічні параметри до своїх URL-адрес.

Настроюється навігація

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

CMS повинна мати хорошу підтримку для управління міркуваннями SEO, такими як переписування URL-адрес та уникнення проблем з дублюванням вмісту.

Настроювані іменування зображень і альт теги для зображень: Хороша CMS дозволить вам створювати власні теги alt і атрибути заголовків.

robots.txt управління: robot.txt файли - це файли.txt, які обмежують пошукові системи від індексації певних сторінок інформації Переконайтеся, що ви можете налаштувати robots.txt під свої потреби, або що це, принаймні, можна керувати за допомогою метатегів.

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

Розробка для декількох екранів

Примітка

Докладніше про це читайте в розділі «Дизайн користувацького досвіду».

Доступ до Інтернету кардинально змінився за останні кілька років. Робочий стіл більше не є єдиним або навіть основним засобом доступу до Інтернету. Використання мобільного Інтернету перевершило настільний комп'ютер у 2014 році і продовжує зростати з кожним роком, тоді як використання настільних комп'ютерів зменшується (Chaffey, 2016).

Через це важливо, щоб всі бренди були доступні на мобільних пристроях. Як ви дізналися в розділі «Дизайн користувацького досвіду», мобільні пристрої можуть підпадати до ряду категорій, і не всі мобільні пристрої мають однакові функції та розмір екрана. Це означає, що веб-сайти повинні бути розроблені таким чином, щоб бути доступними та оптимізовані для різних розмірів екрана та пристроїв.

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

Мобільні пристрої

Мобільний пристрій - це невеликий пристрій з комп'ютерним функціоналом. Це дозволяє підключення до Інтернету та різні функції, такі як Bluetooth, NFC, Wi-Fi та GPS. До них відносяться смартфони і КПК (MDN, 2016). Пам'ятайте, що мобільний телефон виходить за рамки просто мобільного телефону, також розгляньте планшети, ігрові консолі, нетбуки, носіння та ряд інших пристроїв з підтримкою Інтернету.

Обмеження з розробкою для ряду пристроїв [c head]

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

Рідина CSS макети дозволить сайту маніпулювати своїм вмістом на основі розміру екрана. Крім того, медіа-запити CSS можуть використовувати цільові стилі для певної ширини екрана, висоти та щільності пікселів.

Робота з сенсорним екраном означає, що ніякі ефекти при наведенні не працюватимуть. Навколо входів має бути дозволено достатньо місця через те, що область дотику пальців деяких користувачів більша за курсор миші.

Зображення повинні бути оптимізовані для мобільних екранів і обмежень пропускної здатності.

Примітка

Відмінним онлайн-інструментом стиснення JPEG/ PNG є Tinypng.org. Просто завантажте свої зображення і дозвольте їм стиснути його для вас (MDN, 2016).

Підходи до розробки

Спеціалізована мобільна розробка

Мобільні пристрої дозволяють користувачам отримувати доступ до інформації про ваш бренд на ходу. Оскільки мобільне проникнення настільки важке, і багато користувачів у всьому світі будуть отримувати доступ до Інтернету в першу чергу через мобільний телефон (Chaffey, 2016), кожен веб-сайт повинен бути розроблений з урахуванням мобільного пристрою. Мобільні інтерфейси веб-сайту вимагають більш простого підходу та врахування розміру екрана та способу введення. Конкретний дизайн для різних розмірів екрану мобільного телефону у вигляді адаптивного дизайну може бути варіантом. Однак Google віддає перевагу адаптивним сайтам, тому створення адаптивного сайту може не відповідати інтересам вашого бізнесу з точки зору SEO.

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

Мобільні додатки можна продавати або робити доступними безкоштовно. Багато розробників створюють додатки для отримання доходу, тоді як безкоштовні програми, які пропонують користувачам цінність, часто спонсоруються брендами або рекламою. Додаток може бути відмінним інструментом для зв'язку з вашим клієнтом.

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

Малюнок\(\PageIndex{4}\): Приклад фірмового додатка з iTunes App Store Адаптовано зі скріншота, фірмовий додаток Kellogs в itunes store, 2016

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

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

Примітка

Докладніше про оптимізацію мобільних пристроїв читайте в розділі Мобільні канали та додатки.

Адаптивний сайт

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

Малюнок\(\PageIndex{5}\): Адаптивний веб-дизайн на різних пристроях Адаптовано з фундаменту дизайну взаємодії, 2017

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

Багато користувачів віддають перевагу адаптивному дизайну, оскільки він забезпечує знайомство, однорідність і безшовність, які є важливими міркуваннями в користувальницькому досвіді (Soegaard, 2016). Чуйний дизайн повинен бути мобільним дружнім. Це допомагає зберегти зручність використання при перекомпонуванні для екрану мобільного пристрою.

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

Примітка

Спробуйте відвідати http://roxik.com/cat/ і змінити розмір вашого браузера, щоб побачити кішку змінити форму на основі ширини екрану. Це великий ілюстративний приклад рідини реагувати макета.

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

Ось таблиця, в якій порівнюються відносні сильні і слабкі сторони кожного варіанту. Немає правильної або неправильної відповіді, на яку вибрати. Виберіть варіант, який найкраще відповідає вашому бренду, цільовій аудиторії та цифровим цілям.

Таблиця 6.4.3

	Сильні сторони	Слабкі місця
Адаптивні сайти для мобільних пристроїв	Дизайн найкраще підходить до розміру екрана Більш естетично і забезпечити кращий UX Повністю оптимізований для мобільних пристроїв	Google віддає перевагу адаптивним сайтам Потрібні щонайменше 6 різних конструкцій конкретного розміру екрану дорого Трудомісткий
Рідний додаток	Можна створити універсальні та креативні інструменти Інтерактивний та веселий Може створити реальну додану вартість завдяки інноваційним підходам, неможливим через веб-браузер Ідеально підходить для часто повторюваних або рутинних завдань Сприяти лояльності до бренду Дозволяє отримати доступ до основних функцій телефону, таких як GPS, камера тощо. Може приносити дохід як «платна заявка» Вигода від продуктивності в деяких випадках	Не працює на функціональних телефонах Різні версії, необхідні для різних марок телефонів і моделей Зовсім інший і складний процес розробки Користувач повинен вибрати, щоб завантажити їх Користувачам без додаткового сховища телефону може не вистачати місця для встановлення програми Усі програми повинні проходити через офіційні магазини додатків, і в деяких випадках їх потрібно схвалити Зміни потрібно випускати через оновлення версій
Адаптивний сайт	Пристрій є «агностичним» рішенням Один послідовний сайт, доступний на багатьох пристроях Один набір даних для роботи Перспективний варіант, який буде працювати на більшості пристроїв Віддає перевагу Google і високо оцінює алгоритми для SEO Користувачі віддають перевагу однорідності та послідовності з адаптивних сайтів, що використовуються на різних пристроях	Може бути складним для розробки Сайт потребує найнижчого спільного знаменника підхід, щоб задовольнити всі пристрої Може працювати неправильно на всіх розмірах і формах пристроїв Немає узгодженого стандартного способу розробки адаптивних сайтів

Проектування для декількох розмірів екрану

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

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

Стандарти

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

Веб-стандартами керує W3C. Стандарти були створені для сприяння консенсусу, справедливості, громадської підзвітності та якості. Дотримання веб-стандартів означає, що сайт використовує дійсний код і дотримується положень W3C. Докладніше про веб-стандарти можна прочитати за адресою https://www.w3.org/standards/ about.html.

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

• Браузерстек - www.browserstack.com
• Тестифон — www.testiphone.com
• Мобільний телефон емулятор - для Samsung, iPhone, BlackBerry та інших - www.mobilephoneemulator.com

Safari на iPhone можна протестувати за допомогою симулятора IOS.

Адаптивний дизайн

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

• Скільки трафіку вашого веб-сайту надходить з певних мобільних пристроїв? Якщо це великий відсоток, подумайте про створення адаптивного сайту, призначеного для оптимального перегляду на мобільних розмірах екрану.
• Чи мають користувачі настільних комп'ютерів ті ж цілі, що і ваші мобільні користувачі? Тут вам потрібно мати на увазі ваші CTA, випадаючі меню тощо та переконатися, що вони можуть бути належним чином доступні відповідним пристроєм.
• Який ваш бюджет і як швидко вам потрібно, щоб ваш сайт був побудований? Адаптивні веб-сайти займають деякий час, щоб побудувати і можуть бути дорогими. Ви можете заощадити гроші в довгостроковій перспективі, пройшовши цей маршрут, але є значні авансові інвестиції.
• У вас є існуючий сайт, і він може бути перетворений в адаптивний веб-сайт, або його потрібно буде перебудувати (Du Plessis, 2012)?
• Чуйний дизайн поставляється з досить трохи термінології, але ви повинні бути знайомі з трьома ключовими поняттями.

Гнучка сітка

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

Малюнок\(\PageIndex{6}\): Гнучка сітка використовується в адаптивному дизайні. Адаптовано з гентики, 2017

Медіа-запити

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

Примітка

Чи є адаптивний дизайн підходить для вашої компанії або клієнта? Подивіться, як деякі компанії вирішували це питання тут: www.zdnet. com/does-yourcompanys-websiteedesign-7000021417

Гнучкі зображення

Зображення призначені для переміщення і масштабування за допомогою гнучкої сітки. Важливим фактором є те, наскільки швидко завантажується веб-сайт, тому високоякісні зображення доступні для великих екранів, а зображення з нижчою роздільною здатністю доступні для невеликих екранів. Частини зображень також можуть відображатися на менших екранах для підтримки якості зображення. Зображення можна навіть приховати повністю. Оптимізація зображення здійснюється в CSS, який запитує висоту екрану, ширину і співвідношення пікселів пристрою, а потім відповідно налаштовує зображення (MDN, 2016).

Для отримання додаткової інформації про адаптивні веб-сайти дивитися Методи для мобільних пристроїв (Чуйний проти адаптивного) від Брайана Вуда навчання: https://www.youtube.com/watch?v=IgojC1D3QpU [Доступ 30 жовтня 2017]