Отборная информация, которая вставляет!

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

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

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

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

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

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

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

Если у вас широкий экран, попробуйте уменьшить размер окна браузера и поймете о чем речь. Т.е. сайт имеет максимальный и минимальный предел растягивания. Конкретно на смешине это реализуется просто. Общий слой, который содержит все слои сайта имеет 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. Лично я вообще на него начал забивать, так как уже и сами майкрософты давно заявили, что не поддерживают этот браузер. Но если вы все еще возитесь с этим куском говна браузером, то можете почитать описания разных хаков для ИЕ6 для этих целей.

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

Но это еще не все. Возможно вы не знали, но одним из основных трендов в 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. Легкий способ проверить корректно ли отображается адаптивный сайт на мобильных устройствах
    http://fleek.org/fleekaj/WBVNEgxMS0gKWRdNCA5QXwwbB10MGkEKW1sXSQ==/

  6. Недавно увидела отличный тестер адаптивного дизайна
    http://fleek.org/fleekaj/WBVNEgxMS0gKWRdNCA5QXwwbB10MGkEKW1sXSQ==/

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›