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

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

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

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

<meta name = "viewport" content = "width = device-width, initial-scale = 1" />

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

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

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

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

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

Схема тел: URI

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

<a href="tel:+18005550199"> 1-800-555-0199 </a>

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

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

Стиль

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

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

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

<link rel = "stylesheet" type = "text / css" href = "style.css" media = "screen, handheld" /> <link rel = "stylesheet" type = "text / css" href = "extended.css "media =" screen and (min-width: 40.5em) "/> <! - [if (lt IE 9) & (! IEMobile)]>> <link rel =" stylesheet "type =" text / css "href = "extended.css" /> <! [endif] ->

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

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

Mobile-First Styles

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

/ * Сначала стили большого экрана - избегайте * / .product-img {width: 50%; плыть налево; } @media screen and (max-width: 40.5em) {.product-img {width: auto; плавать: нет; }}

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

@ media screen и (min-width: 40.5em) {.product-img {width: 50%; плыть налево; }}

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

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

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

/ * Стили по умолчанию * / .related-products li {float: left; ширина: 50%; } / * Отображение 3 в строке для средних дисплеев (например, мобильных телефонов в альбомной ориентации или небольших планшетов) * / @media screen и (min-width: 28.75em) {.related-products li {width: 33.3333333%; }} / * Отображение 6 в ряд для больших дисплеев (например, средних планшетов и выше) * / @media screen и min-width: 40.5em) {.related-products li {width: 1666666667%; }}

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

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

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

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

цель ÷ контекст = результат

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

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

/ * Использование CSS-градиентов вместо фоновых изображений * / header [role = "banner"] {position :lative; фон: # 111; фон: + линейный градиент (сверху, # 111 0%, # 222 100%); }

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

/ * Использование URI данных для фонового изображения * / .find-рядом {фон: URL (данные: изображение / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGFVN9r01AU / tplnbDhizpnEQk + aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc ++ QcM2YNve5INxhRh + KyIIkz2IrOemzRNJ1MDufe73 / nuOSfn5F6g + XFa0xQvDxRVU0 / FwvzE5BTf8gFeHEMr / GhNi4YWSiZHQA / Tsnnvs / MOHsZsdO5v36v + Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E + Dwie + dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyrRVIv5WRFsgz28B9zg / JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE / Xxi9QbidcFg246M1fkLNJK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0 + 30UJKwnzS / NDNZ8 + PtUJUE6zHF9fZLRvS6vdfbkZMH4zU + pynWf0D + vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E / A0hCgo4cZCjgkUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH + iuWxSF5lyk + CUdd1NuaQU5f8dQvPMpTuJXYSWAy6rPBe + CpsCk + FF8KXv9TIzt6tEcuAcSw + q55TzcbsJdJM0utkuL + K9ULGGPmQMUNanb4kTZyKOfLaUAsnBneC6 + biXC / XB567zF3h + rkIrS5yI47CF / VFfCHwvjO + Pi + 3b4hhp9u + 02TrozFa6 7vTkbqisXqUj9sn9j2OqhMZsrG + sX5WCCu0omNqSrN0TwADJW1Ol / MFK + 8RhAt8iK4tiY + rYleQTysKb5kMXpcMSa9I2S6wO4 / tA7ZT1l3maV9zOfMqcOkb / cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63gJE722OtPW1huos + VqvbdC5bHgG7D6vVn8 + q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q + CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY + CjwveDp4bXBtZXRhPgrlPw1BAAABGUlEQVQoFXWSvU4CQRRGdwydxWYLXkCp7ayIhMYIRPEJtDOGAG8AFY1vQOigZi202cQYY4XFJiRYWm2NsbE2LOfbnYlbwE0O3 / 2bO8PMemma + uAJ7AjuILHco8eurl6jwBhTonAOHfiFMzDwDgGM4YXePzf5gsQHXGsAFsKj9dv4C2gpLjFdx + jBA4knVLbKxdPAZ3o2xF30S9vqzDUKN65pl9I8Ix9rQWIbYvSThSMbZ0LjAOcET не uFQf1aLZE7z6P9X + QNbNwp0dVUm36J7jZ2mFJda + QoBiSs0Mx0DhoW4iV + GyF1ri0BXd8lOiDeH0Pqq6cqzWvHhGiR1vB + og477Bpo8gYgB2cMVP40KBb3JGr6hDxXtZPG3KYiAhJlWaikAAAAASUVORK5CYII =) не-повторять 100% 43%; }

Поведение

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

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

<ul id = "nav-anchors" class = "nav-anchors"> <li> <a href="#nav" id="menu-anchor"> Меню </a> </ li> <li> <a href = "# search" id = "search-anchor"> Search </a> </ li> </ ul> <form id = "search" action = "#" method = "post" class = "поиск раскрывать" > <fieldset> <legend> Поиск по сайту </ legend> <input type = "search" placeholder = "Поиск в магазине" /> <input type = "submit" value = "Поиск" /> </ fieldset> </ form > <nav id = "nav" class = "nav show"> <ul role = "navigation"> <li> <a href="#"> футболки </a> </ li> <li> <a href = "#"> Толстовки </a> </ li> <li> <a href="#"> Брюки </a> </ li> </ ul> </ nav>

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

$ (w) .resize (function () {// Обновить размеры при изменении размера sw = document.documentElement.clientWidth; sh = document.documentElement.clientHeight; checkMobile ();}); // Проверить, если мобильная функция checkMobile () {mobile = (sw> точка останова)? ложь Правда; if (! mobile) {// If Not Mobile $ ('[role = "tabpanel"], # nav, # search'). show (); // Показать полную навигацию и поиск} else {// Скрыть if (! $ ('# Nav-anchors a'). HasClass ('active')) {$ ('# nav, # search'). Hide (); // Скрыть полную навигацию и поиск}}}

Галерея

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

<div id = "product-img" class = "product-img"> <figure class = "img-container" id = "img-container"> <img src = "images / product_img_1.jpg" alt = "Super Ffly Футболка "/> </ figure> <nav> <ul> <li> <a href="images/product_img_1.jpg"> <img src =" images / product_img_1_thumb.jpg "alt =" Мужская рубашка Super Ffly " /> </a> </ li> <li> <a href="images/product_img_2.jpg"> <img src = "images / product_img_2_thumb.jpg" alt = "Женская рубашка Super Ffly" /> </a> </ li> <li> <a href="images/product_img_3.png"> <img src = "images / product_img_3_thumb.jpg" alt = "Логотип Ffly" /> </a> </ li> </ ul> </ nav> </ div>

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

function buildGallery () {container.html ('<div id = "img-list"> <ul /> </ div>'); imgList = $ ('# img-list'); nav.find. ( 'а: первый') addClass ( 'активный'); // Для каждой навигационной ссылки nav.find ('a'). Each (function () {var $ this = $ (this); var href = $ this.attr ('href'); // Подготовить элемент списка с изображением источник в атрибуте данных arr + = '<li data-imgsrc = "' + + href + '"> </ li>';}); // Добавить в # img-list imgList.find ('ul'). Append (arr); // Миниатюра Nav Нажмите nav.on ('click', 'a', function (e) {var pos = $ (this) .parent (). Index (); e.preventDefault (); loadImg (pos); if (swipeEnabled) {mySwipe.slide (index, 300);} updateNav (pos);}); }

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

Modernizr.load ({test: Modernizr.touch && Modernizr.csstransitions, yep: 'js / swipe.js', завершение: function () {if (Modernizr.touch && Modernizr.csstransitions) {swipeEnabled = true; buildSwipe (); }}}); // Создание функции Swipe Carousel buildSwipe () {// Инициализация Swipe.js w.mySwipe = new Swipe (document.getElementById ('img-list'), {callback: функция (событие, индекс, elem) {updateNav (index)) ; loadImg (index + 1);}}); }

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

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

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

<section class = "aux related-products" id = "related-products"> <header id = "tab-related"> <a href="related.html"> <h2> похожие футболки </ h2> < / a> </ header> </ section> <section class = "aux reviews" id = "reviews"> <header id = "tab-reviews"> <a href="reviews.html"> <h2> 8 отзывов </ h2> <ol class = "star"> <li class = "on"> & # 9733; </ li> <li class = "on"> & # 9733; </ li> <li class = "on "> & # 9733; </ li> <li class =" on "> & # 9733; </ li> <li> & # 9734; </ li> </ ol> </a> </ header> < / раздел>

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

// Проверить, если мобильная функция checkMobile () {if (sw> точка останова) {mobile = false; // Not Mobile} else {mobile = true; // Mobile} if (! Mobile) {// If Not Mobile loadAux (); // Загрузка вспомогательного содержимого}} // Настройка вспомогательного содержимого function loadAux () {var $ aux = $ ('. Aux'); $ aux.each (function (index) {var $ this = $ (this); var auxLink = $ this.find ('a'); var auxFragment = auxLink.attr ('href'); var auxContent = $ this. find ('[role = tabpanel]'); if (auxContent.size () === 0 && $ this.hasClass ('loaded ') === false) {loadContent (auxFragment, $ this);}}); } function loadContent (src, container) {// Загрузить содержимое вкладки container.addClass ('загружен'); $ ('<div role = "tabpanel" />').load(src +' #content> div ', function () {$ (this) .appendTo (container);}); }

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

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

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

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

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

Меньше JS

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

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

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

Завершение

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

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

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

Похожие

Найдите свой ключ продукта Windows простым способом
... для повторной установки Windows на том же компьютере или использовать его для установки Windows на другом компьютере, пока вы сначала деактивировать ключ на оригинальной машине. Если у вас установлена ​​Windows 8.1, у вас не будет ключа продукта, если вы не купите розничную версию операционной системы. В противном случае ключ продукта теперь сохраняется в зашифрованном
Адаптивный и адаптивный дизайн: что лучше?
Google имеет всегда рекомендуется адаптивный веб-дизайн (RWD), особенно после развертывания большое обновление на 21.04.15, который оценил мобильные дружественные сайты выше. В обновлении не указано, что вы должны использовать адаптивный дизайн, а только то, что сайт должен быть доступен
Что такое PCI-совместимость и как оставаться в безопасности
Если вы новый владелец бизнеса и только начали принимать к оплате кредитные карты, вы не хотите, чтобы вас застали врасплох правилами, регулирующими обработку конфиденциальных персональных данных. Последствиями ненадлежащих процедур могут быть штрафы, сборы и даже прекращение обработки вашей карты. Читайте дальше, чтобы узнать о правилах PCI и о том, что вам нужно сделать, чтобы соответствовать требованиям. Что такое PCI? PCI расшифровывается как индустрия платежных карт.
Создание приложения JDBC в NetBeans: пошаговое руководство
Эта статья является попыткой помочь читателям, которые испытывают трудности при создании приложения JDBC в NetBeans. Идея состоит в том, чтобы сделать вещи максимально простыми, чтобы можно было практиковаться с самого начала. Возможность увидеть, как работает ваше первое приложение, не только забавна, но и улучшает теоретическую базу. В вычислительной технике есть несколько способов сделать одну простую вещь. Это пошаговое руководство является лишь одним из них. Конечно, в создаваемом
TomTom Navigator запускает (некоторые) Android-устройства, мы идем в руки
Один из пунктов продажи TomTom (или конкурентов, таких как Navigon ) является автономным аспектом своих карт, который всегда держит вас на пути, независимо от того, есть ли у вас подключение для передачи данных или нет. Однако цена за эту роскошь составляет ровно 3,1 ГБ (размер загруженных нами европейских карт) - ценное пространство на вашем смартфоне, которое вы никогда не сможете использовать ни для чего другого.
Мы любим Joomla! то есть лучшие страницы, созданные в Joomla!
... для блогов, все чаще используется для создания все более совершенных веб-сайтов, давайте посмотрим правде в глаза - Joomla! является более серьезным решением, если мы будем использовать термин CMS здесь. И на наш взгляд, обширная Joomla! это гораздо больше подходит. Эта запись не будет о превосходстве одной системы над другой. Более того, это невозможно доказать по простой причине: каждая из этих двух систем - Wordpress и Joomla! они диаметрально разные. В одном из них якобы лучше,
Тестовая страница для HTTP-сервера Apache в Fedora
Если вы являетесь представителем общественности: Тот факт, что вы видите эту страницу, указывает на то, что на сайте, который вы только что посетили, либо возникли проблемы, либо он находится на плановом обслуживании. Если вы хотите, чтобы администраторы этого веб-сайта знали, что вы видели эту страницу вместо ожидаемой, отправьте им электронное письмо. Как правило, почта, отправляемая на имя «веб-мастер» и направляемая на домен сайта, должна доходить до соответствующего
Что значит .com?
.com был представлен как один из первых доменов верхнего уровня (TLD), когда система доменных имен была впервые внедрена для использования в Интернете в январе 1985 года. Первоначально созданная для представления « коммерческих » целей веб-сайта, .com с тех пор был в эпицентр цифровой революции это изменило то, как люди работают, живут, играют и общаются с семьей и друзьями. Подробная история .com
Что такое внутренняя ошибка сервера 500 и как ее исправить?
Если вы пытаетесь посетить веб-сайт и видите сообщение «500 Internal Server Error», это означает, что с веб-сайтом что-то не так. Это не проблема с вашим браузером, вашим компьютером или вашим интернет-соединением. Это проблема с сайтом, который вы пытаетесь
Что такое WINLOGON.EXE в диспетчере задач
WINLOGON.EXE - это процесс, без которого невозможно запустить Windows и ее дальнейшее функционирование. Но иногда под его личиной кроется вирусная угроза. Давайте разберемся, в чем заключаются задачи WINLOGON.EXE и какая опасность может исходить от него. Данный процесс можно всегда увидеть, запустив «Диспетчер задач» во вкладке «Процессы».
HTML шаблоны электронной почты для транзакционных электронных писем
... для просмотра на мобильных устройствах - ваши почтовые кампании не смогут привлечь обязательства. Все это говорит о том, что нет ничего удивительного в том, что разработчики не хотят иметь дело с шаблонами транзакционной электронной почты, когда есть отставание от более важных приоритетов. Мы постарались снять некоторые неприятности для вас и открыли коллекцию общих шаблонов электронной почты в формате HTML для транзакционной электронной почты. Маркетинговым кампаниям

Комментарии

Что на самом деле означает «бета-версия»?
Что на самом деле означает «бета-версия»? Что на самом деле означает «бета-версия»? Что означает, что проект находится в бета-версии, и вас это должно волновать? Прочитайте больше они снова переименовали его в Защитника Windows, и это то, что мы все знаем сегодня.
Есть ли способ привлечь людей к тому, чтобы сегодня взять журнал, помимо того, что Beyoncé или Supreme написали его обложку?
Есть ли способ привлечь людей к тому, чтобы сегодня взять журнал, помимо того, что Beyoncé или Supreme написали его обложку? Для некоторых журнал Casa Magazines по-прежнему является достоянием соседей, а для других - просто ностальгическим фоном. Мухаммед жалуется, что модные блоггеры придут в магазин, возьмут журнал, чтобы сделать несколько фотографий для своих аккаунтов в Instagram, и уйдут, ничего не купив. (Просто посмотри на
» Или «Что блокирует эту папку?
» Или «Что блокирует эту папку?» В зависимости от того, что выбрано. Процессы с блокировкой отобразятся в окне, и вы можете выбрать «Разблокировать»! или удали это! параметры или переименовать и скопировать параметры из Другое. LockHunter все еще находится в бета-версии, поэтому может быть не полностью стабильным, доступны 32-битные и 64-битные версии. Работает на Windows 2000 и выше. Удаление результата avast5.ini: LockHunter не смог удалить INI-файл, параметр удаления при перезагрузке
Что такое Разз Ягоды?
Что такое Разз Ягоды? При кормлении диких покемонов эти удобные маленькие предметы замедляют цель. Использование ягоды разз в то же время, что и Большой мяч, значительно упростит отлов редких и мощных покемонов. Что означают цветные кольца вокруг покемона? Цветные кольца помогут вам поймать покемонов. Чем меньше цветное кольцо, когда вы бросаете свой покебол, тем больше вероятность, что вы его поймаете. Цвет кольца указывает на то, как трудно поймать покемона.
Что такое PCI?
Что такое PCI? PCI расшифровывается как индустрия платежных карт. Говоря о теме соответствия PCI, вы на самом деле говорите о наборе отраслевых стандартов, известных как PCI DSS, где «DSS» означает «Стандарты безопасности данных». Эти стандарты были разработаны для обеспечения того, чтобы предприятия обрабатывали информацию о кредитных картах безопасным способом.
3. Что делает опыт намного лучше?
3. Что делает опыт намного лучше? Частично только С разрешением 534 dpi комфорт при чтении является оптимальным ... с небольшим ограничением углов обзора. При наклоне камеры яркие области быстро становятся серыми. Несмотря на то, что яркость составляет всего 358 кд / м2 (часто это Amoled, за исключением Samsung), дисплей остается разборчивым во всех ситуациях, включая солнце, благодаря контрастности, которая бесконечность. Следует отметить, что ZTE обязуется заменить этот экран в случае случайной
Что происходит и можно ли это исправить?
Что происходит и можно ли это исправить? Марзена Лаговска - контент-менеджер Увеличение количества каналов HD связано с переходом на новый стандарт сжатия видеоданных с использованием кодека MPEG4, который является
«Что это значит?
«Что это значит? Векторное поле - это просто причудливый способ сказать, что с каждой точкой на карте связан какой-то вектор. «Чтобы визуализировать векторное поле, можно отбросить тысячи частиц и позволить им течь, выбрасывая поле, рассматривая каждый вектор как скорость». Мы платим за ваши истории! У вас есть история для новостной команды Sun Online? Напишите нам по адресу tips@the-sun.co.uk или
Поскольку мы добавили URL с?
Поскольку мы добавили URL с? Rel = 0, он получает код для встраивания с отключенными рекомендуемыми видео или рекомендуемыми видео. Автоматически отключать похожие видео YouTube в WordPress Если вы встраиваете много видео с YouTube на свой веб-сайт, вы можете упростить этот процесс, используя автоматическое решение, которое отключает похожие видео с YouTube на всем сайте. Все, что вам нужно сделать, это установить и активировать
Потому что кто работает и снимает фотографии с планшета?
Потому что кто работает и снимает фотографии с планшета? Что ж, эта тенденция уже настолько изменилась, что я сам - при всей моей открытости к технологиям - пришел к тому, что уже не важно, кто-то это делает, а то, чего достигает цель. И так получилось, что современные аппаратные решения обращаются к нам практически со всех сторон, поэтому хорошая камера на планшете - и это то, что делает MediaPad M2 - приветствую с широкой улыбкой.
Немного утомительно, но что не сделано для безопасности?
Немного утомительно, но что не сделано для безопасности? Последний интересный вариант - это сообщения с определенным

Почему выбирают это?
ClientHeight; checkMobile ();}); // Проверить, если мобильная функция checkMobile () {mobile = (sw> точка останова)?
Что такое PCI?
Com?
Что на самом деле означает «бета-версия»?
Что на самом деле означает «бета-версия»?
Что означает, что проект находится в бета-версии, и вас это должно волновать?
Есть ли способ привлечь людей к тому, чтобы сегодня взять журнал, помимо того, что Beyoncé или Supreme написали его обложку?
Есть ли способ привлечь людей к тому, чтобы сегодня взять журнал, помимо того, что Beyoncé или Supreme написали его обложку?
» Или «Что блокирует эту папку?