Более 60% пользователей интернета пользуются сайтами на мобильных устройствах. Поэтому важно следить за тем, как ваш сайт выглядит не только на десктопе, но и на мобильных телефонах и планшетах. Мы подготовили шесть рекомендаций, которые помогут создать аккуратный адаптивный дизайн 🎨✨
Выбирайте подходящий размер текста
Размер текста должен быть читабельным на всех устройствах. Минимальный размер кегля для мобильных устройств 16-18 пикселей.
Не мельчите с элементами интерфейса
Кнопки, иконки и другие интерактивные элементы должны быть достаточно крупными, чтобы пользователи могли легко нажимать на них пальцами на сенсорных экранах.
Размещайте важную информацию и кнопку на первом экране
Заходя на сайт, пользователь быстро считывает: оставаться ему на странице или покинуть её. Поэтому важно на первом экране уместить информацию, которая убедит человека не закрывать сайт. Чтобы главный экран выглядел аккуратнее, старайтесь делать его в высоту экрана: так элементы не будут обрезаться.
Будьте аккуратнее с анимацией
Анимация может увеличивать скорость загрузки сайтов, особенно при использовании мобильного интернета. Поэтому оставляйте анимацию только там, где это необходимо.
Сжимайте изображения
Существуют специальные программы, которые сжимают изображения, объединяя схожие цвета. Они сохраняют качество картинки, значительно уменьшая её вес — до 70%.
Примеры таких сервисов:
Проверяйте дизайн на разных устройствах
Проверьте, как выглядит ваш сайт на разных устройствах и разрешениях. Проверить дизайн можно внутри Тильды в режиме предпросмотра сайта, через Chrome DevTools или на реальных устройствах, если есть такая возможность.
https://www.similarweb.com/ru/platforms/
Выбирайте подходящий размер текста
Размер текста должен быть читабельным на всех устройствах. Минимальный размер кегля для мобильных устройств 16-18 пикселей.
Не мельчите с элементами интерфейса
Кнопки, иконки и другие интерактивные элементы должны быть достаточно крупными, чтобы пользователи могли легко нажимать на них пальцами на сенсорных экранах.
Размещайте важную информацию и кнопку на первом экране
Заходя на сайт, пользователь быстро считывает: оставаться ему на странице или покинуть её. Поэтому важно на первом экране уместить информацию, которая убедит человека не закрывать сайт. Чтобы главный экран выглядел аккуратнее, старайтесь делать его в высоту экрана: так элементы не будут обрезаться.
Будьте аккуратнее с анимацией
Анимация может увеличивать скорость загрузки сайтов, особенно при использовании мобильного интернета. Поэтому оставляйте анимацию только там, где это необходимо.
Сжимайте изображения
Существуют специальные программы, которые сжимают изображения, объединяя схожие цвета. Они сохраняют качество картинки, значительно уменьшая её вес — до 70%.
Примеры таких сервисов:
Проверяйте дизайн на разных устройствах
Проверьте, как выглядит ваш сайт на разных устройствах и разрешениях. Проверить дизайн можно внутри Тильды в режиме предпросмотра сайта, через Chrome DevTools или на реальных устройствах, если есть такая возможность.
https://www.similarweb.com/ru/platforms/
