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

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

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

В общем, не буду долго тянуть, в статье я предлагаю ознакомиться с “гибридной” шириной каркаса, а также разобраны некоторые актуальные приемы 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]-->  

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

На сайте есть большая картинка, она долго грузится и хотелось бы ускорить ее загрузку с помощью CSS.

Я читал про два способа давно, но не помню как их реализовать.

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

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

Скажите пожалуйста, как их реализовать с помощью CSS? Есть ли еще способы ускорить открытие картинки?

Заранее спасибо!

отвечает ETNO

Довольно интересный вопрос, хотя и не часто используется.

Итак, для начала, вы правы, где-то встречал тоже способ вставки сначала изображения плохого качества, а потом при загрузке, которое заменяется хорошим. Способ прост, он использует javascript, но говорят, что старые браузеры его не воспринимают. Вот его код

<img src="lowess.jpg" onload="this.src='high.jpg';" />

lowess.jpg – это изображение плохого качества, оно загружается первым. high.jpg – хорошее качество, оно сразу заменяет первое, как только загрузится.

Также, если проблема именно в jpg файлах, то в этом формате есть способ сжатия, когда изображения “разворачивается” постепенно – этот способ называется Progressive.

В фотошопе, когда вы сохраняете изображение вы можете сохранить именно с этим способом

Просто поставьте галочку на progressive.

Также есть еще jquery плагины, которые добавляют к изображениям картинку загрузки (похоже как на флеш). Можете глянуть статью о плагине preloader.

Проблема в том, что в файле header.php я поместил java форму, которое выезжает по нажатию, так вот, оно у меня плавает, когда человек меняет ширину браузера или заходит под другим разрешением экрана, форма входа и задний бекграунд java формы смещаются.

отвечает ETNO

Все просто, если нужно, чтобы слой был приклеенный к определенному положению (даже при прокрутке), то в css есть такое свойство как position:fixed Т.е. у вас будет что-то вроде

#form { position: fixed; top: 30px; left:50%; margin-left:-150px; width:300px; height: 200px; }

Такой код выровняет по центру слой с формой, при этом ширина формы будет 300 пикселей.

Единственная проблема, что position:fixed всеми любимый IE нифига не понимает, поэтому прийдется его хакнуть таким кодом

* html #form {
    position: absolute;
    top: expression(document.documentElement.scrollTop+document.documentElement.clientHeight-200+"px");
}

где 200 – это высота формы.

Пользуйтесь!

Пишу тебе с праздного интереса, сразу хочу извинится, за то что обращаюсь к тебе на ты, однако, посещаю твой сайт больше года, и потому он как родной, я с инфом твоим общался (iii.ru) ))) , так что, думаю ты мне простишь такую вальяжность в общении с тобою)))

Ах да, ну и вопрос у меня, будет такой:

с 12.2010 закупаю ссылки в sape на свой сайт в количестве на 10-12 $ месяц, это приблизительно – 130-150 ссылок, закупаю самые дешевые до 0,11 центов с тицем с посещаловкой + незаспамленные, пользуюсь плагином винка для анализа.
Что нужно eщё сделать, какому тандему жертву принести, что бы тиц дало?

отвечает ETNO

Я не мастер наращивания ТИЦ, обычно на него вообще забиваю, но некоторые наработки есть.

То, что проверяешь доноров – это отлично. Это нужно всегда делать. Я ещё могу сказать, что если хочешь гарантированный результат, то стоит не только на сапу надеяться, желательно немного разбавить ещё ссылками с ГГЛ, ротапост и подобных + можно самостоятельно получить немалое количество постоянных ссылок. В сети куча материалов по этому.

Далее, обязательно уделяй большое внимание анкорам по которым закупаешься. В идеале, на одну ссылку – один анкор, все должны быть естественные, разбавленные околоссылочным текстом, можно также немного добавить и анкоров, вроде “здесь”, “тут”, прямой урл сайтов. Анкоры должны соответствовать тематике сайта и вести на тематические страницы.

Ссылки должны вести не только на главную, но и на внутренние, в общем добивайся максимальной естественности.

Понятное дело, что покупать желательно с сайтов подобной тематики, желательно, чтобы ссылки были не в сайдбаре или футере, хотя такие сложновато найти на sape.

Ещё, не знаю каким образом, но почти на 100% уверен, что ТИЦ зависит не только от доноров, но и от самого сайта. Замечаю, что, к примеру, на блог получить ТИЦ немного сложнее, чем на сайт, вернее, просто ссылок больше нужно.

Но, в общем, ТИЦ параметр который очень часто меняется, часто вообще его предсказать невозможно, вот поэтому практически все топики с услугами повышения ТИЦ держатся пару апов. Поэтому мой совет – использовать комплексные методы, в любом случае что-то да и даст результат. + ещё скажу, что если долго нет результата, а работа ведется, не отчаиваться. Есть мнение, что ссылки начинают давать отдачу где-то через 3-6 месяцев, не раньше, так что терпение мой друг и все получится. Но вообще, покупай ссылки с тем расчетом, чтобы росли и позиции, ведь на трафе иногда можно заработать и побольше, чем в sape

Специально выкладываю на блог, чтобы показывать всем новым клиентам, прежде чем начинать с ними работать. Работает к стати, совсем неплохо