close

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

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

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

12 подсказок как сделать адаптированный для мобильных сайт

мобильный дизайн

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

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

1. Будьте отзывчивыми.

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

2. Думайте своим большим (или указательным) пальцем.

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

Большинство посетителей мобильного веб-сайта использует сенсорное устройство. Поэтому кнопки и меню навигации должны быть достаточно велики для толстых пальцев. Следует учитывать, что прикосновения пальцев могут стать причиной «неправильных кликов (нажатий)». Средний размер пальца взрослого человека – от 15 до 20 мм, что соответствует 45 — 57 пикселям. Наше «правило большого пальца» заключается в том, что кнопка или нажимаемый элемент должен быть не меньше 45 пикселей в области выбора. Это позволяет легко выбирать целевые компоненты на экране и не допускать случайных нажатий.

3. Дизайн должен быть простым.

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

Слишком много наворотов (т.е., графика, видео) снижают скорость загрузки сайта и отвлекают от главного сообщения. Если вы планируете использовать изображения, они должны весить как можно меньше байтов. Это сократит время загрузки страницы.

4. Содержание должно быть кратким и выразительным.

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

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

5. Помните, что иконка стоит тысячи (или, десятка) слов.

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

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

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

Разрешение мобильных устройств и разрешающая способность очень фрагментированы — варьируются от 240 х 320 до 2560 х 1440 и выше. Мобильные устройства, работающие в 3G-сети, по-прежнему значительно отстают в скорости загрузки, многие пользователи мобильных телефонов платят за использование пропускной способности. Изменение размера, обрезание и оптимизация изображения под разрешение и разрешающую способность определенного устройства, имеет важное значение. Это сэкономит большое количество трафика, существенно сократит время загрузки мобильных веб-страниц и существенно увеличит количество просмотров.

7. Не переусердствуйте с Java.

Если есть возможность, избегайте чрезмерного использования JavaScript на мобильных сайтах, потому что эта технология по-разному работает в различных браузерах и устройствах. Даже разные модели одного и того же телефона могут совершенно по-разному реагировать на JavaScript. Это не означает, что вам совсем не следует использовать JavaScript, но делайте это с умом и помните, что Java может повлиять на производительность вашего мобильного сайта.

8. Сделайте так, чтобы можно было легко найти ваш номер телефона, местонахождение и контактные данные.

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

9. Видео добавляйте, но с умом.

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

10. Формы должны быть предназначены для мобильных устройств.

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

11. Используйте геолокацию.

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

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

Не забудьте проверить, насколько удобно и просто работает ваш сайт на наиболее распространенных мобильных платформах и браузерах. Статистику по ним мы опубликовали вот тут. А проверить ваш сайт можно вот тут.

 

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

 

Один ответ на “12 подсказок как сделать адаптированный для мобильных сайт”

  1. Алекксей:

    Статья очень интересная! Спасибо Вам , парни.

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

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