Возможно, вы слышали, как ваши клиенты или пользователи говорили, что приложение не отображается на их мобильном телефоне или изображения не масштабируются. Это когда вы начинаете думать о том, чтобы сделать его отзывчивым. Если вы еще не слышали об этом, то скоро услышите… 😝
В эпоху визуализации плана особняка на крошечном мобильном телефоне и невидимых организмов на 20-метровом экране разработчики интерфейсов испытали на себе трудности разработки приложений, которые хорошо масштабируются на всех возможных экранах.
Но прошли те времена, когда вы сидели и делили сетки для каждого элемента дизайна в зависимости от размера устройства. Это кажется почти невозможным из-за большого количества устройств разных размеров, доступных на рынке. Как уменьшить бремя рассмотрения размера экрана?
Ответ на вопрос, который вас озадачивает, — это Адаптивный веб-дизайн.
Да,идея заставить приложения определять размер и ориентацию экрана посетителя и соответствующим образом изменять макет, делает жизнь легкая.
Таким образом, необходимо знать, как можно перенести свое приложение, чтобы оно соответствовало отзывчивому веб-дизайну.
Миграция существующего приложения для получения новых адаптивных возможностей сложнее, чем разработка нового.
Если вы собираетесь перенести свое приложение, которое не отвечает, вам нужно будет выполнить несколько шагов:
На основе текущего дизайна найдите точки, в которых он естественным образом не работает на разных экранах. На основе этих данных спланируйте, как содержимое должно быть адаптировано для различных устройств.
Затем добавьте метатег для области просмотра, который указывает браузеру использовать ширину устройства в качестве ширины области просмотра.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
Используйте единицы CSS, такие как «em» и «rem», для элементов, которые снова помогут вам масштабироваться в зависимости от устройства.
Теперь, чтобы сделать его удобным для мобильных пользователей, рассмотрите возможность добавления обработчиков событий, которые также поддерживают действия пальцев (касание), потому что пользователи мобильных телефонов не будут использовать мышь 😁.
Что ж, я знаю, что выполнить эти шаги сложно, даже если вы это сделаете, могут возникнуть некоторые сбои, из-за которых ваше приложение иногда не отвечает. Что вы делаете тогда?
Всегда полезно использовать новую структуру и изменить дизайн. Но это имеет свою цену. Вам нужно потратить время, чтобы решить и использовать новую структуру, которая того стоит.
Да, после перестройки он остается отзывчивым и удобным для пользователя, также будет легко добавить больше функций с меньшими усилиями по сравнению с неадаптивным дизайном.
Что это за фреймворки, которые помогают перестроить ваше приложение?
Как вы могли догадаться, Bootstrap — один из них.
Semantic UI, Material UI, Foundation, Gumby и некоторые другие довольно популярны, хотя некоторые из них специфичны для используемой среды JavaScript.
Используйте их, чтобы упростить перенос приложений.
Ниже приведены несколько ссылок, которые помогут вам решить, какой инструмент использовать.
→ 10 лучших инструментов для адаптивного дизайна
→ Лучшие адаптивные фреймворки
→ Лучшие адаптивные CSS-фреймворки
→ Статья о лучших инструментах адаптивного веб-дизайна
Имея такое множество вариантов, выбрать один из них — деликатная задача, но ее следует выполнять с умом, исходя из ваших требований к дизайну и «внешнего вида», который вы хотите обеспечить.
#HappyDesigning 🙂
