Разметка сенсорного сайта

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

Учитывая рост числа сенсорных аппаратов, необходимо адаптировать сайты для просмотра с таких устройств.  Кто-то пишет специальные переключатели версий сайта(Обычная версия/Touch версия), я же, не обладая достаточными знаниями в скриптописании, решил вопрос с тачфонами редактированием html кода страницы и css файла.

Задача:

Увеличить область нажатия ссылки.

Решение:

Заключить ссылки в отдельный div

<div class="menulink"><a class="link sensor" href="адрес ссылки 1">Ссылка 1</a></div>

В css файле назначить новый div и классы ссылок

.menulink{}
a.link{padding-top:4px;padding-bottom:4px;height:15px;padding-left:15px}
a:hover.link{text-decoration:underline;}
a.sensor {display:block;}
a:hover .sensor{}

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

З.Ы. Теперь перемещения по сайту удобны как с сенсорных телефонов, так и с простых. Проверял стандартными браузерами Nokia 6303 Classic, Samsung Galaxy 550, браузером Opera Mini(версии 4.3 и 6) и комповскими Оперой и гуглохромом.
З.З.Ы. Код, приведенный выше, можно настроить как угодно, кому как нравится.

С уважением, d_ma.

Posted in Создание сайта and tagged , , .

3 Comments

  1. Пока не прочитал эту статью даже и в голову не приходило, что ‘фингерфонщикам’ в ссылки может быть не удобно нажимать. Но что хуже этого, то что не в одной статистике нет подобного раздела, чтобы хоть как-то оценивать масштабы упущения. Забивать голову названиями ‘пальцефонов’ и т.д. — не вариант же.

  2. Хотя в каких-то статистиках присутствует раздел ‘размер дисплея’… Надо будет поизучать этот вопрос.

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

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