Mobile-first и responsive vs adaptive: простое руководство для школьников по созданию сайтов для всех устройств

Статистика простая: более 60% интернет-пользователей заходят в сеть с телефонов. Для подростков эта цифра ещё выше: почти каждый второй сайт они открывают именно с мобилки. Это значит, что сайт, который ломается на маленьком экране, теряет почти всю свою аудиторию.
Вспомни, как ты сам закрывал сайт, где текст надо было увеличивать пальцами или где меню не нажималось. Удобство здесь решает всё. Если страница загружается плохо, никто не будет ждать, ведь есть десятки конкурентов, у которых сайт работает лучше.

Mobile first — это подход, когда сайт сначала создаётся под телефон, а уже потом расширяется до планшета и компьютера.

Логика такая: если сайт работает на маленьком экране, он будет отлично работать и на большом. Наоборот -- не всегда. Сделать «сжатую» версию ПК-сайта часто сложно и неудобно.
Например, дизайнер сначала рисует страницу так, чтобы на телефоне кнопки были крупными, текст читался, а меню помещалось в аккуратный «гамбургер». Потом добавляет планшетную версию, а уже в конце --полноценный макет для компьютера. Здесь появляются дополнительные блоки, боковое меню, большие изображения.

Всё это регулируется с помощью так называемых брекпоинтов. Брекпоинт на ПК — это точка, где сайт «перестраивается», когда экран становится больше.

Responsive design -- это «резиновая» вёрстка. Она как жвачка: растягивается и сжимается под любое устройство. Сайт плавно подстраивается под ширину экрана.

Adaptive-дизайн -- это другой подход. Здесь для каждого устройства создаётся отдельный макет: один для телефона, другой для планшета, третий для компьютера.
Responsive:
·      

• один сайт для всех экранов·    
• проще поддерживать
• иногда элементы «прыгают» и выглядят не идеально

Adaptive:
·      

• идеально подогнанные макеты
• можно показывать разные версии для разных устройств
• – трудоёмко: нужно рисовать несколько макетов и поддерживать их

Если представить картинку, responsive — это резиновая линия, которая меняет длину, а adaptive — набор кубиков, где для каждого устройства свой кубик.

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

• Tilda — идеальна для старта: не нужно знать код, есть готовые блоки.
• WordPress — более гибкая платформа, подходит для блогов и портфолио.
• Figma + HTML/CSS — если хочешь глубже погрузиться, можно рисовать дизайн в Figma и потом переносить его в код.

О том, как пользоваться Figma, Tilda, Wordpress, читайте в этих статьях.

Чтобы проверить адаптивность, подойдут такие сервисы, как Google Mobile-Friendly Test или встроенный инспектор в Chrome.
Мини-чеклист для тебя:
– проверяй на телефоне;
– открывай сайт в разных браузерах;
– включай разные размеры экрана.

Когда ты освоишь основы мобильной верстки, стоит перейти к более продвинутым вещам: изучить CSS Grid и Flexbox -- именно они позволяют создавать современные и гибкие макеты.

В Stadio есть курсы по вёрстке и веб-дизайну, где всё это объясняется простыми словами и на практике. Ты научишься работать не только с конструкторами вроде Tilda, но и поймёшь, как устроен сайт изнутри.

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

Хотите научиться создавать современные сайты, которые одинаково хорошо работают на телефоне и компьютере?

Запишитесь в Стадио— онлайн-школу цифровых профессий для школьников.