Верстка веб-порталов под мобильные устройства – задача, с которой все чаще сталкиваются веб-разработчики. Это связано с тем, что гаджеты стали неотъемлемой частью жизни. Люди все чаще посещают интернет-страницы с планшетов и смартфонов.
Адаптивность сайта – это его возможность правильного отображения на оборудовании с разными техническими характеристиками. Некий способ «подстраивания» под используемый гаджет. Далее предстоит выяснить, что собой представляет адаптивная верстка сайта, как проверить правильность отображения сервера. Соответствующие сведения пригодятся каждому веб-разработчику.
Ключевые понятия для адаптации
Адаптация сайта, согласно Google, под мобильные или стационарные устройства начинается с изучения некоторых языков. Программист должен иметь хотя бы общее представление о:
- HTML5;
- CSS 3;
- JavaScript.
Кроме общий знаний нужно разобраться с ключевыми принципами адаптивности. К ним относят следующие понятия:
- Поточность – это принцип, описывающий отсутствие смещения информационных блоков во время просмотра сайта с мобильного оборудования.
- Относительность в изменении. Google указывает, что это принцип использования относительных единиц для установки размеров и координат верхней и нижней границ блока экрана устройства.
- Применение контрольных точек – расположение компонентов для различных экранов. Используется для того, чтобы предотвратить смещение (сдвиги) содержимого страниц открытого сайта.
- Использование минимальных и максимальных значений. Google указывает на то, что этот принцип лучше изучать на наглядном примере. Если экран имеет ширину меньше 1000 пикселей, контент будет отображаться на весь экран, в противном случае максимум ширины достигает 1000 пикселей.
- Вложенность объектов. Google называет этот подход своеобразным методом предотвращения сложностей контроля за разными составляющими страницы. Их можно вложить в один контейнер. Концепция применяется для блоков, которые не требуют адаптации под дисплей. Google относит к ним кнопки с логотипами и некоторые иные управляющие элементы.
- Одинаковые шрифты. На адаптивном сайте не будут менять шрифты. Это помогает избежать перегрузки сайта.
- Грамотное применение растровой и векторной графики. Каждое изображение должно быть оптимизировано под новые браузеры.
Все это поможет разобраться в том, как адаптировать сайт под разные разрешения. Предложенной информации недостаточно для успешной реализации задачи. Google отмечает, что при применении верстки CSS и HTML необходимо обратить внимание на еще один значимый параметр – на разрешение.
Разрешения для адаптивной верстки
В Google полно информации о том, как сделать веб-сервис хорошо адаптируемым под разнообразные гаджеты и устройства. Соответствующая операция невозможна без соблюдения макетных разрешений. Адаптивность обеспечивается тремя ключевыми значениями:
- 1600 пикселей – для компьютеров;
- 375 пикселей – для мобильных устройств;
- 960 пикселей – для планшетов.
Источники Google указывают в качестве стандартных разрешений, при которых не требуется менять дизайн и можно избежать неправильного отображения сайта, следующие варианты:
- 320 или 480 пикселей – мобильные устройства;
- 768 пикселей – планшеты;
- 1024 – нетбуки и некоторые модели планшетов;
- 1280 и более – персональные компьютеры.
Предложенные значения являются усредненными. Ширина может изменяться в зависимости от сайта, его ключевой концепции и технических особенностей. Предложенные в первом списке параметры называются брейкпоинтами (breakpoint) – разрешениями, при которых сайт меняет отображение на дисплее устройства.
Пример – пользователь открывает с ноутбука с шириной экрана 1280 пикселей веб-сайт, а затем в 2 раза сужает браузерное окно. Как только ширина окажется менее 960 пикселей, сервис в Интернете поменяет свое отображение.
Что заменить в коде
Пытаясь выяснить, как адаптировать имеющийся сайт под разные решения, можно увидеть множество полезной информации и уроков. В процессе верстки разработчику предстоит иметь дело с CSS3 и HTML.
CSS3 используется, согласно Google, для формирования каскадных таблиц, а HTML – для указания расположения конкретных компонентов (для непосредственной разметки). Классы объектов, созданных первым кодом, будут указываться в тегах для адаптации вводимых объектов под имеющееся разрешение.
Создавать адаптивные страницы, согласно Google, необходимо с формирования контейнера для упаковки картинки:
Далее по ширине от созданного контейнера задается ширина картинки. Этот прием позволяет при увеличении и уменьшении экрана увеличивать и уменьшать размеры изображения. Данный прием формирует поверхность для совершенно любых разрешений. Код пишется на CSS:
Созданное изображение может потерять качество вследствие масштабирования. Для устранения соответствующей особенности в CSS требуется изменить ширину для максимума и минимума в разрешении. Структура кода окажется такой:
Все это – готовый шаблон для одного изображения на сайте. Google указывает следующий HTML-код для небольшой галереи:
А вот так задается небольшой отступ. Он прописывается в CSS и помогает обеспечить лучшую адаптивность:
Аналогично можно действовать с текстом. Главное – это грамотно задавать параметры загружаемых документов и файлов под максимальное и минимальное разрешение дисплея.
Адаптивный фон
Для установки адаптивного фона сайта для мобильника нужно выполнить следующие действия:
- Сделать подборку качественной картинки с высоким разрешением, а затем пропорционально уменьшить его в графическом редакторе.
- Загрузить будущий фон на сервер в папку с картинками.
- Сформировать body стилей, а затем между тегами вставить стили с метатегом viewpoint. Он преобразовывает картинку в фон.
- Указать полный путь к папке стилей и его название.
- Проверить результат, увеличивая и уменьшая размеры окон в браузере.
Google описывает этот прием как самый простой. Основная сложность при такой адаптивной верстке заключается в подборе подходящего фонового изображения.
Адаптивная шапка
Google описывает процедуру создания адаптивной шапки на сайте как достаточно сложную операцию. До появления CSS приходилось пользоваться обтеканием и другими трюками для грамотной верстки веб-сервисов. Сейчас добиться желаемого результата проще. Сначала в HTML5 прописывается код шапки, включающий в себя три div-блока:
Теперь нужно расписать CSS3 код. Он будет выполнять основную работу и включать в себя несколько строк. CSS код позволяет располагать элементы шапки в тех или иных областях:
В самом конце шапка должна стать адаптивной. Для этого применяется свойство justify-content с параметром space-between:
Можно проверить итог. Лучше всего сделать это через приложение Google Mobile Friendly.
Адаптивное меню
Задумываясь, как сделать удобный адаптивный сайт, разработчикам нередко приходится «подстраивать» меню веб-порталов под различные экраны. Для этого, согласно Google, требуется:
- Добавить мета тег meta viewpoint в раздел шапки. Он требуется для корректного отображения меню на любом экране:
.
- Далее нужно добавить структуру меню:
- Добавить стили в body. Это нужно только в декоративных целях. Цвета могут использоваться любыми. В примере меню бежевое. Под body добавляется тег nav. Он отвечает за создание навигации сайта. Там размещаются основные ссылки меню:
- У заданного примера 6 ссылок. Контейнер будет иметь ширину 600 пикселей, каждый «блок» – 100 пикселей:
- Откорректировать медиа-запрос:
- Создать эффект показа меню при нажатии на ту или иную ссылку. Для этого прописывается следующее body:
Получившийся проект будет корректно отображаться на разных устройствах, включая планшет и мобильный телефон. Не всегда прописывать HTML5 код необходимо с нуля. Для верстальщиков создано множество инструментов, позволяющих создавать адаптивные веб-страницы.
Тильда
Google указывает на то, что адаптивность сайту можно придать за счет специальных конструкторов. Лучшим примером является Тильда. Он сможет самостоятельно расставить информационные и графические блоки в нужные места. Конструктор платный и обходится примерно в 1200-1500 рублей. Порог входа – низкий. Справиться с Тильдой сможет даже новичок.
Этот конструктор имеет ряд преимуществ:
- простое редактирование текста;
- быстрая загрузка видео и картинок;
- готовые шаблоны для формирования дизайна сайта на любой вкус;
- понятный на уровне интуиции интерфейс;
- быстрая разработка стандартных блоков для редактирования и добавления информации, картинок или видео;
- широкий ассортимент шрифтов с обширными настройками;
- готовые адаптированные блоки для мобильных устройств, включая таблицы.
На Тильде нельзя сформировать веб-портал более чем с 500 страницами. Это единственный недостаток конструктора.
Adobe Muse
CSS-верстка и адаптация веб-портала под телефон или планшет может производиться через Adobe Muse. Google называет это программное обеспечение одним из самых удобных для начинающих верстальщиков. Оно дает возможность сэкономить время на адаптивности. Веб-разработчику всего лишь нужно поработать в редакторе с интерфейсом, а программа сама сгенерирует исходные коды.
К плюсам Adobe Muse относят:
- возможность быстрого создания шаблонов;
- простое создание адаптивного сайта (стандартный веб-проект, согласно Google, может быть написан за 2-3 часа);
- функциональность;
- понятную и быструю работу с HTML5 и CSS3.
Для Adobe Muse создано множество видео-уроков. А лучше разобраться с версткой и CSS помогут специализированные дистанционные компьютерные курсы.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus. В частности, вас может заинтересовать курс, посвященный FullStack-разработке, первой ступенью которого является изучение HTML/CSS.
