Как адаптировать сайт под iPad и другие планшеты

В этой статье мы обсуждаем важность отзывчивого дизайна сайта для планшетов на примере Айпада.

Дело в том, что большинства людей, кто использует планшет, очень часто с их помощью сидят в интернете. Например, по результатам опроса, проведенного компанией Business Insider, 41% опрошенных владельцев айпадов используют свои гаджеты в качестве основного устройства (не компьютеры, не ноутбуки, а именно айпады). И пользователи айпада (вместе взятые),38% той времени, когда работают с айпадом, тратят на просмотр веб-страниц.

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

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

Почему важно создать версию для планшета? Давайте, рассмотрим вопрос в примере того же самого iPad. У всех планшетов экраны вращаются, если вы держите айпад горизонтально, то, скорее всего, никаких проблем с дизайном не будет, пользователь увидит все то, что видно с экрана настольного компьютера и ноутбука, ибо в этом положении размер экрана 1024 на 768 пикселей (верно для айпада). Где 1024 пикселей – это ширина экрана, а многие сайты шире 1000 пикселей не верстаются.

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

В отдельных случаях, если дизайн сайта адаптивный, пользователь увидит мобильную версию сайта.

Как решить эту проблему? Многие системы управления контетном, как Drupal, WordPress, Joomla и другие позволяют использовать отзывчивые темы, то есть, внешний вид сайта распознает, какая ширина устройства, через который просматривается сайт, и выдает заранее подготовленный внешний вид страницы.

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

Это первый путь – создать свой вариант дизайна для каждого типа экрана.

Второй путь, это работать с CSS кодом. 

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

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

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