10 правил: Как адаптировать первый экран сайта для мобильного

Привет! Я Лена Бобина, фаундер креативного агентства «е—б эдженси».  В этой статье я расскажу о том, как адаптировать первый экран сайта для мобильного.

Статистика важности первого экрана одинаковая и в декстопе, и в мобилке: если первый экран грузится слишком долго, выглядит слишком странно/непонятно и не отвечает на вопрос пользователя («Куда я попал и что здесь можно сделать?»), то до 80% посетителей не будут скроллить дальше.

Они просто уйдут с сайта, так и не узнав, какую невероятно крутую услугу вы предлагаете.

Есть несколько принципов, которые позволяют сделать первый экран на мобильном классным:

1️⃣ Не делайте логотип слишком крупным. Высоты до 80 пикселей достаточно, а лучше сделать его настолько маленьким, насколько это позволяет дизайн. Логотип должен быть понятным и разборчивым но не перетягивать на себя всё внимание пользователя.

2️⃣ Размер бургер меню — от 24*24 пикселей

3️⃣ Кроме логотипа и бургера в навигацию можно вынести максимум 1 пункт меню.

4️⃣ Концептуально композиция в мобильном будет проще, но должна максимально повторять приёмы их десктопа

5️⃣ Основной оффер должен быть крупным, от 32 пикселей. Занимает не меньше 30% всего экрана

6️⃣ В типографике важно соблюдать четкую иерархию, как и на десктопе: заголовок должен быть значительно крупнее текста

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13201 тендер
проведено за восемь лет работы нашего сайта.

7️⃣ Количество изображений / иллюстраций можно уменьшать, удаляя лишнее

8️⃣ Кнопка ключевого действия может фиксироваться внизу экрана (т.е. мы убираем её с первого блока, а выносим отдельно, и она будет всегда скроллиться вместе с пользователем)

9️⃣ Все важные элементы должны умещаться в высоту 1 экрана. То есть на 1 экране должно умещаться меню, заголовок, описание, кнопка и визуальный элемент, иллюстрирующий сайт

🔟 Визуальные элементы не должны мешать восприятию / чтению текста: их можно уменьшать, сдвигать ниже (чтобы на 1 экран умещалась только часть графики) и т.п.

Вы можете использовать эти 10 принципов как чек-лист, и проверять ваши первые экраны по нему 👌

———

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