Покупка нового широкоформатного монитора с разрешением 1920 на 1080 обрадовала меня с разных сторон, кроме одной – отображение моих сайтов на широком экране не ахти. Вертикальная ориентация сайта выглядит в большом разрешении скромно, до не могу, и хотя сейчас я работаю над миграцией блога Zegeberg на Joomla 3.6 с несколько другим дизайном, правки пришлось вносить. Адаптация под большой экран потребовала немного времени, но и матом в Великий Пост пришлось согрешить.
Особенности адаптации
Сразу скажу, что блог Zegeberg у меня сейчас в двух вариантах – на адаптированной Joomla 1.5 и на мобильной Joomla 3.6, которая ещё доделывается на Денвере. На старом движке больших правок я не делал – надеюсь, он доживёт свои последние дни и так, а вот новую CMS пришлось адаптировать и под разрешение 1920 px.
На широком экране мне не понравилось в отображении сайта:
- - Обрезанные картинки оформления – шапка и подвал,
- - Слишком узкий контейнер текста,
- - Пустоты между текстом и краем контейнера в некоторых разрешениях,
- - Скромно-маленькие блоки видео.
Шапка и подвал
Первое что бросилось в глаза на экране шириной в 1920 px это обрезанные шапка и картинка футера. До этого адаптация велась под ширину 1440, поэтому картинка имела ширину 1100 в соответствии с дизайном. На старом движке картинка обрезается под разрешение, на новом сжимается – увеличивать пришлось всё равно и там, и там.
Посмотрите в стилях размер картинок оформления при широком разрешении и увеличьте шапку в соответствии с ними. Мне пришлось увеличивать шапку на 400 px и повозиться, так как это всё-таки верх страницы.
С подвалом проблем не было – там просто картинка с фоном (старый движок) – я её вытянул, на Joomla 3.6 подвал оформлен через CSS – ещё проще, надо добавить пикселей по ширине.
Контейнер и пустоты
Сложнее дело пошло с адаптацией контейнера на новом движке, так как его надо было расширить для большого разрешения и соблюсти человеческие пропорции на более мелких экранах.
В шаблоне Protostar за вывод блока отвечают .container и .row-fluid, в которых пришлось играть с max-width и width, оставляя для некоторых расширений ширину .container: max-width: 1250px;, для других выставляя .row-fluid { width: 120%;}. Самый простой вариант – это плагин FireBug и ручное сужение увеличения экрана в браузере Mozilla.
Для десктопа надо адаптировать и блок .well, то есть сайтбар сайта. У себя я выставил такие цифры:
min-height: 20px;
padding: 11px;
margin-bottom: 10px; /* Отступ между блоками по вертикали */
background-color: #E7FAFE; /* Фон блока */
border: 1px solid #B0C4DE; /* Размер и цвет границы */
border-radius: 10px; /* Сглаживание углов */
В идеале добиваемся, чтобы контейнер имел приятную ширину для всех разрешений, а по его краям не было больших пустот.
Блокировка display: none
Лично я не люблю, когда в мобильных версиях и для планшетов боковые блоки выстраиваются внизу страницы, удлиняя её до не могу и замедляя загрузку. Для разрешений меньше 1000-1200 px я закрываю всё ненужное в display: none. Например, для Joomla 3.6:
@media screen and (max-width:1000px) {.footer, .well {display: none !important;}}
Для Joomla 1.5
@media screen and (max-width:1000px) {.page-numbers, #footer, #navigation, #header,.logo,.nav-box {display: none !important;}}
В этом случае, при разрешении менее 1000 px сайтбар и подвал не будут отображаться. Для широких разрешений ставится отображения всего, наоборот, возникает необходимость наполнить страницу, но по ходу не грех подправить и адаптацию для мобильных и планшетных устройств.
Видео
Что касается видео, то тут надо принести адаптацию в жертву необходимому злу. Простых решений я не нашёл, сложные того не стоят. Я ставлю ширину видео 320 px, на больших мониторах оно смотрится неказисто, но большого ума для расширения ролика до полноэкранного пользователю не надо.
Почему 320? Поисковые системы до сих пор учитывают эту ширину экрана при проверке мобильной адаптации, хотя подобные устройство остались, разве что, в музеях телефонной славы.