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

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

Учитывая рост числа сенсорных аппаратов, необходимо адаптировать сайты для просмотра с таких устройств.  Кто-то пишет специальные переключатели версий сайта(Обычная версия/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.

Вы можете оставить комментарий, или ссылку на Ваш сайт.

3 комментариев к записи “Разметка сенсорного сайта”

  1. westsibe:

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

  2. westsibe:

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

  3. seodigeеst:

    Все ясно и чЭтко. Все бы так писали

Оставить комментарий

Subscribe without commenting



Мой блог