В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают большие скидки) сайта многими дизайн студиями, например, студия Нужен сайт в Барнауле. Такая верстка позволяет контролируемо изменить дизайн в сторону комфорта его просмотра с небольших экранов.
Основной упор делается на контент и увеличение скорости загрузки с мобильного интернета. Это и смещение менее важных элементов дизайна в нижнюю часть сайта, и выключение нагруженных скриптов, рекламных блоков и прочих не нужных элементов на экране телефона.
Как и в десктопной версии, адаптивная верстка сайта подразумевает собой отсутствие горизонтального скролла, т.е. сайт из двух колонок умещается на экране телефона по принципу смещения одной из колонок под другую — вначале идет текст статьи, затем боковой сайдбар (но бывают и исключения, в случае, если они оправданы).
CSS Медиа запросы @media
Используя конструкции медиа запросов можно задать поведение элементов на сайте под каждый из основных размеров экранов
@media screen and (max-width:1680px){
.blocks{margin: 10px;} /* широкоформатный монитор ~ 20-21 дюйм */
}
@media screen and (max-width:1360px){
.blocks{margin: 5px;} /* популярный экран ноутбука ~ 19 дюймов */
}
@media screen and (max-width:1280px){
.blocks{margin: 0px;} /* квадратный монитор в ~ 17-18 дюймjd */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.blocks{margin:0px} /* экран мобильного телефона вертикально */
}Техника верстки макета
Одним из наиболее популярных и оптимальных подходов в верстке сайтов является его полная разработка на экране 1920х1080 пикселей (22-24 дюйма), что на данный момент является самым массовым и удобным разрешением экранов т.к. экраны 2к и более пока еще не получили широкого распространения.
А вот пользователей более с низким разрешением экранов более, чем предостаточно и на большом мониторе гораздо удобнее тестировать поведение верстки для меньшего экрана из-за того, что она целиком вмещается на монитор без искажения.
Необходимость
Во-первых, Google. Поисковик уже давно объявил о более лояльном отношении к сайтам, имеющим мобильную версию по отношению к тем, кто до сих пор этого не сделал.
Во-вторых, фундаментальный анализ. Все мы являемся пользователями смартфонов, которых уже не удивить массовым покрытием мобильных сетей стандартом 3G, а также стремительной модернизацией их в 4G LTE.
Т.е. вопрос о необходимости иметь версию сайта, удобную для просмотра с телефона отпадает сам собой. Смартфоны у всех, интернет повсюду, условия использования позволяют комфортно пользоваться мобильным интернетом и получать с него траффик.
