Почему вы должны начать практиковать мобильную разработку

Если вы пробовали кодировать адаптивный веб-сайт, вы столкнулись с этой проблемой: вы меняете одно крошечное простое свойство CSS, и оно меняет макет на разных размерах экрана.

Это заставляет вас проверять и перепроверять, что новейшее значение маржи не разрушило сайт для планшетов или телефонов. Конечно, вы можете легко решить эту проблему с помощью специальных переопределений для разных размеров экрана. Но в ходе проекта файлы CSS заполняются исключениями из проблем. Затем есть исключения для исключений, которые потом имеют исключение для исключения исключения.

Это быстро усложняется, и вы в конечном итоге боретесь со своим собственным кодом, тратите много часов на проект и медленно теряете рассудок.

Но не бойтесь! Разработка для мобильных устройств призвана избавить вас от головной боли, исключений и медленных загрузок страниц.

Что происходит с десктопными разработчиками

Первоначально разработка адаптивного веб-сайта для настольной версии идет вразрез с естественным потоком документа CSS. Файлы CSS читаются линейно сверху вниз, поэтому каждое свойство CSS перезаписывается любыми новыми стилями, применяемыми дальше по документу.

При разработке для больших экранов и последующем добавлении мобильных стилей в документ CSS возникают две проблемы:

1. Любые изменения, внесенные в стиль рабочего стола (выше в документе), изменят способ отображения мобильного сайта, если новый стиль явно не перезаписан для мобильного сайта. Создание дополнительных строк легкомысленного CSS отнимает много часов проекта и противоречит принципу DRY-кода.
2. Мобильные устройства начинают загрузку страницы, отображая все стили рабочего стола. После завершения рендеринга массивной настольной версии применяется стиль для мобильных устройств. Это загружает дополнительные ресурсы, а это означает, что мобильным устройствам требуется еще больше времени для доставки полностью загруженной страницы.

Именно здесь на помощь приходит мобильная разработка. Этот метод способствует правильному порядку CSS (от мобильного устройства к рабочему столу сверху вниз), гарантируя, что устройство будет применять только ту информацию, которая ему нужна, когда она ему нужна.

Давайте рассмотрим некоторые решения этих проблем.

Как выглядит рендеринг на мобильных устройствах

Изображения, безусловно, вносят наибольший вклад в размер веб-сайта, и их загрузка занимает вечность, если устройство не подключено к Wi-Fi. Удаление лишних изображений из вашего мобильного стиля — лучшее, что вы можете сделать для повышения скорости сайта.

Переход на мобильные устройства в первую очередь означает показ только нескольких небольших изображений на мобильные устройства. В приведенном ниже примере я создал один и тот же документ CSS, реализованный как для настольных компьютеров, так и для мобильных устройств.

Если вы используете метод «сначала рабочий стол», мобильные устройства будут отображаться в следующем порядке:

1. Прочитайте первый стиль.
2. Загрузите большой (скоро будет замененный) образ.
3. Рендеринг элемента.
4. Читайте мобильный стиль.
5. Загрузите маленькое изображение (заменяющее большое).
6. Визуализируйте элемент снова.

Однако, если используется метод mobile-first, устройство отображает в следующем порядке:

1. Прочитайте первый стиль.
2. Загрузите маленькое изображение.
3. Пропустите стиль только для рабочего стола (поскольку он не применяется).
4. Визуализируйте элемент один раз.

Мало того, что на веб-сайте нужно выполнить меньше шагов, прежде чем отдать готовую страницу в браузер, он также уберет дополнительные вызовы легкомысленных изображений, которые не используются!

Обратите внимание, что медиа-запросы изменятся с max-width на min-width при разработке для мобильных устройств. Запросы максимальной ширины будут применяться ко всем устройствам размером менее 1000 пикселей, а запросы минимальной ширины будут применяться к устройствам размером более 1000 пикселей.

Замена на min-width создает барьер, который не позволяет новому стилю, который мы пишем для больших устройств, когда-либо влиять на то, как сайт выглядит на маленьких устройствах. Это увеличивает скорость загрузки ваших адаптивных веб-сайтов, гарантируя, что все, что вы изменяете в медиа-запросе только для настольных компьютеров, не повлияет на ваш мобильный макет. Это беспроигрышный вариант!

Перестаньте бороться с собой

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

К сожалению, мы использовали метод «сначала настольный компьютер», и сайт медленно загружается для телефонов. Мы пробовали уменьшать размеры изображений, добавлять кеширование в браузере и даже минимизировать HTML (полностью). Но сайт по-прежнему не работает для новых посетителей, и его нужно исправить.

Поскольку мы создали наш сайт с использованием метода Desktop-First, наш CSS для нашего элемента .header будет выглядеть следующим образом:

Наша цель — сократить количество стилей, отправляемых на мобильные устройства. Для начала нам нужно провести инвентаризацию того, что применяется к элементу, принимая во внимание, когда мы перезаписываем наши собственные стили.

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

Давайте еще раз взглянем на наши изображения, так как они больше всего влияют на скорость нашего сайта.

Поскольку мы не загружаем фон на мобильные устройства, мы можем удалить это свойство. Мы добавим изображения для больших устройств позже, когда они действительно понадобятся. То же самое относится и к свойству margin-bottom, оставляя нам только два свойства, которые на самом деле нужно применять для мобильных устройств!

Переходя к разделу планшета, нам нужно переместить атрибуты фона и отступы из стиля рабочего стола в стиль планшета, поскольку планшет — это следующий раздел, который будет отображаться.

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

Намного лучше! Изучая, как мобильное устройство будет отображать наш только что оптимизированный CSS, быстро становится очевидным, какое влияние разработка с приоритетом мобильных устройств оказывает на устройства меньшего размера по сравнению с методом, ориентированным на настольные компьютеры.

Работай умом, а не силой

Разработка для рабочего стола в первую очередь создает больше проблем, чем исправляет. «Переход на метод мобильной разработки позволяет вам работать с умом, а не усердно. ”

При разработке адаптивных сайтов имейте в виду, что по умолчанию будет отображаться все, что не входит в медиа-запрос. Сделав стиль по умолчанию (без запроса мультимедиа) ориентированным на мобильные устройства, мы разрешаем отправку наименьшего количества информации на устройство, на которое больше всего влияет размер веб-сайтов.

Настольные компьютеры и планшеты подключены к быстрому интернет-соединению 99,999 % времени, что позволяет передавать большие объемы информации на высоких скоростях. Телефоны чаще всего загружают информацию при медленном интернет-соединении. Приспособив свои таблицы стилей к работе с наиболее чувствительными устройствами, вы сможете предоставить клиентам наилучший веб-сайт.