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.

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

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Комментарии

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