Карта сайта - создание и продвижение сайтов в Москве|
Качественные сайты любой сложности |
|
webmedia7.ru - Responsive Site
Существует несколько способов сделать мобильную версию сайта. Все они до недавнего времени сводились к тому, чтобы делать различные версии сайта для разных устройств. Это очень трудоемкий и неблагодарный способ, так как посетители пользуются тысячами устройств. Для более менее правильного отображения сайта на них, необходимо не менее 4-5 версий сайта. Завтра люди будут пользоваться совершенно другими устройствами и возможно под них придется делать дополнительные версии.
Сегодня появилась технология «Responsive Web Design», то есть - отзывчивый веб дизайн. Он использует разрешение устройства, что, не вдаваясь в подробности, позволяет сайту с единственной версткой работать как на самом маленьком телефоне, так и на огромной плазме.
webmedia7.ru сверстан по технологии Responsive.
Адаптированные стили
Данный сайт настраивает свои компоненты под показ на любом устройстве. В таблице отражены диапазоны ширины сайта в зависимости от типа устройства. Не путать с подгонкой ширины сайта мобильным устройством.
Классы адаптации
В таблице показаны классы, которые позволят включать - выключать части сайта для показа или скрытия информации в зависимости от вида устройства с которого зашел на ресурс посетитель.
Реакция на разрешение устройства
Разбивка ширины сайта в зависимости от устройства клиента:
/* Smartphones */
@media (max-width: 480px) { ... }
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { ... }
/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { ... }
/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { ... }
/* Large Display */
@media (min-width: 1200px) { ... }
Навигация на смартфоне
Для смартфона, есть два варианта выпадающего меню:
Panel Tree - древовидное меню. Все пункты меню раскрыты.
SelectBox - показывает родительский уровень элементов меню в панели навигации c выпадающими дочерними уровнями при выборе пункта меню.
Команда webmedia7.ru постояно отслеживает новое в мире мобильного вебдизайна.
Мобильность сайта - серьезное конкурентное преимущество.
