Наукові конференції, Научные конференции » Сучасність, наука, час. (18-20.11.13) » Звягінцев О. С. АКТУАЛЬНІ ПИТАННЯ АДАПТИВНОГО WEB-ДИЗАЙНУ

Звягінцев О. С. АКТУАЛЬНІ ПИТАННЯ АДАПТИВНОГО WEB-ДИЗАЙНУ

Категорія: Сучасність, наука, час. (18-20.11.13), Мистецтво

Звягінцев Олег Сергійович

Магістрант Інституту реклами, Україна, м. Київ

УДК 7.74: 01

 

АКТУАЛЬНІ ПИТАННЯ АДАПТИВНОГО WEB-ДИЗАЙНУ

 

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

Ключові слова: адаптивний дизайн, WEB-дизайн, макет.

 

Актуальність теми. Спостерігаючи за людьми в громадських місцях, можна помітити нову еволюційну тенденцію в зовнішньої поведінці людської раси. Практично скрізь зустрічаються люди з мобільними пристроями: смартфонами, планшетами. Ринок мобільних пристроїв зростає прогресуючими темпами. Інтернет вийшов за межі світу стаціонарних комп'ютерів. Сьогодні, доступ до Інтернету має безліч мультимедійних пристроїв: від «SMART» мультимедійних центрів до музичних кишенькових плеєрів, лідером серед них є смартфони. За даними Strategy Analytics, у світі більше мільярда підключених смартфонів, ця кількість подвоїться в найближчі два роки [9]. Згідно з дослідженням аналітиків інвестиційного підрозділу банку Morgan Stanley, 2013 року число користувачів мобільного Інтернету вперше перевищить число користувачів, що виходять в Інтернет через персональні комп'ютери [6]. Аналітики Gartner впевнені, що до 2020 р. до Інтернету буде підключено 30 млрд. різних пристроїв, багато з яких будуть не окремими комп'ютерами, а частинами інших виробів [8].

Мета статті – дослідити проблематику WEB-дизайну в контексті розвитку технологій відображення WEB-контенту на різних типах пристроїв та основне поняття адаптивного WEB-дизайну, окремо розглянути деякі питання стосовно проектування сприйнятливого макета.

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

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

Актуальність даного питання розкривається в невеликій кількості тематичної професійної літератури. Українською література взагалі відсутня. Російською можна зазначити переклад з англійської «Отзывчивый WEB-дизайн» (RESPONSIVE WEB DESIGN by ETHAN MARCOTTE ) [4]. Дана книга була написана Ітаном Маркоттом (Ethan Marcotte ), людиною, яка ввела до обігу поняття response web design. Якщо оцінювати вплив, який справила ця книга на Мережу і процес WEB-дизайну, то її можна поставити в один ряд з такими інноваційними книгами минулих років, як книга Джеффрі Зельдмана «WEB-дизайн за стандартами» [3]. У листопаді 2011 року книга «Отзывчивый WEB-дизайн» була визнана журналом Netmagazine однією з 25 кращих книг для WEB-дизайнерів і розробників.

Також можна відмітити переклад російською з англійської «Сначала мобильные» Люка Вроблевски (Mobil First by Luke Wroblewski). Ця книга про те, як залучити користувачів мобільних пристроїв на сайт і одночасно заробити на цьому [2].

На цьому список літератури з даного напрямку вичерпується, також є низка статей на тематичному форумі Хабрахабр – найбільша в Рунеті спільнота людей, зайнятих в індустрії високих технологій [5]. Основну частину цих статей засновано на досвіді зарубіжних колег.

29 червня 2007 року Стів Джобс піднявся на сцену і презентував аудиторії перший iPhone, тим самим повністю змінивши світ. Навіть не найбільші шанувальники Apple визнають, що цей пристрій мав неймовірний вплив на розвиток мобільного Інтернету. iPhone виявився першим мобільним телефоном, на якому перегляд WEB-сторінок був не мукою, а, навпаки, приємним заняттям [2]. Користувачі смартфонів – одні з основних споживачів адаптивного WEB-дизайну. Однак, стверджувати, що адаптивний дизайн потрібний тільки для коректного відображення WEB-контенту на пристроях з маленькими екранами помилково. Стандарт фіксованої ширини сітки сайту 960 пікселів давно не актуальний в контексті розвитку екранів з шириною більшою ніж 1024 пікселя. Завдання адаптивного дизайну – розміщення WEB-контенту, незалежно від ширини екрану, який відповідатиме всім потребам користувача.

Насамперед, дослідимо поняття і термінологію. Адаптивний WEB-дизайн– це комплекс технологічних і дизайнерських вирішень, які виконують основні завдання щодо поліпшення взаємодії і сприйняття WEB-контенту людиною на різних типах пристроїв. Адаптивний дизайн містить 2 основних рішення: прогресивні покращення і «сприйнятливий»макет.

Прогресивні покращення – це принципи програмування, пов'язані з прагненням надати кращі можливості для максимально широкої аудиторії в розрізі кроссплатформенності пристроїв і різновидів програмного забезпечення, працюючого з відображенням WEB-контенту, в першу чергу грунтується на принципах програмування з поетапним додаванням функціональних та візуальних ефектів [4]. Стівен Хей висловився на користь прогресивного покращення в своєму актуальному есе «There is no Mobile Web» («Немає ніякої мобільної Мережі»): «Замість того щоб вкладати наш контент у різні сайти, призначені для різних пристроїв, ми можемо використовувати прогресивне покращення, щоб гарантувати якісний доступ для всіх, з розширеним поданням для більш просунутих користувачів [4]».

«Сприйнятливий» макет – це сітка, шрифти, зображення і медіазапит, які реагують на зміну ширини вікна WEB-браузера. Зображення, сітка і шрифти змінюються без втрати пропорційності, це відбувається за рахунок розмірів заданих у відсоткових співвідношеннях від однієї величини [4]. Медіазапити – це низка правил, що змінюють верстку сторінок при зміні ширини екрану. Варто зазначити, що медіазапити дозволяють не тільки орієнтуватися на конкретний клас пристроїв, а й аналізувати фізичні характеристики пристрою, що використовується для відображення сторінки [4]. Медіазапити виводять дизайн за межі світу стаціонарних комп'ютерів.

Процес проектування «сприйнятливого» макету варто починати з мобільного макету. Таким чином, ми визначаємо макет для пристроїв із малими екранами, а потім використовуємо медіазапити для розширення дизайну зі збільшенням роздільної здатності. Завдяки цьому заповнити контентом максимальну ширину екрану буде легше, ніж йти від великої ширини і ховати контент медіазапитами [2].

Зупинимося на питанні, якою має бути максимальна ширина сітки. Бажання зробити сітку, що буде розтягуватись на всю ширину вікна браузера є очевидним, однак, тут є кілька питань, які вимагають детального вивчення. Розтягуючи блок з текстом по ширині, отримуємо текстовий блок довжиною, наприклад, 90 символів. При такій ширині блоку важко перейти на наступний рядок, проте існує чіткий критерій ширини текстового блоку,а саме: щоб зберегти читабельність текстового блоку, він повинен бути не коротше 45 і не довше 75 знаків при стандартному інтерліньяжу [1]. Частково цю проблему можна вирішити за допомогою збільшення інтерліньяжу,однак, це не саме вдале рішення. Ще одне рішення цього питання – збільшення шрифту при збільшенні діагоналі екрану. Цей медіазапит позитивно позначиться на читабельності тексту. Чим більшим є екран, тим більшою є дистанція для найбільш комфортного перегляду. Людині найбільш зручно розглядати зображення під кутом зору близько 30°. Компанія Apple рекомендує сидіти на відстані від 18 до 24 дюймів (від 45 до 60 см) від монітора, залежно від його розміру. У рекомендаціях вказано відстань 15 дюймів (37 см) для найновішого iPad, 10 дюймів (25 см) для iPhone 4. Ці значення свідчать про доцільність зміни шрифту, залежно від відстані читача від екрану. З завданням заповнення вільного простору впорається ефективний медіазапит перекомпонування блоків, ті блоки, які зараз сховані і вимагають прокручування по вертикалі, ми сміливо можемо перенести в іншу вільну корисну площину, додавши ще одну колонку з інформацією. Робота за модульною сіткою дає можливість досягнути таких результатів. У такий спосіб, можна поміняти орієнтацію макета з вертикальної на більш горизонтальну [7]. Однак, не завжди варто заповнювати контентом всю ширину вікна. Слід не забувати про вільний простір, який закцентує на потрібній інформації, адже перевантаживши обробкою інформації, можна втратити основні цілі перебування глядача на WEB-сторінці [7].

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

 

Література:

1. Брингхерст Р. Основыстиля в типографике; пер. с англ. Г.Северской, А.Семенова, С.Пономаренко. – М.: Д.Аронов, 2006. – 432 с.

2. Вроблевски Л. Сначала мобильные!; пер. с англ. П.Миронов. – М.: Манн, Иванов и Фербер, 2012. – 176 c.

3. Зельдман Д. Web-дизайн по стандартам; пер. с англ. Г.Ковалев. – М.: НТ Пресс, 2005. – 440 с.

4. Маркотт И. Отзывчивый веб-дизайн; пер. с англ. П.Миронов. – М.: Манн, Иванов и Фербер, 2012. – 277 c.

5. http://habrahabr.ru.

6. http://korrespondent.net/business/web/1472408-v-etom-godu-smartfony-stanut-populyarnee-pk-prognoz.

7. http://prodesign.in.ua/2013/04/zhyttya-za-mezhamy-960-pikseliv-stvorennya-dyzajnu-dlya-velykyh-ekraniv.

8. http://slon.ru/fast/future/v-mire-prodano-svyshe-1-mlrd-smartfonov-840415.xhtml.

9. http://vestifinance.ru/articles/33725.

 

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Коментар:
Введите код: *

Карта сайту

^