Гибридная ширина верстки - резиновая верстка до определенной ширины, а также отзывчивый дизайн responsive design - Авторские материалы о продвижении вконтакте, wordpress фишках и плагинах, SMO, SEO, дизайне
Отборная информация, которая вставляет!

В поисках идеального каркаса для сайта — гибридная ширина макета

Спонсор поста: Новогодний подарок от Inferno Solutions — всем новым клиентам панель ISP бесплатно и 30$ в подарок при заказе VPS в Германии, Украине или Голландии! Укажите при заказе в примечании ISP+30.

Часто можно услышать споры о том какая же ширина сайта является оптимальной. Плюсов и минусов как у фиксированной ширины макета, так и у резиновой ширины, хватает.

Самые основные преимущества у резиновой верстки — это то, что все элементы растягиваются на всю ширину экрана, а значит не остается пустого «гуляющего» пространства. Но сейчас актуальными являются широкоформатные мониторы, и вот незадача, если у сайта не так уж и много текстовых информационных блоков — этот текст растягивается на всю ширину и становится оооочень узким, т.е. преимущество превращается в недостаток.

Сайты с фиксированной шириной — более «четкие», т.е. они не меняются в зависимости от размера браузера, но единственная их проблема (ИМХО), слишком много образуется неиспользованного пустого пространства на «широких» мониторах.

В общем, не буду долго тянуть, в статье я предлагаю ознакомиться с «гибридной» шириной каркаса, а также разобраны некоторые актуальные приемы responsive design (отзывчивого дизайна).

Гибридная ширина в моем понятии, это когда ширина имеет возможность тянуться, но только до определенной ширины. Т.е. если у юзера разрешение монитора 1680, то у него сайт не расползается на всю ширину экрана, а только до определенной ширины. В качестве примера, где это я увидел в первый раз, это сайт одного из самых влиятельных веб-журналов для разработчиков .

Если у вас широкий экран, попробуйте уменьшить размер окна браузера и поймете о чем речь. Т.е. сайт имеет максимальный и минимальный предел растягивания. Конкретно на смешине это реализуется просто. Общий слой, который содержит все слои сайта имеет id=»pagewidth» и css для него такой

body {    max-width: 104em;overflow-x: hidden;}
#pagewidth {min-width: 1110px;}

Но вот что мне совсем не нравится в таком способе, что если размер окна меньше, чем минимальный заданный (1110), то горизонтальный скролл не появляется совсем, т.е. если разрешение будет 1024*768 — то вообще невозможно увидеть что в правой части (конкретно не видны будут 1110-1024=86 пикселей).

Я немного доработал этот прием так, чтобы если размер окна меньше, чем заданный, то появится нижний горизонтальный скрол. У меня получилось так

body {min-width:992px}
#pagewidth {margin: 0 auto;max-width: 1278px;}

максимальную ширину вы можете поставить и больше, например, 1360.

А что делать с ИЕ6 — он ведь не понимает свойства min и max width. Лично я вообще на него начал забивать, так как уже и сами майкрософты давно заявили, что не поддерживают этот браузер. Но если вы все еще возитесь с этим куском говна браузером, то можете почитать описания для этих целей.

К стати, на хабре есть интересный топик, где описывается

Но это еще не все. Возможно вы не знали, но одним из основных трендов в 2011 и 2012 годах в дизайне и верстке сайтов — это responsive design.

Responsive design


Если кратко, то это такой способ верстки, при котором создаются отдельные правила для разной ширины экранов и даже для разных устройств. Это позволяет подстраивать сайт под экран устройства и создавать разные версии верстки для разных устройств.

Если понимаете англицкий, то есть хорошая статья на том же , также есть хорошая статья на русском .

Вообще мой любимый способ создания «отзывчивых сайтов» это через media queries, правда ИЕ ниже 9 версии не понимают эти значения, поэтому для них придумали специальный скрипт, который решает эту проблему. Одним из таких скриптов поделюсь. Просто в секцию head вашего сайта вставляете следующий код

<!--[if lt IE 9]>       <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>    <![endif]-->  

Вот и все. Удачи вам и создавайте полезные и интересные сайты и дизайны.


 

Похожие статьи:



6 комментариев к “В поисках идеального каркаса для сайта — гибридная ширина макета”

  1. :

    Прикольно 🙂 и очень интересно.

    Я забиваю минимальную ширину 720, поскольку много людей имеют на работе мелкие мониторы, а максимум 1260, поскольку даже на 1360 ширина 1280 будет смотреться оптимально.

    А вобще, резиновый дизайн у новостей на мейл.ру и мне лично не нравится, как у них грузятся страницы. Так себе.

    ИЕ — отдельная тема. Я даже сайты клиентские попросту на нем не проверяю, поскольку сейчас всем интересен внешний вид на лисице, в хроме и особенно рулит здесь в Германии браузер Сафари.

    Мерси за статью.
    С НГ!
    Резо

  2. :

    Полезная тема. Спасибо. Гибридная ширина макета — самая актуальная сегодня.

  3. :

    «Ослик» конечно губит вид практически любого дизайна 🙂
    Тема актуальная — 100%
    На работе — маленький монитор — пол беды, а вот нетбуки…

  4. :

    «Если кратко, то это такой способ верстки, при котором создаются отдельные правила для разной ширины экранов и даже для разных устройств. Это позволяет подстраивать сайт под экран устройства и создавать разные версии верстки для разных устройств.»

    Это называется адаптивная верстка

  5. :

    Легкий способ проверить корректно ли отображается адаптивный сайт на мобильных устройствах

  6. :

    Недавно увидела отличный тестер адаптивного дизайна