Юзабилити мобильных сайтов
Если посещаемость Вашего сайта довольно высока, посмотрите статистику, какое количество людей заходят к Вам с мобильных устройств. Прогресс не остановить, сейчас телефоны и смартфоны как устройства интернет-серфинга набирают обороты. А почему бы и нет – возможности же есть. К тому же довольно удобно не быть привязанным к стационарному компьютеру или к мобильному, но все равно громоздкому ноутбуку. А так есть возможность просматривать новости, социальные сети и прочие странички везде, где есть прием мобильной сети. Т.е. практически везде.
Придя к выводу о целесообразности создания мобильной версии сайта, нужно продумать его дизайн. И не столь важно, будете ли вы создавать абсолютно новый сайт или лишь переработаете старый. Экраны мобильных устройств намного меньше по размере, чем мониторы компьютеров, поэтому и информация будет отображаться далеко не вся. Вот несколько пунктов, которые существенно повысят юзабилити мобильной версии Вашего сайта.
Урежьте контент. Обычно справа располагается информация, которая не нужна пользователю: реклама, популярные записи, топ-обсуждения. Если мобильный пользователь читает статью, эта информация его интересовать не будет. Лучше от неё избавиться совсем.
Подправьте текст в одну колонку. Опять же, экраны смартфонов довольно маленькие, широкий текст будет требовать дополнительных действий – приближение текста, горизонтальную прокрутку, что очень неудобно. Поместите текст в одну колонку, что сделает прокрутку только вертикальной, которая поддерживается практически на всех мобильных устройствах.
Продумайте навигацию. Если не особо важна информация на главной странице и подразумевается, что пользователь после захода на сайте перейдет к поиску или следующей странице, оставьте на главной странице только навигацию. Если важна информация на главной странице, поместите навигационную панель внизу. Еще вариант – меню выпадающим списком. И компактно, и удобно.
Посчитайте количество версий. Мобильные устройства различаются и по экранам и по вычислительным мощностям. Если смартфоны без проблем справляются с любыми веб-страницами, телефоны более старых моделей будут над этим «пыхтеть». Если Ваша цель – вся доступная аудитория, возможно есть необходимость создать несколько версий мобильного сайта. К примеру, Facebook.comимеет 3 разные версии для мобильных устройств: m.facebook.com для мобильных телефонов, touch.facebook.com для смартфонов и телефонов с сенсорными экранами, 0.facebook.com для стран с очень низкой скоростью интернета.
Дизайн для Touchscreen. Учтите, что навигация у обычных телефонов – кнопочная, а обладатели сенсорных экранов будут переходить по ссылкам с помощью нажатия пальца. Не размещайте ссылки слишком близко, чтоб случайно не нажималась ненужная ссылка.
Серверное перенаправление на мобильную версию
Довольно удобно, если посетитель заходит на сайт с мобильного устройства, сервер редиректит его на облегченную версию сайта.
Можно поручить это дело веб-серверу, прописав точки входа для мобильных и стационырных компьютеров. Создаем файл meta.txt и помещаем его в корень каталога сайта. Тело файла(пример):
name:site.com
description: ivanov.com is a example website
keywords: demonstration, demo, example
pc: http://www.ivanov.com
mobile: http://m.ivanov.com
rss:http://rss.ivanov.com/rss/topstories.xml
rss:http://rss.ivanov.com/rss/politics.xml
podcast: http://rss.ivanov.com/podcasting/news.xml
video: http://rss.ivanov.com/rss/tutorial.xml
Точки входа для устройств определены в строках pc и mobile соответственно. А можно просто сделать кнопочку перехода на мобильную версию сайта. Есть, ко всему прочему, специальные сервисы, как например этот который в режиме конструктора помогает создать мобильную версию сайта или блога. Единственное условие - у сайта должен быть RSS.
Развивайте свой сайт, покоряя все широкую публику, делая его доступным для всех желающих.
Скорость загрузки страницы