Сайты бывают разными. Но если речь идет о более или менее серьезном интернет-проекте или сайте крупной компании, то он обязательно должен иметь мобильную версию.
Однако, что же подразумевается под «мобильностью» сайта? Ведь мобильные устройства бывают самыми разными – это и смартфоны, и планшеты, и ультрабуки.
Причем они выпускаются с самыми разными диагоналями дисплеев и плотностью пикселей. Кроме этого, наверняка, в будущем ряд подобных гаджетов будет только пополняться. И что же: создавать отдельную версию сайта для каждой конкретной модели? На это не хватит никаких ресурсов и времени. Да и желания делать одну и ту же работу несколько раз никто не хочет.
Очевидно, что нужно искать какое-то другое решение. И такое решение есть! Это так называемый адаптивный дизайн или responsive Web Design.
Как видно из названия, адаптивный дизайн разрабатывается таким образом, что все элементы сайта подстраиваются (адаптируются) к текущей ситуации в зависимости от размеров и разрешения экрана, используемой операционной системы и ориентации экрана.
При таком подходе подготавливаются разнообразные сетки, слои, изображения, элементы и так далее, из которых впоследствии и выстраивается сайт. Так, например, при посещении сайта через iPad сайт подстроится под нужное разрешение, размеры картинок уменьшатся, флэш-элементы будут заменены на другие или вовсе убраны.
В то же время не стоит рассматривать адаптивный веб-дизайн лишь как подстройку под текущее разрешение экрана. По сути, это принципиально иной подход к разработке дизайна сайтов. Рассмотрим основные нюансы этого подхода.
Содержание
Разрешение экрана
В настоящее время разрешения экранов уже не делятся на стандартные варианты: 1024×768, 1280×1024, 1600×900 и так далее. Экраны мобильных устройств могут иметь самые разные разрешения, а также менять ориентацию с книжной на альбомную при повороте устройства.
Владельцы же стационарных компьютеров с большими мониторами чаще всего подбирают разрешение под свои ощущения, то есть и здесь нет единого стандарта.
Задача адаптивного дизайна как раз и заключается в том, чтобы сайт выглядел достойно и красиво вне зависимости от используемого устройства и разрешения.
Адаптивный макет
В случае изменения разрешения полезно также, чтобы менялся полностью весь макет. Добиться такого эффекта несложно, если использовать CSS media queries. То есть необходимо создать основной стиль CSS, а при изменении разрешения уточнять его.
Оптимизация контента
Помимо упрощения структуры сайта, масштабирования изображений и уточнения CSS-стилей, следует задуматься и об упрощении контента.
Например, в версии сайта для настольных компьютеров допустимы большие баннеры и графические элементы навигации. В случае же с небольшим экраном телефона лучше обойтись простой ссылкой.
Также при разработке мобильной версии сайта стоит задуматься об упрощении навигации, удалении избыточной графики и рекламы и о более оптимальной организации текстовой информации.
Переход к тачскринам
С каждым днем все большую популярность набирают сенсорные интерфейсы. Тачскрины устанавливаются на смартфоны, планшеты, нетбуки, ноутбуки, а также во многие модели настольных систем.
Основное отличие сенсорного ввода заключается в отсутствии курсора. И адаптивный дизайн должен учитывать эту особенность. Так, например, если в стандартном варианте ссылки подчеркиваются при наведении курсора, то в случае с тачскрином никакого наведения курсора не может быть в принципе, поэтому стоит задуматься о более явном оформлении ссылок.
Другой пример – размещение элементов навигации слева. Такая структура сайта может оказаться неудобной для пользователей планшетов, так как обычно их держат в левой руке, а, значит, возможны случайные нажатия на ссылки и нежелательные переходы на другие страницы.
Как видите, нюансов, связанных с адаптивным веб-дизайном, действительно большое количество и ваша задача их всех учитывать. Если вы не готовы ориентироваться под вашего посетителя, в скором времени придётся столкнуться с просадкой посещаемости.
Ведь человек явно не будет находиться там, где ему плохо и неудобно. Подумайте над этим.
Лучшая CMS
А теперь непосредственно к практическому совету по поводу того, как сделать высококачественный сайт, который будет приносить пользу своим посетителям.
В этом деле вы можете нанять специалиста, который напишет вам код для сайта таким образом, чтобы он успешно функционировал на любых устройствах.
Но что делать, если ваш бюджет не настолько велик, чтобы за создание сайта отдавать несколько сотен долларов? В таком случае можно выбрать альтернативу – воспользоваться CMS. Это действительно хороший вариант, который на сегодняшний момент пользуется большим спросом.
А какую же CMS выбрать, чтобы на выходе получить сайт с адаптивным дизайном? Есть один прекрасный вариант – WordPress. Если объективно, то это наилучшая платформа на рынке на данный момент.
Ею пользуются сотни тысяч людей со всего мира и успешно развивают свои сайта различной сложности.
Вот лишь небольшое количество тех плюсов, с которыми вы столкнётесь:
- Всё абсолютно бесплатно. Да, вы получаете замечательный результат, но при этом ни за что не платите, что не может не радовать. Нет никаких сборов. Единственный вариант, при котором вы можете потратиться – это при покупке расширенной версии того или иного шаблона.
- Есть огромнейший выбор тем высокого качества. Это, наверное, самое главное, о чём можно сказать. Есть сотни и тысячи шаблонов, каждый из которых хорош по-своему. Но что самое главное, практически каждый имеет адаптивный дизайн. Что из этого следует? Вы получите сайт, который будет удобен каждому пользователю, вне зависимости от того, какое он использует устройство.
- Предлагается удобнейшая панель управления. Благодаря ей вы быстро и оперативно сможете реализовывать любые свои идеи, связанные с дизайном и функционалом. Захотели – убрали блоки или поменяли их местами. Появилось желание – сменили фон или вообще всё цветовое решение относительно вашего сайта. Одним словом, очень удобно и практично.
- Есть возможность купить полную версию необходимой вам темы, если базовый вариант вас уже не устраивает. Конечно же, нельзя гарантировать, что у вашей темы будет расширенная версия, но информация об этом всегда указывается на сайте разработчика.
Как видите, плюсов много, но даже на этом они не заканчиваются. Ещё десяток точно можно выделить, даже не задумываясь.
Но сейчас не об этом. Непосредственно, пользуясь той же системой WordPress, вы гарантированно получите отличный результат в виде современного сайта, которым будет комфортно пользоваться при любых условиях и обстоятельствах.
Заключение
Адаптивный веб-дизайн – это то, без чего любой сайт в современном мире не может обойтись. Если ресурс не подстраивается под устройства различного типа, в конечном счёте он перестаёт быть интересным.
Человек, чувствуя некий дискомфорт, быстро покинет страницу и найдёт информацию на другом, более продуманном и удобном сайте. Работайте над своей площадкой и делайте её лучшей среди конкурентов, чтобы добиться успеха.
