Качественные сайты любой сложности |
|
Существует несколько способов сделать мобильную версию сайта. Все они до недавнего времени сводились к тому, чтобы делать различные версии сайта для разных устройств. Это очень трудоемкий и неблагодарный способ, так как посетители пользуются тысячами устройств. Для более менее правильного отображения сайта на них, необходимо не менее 4-5 версий сайта. Завтра люди будут пользоваться совершенно другими устройствами и возможно под них придется делать дополнительные версии.
Сегодня появилась технология «Responsive Web Design», то есть - отзывчивый веб дизайн. Он использует разрешение устройства, что, не вдаваясь в подробности, позволяет сайту с единственной версткой работать как на самом маленьком телефоне, так и на огромной плазме.
Данный сайт настраивает свои компоненты под показ на любом устройстве. В таблице отражены диапазоны ширины сайта в зависимости от типа устройства. Не путать с подгонкой ширины сайта мобильным устройством.
В таблице показаны классы, которые позволят включать - выключать части сайта для показа или скрытия информации в зависимости от вида устройства с которого зашел на ресурс посетитель.
Разбивка ширины сайта в зависимости от устройства клиента:
/* 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 постояно отслеживает новое в мире мобильного вебдизайна.
Мобильность сайта - серьезное конкурентное преимущество.