На сегодняшний день хорошей практикой является создание дизайна веб-страницы, которой будет одинаково удобно пользоваться и на экране маленького смартфона и на огромном смарт-тв. Условно существует 4 вида дизайна сайтов:

  • фиксированный
  • резиновый
  • адаптивный
  • отзывчивый

Фиксированный дизайн.

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

Резиновый дизайн

Резиновым называют дизайн, когда элементы сайта сжимаются/растягиваются в зависимости от изменения экрана. Что позволяет страницы выглядит гораздо лучше на экранах разных размеров. Однако все равно не исключается ситуации когда элементы будут выглядеть или слишком мелкими, или слишком гротескными, растянутыми. Так же существенным минусом будет являться непредсказуемость поведения страницы при изменении размеров. Гибкость макета при этом достигается путем использования относительных единиц измерения вместо фиксированных пиксельных.

Адаптивный дизайн

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

  • 375px (мобильный экран вертикально)
  • 540px (мобильный экран горизонтально)
  • 720px (планшет вертикально)
  • 960px (планшет горизонтально или ноутбук)
  • 1170px (Десктоп)

Отзывчивый дизайн

Отзывчивый дизайн сочетает в себе все лучшие качества резинового и адаптивного дизайна. Т.е. при незначительных изменениях размера экрана происходит сжатие/растягивание элементов, при переходе определенных точек размеров происходит перестроение веб-страницы. Отзывчивый дизайн подразумевает максимально качественное отображение сайта на любом устройстве. Термин “отзывчивый дизайн” был впервые введен Итаном Маркоттом. Он выделил 3 главных принципа построения отзывчивого дизайна: гибкий макет на основе сетки, медиазапросы и гибкий медиа контент

Гибкий макет на основе сетки

Достигается путем использования относительных единиц измерения в макете.

Медиазапросы

Этот принцип подразумевает различное поведение страницы в зависимости от браузера и устройства. В CSS это достигается с помощью использования строк кода, которые позволяют контенту веб-страницы адаптироваться к различным условиям.

Гибкий медиа контент

Изображения, видео и прочий медиа контент должен быть масштабируемым. Возможно использование разных версий изображений для разных сценариев отображение, использование векторного графики, которая прекрасно поддается масштабированию. Но нужно помнить, что как правило на медиа контент приходится больше половины веса необходимого для загрузки сайта. Это нужно учитывать чтобы не сделать слишком “тяжелую” страницу”