Лучшие советы по адаптивному веб-дизайну: пример

1. 1. Медиа-запросы
2. 2. «Мобильный сначала»
3. 3. «Прогрессивное улучшение»
4. 4. Итерируйте в браузере
5. 5. Гибкие сетки
6. 6. Гибкие изображения
7. 7. Плотность пикселей
8. 8. Заполнение пробелов

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

И именно здесь отзывчивый веб-дизайн выходит на первый план. Как Smashing Magazine заявляет в своем полезном обзоре Адаптивный веб-дизайн: что это такое и как его использовать «этот тип дизайна« устраняет необходимость разной фазы проектирования и разработки для каждого нового гаджета на рынке… поскольку веб-сайт должен автоматически переключаться в соответствии с разрешением, размером изображения и возможностями сценариев », независимо от того, просматривает ли пользователь на ноутбуке, iPad или настольном компьютере.

С гуглом недавно объявил этот адаптивный веб-дизайн является их рекомендуемой конфигурацией, так как « он хранит ваш настольный и мобильный контент на одном URL-адресе, что облегчает вашим пользователям взаимодействие, совместное использование и ссылки на алгоритмы Google, а также позволяет им назначать свойства индексации для вашего контента », принятие такого подхода более важно, чем когда-либо для успешного SEO-дизайна.

Как агентство цифрового маркетинга с родословной в поиске, все наши проекты дизайна и разработки планируются и реализуются с учетом SEO на переднем крае. Как часть нашего недавний ребрендинг наш внутренний Команда разработчиков и разработчиков Реализованы лучшие практики адаптивного дизайна для stickyeyes.com.

Прочитайте наши лучшие советы по использованию этих методов при создании собственного веб-сайта:

1. Медиа-запросы

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

@ media screen и (min-width: 480px) {.back-to-top {font-size: 0.75em; }}

Как медиа-запросы помогли нам ориентировать CSS на разных устройствах.

2. «Мобильный сначала»

Термин «Мобильный сначала» был придуманный Люком Вроблевским в 2009 году. По его словам, «мобильная связь заставляет вас сосредоточиться» - поскольку использование мобильных устройств продолжает увеличиваться (и неизбежно обгоняет использование настольных компьютеров), мы должны стремиться предоставить пользователям всех устройств оптимизированные возможности. «Mobile-first» усиливает убедительные методы проектирования, которые мы используем при разработке веб-страниц, ориентированных на конверсию, - создавая увлекательный опыт, который сразу переходит к сути.

3. «Прогрессивное улучшение»

С точки зрения разработки, «мобильность в первую очередь» также направлена ​​на решение проблем совместимости между несколькими устройствами и браузерами, начиная с наименьшего общего знаменателя. Обозначаемое как «прогрессивное улучшение», это требует, чтобы макеты проектировались с наименьшим размером экрана и постепенно улучшались за счет спектра разрешения. Преимущество этой методики состоит в том, что мобильные устройства загружают только минимально необходимый CSS и изображения. Это ключ с точки зрения SEO, как Google оценивает скорость сайта как часть своего рейтинга поиска , Прогрессивное улучшение также означает, что менее способные браузеры видят упрощенную, но функциональную версию сайта, в то время как современные браузеры получают преимущества от новых функций, таких как тени от CSS3, закругленные углы и анимация.

IE7 против Google Chrome, который поддерживает свойства CSS3, такие как закругленные углы и тени.

4. Итерируйте в браузере

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

Наши первоначальные макеты охватывали только мобильные и настольные представления.

5. Гибкие сетки

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

Наша гибкая сетка позволяет сайту масштабироваться. Наступает момент, когда при уменьшении масштаба дизайн «ломает» макет, в котором вводятся медиа-запросы.

Точки, в которых дизайн адаптируется (так называемые «точки останова»), легче определить, когда наши макеты подписаны, и мы перешли к фазе быстрого прототипирования. Здесь мы сосредотачиваемся на интерфейсе сайта, тестируем с различными разрешениями и на разных устройствах, решаем проблемы дизайна по мере их возникновения. Вместо того, чтобы устанавливать предопределенные точки останова, мы предпочитаем работать органично, вставляя точки останова там, где макет страницы «ломается» и требуется новое дизайнерское решение.

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

6. Гибкие изображения

В гибком макете изображения всегда будут отображаться на 100% по умолчанию - что при просмотре на маленьких экранах означает, что они, вероятно, будут расширяться за пределы контейнера. Для stickyeyes.com мы использовали гибкие изображения, ключевой компонент адаптивного веб-дизайна. Гибкие изображения могут быть достигнуты с помощью следующего CSS:

img, embed, object, video {max-width: 100%; }

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

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

7. Плотность пикселей

С появлением устройств высокой четкости, таких как iPhone 4S и iPad 3-го поколения, мы должны были помнить, что изображения со стандартным разрешением могут выглядеть размытыми на этих устройствах, поскольку в заданной области их количество пикселей в два раза больше. Поэтому нам нужно было создать два набора изображений - один на 100% и один на 200%. Мы использовали медиа-запросы для нацеливания 200% изображений на устройства высокой четкости:

@media only screen и (-webkit-min-device-pixel-ratio: 2), только экран и (-o-min-device-pixel-ratio: 2), только экран и (min - moz-device-pixel -ratio: 2), только экран и (min-device-pixel-ratio: 2) {.backgroundsize .insights .rssa {background-image: url (../ img / blog-icons2x.png); размер фона: 277px 300px; }}

Примечание: мы также используем селектор CSS .background size, класс, установленный Modernizr.js для тега HTML - это позволяет нам ориентироваться только на браузеры, которые поддерживают это свойство CSS3.

8. Заполнение пробелов

По умолчанию старые браузеры не поддерживают некоторые функции, которые мы пытались интегрировать в дизайн сайта Stickyeyes, такие как HTML5 и CSS3. К счастью, для заполнения пробелов имеются полифилы или прокладки. Обычно они представлены в виде JavaScript, HTML или CSS-кода и обеспечивают поддержку этих отсутствующих функций. Наши фавориты:

• Modernizr.js библиотека JavaScript, которая использует функцию обнаружения функций для информирования разработчика о функциях конкретного браузера. Это помогает с прогрессивным улучшением, позволяя разработчику использовать селекторы CSS, чтобы ограничить современные функции для современных браузеров. Modernizr также позволяет разработчикам использовать элементы HTML5 в старых версиях IE.

• Respond.js Добавлена ​​поддержка медиа-запросов CSS3 min / max-width в IE6 - IE8.

• imgSizer.js Добавлена ​​поддержка гибких изображений в IE. Это также исправляет хитрое масштабирование изображений в IE.

Надеемся, что это даст вам полезное руководство для начала работы над вашими адаптивными проектами веб-дизайна.

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

Похожие

Комментарии