Знаете ли вы, что, игнорируя ваших мобильных пользователей, вы можете отбрасывать до 50% трафика на свой блог? Вот, как это исправить...
В 2016 году впервые использование мобильного интернета превысило использование компьютеров.
Использование мобильных устройств росло с тех пор, как Apple выпустила первый смартфон. Это стало частью жизни. Люди — уткнувшиеся в маленький экран. Айпод вместо мозга. Такова реальность. И с этим надо жить. Адаптация блога, для мобильного телефона, одна из задач нынешнего блогера.
Google не даст забыть вам об этом, постоянным напоминанием, что страница не оптимизирована для мобильных устройств.
11 шагов, чтобы удостовериться, что ваш блог, удобный для мобильных устройств.
Для владельцев веб-сайтов сдвиг, как люди взаимодействуют с Интернетом, не удивителен, но увеличивает срочность, необходимую для обеспечения мобильности веб-сайта.
Вот несколько шагов, которые можете предпринять сейчас, чтобы убедиться, что сайт работает одинаково для мобильных посетителей, как и для пользователей компьютера.
1. Используйте респонсивный дизайн для блога.
Благодаря респонсивному дизайну ваш блог [и его страницы] могут адаптироваться и предоставлять пользователям наилучшие возможности. Не важно, с какого устройства, посещают ваш блог: - Настольный компьютер
- Ноутбук
- Планшет
- Смартфон
№1. Что такое респонсивный веб-дизайн?
Респонсивный веб-дизайн позволяет, веб-сайтам и страницам, отображаться на всех устройствах и размерах дисплея, путем автоматической адаптации к экрану.
Респонсивный и адаптивный дизайн - в принципе одно и тоже, но не совсем. Не вдаваясь в теорию:Респонсивный приспосабливается к любому устройству, а адаптивный к определенному шаблону.
Респонсивный и адаптивный дизайн - в принципе одно и тоже, но не совсем. Не вдаваясь в теорию:Респонсивный приспосабливается к любому устройству, а адаптивный к определенному шаблону.
№2. Как работает респонсивный веб-дизайн?
Респонсивный веб-дизайн работает с помощью каскадных таблиц стилей (CSS), используя различные параметры для свойств стиля, в зависимости от размера экрана, ориентации, разрешения, цветовых возможностей и других характеристик устройства пользователя.№3. Является ли мой сайт отзывчивым?
Мануал о том, как проверить респонсивный веб-дизайн
- Откройте Google Chrome
- Перейти на ваш сайт
- Нажмите Ctrl + Shift + I, чтобы открыть Chrome DevTools
- Нажмите Ctrl + Shift + M, чтобы переключить панель инструментов устройства
- Просматривайте свою страницу с мобильного, планшетного или настольного ПК
В то время как вы можете достичь мобильности с другими подходами, такими как адаптивный дизайн, респонсивный веб-дизайн является наиболее распространенным из-за его преимуществ.
Респонсивный веб-сайт содержит то же содержимое и информацию на любом устройстве, с которого обращаются, но меняет способ отображения и упорядочения в зависимости от размера экрана устройства.
Это лучший вариант для обеспечения мобильности веб-сайта, поскольку не ограничиваете информацию. Мобильные платформы, получают, то же содержимое, что и остальные посетители.
Google отметил, что это предпочтительный формат для мобильных сайтов.
2. Сделайте приоритетной скорость загрузки блога.
Прекрасные времена «dial - up» — канули в прошлое. Вы шли в магазин, бар или кафе, а в это время, дома, скачивался, модный тогда браузер Opera. Не спеша возвращались домой и удовлетворенно видели, что 60 % загрузки уже завершено. Это время на свалке истории.Высокоскоростной интернет воспринимается, как — данное от рождения. Скорость и еще раз скорость.
Обычный сайт загружается примерно 5 секунд. Это грубая, средняя величина. Многие не хочет ждать так долго. Тем более с телефоном в руках. Это, конечно, грустно. Приходиться экономить на картинках с котиками и пр.
Чем быстрее загрузка страницы блога, тем выше выигрыш. Посетитель не уйдет раздражённым и возможно превратиться в клиента.
Важно, найти золотую середину. Если вы пишете вечнозеленый контент, на 5000 слов, то обойтись без иллюстраций — не серьезное занятие. Но и не перегружать страницы лишними картинками. Что можно сделать, чтобы увеличить скорость загрузки блога?
На бесплатной платформе — практически ничего, кроме компрессии медиа. Таково проклятье, за дешевизну.
На платных есть возможность эксперимента:
- Сжимайте изображения. Многие забывают или ленятся это делать.
- Используйте плагин AMP (ускоренные мобильные страницы). Если у вас блог на WordPress, то логично будет попробовать работу этого дополнения.
- Проверьте план вебхостинга. Если ваш блог успешно развивается, то вы можете перерасти услуги провайдера. Посмотрите, не пора ли переехать на план подороже или выбрать управляемый хостинг.
3. Упростите поиск информации.
Некоторые люди, которые просматривают интернет на мобильных устройствах, не возражают потратить некоторое время на просмотр или чтение контента в том же темпе, что и на компьютере, но другие хотят найти нужную информацию как можно быстрее и проще.Подумайте о том, что будут искать пользователи с мобильных устройств, и разместите где наглядно и легко найти на домашней странице мобильного устройства.
№1. Делайте контент - закуску для мобильных пользователей.
Вы когда-нибудь ловили себя на быстром просмотре статей на телефоне - больше, чем на ноутбуке или ПК?Ну, исследования показывают, что люди больше ориентированы на мобильные устройства. Посетители вашего сайта, как правило, ищут что-то конкретное - возможно, соблазненное большим заголовком в социальных сетях.
В результате вы должны постараться сделать свой контент более легким для перекуса - другими словами, легким в употреблении небольшими порциями - чтобы читатели могли быстро найти то, что ищут.
Вот как это сделать (и это работает для электронной почты, а также для сообщений в блоге):
- Откройте с короткими, резкими заголовками с крупным шрифтом. Максимум 10 слов или меньше и шрифт 16 пунктов или больше.
- Пишите неотразимые подзаголовки. Они помогают разбить ваш контент на четко обозначенные разделы размером с один укус бутерброда.
- Используйте маркированные и нумерованные списки. Они добавляют визуальное разнообразие и помогают пользователю идентифицировать ключевую информацию.
- Вставить изображения в подразделах. Это помогает разбить контент дальше и облегчает навигацию визуально.
Бонус Идея:
Знаете, что еще можно перекусить?
Аудио!
Не всем нравится читать - некоторые люди предпочитают потреблять информацию, слушая вместо этого.
На самом деле, знаете ли вы, что более 65% подкастов прослушиваются с мобильных телефонов?
Аудио - самый мобильный контент, какой только есть!
А аудио представляет собой возможность представить свой контент перед целой новой аудиторией.
Итак, когда вы написали следующий пост в своем блоге, почему бы не записать себя, читая его с помощью USB-микрофона или гарнитуры?
Затем вы можете добавить этот файл на свой сайт, отправить его в iTunes, Stitcher Radio и SoundCloud.
Изменение содержания может привлечь внимание людей, которые не любят читать контент или, по крайней мере, не хотят читать его на мобильном устройстве.
Также рассмотрите размещение часто задаваемые вопросов, которые люди постоянно ищут, при посещении сайта. Возможно, не имеет смысла размещать ответы по центру на главной странице, но упростите поиск и навигацию на мобильном устройстве.
4. Не используйте Flash.
Flash потерял популярность. SEO - оптимизация отрицательно настроена к этому формату. Это замедляет время загрузки страницы.Сейчас выпускают браузеры и устройства, где flash animation не работает.
Ни устройства Android, ни устройства iOS не поддерживают Flash.
Создадите веб-сайт, который зависит от работы Flash-анимации, мобильные пользователи будут обделены.
Лучше отказаться от этой технологии на веб-сайте и найти надежный веб-дизайн, который работает без нее.
5. Включите мета тег Viewport.
Метатег viewport — это способ контролировать отображение веб-сайта на мобильных устройствах.Если страница на экране смартфона будет такой же ширины, что и на рабочем столе, придется выполнить некоторую неловкую прокрутку из стороны в сторону, чтобы прочитать каждую строку текста и увидеть противоположные стороны страницы.
Метатег viewport сообщает браузерам, чтобы соответствовали ширине страницы в соответствии с типом устройства, с которого приходит посетитель.
Вставьте это в HTML для каждой страницы:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
6. Выключите автозамену для форм.
Автозамена осложнит взаимодействие пользователя мобильного устройства, с сайтом.
Если на веб-сайте есть формы, в которых запрашивается информация об имени или адресе, способ облегчения предоставления этой информации посетителям на мобильных устройствах — отключение автозамены для каждого поля формы, в противном случае телефон попытается изменить имя или название улицы, на распространенные слова и замедлит процесс заполнения формы.
В поле ввода убедитесь, что включили autocorrect = off в html.
7. Сделайте кнопки побольше.
Не трудно щелкнуть мышью по кнопке практически любого размера, но когда пытаетесь «щелкнуть» пальцами на маленьком экране смартфона, с маленькими кнопками трудно справиться.И это особенно верно, если есть несколько маленьких кнопок близко друг к другу — нажатие одной кнопки при попытке нажать другую вызовет реальное раздражение у посетителей.
Лучший способ спасти посетителей от разочарования и создать удобный для мобильных устройств веб-сайт — использовать кнопки большего размера.
Добавляете кнопку на сайт, потратьте время, протестировать самостоятельно на любом количестве мобильных устройств найденных среди знакомых и членов семьи.
Убедитесь, что выбрать кнопки достаточно просто на всех устройствах и, если это не так, обновите ее.
№1. Синдром Fat Finger.
Веб-сайты, которые не оптимизированы для мобильных пользователей, могут привести к плохому случаю синдрома Fat Finger - Ошибка «большого пальца».Синдром Fat Finger возникает, когда ссылки и кнопки веб-сайта слишком малы, чтобы посетители могли легко и точно нажимать пальцем (или большим пальцем).
Как блогеры, мы можем легко забыть, что не все наши читатели перемещаются по нашим блогам с помощью мышки (или трекпада) и курсора, и это может привести к разочарованию пользователя.
Даже если у вас есть тема, реагирующая на мобильные устройства, некоторые элементы вашей навигации могут все еще иметь эту проблему.
Насколько большими должны быть цели касания ?
- В Руководстве Apple по интерфейсу пользователя iPhone рекомендуется минимальный размер цели - 44 пикселя в ширину и 44 пикселя в высоту.
- Руководство по дизайну и взаимодействию пользовательского интерфейса Windows Phone от Microsoft предлагает размер сенсорной цели 34 пикселя с минимальным размером сенсорной мишени 26 пикселей.
- Руководства Nokia для разработчиков предполагают, что целевой размер должен быть не менее 0,7 см х 0,7 см квадрата или 48 х 48 пикселей.
Как видите, рекомендации различаются, но дело в том, что, не делая кнопки достаточно большими или имея слишком много текстовых ссылок, вы рискуете расстроить посетителей.
Просто помните, что 46% пользователей никогда не вернутся, если у них плохой опыт.
Поэтому при создании кнопок убедитесь, что они большие и имеют достаточно места вокруг внешних областей.
А при использовании простых текстовых ссылок убедитесь, что они не переполняют (где две или более ссылки появляются близко друг к другу) на мобильных устройствах и приводят к другому случаю синдрома Fat Finger.
8. Используйте большие размеры шрифта.
Читать на маленьком экране сложнее, если шрифт мелкий.Лучше использовать размер шрифта не менее 14px на веб-страницах, но давайте проверим, как это выглядит, чтобы увидеть, может ли увеличение размера может быть лучше здесь.
Лучше придерживаться стандартных шрифтов.
Сторонний шрифт, который понадобиться браузеру посетителя, замедлит загрузку сайта, что является плохой новостью для мобильных устройств.
9. Сожмите изображения и CSS.
Говоря о времени загрузки сайта, хотите, чтобы скорость сайта была быстрой.Скорость важнее для мобильных устройств.
Это означает, хороший шаг для обеспечения мобильности веб-сайта — сжатие всего, что занимает много места и замедляет время загрузки.
Это, вероятно, включает в себя изображения с высоким разрешением и CSS, которые используете в блоге.
Сжимая, гарантируете, что они загружаются быстрее, не несут негативного влияния на качество того, что люди видят на сайте.
10. Сделайте легким переключение между мобильной и компьютерной версиями страницы.
Некоторые из мобильных посетителей на самом деле предпочитают видеть настольную версию вашего сайта (особенно если используете мобильную версию своего сайта, а не адаптивный дизайн).Убедитесь, что даете способ сделать это, если это их предпочтение. Вы хотите, чтобы посетители могли взаимодействовать с вашим сайтом так, чтобы это имело для них наибольшее значение.
11. Регулярно проводите мобильное тестирование.
Чтобы убедиться, что веб-сайт работает на мобильной платформе, — регулярно проверяйте на мобильном устройстве.Открывайте веб-сайт на телефоне и планшете и проводите время в поисках, чтобы понять, трудно ли что-либо увидеть или сделать.
Попросите знакомых попробовать то же самое, и подумайте о том, чтобы также нанять пользователей для тестирования (так как они увидят все это свежим взглядом).
Сделать сайт удобным для мобильных устройств: Заключение.
Даже если сегодня все сделаете правильно, то внешний вид и работа мобильных устройств будут постоянно меняться, и сегодняшний дружественный к мобильным сайтам веб-сайт может не работать завтра.Продолжайте тестировать, продолжайте настраивать, где это необходимо, и продолжайте думать о мобильных пользователях, как о приоритете, и все получиться.
