Спонсор поста: Новогодний подарок от 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]-->
Вот и все. Удачи вам и создавайте полезные и интересные сайты и дизайны.
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
С НГ!
Резо
Тема актуальная — 100%
На работе — маленький монитор — пол беды, а вот нетбуки…