Термин «отзывчивый дизайн» собрал множество заслуженных хвалебных отзывов среди веб — дизайнеров. Как вы, наверное, знаете, этот термин относится к простому способу настройки интерфейса для работы на различных мобильных устройствах, без необходимости в отдельном мобильном домене.
Отзывчивый веб – дизайн легко решает одну из основных проблем. Он просто адаптирует визуальные интерфейсы для мобильных, планшетных и настольных браузеров. Но вам нужно решить вопрос, как этот интерфейс будет выглядеть в разных браузерах разных мобильных устройств.
Вы можете также реструктурировать содержание в соответствии с тем, сколько информации имеет смысл представить на каждом экране. Новые поколения мобильных веб — приложений должны быть построены иначе, чем обычные веб – сайты, написанные для стационарных компьютеров. Мы надеемся, что прочитав эту статью, вы сможете создать сайт с отзывчивым дизайном.
Эта статья рассказывает о типичном отзывчивом сайте, предназначенном для мобильных телефонов и планшетных компьютеров, противопоставляя его с сайтами, написанными для стационарных компьютеров. По различным причинам, которые мы будем обсуждать в этой статье, вы можете решить, что отзывчивый дизайн применим только для гибридов, созданных для смартфонов и планшетных компьютеров, и совершенно не применим для обычных сайтов. Также из этой статьи вы узнаете о различных способах эффективной интеграции веб — сайтов и веб – приложений.
Отзывчивый дизайн для мобильных устройств и планшетных компьютеров
Компания BBC недавно начала разрабатывать новую версию своего новостного мобильного сайта. Эта новая версия служит прекрасным примером того, как адаптировать интерфейс очень эффективно только путем определения ширины экрана. Далее вы увидите два разных макета страницы, предназначенных для iPhone и iPad. Вы увидеть, как преобразовался интерфейс в зависимости от изменения размеров окна:
Один столбец с контентом в мобильном интерфейсе превращается в несколько столбцов с контентом в мобильном интерфейсе для планшетных компьютеров. Также в интерфейсе страницы для планшетного компьютера панель навигации появляется в верхней части экрана. BBC News, наряду с аналогичными сайтами, такими как Boston Globe и Smashing Magazine, иллюстрирует тенденцию к «первому мобильному» дизайну, то есть, когда компания начинает с мобильного дизайна, и развивают сайт по мере необходимости, вместо того, чтобы сначала создавать полноценный сайт для стационарных компьютеров.
Этот принцип настолько прост по своей сути, что вы можете удивиться, почему не все им пользуются. В следующем разделе этой статьи мы рассмотрим несколько причин.
Различия рабочих столов на разных устройствах
Адаптивный интерфейс, упомянутый выше, способствует тому, что интерфейс вашего сайта не будет загроможден. Тем не менее, бывают случаи, когда интерфейсы сайтов для мобильных телефонов или планшетных компьютеров имеют отличный от оригинальных сайтов набор контента. Сюда относятся боковые панели и многочисленные рекламные баннеры.
Сайты, разработанные для стационарных компьютеров также имеют гораздо более богатый набор возможностей навигации, особенно это касается баннеров. Многие сайты предлагают пользователям выпадающие меню навигации. Мобильные интерфейсы, имеют, как правило, один набор возможностей панели навигации. Для улучшения своего сайта, вы можно будет установить навигационные элементы на экране, так что пользователям не придется постоянно возвращаться к верхней части страницы, чтобы получить доступ к меню. Не забывайте также, что в мобильных сайтах большую роль играет фон страниц, и наличие или отсутствие виртуальной клавиатуры.
На изображении ниже представлен вариант адаптированного интерфейса мобильного сайта. Закладки, представленные тут слишком малы для небольшого размера мобильного устройства, и должны служить только в качестве визуальных подсказок. Если их размер увеличить то, эти закладки будут закрывать другие элементы страницы. Тут также можно ввести сенсорное управление или управление мышью.
Конечно, мобильные пользователи очень сильно отличаются от пользователей стационарных компьютеров. В отличие от пользователей стационарных компьютеров, мобильные пользователи более непредсказуемые. Они пользуются мобильными устройствами, находясь в пути, в общественных местах, на улице. Но такое использование мобильных устройств на бегу не должно нас толкать на то, чтобы использовать более краткий и неточный контент для мобильных сайтов. Гораздо важнее тут местоположение различных элементов контента, которое позволит пользователю видеть и читать его даже при ярком солнечном свете, или наоборот тусклом освещении.
В других случая, например, у пользователя мобильного устройства есть больше времени на рассмотрение деталей. Так или иначе, мобильный контекст гораздо более разнообразен, чем контекст стационарных компьютеров.
Несмотря на то, что мобильные телефоны и планшетные компьютеры гораздо разнообразнее по своим размерам, почти их всех объединяет использование жестов для взаимодействия с сайтом или приложением. Этот пункт облегчает адаптацию оригинального сайта под мобильное устройство.
Мобильные приложения и мобильные сайты
Существует множество вариантов использования media queries в процессе адаптации мобильного интерфейса. Но зачастую этого мало для удовлетворения конкретных потребностей в кэше мобильных веб — приложений, которые должны быть построены иначе, чем обычный веб — сайты. Рассмотрим веб — сайт BBC.
Веб — приложение может основываться на кэше HTML5 приложения. Небольшой набор HTML и других файлов нужно загрузить и установить один раз в кэш браузера, а затем заполнить с помощью AJAX.
Кэш реализован в виде файла, который указан в верхней части HTML-файла:
<!DOCTYPE html> <html manifest="appcache.php"> <!-- the rest loads conditionally -->
Тут также перечислены файлы компонентов, которые должны быть в кэше. Приведенный выше пример использует PHP, где правильный MIME-тип указывается в разметке, а не в качестве опции конфигурации сервера:
<?php header('Content-type: text/cache-manifest'); ?>
CACHE MANIFEST
# version 1.0; change version# or other content to update app
CACHE:
index.html
css/styles.css
js/app.js
img/home.png
img/about.png
img/back.png
В первый раз, когда вы попали на страницу, все эти файлы будут в кэше. После этого, они перезагружается из кэша браузера, не касаясь вашего сервера. После содержание файлов будет, обновляется с сервера. JavaScript может взаимодействовать отдельно с помощью AJAX, но обычно используется какой-нибудь обходной путь.
Этот способ структурирования сайта плохо адаптирован по сравнению с более традиционными сайтами, управляемыми сервером. В последнем случае нет никакого смысла в кэширование приложений, так как множество компонентов страниц меняется постоянно, наприме …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров