3.1.4. Примеры отдельного мобильного сайта

3.2. Адаптивный веб-дизайн

3.2.1. Использование и описание адаптивного дизайна

Адаптивный веб-дизайн обычно использует CSS3 Media Queries для настройки макета веб-страницы, основываясь на размере области просмотра, а именно на разрешении используемого мобильного устройства с которого мы осуществляем выход в интернет. Можно использовать один и тот же HTML для отображения различных макетов веб-страницы для настольных компьютеров, планшетов, мобильных устройств, телевизоров и даже электронных книг.

3.2.2. Преимущества адаптивного веб-дизайна

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

• Один URL-адрес для веб-страниц: это облегчает процесс взаимодействия с социальными сетями, блогами и форумами и другими сайтами. Обмен ссылками на статьи или иной контент является привычным и просто необходимым действием в современном интернете. Поэтому пренебрегать, отказываясь от этой функции, нельзя. Один адрес вашего интернет сайта избавляет от ненужных перенаправлений (редиректов). Чтобы получить лучший вид страниц сайта для разных устройств используется один адрес (в отличие от отдельных мобильных сайтов).

3.2.3. Недостатки адаптивного веб-дизайна

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

• Медленная работа: согласно данным за январь’13, средняя веб-страница сегодня весит около 1,3 Мб. Теоретически такого размера можно избежать при использовании адаптивного дизайна, но на практике 86% “резиновых сайтов” весят именно столько, а то и больше.

• Трудно перемещаться по сайту: возможно, что при создании сайта используя адаптивный дизайн не все задачи могут быть учтены. Задачи мобильных пользователей, как правило, отличаются от обычных. Кроме того, они могут быть более привычны к использованию мобильной версии интерфейса и если не продумать структуру навигации для каждого устройства, могут быть проблемы с восприятием и удобством пользования сайтом (юзабилити).

3.2.4. Примеры адаптивного веб-дизайна

3.3. Ress: Вывод разных html и css на одном url