Верстальщик html страницmariia.belogubova@gmail.com

Прогрессивное улучшение

Что это?

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

Перед тем как приступать к этапам прогрессивного улучшения проанализируйте дизайнерские макеты. Остановитесь и не спишите писать тысячи строчек кода! Важно проанализировать страницу: выявить основные характеристики, понять ТЗ и суть проекта. Этот этап часто пропускают, но надеюсь вы его будите применять на практике, так как он не менее важен в разработке сайта.

Этапы прогрессивного улучшения

Этапы прогрессивного улучшения

  1. Написание чистого HTML. Используем семантические теги.
  2. Подключение шрифтов.
  3. CSS стилизация. На данном этапе надо уже знать какие методологии вы будите использовать и какие подходы подойдут данному проекту. Будите ли вы использовать css архитектуру БЭМ и нужна ли вам адаптивность?
  4. JavaScript. Наделяем страницу функциональностью на стороне клиента. Обращаем внимание, что при отключенном JavaScript страница не ломается, а именно, работает и показывает весь важный контент.
  5. Доступность через tab и скринридеры.
  6. Анимация.

Обратите внимание на 3 этап прогрессивного улучшения. В современном мире без адаптивного сайта уже нельзя, так как по статистики трафик с мобильного устройства превышает трафик с ПК (отчет от SimilarWeb Techcrunch).

В сентябре 2020 года Google перешел на mobile-first индексацию. И это значит, что отсутствие мобильной версии сайта будет негативно влиять на выдачу сайта в поисковой системе.

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

Mobile-first и Desktop-first

Два противоположных подхода

  • Mobile-first

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

    Мобильное устройство, потом планшет и в конце компьютер
  • Desktop-first

    Противоположный к mobile first подход. Часто его используют, когда уже есть готовая веб-страница для ПК и надо сделать версии для планшета и мобильного устройства.

    Версия для компьютера, потом для планшета и в конце для  мобильных устройств

Mobile-first и Desktop-first на практике

Когда стоит использовать Mobile-first, а когда Desctop-first

Часто спрашивают, что лучше Mobile-first или Desctop-first. Хочу вас огорчить и сказать что, однозначного ответа нет. Дело вкуса и удобства. Но не переживайте, здесь не все так неопределенно, есть предпочтения и устоявшиеся взгляды на оба подхода.

  • Mobile first однозначно подойдет сайтам, которые разработаны для мобильных пользователей.
  • Сайты написанные с помощью Mobile first незначительно быстрее грузятся на мобильных устройствах, так как стили из медиа выражений не обрабатываются.
  • Если существует desctop версия и из нее надо слепить планшетную и мобильную, то быстрее это сделать используя подход desctop-first.

Пример

Реализация Mobile-first и Desktop-first на примере адаптивного заголовка

Перед тем как мы начнем применять один из подходов, надо изменить viewport браузера. Viewport браузера - это видимая область страницы. Ширину видимой области поставим device-width (ширина устройства, не зависящая от плотности пикселей). А первоначальный масштаб страницы определим как 1.

Прописываем мета-тег в тег head

<meta name="viewport" content="width=device-width,initial-scale=1" />

Mobile-first

  1. Прописываем стили только для МОБИЛЬНОЙ версии заголовка

    .header { 
    margin-top: 60px;
    margin-bottom: 35px;
    }
    .h2 {
    font-size: 26px;
    line-height: 26px;
    text-transform: uppercase;
    }
  2. Добавляем стили для ПЛАНШЕТНОЙ версии

    Представим, что в макете планшетной версии изменяется только размер заголовка H2

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

    @media screen and (min-width: 640px;) {
    .h2 {
    font-size: 30px;
    }
    }
  3. Добавляем стили для ПК

    Для ПК шириной экрана 1024px включительно подгрузятся все объявленные стили.

    @media screen and (min-width: 1024px;) {
    .h2 {
    font-size: 40px;
    line-height: 40px;
    }
    }

Desktop-first

  1. Прописываем стили заголовка только для КОМПЬЮТЕРОВ

    .header { 
    margin-top: 60px;
    margin-bottom: 35px;
    }
    .h2 {
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    }
  2. Добавляем стили для ПЛАНШЕТНОЙ версии

    Для планшетной версии изменяется размер и межстрочное расстояние заголовка H2. Обратите внимание, что медиа запрос изменился. Стили применяться для всех устройств шириной меньше или равной 1023px.

    @media screen and (max-width: 1023px;) {
    .h2 {
    font-size: 30px;
    line-height: 26px;
    }
    }
  3. Добавляем стили для МОБИЛЬНЫХ устройств

    Для мобильных пользователей подгрузятся все стили, написанные ранее. Нам надо только изменить размер заголовка на 26px.

    @media screen and (max-width: 639px;) {
    .h2 {
    font-size: 26px;
    }
    }

Контакт

mariia.belogubova@gmail.com

Информация, которую стоит указать в письме:

  • Имя, роль, контакты
  • Краткое описание проекта или список проблем.
  • Срок сдачи проекта
  • Бюджет проекта
  • Как вы обо мне узнали?

По любым вопросам пишите на почту

Написать письмо