close

Заказать адаптацию

+ подарок аудит Вашего сайта на адаптивность
совершенно бесплатно!

Блог команды Адаптист.ру

Два незаменимых элемента хорошего адаптивного мобильного дизайна

iphoneapp

Адаптивный дизайн находится на пике популярности. Везде – включая StudioPress.com – дизайнеры и разработчики расхваливают адаптивные сайты или адаптивное оформление.  Мода на него не обошла стороной такие известные компании как Sony. Ни один рейтинг интернет-тенденций не обходится без адаптивного дизайна. Но что такое хороший адаптивный дизайн?

 

По моему мнению, все сводится к двум вещам:
1. Изменению образа мышления
2. Пониманию, как упорядочить контент
Давайте объясню…

ИЗМЕНЕНИЕ ОБРАЗА МЫШЛЕНИЯ

 

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

 

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

 

Предварительное создание проекта сайта в Photoshop становится скорее обузой, чем преимуществом. Раньше HTML и CSS использовали, чтобы реализовать концепцию, разработанную в Photoshop. Проблема в том, что это работает только для одной точки зрения – точки зрения настольных устройств.

 

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

 

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

 

Люк Вроблевский, один из наиболее выдающихся экспертов по мобильному дизайну на сегодняшний день, в своей книге «Mobile First» затрагивает преимущества философии разработки с ориентацией на мобильные устройства, и пишет следующее: «Она не только подготовит вас к резкому росту и новым возможностям мобильного интернета. Она заставит вас сфокусироваться и даст возможность развиваться в тех областях, в которых вы раньше этого делать не могли».

 

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

 

УПОРЯДОЧИВАНИЕ КОНТЕНТА

 

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

 

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

 

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

 

Далее мы рассмотрим несколько примеров сайтов, которые адаптивно упорядочивают свой контент, но при этом основное внимание уделяют взаимодействию с пользователем.

Практический пример – SONY, США

 

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

 

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

 

Большинство сайтов с адаптивным дизайном выбирает один из двух вариантов: спрятать меню при помощи javascript, и вызывать его нажатием, или разместить меню в самом низу страницы, а сверху добавить ссылку на него.

 

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

 

Сайт Sony, по моему мнению, обладает самым лучшим адаптивным меню для мобильных устройств. Они поместили меню в одну-единственную кнопку, рядом со своим логотипом, которая разворачивается при нажатии. А самое лучшее в нем то, что оно подражает «родным» приложениям и при выборе меню верхнего уровня, которое включает в себя подменю, сразу переносит вас в это подменю, которое к тому же имеет кнопку возврата назад.

 

Реализация меню подобным образом имеет ряд преимуществ:
— Контент, перекрываемый меню, остается, даже если пользователь решает закрыть меню
— Нет необходимости в пролистывании экрана, чтобы посмотреть все элементы меню
— Процесс взаимодействия знаком по «родным» приложениям

sony3

sony2

Другой практический пример – SMASHING MAGAZINE

 

Я уже говорил о плохом примере адаптивного дизайна — когда разработчики делают сайт адаптивным, просто размещая боковые панели ниже всего остального контента. Smashing Magazine отлично справился с задачей адаптивного управления контентом боковых панелей.

 

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

 

Широкоформатная компоновка позволяет пользоваться преимуществами современных браузеров, и растягивать ширину сайта до максимума в 1800 пикселей. Чем шире экран, тем лучше используется его пространство, так как их основной контент — статьи — получают больше свободного места.

smashing1

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

smashing2

1010 пикселей — ситуация опять меняется. Навигационные подменю возвращаются, а реклама исчезает. Хорошо продуманное решение, которое позволяет идеально разместить контент на экране планшетного ПК. Так как большинство пользователей, которые работают на таком разрешении, вероятнее всего используют планшет и зашли на сайт почитать информацию, они приняли решение убрать рекламу и сосредоточится на контенте и навигации.

smashing3

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

4 ЗАКЛЮЧИТЕЛЬНЫХ ВОПРОСА, НАД КОТОРЫМИ СТОИТ ЗАДУМАТЬСЯ

 

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

 

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

 

1. Подумал ли я над тем, как посетители будут пользоваться мобильным устройством у меня на сайте?
2. Сделал ли я акцент на контенте (как следовало бы), а не на графике или навигации?
3. Предоставил ли я достаточно возможностей для просмотра сайта?
4. Сохранили ли дизайн и контент сайта ясность и фокус? 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *