При разработке веб-сайта одним из важнейших аспектов, который мы должны иметь в виду, является фактор отзывчивости. В настоящее время люди пользуются интернетом с помощью мобильных устройств так же, как и с помощью настольных компьютеров. Таким образом, для разработчиков становится более важным сделать сайты легкодоступными с портативных устройств.
Именно поэтому почти каждый сайт выпускается для всех устройств. Однако среди кодеров практически всегда возникает вопрос: стоит ли писать отзывчивую версию для мобильных устройств? Или лучше придерживаться старомодной версии для настольных компьютеров и писать коды для больших экранов? Итак, в этой статье мы попытаемся разрешить эту загадку и дать рациональное объяснение, что же следует делать в первую очередь. Но прежде чем мы сможем определить, какой из них следует использовать в первую очередь, будет лучше, если вы поймете, что они собой представляют. Итак, давайте сначала узнаем их.
Что такое отзывчивый веб-дизайн?
Прежде чем мы погрузимся в сферу всех технических аспектов, необходимо понять основную концепцию отзывчивого веб-дизайна. Видите ли, в наше время все пользуются смартфонами.
Некоторые также пользуются планшетами. Поэтому очень важно, чтобы просмотр веб-сайта на портативном устройстве был не хуже, чем на настольном компьютере. Поэтому идея заключается в том, чтобы сделать единый веб-сайт, который будет регулировать просмотр в зависимости от того, какую платформу предпочитает пользователь.
Почему отзывчивый дизайн так важен?
Цель создания таких сайтов — позволить пользователям легко просматривать сайт. Это означает, что пользователям не нужно увеличивать масштаб или прокручивать страницу вбок, чтобы увидеть информацию, размещенную на сайте.
Говоря простым языком, отзывчивый сайт создан для удовлетворения потребностей людей, заходящих на сайт с разных устройств. Несмотря на то, что это один конкретный сайт, впечатления от просмотра должны быть одинаковыми на всех платформах. Именно поэтому очень важно сделать каждый сайт отзывчивым.
Подход, ориентированный на настольные компьютеры и мобильные устройства
Когда идея отзывчивых сайтов стала популярной, кодеры решили, что основной код должен быть предназначен для настольной версии. Позже в наших головах появились некоторые общие представления. Например, дизайнер предоставил CSS-коды, или команда считает, что это обязательно. Однако мы поняли, что люди склонны придумывать оправдания, поскольку никто не думал иначе.
Сегодня, однако, все изменилось. С ростом популярности смартфонов люди выходят в интернет с помощью портативных устройств гораздо чаще, чем раньше. И, скорее всего, эта тенденция сохранится. Поэтому кодеры сегодня считают, что сначала нужно писать CSS-коды для мобильных устройств, а затем для настольной версии.
По сути, кодеры предлагают сначала использовать отзывчивые коды «min-width». Ниже вы можете посмотреть на один из самых простых примеров:
.sales-points {
padding: 3em 0;
}
@media (min-width: 600px) {
.sales-points {
display: flex;
justify-content: space-between;
}}
Вы должны понять, что здесь мы использовали простые значения padding. Теперь мы можем установить значение ширины колонки в 600px, надеясь, что сайт преобразует эти секции в последующие дочерние колонки. Таким образом, когда вы смотрите на сайт с любого устройства, ширина которого превышает 600px, колонки останутся нетронутыми, в то время как все остальное будет складываться вниз.
Таким образом, шаги для Desktop-first подхода совершенно противоположны тому, что мы описали до сих пор. Как правило, коды CSS предназначены для больших экранов. Затем медиазапросы задают порядок действий для маленьких экранов с помощью медиазапросов «max-width».
Какой подход проще?
Когда мы разрабатываем веб-сайт, обычно мы делаем это на настольном компьютере. Причина этого — больший обзор. Однако сегодня мы создаем сайты с помощью гораздо более сложных программ.
Поэтому подход, ориентированный на настольные компьютеры, является сложным для разработки, так как существует множество функций, которые необходимо учитывать при написании кода для настольной версии.
Поэтому теоретически можно сказать, что написание CSS-кодов для сайта с поддержкой мобильных устройств проще. Причина в том, что это автоматически сокращает количество функций, которые вы можете добавить на сайт, готовый для настольного компьютера. Однако следует помнить, что в этом случае вам придется поступиться некоторыми элементами.
Заключение
К сожалению, мы оставим эту дискуссию в дипломатичной манере. Вы должны использовать подход mobile-first, если вы считаете, что сайт, который вы будете делать, имеет ограниченные функции. В свою очередь, не стоит использовать подход desktop-first, если вы знаете, что на сайте будут тонны функций.