Mobile-friendly — немного об адаптивной верстке

adaptive web design - Mobile-friendly — немного об адаптивной верстке

В эпоху 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.

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

Читайте также

Похожие записи

Скрипт идущего времени на jQuery
Задача: написать скрипт, который бы выводил текущую дату и время сервера. Время должно быть «идущим», т.е. имитировать реальную работу. Пример:...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *