close

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

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

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

5 основных принципов мобильного дизайна

Mobile design

Как мы уже писали ранее, мобильный поисковый алгоритм Google начал отдавать предпочтение сайтам, адаптированным для мобильных устройств. Такое изменение не повлияет на позиции сайтов, которые в основном просматриваются с настольных компьютеров, и это хорошая новость для них. Однако процент людей, пользующихся интернетом, вырос с 33% в 2013 году, до 42% в 2014. Если ваш сайт оптимизирован под мобильные устройства, его позиция в результатах поиска будет выше, что позволит большему числу пользователей найти такой сайт.

«Мобильная» — не означает «Уменьшенная» версия сайта

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

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

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

Пять основных принципов мобильного веб-дизайна.

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

 

1. Не делайте маленьких кнопок!

Button-Sizing-Gestures_Googles_Algorithm_Shift
Необходимо убедиться, могут ли пользователи вашего сайта без проблем нажимать пальцами на кнопки. Если расположить кнопки слишком близко друг к другу, пользователь может случайно нажать не на ту. Убедитесь, что кнопки для нажатия имеют минимальный размер 50 на 50 пикселей, и все будет в порядке. Расстояние между кнопками тоже имеет важное значение. Достаточным будет расстояние 20 — 32 пикселей.

 

2. Используйте прокрутку и применяйте легко читаемые шрифты

Googles_Algorithm_Shift_3_Text-Size-White

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

 

3. Избегайте тяжелых Виджетов и контента.

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

 

4. Страницы сайта должны быстро загружаться

Мобильный сайт должен быть легким и элегантным! У пользователя не всегда будет возможность подключиться к Wi-Fi, поэтому сайты, наполненные видео, будут громоздкими и медленными, не говоря уже о том, сколько они используют трафика. Мобильные страницы должны загружаться быстро, а изображения должны быть оптимизированы для максимального сжатия. Сложные виджеты добавят лишний объем вашему сайту, поэтому по возможности избегайте их. Подумайте, как пользователь будет пользоваться сайтом, и планируйте соответственно.
Хотите проверить скорость загрузки страницы? Используйте эту утилиту.

 

5. Используйте релевантные перекрестные ссылки

Если сайт использует разные URL адреса для настольной и мобильной версии, обычно на нем присутствуют ссылки, которые объединяют эти два адреса. Одна из наиболее распространенных ошибок, которые делают разработчики, это ссылка на неверную страницу – или по ошибке, или, потому что эквивалентная страница недоступна. Убедитесь, что ссылка корректна: «Стартовая страница» указывает на «Стартовую страницу», а «Портфолио» на «Портфолио». Не стоит делать так, чтобы ссылка «О Нас» на настольной версии сайта, переадресовывала на мобильное портфолио.

 

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

 

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

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