Создание адаптивного для мобильных устройств веб-дизайна

1. Вступление
2. Потребность в адаптивности
3. Что мы делаем: страница с подробным описанием скромного продукта
4. Состав
5. Настройка области просмотра
6. Фрагменты контента
7. Специальные символы HTML
8. Схема тел: URI
9. Стиль
10. Отдельная таблица стилей для больших экранов
11. Mobile-First Styles
12. Применение медиазапросов
13. Использование относительных единиц
14. Использование CSS для сокращения запросов
15. Поведение
16. Галерея
17. Связанный контент
18. Следующие шаги
19. Меньше JS
20. Автономный доступ
21. Завершение

Вступление

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

Существует еще более актуальное отзывчивое руководство по нашим новым Основы Сети сайт.

• Почему мы должны создавать мобильные, адаптивные, адаптивные решения
• Как структурировать HTML для адаптивного сайта, чтобы оптимизировать производительность и расставить приоритеты
• Как написать CSS, который сначала определяет общие стили, создает стили для больших экранов с медиа-запросами и использует относительные единицы
• Как написать ненавязчивый Javascript для условной загрузки фрагментов контента, использования сенсорных событий и геолокации
• Что мы могли бы сделать для дальнейшего улучшения нашего адаптивного опыта

Потребность в адаптивности

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

Однако мобильный контекст - это гораздо больше, чем просто размер экрана. Наши мобильные устройства всегда с нами, открывая новые варианты использования. Поскольку у нас постоянно есть наши мобильные устройства, возможности подключения могут быть повсюду, начиная от сильных сигналов Wi-Fi на диване, до 3G или EDGE, когда вы находитесь вне дома. Кроме того, сенсорные экраны открывают новые возможности для непосредственного взаимодействия с контентом, а эргономика мобильного устройства приводит к различным соображениям при разработке макета и функциональности.

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

Что мы делаем: страница с подробным описанием скромного продукта

Посмотреть демо

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

Состав

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

Настройка области просмотра

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

Важно отметить, что мы не отключаем возможность увеличения масштаба страницы пользователем (что можно сделать, добавив user-scalable = no к атрибуту содержимого), хотя мы оптимизируем содержимое для небольших экранов. Рекомендуется оставить включенным пользовательское масштабирование, чтобы сделать вещи максимально доступными. Однако существуют варианты использования для отключения пользовательского масштабирования, например, если вы включаете фиксированные элементы ,

Фрагменты контента

Чтобы максимально облегчить работу и улучшить воспринимаемое время загрузки, мы создаем два дополнительных HTML-документа для нашего вспомогательного контента, reviews.html andrelated.html. Поскольку этот контент не требуется для основного варианта использования (покупка продукта) и включает в себя несколько изображений, мы не будем загружать его по умолчанию, чтобы уменьшить первоначальный размер страницы. По умолчанию контент доступен по ссылкам на странице, но если присутствует определенный уровень поддержки JavaScript, мы будем условно загрузить контент когда пользователь запрашивает это или когда разрешение достигает определенной точки останова.

Специальные символы HTML

Простой способ уменьшить потребность в фоновых изображениях (тем самым сохраняя HTTP-запросы) - использовать специальные символы HTML для простых фигур. В случае звезд рейтинга мы используем & # 9733; создать сплошную звезду (★) и & # 9734; создать пустые звезды (☆) для наших рейтингов. И поскольку это HTML, а не изображение, он остается четким даже на экранах с высоким разрешением.

Схема тел: URI

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

Мы иногда забываем, что мобильные устройства могут совершать телефонные звонки Кроме того, некоторые настольные конфигурации могут запускать приложения VoIP для инициирования телефонного звонка. Мы предлагаем пользователям простой способ облегчить телефонный звонок, что в некоторых случаях может иметь смысл (т. Е. Мобильный пользователь, который предпочел бы завершить транзакцию по телефону, а не проходить через процесс оплаты на своем мобильном устройстве).

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

Стиль

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

Отдельная таблица стилей для больших экранов

Мы создаем два отдельных файла CSS, style.css и extended.css, чтобы предоставить базовые стили для экранов размером менее 40,5em и использовать медиазапросы для предоставления расширенных стилей для экранов размером более 40,5em.

Мы используем условный код <! - [if (lt IE 9) & (! IEMobile)]> для того, чтобы обслуживать расширенный .css для немобильных версий IE меньше, чем версия 9, что, к сожалению, не поддержка медиа-запросов. Хотя этот метод действительно добавляет HTTP-запрос к миксу, он дает нам большую гибкость над нашими стилями , Альтернативно, мы могли бы использовать respond.js поставить расширенные стили для IE.

Мы используем единицу em вместо px, чтобы поддерживать согласованность с остальными нашими относительными единицами и учитывать пользовательские настройки, такие как уровень масштабирования. Кроме того, контент должен определять точку останова (мы используем 40.5em в качестве точки останова), потому что размеры устройства слишком различны и всегда меняются, поэтому ненадежный ,

Mobile-First Styles

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

Мы хотим как можно больше избегать сложности, поэтому вот как выглядит подход «сначала для мобильных устройств»:

Вместо того, чтобы сначала объявлять правила для большого экрана, чтобы переопределить их для экранов меньшего размера, мы просто определим правила по мере того, как появится больше недвижимости. Сеть по умолчанию - гибкая вещь, поэтому мы сделаем все возможное, чтобы работать с ней, а не против нее. Важно отметить, что некоторые мобильные браузеры (браузеры Symbian, Blackberry <OS 6.0, Netfront, WP7 pre-Mango и т. Д.) Не поддерживают медиазапросы, поэтому обслуживание базовых стилей по умолчанию достигает большего количества устройств и браузеров. Как Брайан Ригер ставит это , «отсутствие поддержки запросов @media на самом деле является первым запросом @media».

Применение медиазапросов

Мы продолжаем наш стиль, ориентированный на мобильные устройства, когда применяем наши медиа-запросы. Наш список связанных продуктов начинается с двух к ряду, но увеличивается до 3-х подряд, когда размер экрана составляет не менее 28,75 мкм (примерно размер мобильных телефонов в альбомном режиме), а затем до 6-го ряда при размере экрана. составляет не менее 40,5em (примерно планшеты в портретном режиме или маленькие настольные экраны).

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

Использование относительных единиц

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

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

Использование CSS для сокращения запросов

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

Мы также используем URI данных вместо фоновых изображений для некоторых меньших значков (для значков, таких как поиск, социальные функции и местоположение). Хотя URI данных могут выглядеть немного некрасиво и могут увеличить размер файла таблицы стилей, уменьшение количества запросов приводит к быстрее воспринимается время загрузки ,

Поведение

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

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

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

Галерея

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

Мы построим карусель изображений из доступных уменьшенных изображений:

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

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

Связанный контент

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

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

примечание: мы используем размер экрана, чтобы определить, когда загружать контент, но это ни в коем случае не идеально. Следите за navigator.connection для лучшего способа определить, стоит ли вводить дополнительный контент.

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

Следующие шаги

Адаптивные изображения

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

Меньше JS

Сохранение как можно более легких страниц важно для производительности, поэтому мы должны максимально оптимизировать сценарии. Мы используем JQuery библиотека для нашей демонстрации, но мы определенно не используем все это. Мы могли бы посмотреть на использование Закрытие Компилятор убрать неиспользуемые фрагменты библиотеки, чтобы сделать их как можно более легкими, но при этом использовать преимущества, предлагаемые jQuery. С другой стороны, мы могли бы посмотреть в микро-структура лайк Zepto.js и другие, но они, как правило, не обязательно предлагают лучшую кросс-браузерную поддержку. Написание ванильного Javascript может избежать лишних хлопот, но его будет сложнее написать и сложнее поддерживать. В конечном счете, у каждого подхода есть свои плюсы и минусы, просто обязательно учитывайте компромиссы при принятии этих решений.

Автономный доступ

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

Завершение

Мы создали опыт, учитывающий пользовательский контекст и адаптирующий макет и функциональность на основе функций браузера и устройства. Мы также создали фонд, который может адаптироваться к будущим устройствам и браузерам. Вот некоторые ключевые выводы:

• Автор семантической разметки HTML5 как основы адаптивного опыта.
• Создайте мобильный CSS сначала, чтобы все было легко, просто и удобно.
• Используйте относительные единицы, такие как ems и проценты, чтобы стили были максимально гибкими и гибкими.
• Пусть контент определяет точки останова для медиа-запросов.
• Использование возможностей для сокращения HTTP-запросов путем условной загрузки контента и использования символов HTML, градиентов CSS, URI данных и т. Д.
• Автор ненавязчивый JavaScript и использовать такие инструменты, как Modernizr, для обнаружения функций.
• Воспользуйтесь мобильными функциями, такими как сенсорные события, телефонная связь и геолокация, чтобы предоставить пользователям мобильных устройств расширенные возможности.

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

Похожие

Комментарии