В сфере веб-дизайна мы быстро поняли, что нам не совладать со всеми возможными разрешениями экранов всех возможных мобильных «девайсов». Самое простое и в то же время изящное решение – «адаптивный дизайн» (от англ. Responsive design).

Адаптивный дизайн – это подход в дизайне, по определению «адаптирующийся» к поведению пользователя и его системе основываясь на размере экрана, платформе, ориентации экрана и т.д. Такой подход совмещает в себе смесь различных сеток и слоев, изображений и правильного использования CSS media queries. К примеру, если пользователь заходит на сайт с iPad вместо привычного лэптопа, сайт должен «подстроиться» под разрешение экрана, уменьшить размеры изображений и, скажем, убрать флеш элементы.

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

Разрешение экрана

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

Динамические изображения

При изменении разрешения важную роль играют изображения – они должны также меняться. Простым и эффективным подходом будет установка свойства max-width CSS в 100%. Хоть свойство max-width пока не поддерживается IE, существует также и другая проблема – скорость загрузки страницы. А точнее, большие и качественные изображения предназначены для просмотра на ПК, а не на смартфоне. На помощь приходит правильное использование CSS media queries – которые также позволяют менять не только изображения, но и само расположение элементов на странице.

Адаптивный макет

При изменении разрешения экрана полезно также изменить весь макет в целом. Это просто и эффективно сделать используя CSS media queries. Нужно написать основной CSS стиль, а с помощью CSS media queries уточнить CSS стиль для разных разрешений экрана. Например

<link rel=»stylesheet» type=»text/css» media=»screen and (max-device-width: 480px)» href=»mobile.css» />

Данный стиль будет загружен и применен, если он 1) отображается на экране (не “для печати» и т.д.) и 2) максимальная ширина экрана составляет 480 пикселей. Новые «фишки» CSS3 также поддерживают всякие вкусности а-ля «device-width», «min-device-width», «orientation» и т.д.

JavaScript

Немаловажную роль играет правильное использование JavaScript’а. К примеру, библиотека css3-mediaqueries.js добавит поддержку CSS3 media queries в старые броузеры (IE 5+, Firefox 1+, Safari 2). Если же Вы поклонник jQuery – можете использовать простой код:

Упрощение контента

Изменение размера изображений, структуры сайта, макета и т.д. – это все очень хорошо, но в некоторых случаях – не самое лучшее решение. Если каждый элемент Вашего сайта «подогнать» под разное разрешение.. на простом мобильнике с шириной экрана в 320 пикселей – он буде тааааким длинным! Правильно – иногда стоит и вовсе убрать некоторые элементы. К примеру, при просмотре на ПК посреди главной страницы большой рекламный элемент с красивым изображением. При размере экрана в 320 пикселей, думаем стоит ограничиться просто текстовой ссылкой.

Итак, ключевые элементы при уменьшении разрешения экрана:

- упростите навигацию
- сфокусируйтесь на контенте
- вовсе уберите рекламу и баннеры
- не разбивайте информацию на колонки
- спрячьте большие элементы
- замените некоторые элементы контента ссылками

К щастью, атирбут «display: none;» сегодня поддерживает любой броузер!

Переход к тачскринам

За недавнее время тачскрины достигли пика популярности. Это очень популярно на мобильных устройствах не только небольшого размера – многие нетбуки и лептопы, а даже и декстопные компьютеры поддерживают сенсорный ввод. Хороший адаптивный дизайн учитывает особенности тачскринов – отсутствие курсора. Есть множество мелочей, делающих дизайн приятным и удобным при использовании на сенсорных тач-устройствах. К примеру, всегда подчеркивайте ссылки – нет курсора, а значит и не «наведешь» его на ссылку. По возможности избегайте левостороннего меню – «правши» держат свои девайсы левой рукой и будут так или иначе задевать навигацию.

Заключение

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

Пример

В качестве примера рассмотрим сайт, на котором Вы читаете эту статью – собственно, сайт компании ВебМарк. Рассмотрим поведение сайта при разных разрешениях (а Вы можете прямо сейчас изменить размер Вашего браузера и увидеть тот же результат воочию):

Экраны 1240 пикселей и более:

Экраны до 640:

Изменения:
- упрощена навигация
- спрятаны некоторые элементы
- контент переоформлен в 2 колонки вместо 4х
- уменьшены лого и другие изображения

Экраны до 468:
Изменения:
- еще более упрощена навигация
- спрятаны некоторые элементы
- контент переоформлен в 1 колонку вместо 2х
- добавлены дополнительные элементы управления

Название этой техники берет свои истоки из детской сказки Братьев Гримм о девочке (Goldilocks) и трех медведях. Героиня предпочитала кашу, которая не была ни слишком горячей, ни слишком холодной.

Суть техники заключается в том, что Вы предлагаете потенциальному клиенту выбор из нескольких (обычно трех) элементов. Обычно используют цену, или любую другую опцию Вашей продукции. Кроме «основной» или «рекомендуемой» опции, Вы предоставляете клиенту еще две: дороже и дешевле, или «бюджетный» и «улучшенный» варианты, чтобы сделать основную опцию более привлекательной. Эффект также заключается в том, чтобы склонить людей, которые обычно выбирают самый дешевый вариант, к более «дорогому» – тому, что посередине.

Ниже можно увидеть, как многие (известные и не очень) сайты использую данный простой и эффективный метод:

1. Текст Вашего рекламного объявления и заголовок страницы должны совпадать по смыслу и дополнять друг друга.

2. Так как первое, что увидит посетитель, будет заголовок (и подзаголовок) на странице, постарайтесь не расстроить его – а наоборот, еще более заинтересовать.

3. Позаботьтесь о правильности всех текстов на странице – как синтаксически, так и грамматически. Поверьте, пользователь призадумается перед тем, как покупать товар/услугу на сайте с ошибками.

4. Завоюйте доверие у пользователя. Позитивные отзывы других клиентов, упоминания в прессе (или на трастовых сайтах), упоминания гарантий и др. методы хорошо скажутся на конверсии.

5. После того как пользователь прочтет заголовок, будьте уверенны, что он будет знать что делать дальше. Используйте те слова и словосочетания, которые соответствуют рекламируемому товару – «бесплатно», «скачать», «заказать» и т.д. Эта кнопка/ссылка должна выделяться и быть в области видимости на экране (ни в коем случае не заставляйте пользователя прокручивать страницу в поисках этой кнопки).

6. Не стоит перенасыщать целевую страницу ссылками на всевозможные услуги, которые Вы предоставляете либо товары, которые продаете – это отвлечет внимание пользователя. Сократите количество ссылок до минимума.

7. Используйте красивое фото товара, презентационное видео, яркую диаграмму – любое доступное средство, чтобы заставить пользователя еще более заинтересоваться Вашей услугой/товаром.

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

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

Теперь с уверенностью можно сказать, что дизайн сайта будет иметь значительный вклад в принятии пользователем решения – посещать данный сайт или нет?

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

Также Google отмечает, что повлиять на вид миниатюры, которую видит пользователь, будет возможно только изменив сам дизайн сайта (его визуальное оформление). В этом мы также видим позитивную сторону, так как дизайн сайта и удобство его использования давно уже стали важными для всех пользователей Интернета.

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

Стандартные страницы 404 выглядят по разному, и зависит это от программного обеспечения сервера, к которому Вы обращаетесь. Однако общее у всех стандартных 404 страниц – они не несут никакой полезной информации для пользователя. Это приводит к тому, что посетитель просто покидает такой сайт.

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

1. Не скрывайте от пользователя, что страница не найдена – четко сообщите об этом, но в дружелюбном тоне
2. Четко укажите, какой страницы нет. Возможно, пользователь ошибся, и вероятнее заметит ошибку на странице, чем мелкий шрифт адресной страницы браузера
3. Постарайтесь сохранить дизайн страницы в стиле Вашего сайта. Обязательно отобразите стандартную навигацию.
4. Выведете ссылку на схожую или альтернативную информацию, если это возможно. Например, в интернет-магазине можно использовать словарь опечаток если пользователь ошибся (как мы описывали в статье о поиске в интернет магазине)
5. Если определить схожую информацию сложно, выведете ссылки на популярные разделы Вашего сайта.
6. Обязательно отобразите поиск по сайту, если таковой имеется.
7. Позаботьтесь о том, чтобы сервер выдавал правильный 404 код ошибки при запросе несуществующей страницы. Это исключит индексирование вашей новой страницы 404 поисковыми системами.
8. По возможности, разрешите пользователям сообщить Вам об этой ошибке, например с помощь короткой контактной формы.
9. Используйте дружелюбный дизайн и тон в обращении к пользователю.
10. Примеры интересных страниц 404:

Дизайн сайта никогда нельзя закончить, так как нет предела для совершенства.

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

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

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

Помните, что Ваш сайт должен:

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

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

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