8 способов оптимизировать сайт под мобайл
8 способов оптимизировать сайт под мобайл
28 марта 2016

Как оптимизировать ваш сайт под мобильные устройства. Небольшой гайд от skillsup о том, как заточить ваш дизайн под мобильные девайсы.

С тех пор, как мир переключился с ПК на мобильные устройства, дизайнеры стали еще больше фокусироваться на UX. Хотя UI и играет важную роль в создании мобайл-френдли дизайна, UX стал также важен, особенно когда у нас появились десятки smart-устройств и даже умные часы. UX – это то, что охватывает границы графики и эстетики. Как сказал Рауль Воршни, со-основатель foster.fm:

«UI без UX – как художник, бездумно расплескивающий краски по холсту»

Он был прав. У вас может быть самая привлекательная, юзер-френдли, уникальная и функциональная версия сайта для ПК. Но если вы не берёте во внимание потребности пользователей мобильных устройств, то у вас не выйдет ничего хорошего.

Так что же отделяет зерно от плевел, хороший мобайл от плохого? Не так сложно отделить ключевые компоненты, которые выдают наилучшую эффективность, оптимизацию и сфокусированный на пользователя дизайн. Вот несколько отличных принципов, которые помогут вам делать "лучше":

1) не отказывайтесь от подхода «сначала мобайл»

Если ваш вебсайт ориентирован на мобильный UX, использование стратегии «сначала мобайл» в вашем случае может быть только выигрышным.  Но вы должны быть уверены, что большинство пользователей посещают ваш сайт именно с мобильных устройств. Мобайл веб-дизайн – не ниша, но в действительности количество пользователей веб-мобайла во всем мире составляет 1,2  миллиарда и количество только растёт. Это может быть немного затруднительным в начале, но если вы хотите поставить потребности своего пользователя на первое место, то игра стоит свеч.

То, что вы нацелены на разработку сфокусированного на мобайл версии вебсайта, не значит что он должен быть сложным. Karimrashid.com – прекрасный пример того, как простота и сложность могут породить не только отзывчивый, но  и стильный дизайн.

2) создавайте жидкие макеты

Существует слишком большое количество размеров экранов чтобы выбрать, под какой тз них вы будете делать дизайн. Вам необходимо создать макет, который будет адаптироваться как можно сильнее под каждый из них. К счастью, жидкие макеты смогут вам в этом помочь.

Основанные на процентах, а не на пикселах, жидкие макеты стали стандартом среди веб профессионалов. Они могут быть не столь просты в разработке, но обеспечение как пожно большего количества посетителей нормальным UX стоит усилий.

3) нацеленность на функциональность

Что такое функциональность? Это способ, который вы предлагаете своим посетителям на пути достижения их целей. Все инструменты типа «поиск продукта», «обзоры продукта», или «конвертер валют» должны помочь пользователями достичь цели быстрее.

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

4) определите своих пользователей

Не пытайтесь стать мастером на все руки! Сперва выясните, кто ваши пользователи. Потом выясните их типичное поведение на сайте. После этого, что ими движет. Современные пользователи делятся на 2 вида: те, кто беспричинно ходят по сайту, и те, кто пришли за чем-то определённым. Каждая из этих групп будет требовать разных «функций», оснванных на их потребностях.

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

5) всегда опирайтесь на библиотеки и руководства для разработчика

Не зависимо от платформы, всегда уделяйте пристальное внимание руководствам по UI.  Некоторые платформы предоставляют большую гибкость, чем другие. Каким бы ни был кейс, некоторые компоненты бренда или «штрихи» должны сохраниться.

Разработчику приложений для Apple необходимо взглянуть на руководство «iOS Human Interface» и следовать стандартам Apple при разработке базиса, стратегий, элементов UI, иконок/картинок и т.д. С другой стороны, разработчику Android нужно выучить все о компонентах, стиле, юзабилити и макетах основных приложений для Android, которые указаны в руководстве для разработчика на Android.

6) сделайте весь контент доступным для всех пользователей

Некоторые дизайнеры вместо того, чтобы сделать весь контент в жидких макетах, просто скрывают его от пользователей мобильных устройств. Иногда это происходит из-за сложности макета, а иногда им просто кажется, что в мобильном макете слишком много контента.  Это неправильный подход.

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

Сравните мобильную и ПК версию сайта BBC. Да, мобильная версия проще, но в ней содержиться вся информация. В мобильной версии картинки сместили вниз, но сохранили все заголовки, хотя и упростили их вид из-за особеннойстей размера экрана мобильного устройства.

7) разрабатывайте для прикосновений

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

Пользователь не должен слишком сильно нажимать или увеличивать, чтобы напечатать что-то, заполнить форму или нажать на кнопку. Неточные нажатия также являются очень распространенными на маленьких устройствах, поэтому следует также учитывать и этот факт при разработке приложения или сайта для мольных устройств.

Вот тач-таблица от Питера-Пола Коха, которая может пригодиться. Учитывайте, как тач-события (или другие действия) могут вариироваться в зависимости от совместимости браузера и устройства.

8) используйте инструменты для сжатия

Существует просто невероятное количество инструментов, которые могут сделать работу дизайнера менее напряжной. Такие скрипт-компрессоры, как HTML compessor и Gzip  помогут автоматически удалять ненужные комментарии, белые места или код. CSS minifier, СSS compressor и некоторые другие инструменты позволят вам связать CSS-код и улучшить производительность.

Сжатие изображений также важно, как и хорошо продуманный UX. Вот некоторые инструменты, которые помогуть уменьшить размер .jpeg и .png файлов, но сохранят при этом качество:

Вот пример портфолио дизайна от RyJohnson с респонсив дизайном. Сайт насыщен эффектными изображениями, которые неотличимы от ПК-версии. Секрет быстрой загрузки – оптимизация изображений.

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Настройки, направляющие, модульная сетка - Секреты веб-дизайна 1-2Уровень сложности:
1. Начинающий
2. Любитель
Настройки, направляющие, модульная сетка - Секреты веб-дизайна

Вступительный урок по веб-дизайну в котором автор рассказывает про настройки, направляющие и модульную сетку.

28.02 0
Почему я бросил работу своей мечты в веб-дизайне?
Почему я бросил работу своей мечты в веб-дизайне?

Что толкает людей на то, чтобы бросить работу в компании, на которую ушло так много времени и усилий?

26.02 0
Тренды веб-дизайна 2017 года
Тренды веб-дизайна 2017 года

Наша команда обращает пристальное внимание на все изменения в мире дизайна. Это помогает всегда держать вас в курсе новостей и новинок этой сферы.

26.02 0
Специфика работы full-stack designer
Специфика работы full-stack designer

Кто такой full-stack дизайнер и в чём заключается специфика его работы? За что full-stack дизайнер несёт ответственность в проекте.

26.02 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.