Все современные сайты создают так, что бы его удобно было смотреть как на компьютере с большим экраном, так и на мобильных устройствах, где экран существенно меньше. Вы наверное заметили, что на телефонах внешний вид сайта существенно отличается от полной версии, давайте разберёмся как это работает.
Мобильная версия сайта
До недавнего времени были популярны сайты с двумя версиями, для обычного компьютера и для мобильных устройств, фактически создавалось две версии сайтов, например, есть сайт zrkuban.ru, если зайти на него в телефоне, то нам перенаправят на m.zrkuban.ru - это полностью отдельная версия. Определить с какого устройства зашел посетитель просто, браузер передает всю информацию об устройстве и операционной системе.
Отзывчивый дизайн
Сам по себе HTML документ стандартный, HTML5. Большая часть современных сайтов создаются по этому стандарту, имеют отзывчивый дизайн. Благодаря такой верстке сайты удобно смотреть на устройствах с небольшим экраном, текст крупный и легко переходить по ссылкам. Такие сайты удается делать благодаря возможностям CSS. В современный CSS можно вставлять медаизапросы, например,
@media (min-width:992px) {}
или
@media (max-width:992px) {}
Не сложно догадаться, что max-width - сработает когда у нас максимальный размер экрана 992 точек и менее, min-width - когда 992 точки и более. Внутри медиазапроса мы можем написать стили поведения тех или иных элементов сайта. Как правило такого рода запросов достаточно для построения сайта с отзывчивым дизайном. Если мы возьмем популярный CSS фремворк bootstrap, то обнаружим там такие медиазапросы. Медиазапросы в CSS можно дополнить разными вариантами, например, ориентацией окна, кол-во цветов и т.д., но это используется довольно редко.
Верстка адаптивных сайтов
Верстка современных сайтов значительно сложнее, т.к. верстальщику нужно учесть ширину разных частей сайта, что бы они помещались для разных размеров экрана устройства. Мобильными устройствами как правило пользуются на улице при дневном свете, нужно это учитывать, что бы контент был удобно расположен на экране. Как правило элементы дизайна отключают на совсем мелких экранах. CSS фремворк bootstrap предполагает что верстка макета сайта начинается с минимальных размеров экрана и до максимальных.
Специалисты нашей студии широко используют медиазапросы в стилях, для создания сайта с адаптивным дизайном. По желанию клиента мы создаем и отдельные мобильные версии сайтов, и обычные сайты с фиксированной шириной. Обращаясь в студию Мастер Флеш, вы можете быть уверенным в том что ваш сайт будет современным.
