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

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

Имея это в виду, вот семь лучших советов по адаптивному веб-дизайну.

1. Думайте отзывчиво

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

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

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

2. Обратите внимание на контент

Не попадайтесь в ловушку подхода «подгонки под размер», когда вы фокусируетесь на размещении всех элементов на странице без учета их контекста. Начните с концентрации на контенте и функциях, которые являются наиболее важными, и будьте бдительны в отношении того, какие элементы подвергаются нарезке. По мере того, как вы продвигаетесь вверх по разным размерам экрана, сомневайтесь в их включении на каждом этапе — если вам приходится слишком долго думать об этом, вероятно, это не обязательно. Как только вы определитесь с содержанием и функциями, которые вам нужны, вы можете начать работу над макетом. Огромное разнообразие размеров экрана означает, что традиционная концепция «выше сгиба» в значительной степени мертва. Люди привыкли к прокрутке — появление таких сайтов, как Facebook и Twitter, позаботилось об этом — поэтому создавайте свои сайты таким образом, чтобы поощрять прокрутку, но сохранять наиболее важную информацию в верхней части экрана. Это включает в себя контактную информацию, призывы к действию и на сайтах электронной коммерции очень важную кнопку «Добавить в корзину».

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

3. Экспериментируйте с масштабируемой навигацией

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

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

4. Все об изображениях

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

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

5. Подумайте о типографике

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

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

6. Оптимизация для сенсорных экранов

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

7. Тестируйте на реальных устройствах

Наконец, хотя планирование вашего дизайна является важным шагом, не полагайтесь только на теорию. Существуют мобильные эмуляторы, которые помогут проверить ваш дизайн и точки останова CSS, но ничто не сравнится с тестированием на реальных объектах — многие из этих эмуляторов только воспроизводят различные размеры экрана, но не функциональность разных операционных систем. Убедитесь, что у вас есть множество экранов разного размера и несколько разных пользователей, и тщательно протестируйте свои проекты. Это часто поднимет новую точку зрения и подтвердит, что вы на правильном пути, или покажет вам, где можно сделать улучшения.

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