Способи реалізації адаптивності інтерфейсу

      На даний момент близько 11-12% з 100 000 найбільш відвідуваних сайтів — адаптивні, і немає сумнівів, що в найближчі кілька років їх кількість зросте.
  
Так як все більше організацій закочують рукави, хапаючись за реалії веб-простору, використовуваного різними пристроями, буде незайвим розглянути різні стратегії, що використовуються для досягнення такої собі нірвани:
  
 
 Адаптивна модернізація
 
 
 Адаптивна модернізація — це процес, при якому береться існуючий сайт, призначений тільки для настільних комп'ютерів, і «переробляється в адаптивний» за фактом.
 
 
 
 
Що стосується готових сайтів (зокрема комерційних), у команд не завжди є можливість все відкинути і побудувати заново.
 Ден Седерхольм
 
 
Для більшості організацій, широкомасштабне створення нового дизайну з нуля навіть не розглядається. Саме тому адаптивна модернізація це популярний підхід до створення хорошого інтерфейсу для мобільних пристроїв.
 
 

Переваги

 
     
  • Відносно швидко.
    Способів зробити адаптивну модернізацію досить багато, ця стратегія може полягати в додаванні файлу small-screens.css на сайт. Незважаючи на цей досить грубий приклад, адаптивна модернізація — привабливий варіант для великої кількості організацій, так як не вимагає перебудови всього з нуля.
  •  
  • Знайоме.
     Чи не збиває з пантелику користувачів . Люди роками звикають до інтерфейсу і роблячи модернізацію існуючого, організації зберігають знайомий підхід, при цьому покращуючи життя людям з мобільними пристроями.
  •  
  • Організаційно швидше.
    Говорячи політичною мовою, модернізувати інтерфейс більш безпечно, ніж починати все з нуля. Менше суперечок про те, який відтінок зеленого вибрати, які банальні стокові фотографії використовувати, а управлінню не доведеться вивертати руки. Це дозволяє командам швидше запускати адаптивні сайти.
  •  
 
 

Недоліки

 
     
  • Зачіпає тільки малу частину.
    Знову ж, є безліч варіантів виконання модернізації, але мета більшості з них — «зробити симпатично». Фокусуючись на переробці макета, модернізація часто упускає величезна кількість інших чинників , які потрібно враховувати при створенні успішного проекту для різних пристроїв.
  •  
  • 10 літрів води в трилітровій банці.
    Так як сайти для настільних комп'ютерів розраховані тільки для них (і, часто, існують протягом тривалого часу), вони можуть містити багато мотлоху. А так як модернізація, в основному, полягає в переплавки макета, більшість проблем з контентом, не враховуються повністю.
  •  
  • Продуктивність.
    Є щось дивне в написанні коду для кращої підтримки невеликих пристроїв. Видалення зайвого може зайти надто далеко, але без концентрації на продуктивності вона сама по собі не виросте .
  •  
  • Гірша підтримка.
    Медіа-запити, спочатку розроблені для настільних комп'ютерів, погано підтримуються більшістю мобільних пристроїв.
  •  
  • Тимчасові виправлення.
    Мені хочеться померти, коли я чую від людей прохання «зробити адаптивним» що-небудь, як ніби це просто чекбокс в плані проекту (який іноді насправді існує). Такий тип обмеженого мислення упускає реальні можливості, які пропонує адаптивний дизайн.
  •  
 
 

 
 
 Адаптивні мобільні сайти
Адаптивні мобільні сайти, або як я їх називаю «насіння для адаптивного майбутнього », являють собою практику створення окремого сайту формату «m.yourdomain.ru» з використанням технік адаптивного дизайну . Цю стратегію використовують такі сайти, як The BBC , The Guardian і Entertainment Weekly (над яким працював я).
 
 
 Мобільна версія дає можливість посадити насіння, яке виросте з вашого застарілого сайту.
 
 
 З часом застарілий сайт можна видалити, а спочатку мобільний, адаптивний і враховує майбутні тенденції буде розвиватися.
 
 

Переваги

 
     
  • Нижче ризик.
    Більшість організацій досі помічають, що трафік з мобільних пристроїв становить меншість. Тому запуск мобільного адаптивного сайту дозволяє таким організаціям протестувати обстановку без необхідності кидатися в цю тему з головою.
  •  
  • Можливість навчитися бути гнучким.
    Дизайнери можуть навчитися думати більш гнучко. Розробники дізнаються міріади хитрощів пристроїв на Android. Менеджери можуть зрозуміти, як відійти від вдосконалення пікселів. Адаптивний мобільний сайт може стати відмінною пісочницею для навчання.
  •  
  • Інфраструктура.
    Команди можуть навчитися як, раз і назавжди вирішити проблеми з управлінням вмістом, наприклад, з створенням зображень
  •  
  • Видалити зайве.
    Цей підхід пропонує відмінну можливість для команд запитати себе: «а чи дійсно нам це потрібно», а також сфокусуватися на продуктивності. Чому? Тому що в першу чергу вони зайняті поліпшенням взаємодії користувачів з їх сайтом на мобільних пристроях.
  •  
  • Майбутнє за споконвічно мобільними сайтами.
    Незважаючи на спочатку неповноцінний контент або функціонал, при достатній кількості часу і зусиль ці мобільні сайти, зрештою, можуть замінити своїх повноформатних предків.
  •  
 
 

Недоліки

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

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

Переваги

 
     
  • Початок з новими силами.
    Спочатку мобільні — початок з чистого аркуша. Дизайнери із захопленням беруться за роботу для цільової аудиторії для досягнення бізнес-цілі. Розробники фокусуються на компактною і ефективною розмітці. Залишаючи осторонь (або повністю змінюючи) існуючу базу коду, команди можуть зануритися в реальність різноманітних пристроїв без необхідності турбуватися про витрати на застарілі технології.
  •  
  • Краща підтримка.
     Створюючи за принципом «спочатку мобільні» , розробники здатні забезпечити підтримку більшої кількості мобільних пристроїв, особливо старіших, які не підтримують медіа-запити.
  •  
  • Продуктивність.
    Незважаючи на те, що продуктивність сайту в першу чергу залежить від його реалізації , адаптивні проекти для мобільного середовища дають командам можливість з самого початку акцентувати увагу на продуктивності.
  •  
  • З урахуванням всього і відразу.
    Дизайн «спочатку мобільні» (незважаючи на його назву) може враховувати велика кількість дозволів , а не тільки орієнтуватися на один клас пристроїв.
  •  
  • Дизайн, орієнтований на майбутнє.
    Інтерфейс, в першу чергу розроблений для мобільних пристроїв, створює міцний фундамент, здатний перенести перевірку часом і служити в якості платформи для майбутнього зростання і змін.
  •  
  
 

Недоліки

 
     
  • Займає багато часу.
    Давайте дивитися правді в очі, «спочатку мобільні» — це далеко не найшвидший принцип. Він займає багато часу і сил на побудову всього з нуля. Потрібно зробити все так, щоб це коштувало витрачених ресурсів.
  •  
  • Зрушення у свідомості.
    Досить складно змусити організації думати про все іншим чином. Мислення, спрямоване на розробку спочатку для мобільних пристроїв, перевертає все з ніг на голову, що ускладнює використання підходів, до яких люди звикли за багато років. Для цього потрібно забути їх (на щастя, про це є книга ) і постійно нагадувати людям не повертатися до старих методів.
  •  
  • Організаційно складно.
    Великий редизайн звичайно ускладнюється різними видами організаційної бюрократії. Президент компанії хоче висловити свою думку з приводу дизайну, незважаючи на те, що його не було на жодному попередньому зібранні про те, що взагалі таке адаптивний дизайн. На шляху створення інтерфейсу, який буде відмінно виглядати і функціонувати на будь-якому пристрої, можуть також стати амбіції інших людей і політика.
  •  
  • незнайомим.
    Будь редизайн робить інтерфейс незнайомим для користувачів. Але щоб зберегти знайомий підхід, особливо якщо ви зібралися все кардинально міняти, потрібно бути гранично обережним.
  •  
 
 

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

Сторінка за сторінкою

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

Переваги

 
     
  • Помітно.
    Запуск адаптивних версій найбільш переглядаються сторінок (наприклад, головною), спрямовує зусилля туди, де більшість користувачів помітять оновлений дизайн.
  •  
  • Можливість навчитися бути гнучким.
    Організації часто використовують такі проекти як провідників до більш великим ідеям. Фокусуючи увагу на кількох основних сторінках, можна навчитися всьому, що стосується створення адаптивних інтерфейсів, а потім використовувати ці знання для іншої частини сайту.
  •  
  • Більш високі шанси запуску.
    Фокусування на одній сторінці або однієї функції — це відмінний спосіб побачити результат. Якщо робити редизайн всього і відразу, це може стати жахливо складною справою, яке може ніколи не побачити світло.
  •  
  
 

Недоліки

 
     
  • Відсутність цілісності.
    Користувач переходить від блискучого нового дизайну до старого виродливому всього за один клік. Це погано з точки зору однорідності, так як користувачі сприймають компанію як одну торгову марку, а не мішанину з різних відділів і пріоритетів.
  •  
  • Недалекоглядність.
    Більшість редизайнів, заснованих на сторінках, сфокусовані на «запуску до третього кварталу», але досить часто, на більш великих сайтах, план розгортання проекту відсутня.
  •  
  • Ймовірність зачахнути на корені.
    У першу чергу необхідно визначитися зі стратегією і ризиками, інакше ваш сайт ризикує стати Франкенштейном.
  •  
 
 

Компонент за компонентом

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

Переваги

 
     
  • Поступове ознайомлення користувачів з новим інтерфейсом.
    Замість того, щоб звалювати користувачам на голову повністю новий, на 100% дивовижний адаптивний дизайн (!), Цей поетапний підхід показує користувачам новий інтерфейс протягом деякого часу. Зміни виявляються не такими стрімкими, щоб розлютити людей, але просувають дизайн в потрібному напрямку.
  •  
  • Розбивка процесу.
    Команди вчаться вирішувати модульні проблеми (на рівні блоків ), а не фокусуватися на цілій сторінці.
  •  
  • Рівномірний рівень зусиль.
    Розбивка процесу на модулі дозволяє краще зрозуміти рамки проекту .
  •  
  
 

Недоліки

 
     
  • 50 відтінків недосконалості.
    Цей підхід може виявитися невдалим, так як користувачам доведеться мати справу з таким собі інтерфейсом Франкенштейна, який одночасно і старий і новий.
  •  
  • Можливість зачахнути на корені.
    Такі типи проектів потребують чітких кінцевих цілях, інакше вони можуть назавжди застрягти в чистилище.
  •  
  • Технічне співіснування.
    Що відбувається, коли один модуль, який використовує новітні технології і техніки, стикається лобом із застарілим модулем? У цьому підході є безліч складнощів, пов'язаних з архітектурою.
  •  
 
 

 
 «Я Чеві Чейз, а ти ні»
Звичайно, всі організації різні, тому який шлях обрати — залежить від різних факторів. Час, бюджет, рамки, організаційна структура, набір навичок і багато інших чинників впливають на те, яку стратегію краще застосовувати. Але з часом стає все більш очевидним те, що організаціям потрібно працювати над зростаючим різноманітністю пристроїв, що мають доступ в інтернет.
 
 Це переклад статті під назвою " Responsive Strategy " від Brad Frost . Перевели в компанії UXDepot схвально автора.
 
 PS від перекладачів : Сподіваюся, вам сподобалася стаття. Ми будемо раді, якщо ви вкажете нам на помилки в перекладі, щоб ми могли їх оперативно виправити. Пишіть нам за адресою editor@uxfox.ru , будь ласка :)
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.