Мобильный дизайн сайта: что это и как его создать
Мобильный дизайн сайта начинается с телефона и затем дополняется макетом для больших экранов. Узнайте, что он меняет, какие компромиссы важны малому бизнесу; изучите пример и чек-лист.
При мобильном подходе каждую страницу сначала планируют и создают для небольшого экрана телефона, а затем добавляют колонки и элементы для более широких экранов. Это заставляет определить главное, потому что на телефоне за раз видно только одно. Так же работает и Google: он преимущественно использует мобильную версию страницы для индексации и ранжирования.
Мобильный подход и «адаптивный дизайн»
Адаптивный дизайн — это техника: одна страница подстраивает макет под размер экрана с помощью тега viewport и медиазапросов. Мобильный подход задает порядок проектирования. Адаптивный сайт, созданный сначала для компьютера, сжимает широкий макет; мобильный сайт начинает с узкого экрана и постепенно расширяется. Оба варианта адаптивны, но мобильный подход обычно дает меньше визуального шума на телефонах.
Как выбрать мобильный подход малому бизнесу
| Вопрос | Решение для мобильного экрана | Компромисс |
|---|---|---|
| Для чего нужен первый экран? | Название, чем вы занимаетесь, где работаете и одна кнопка | Меньше места для слоганов и больших изображений |
| Основное действие | Нажимаемый номер или короткая форма, доступные большим пальцем | Длинные формы на телефоне часто бросают; спрашивайте меньше |
| Навигация | Несколько главных ссылок; на узком экране — кнопка меню | Скрытое меню легко не заметить — повторите ключевые ссылки на странице |
| Изображения | Сжатые и подходящего размера для экрана | Очень большие фотографии медленно загружаются через мобильный интернет |
| Таблицы и широкий контент | Преобразуйте в карточки или прокручивайте в отдельной области | Требуется больше работы, чем для таблицы на компьютере |
Размер кнопок и текста также связан с доступностью: WCAG 2.2 устанавливает минимальный размер интерактивной области 24 на 24 CSS-пикселя.
Пример (демонстрационный макет)
Вымышленная пекарня «Flour Lane Bakery» планирует главную страницу сначала для телефона. Это не реальный бизнес; результаты не заявляются.
Экран телефона 1: «Flour Lane Bakery — заквасочный хлеб и торты, Лейт»
кнопка: «Заказать торт» | ссылка: «Часы работы сегодня»
Экран телефона 2: три карточки: Хлеб / Торты к праздникам / Опт
Экран телефона 3: шаги заказа (выбрать, назначить дату, внести задаток при получении)
Экран телефона 4: адрес, ссылка на карту, часы, телефон (нажмите, чтобы позвонить)
Планшет+: три колонки карточек; часы рядом с картой
Компьютер+: все ссылки в шапке; второе фото в главном блоке
Убрано с телефона: лента Instagram (вместо нее ссылка), длинная история (страница «О нас»)
Чек-лист мобильного дизайна для копирования
[ ] Одно главное действие видно на первом экране телефона
[ ] На первом экране есть название бизнеса, чем вы занимаетесь и где
[ ] Номер телефона — нажимаемая ссылка
[ ] Размер текста не менее 16px; не нужно увеличивать масштаб пальцами
[ ] Кнопки и ссылки удобно нажимать, между ними есть место
[ ] В формах только необходимые поля; подходящая клавиатура (телефон, почта)
[ ] Изображения сжаты и нужного размера; ничего не шире экрана
[ ] При ширине 360px нет горизонтальной прокрутки
[ ] Меню удобно открыть большим пальцем; важные ссылки повторены на странице
[ ] Проверено на настоящем телефоне через мобильный интернет, не только в окне компьютераИзвестные ограничения
- Некоторые аудитории чаще используют компьютер (например, сотрудники компаний, покупающие B2B-услуги). Сначала изучите собственную аналитику.
- Мобильный подход — это порядок проектирования, а не гарантия скорости или высоких позиций. Скорость нужно проверять отдельно: см. как ускорить сайт.
Следующий шаг
Выберите шаблон для бизнеса в конструкторе сайтов We.Inc: шаблоны адаптивны, и сайт можно посмотреть на телефоне, планшете и компьютере. Затем запустите проверку сайта. В Free доступны до 3 сайтов на основе шаблонов с адресом we.inc (без кредитов AI и собственного домена); Starter за $20/month добавляет создание сайтов с помощью AI и собственные домены (тарифы). Рассчитываете бюджет? Воспользуйтесь калькулятором стоимости сайта.
Начните создавать сайт для своего бизнеса
Частые вопросы
Что такое мобильный веб-дизайн?
Это проектирование каждой страницы сначала для телефона, а затем для экранов большего размера. На телефоне так проще показать самое важное содержание и главное действие вверху.
Мобильный подход — это то же самое, что адаптивный дизайн?
Нет. Адаптивный дизайн позволяет одной странице подстраиваться под любой экран. Мобильный подход определяет порядок работы: сначала самый маленький экран.
Использует ли Google мобильную версию сайта?
Да. Google сообщает, что для индексации и ранжирования преимущественно использует содержание мобильной версии сайта.
Начать бесплатно · Банковская карта не нужна
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App