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

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

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

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

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

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

1. lazurnoe.com — кликнуть чайку и увидите её жестокую судьбу

2. multimenu.ru — дождаться блондинку, кликнуть по ромашке возле груди

3. fishingspb.ru — Жмем 3 раза на рыбаке на лодке

4. gazon-avangard.ru – Газон «Авангард». — Дожидаемся появления надписи «газон» и кликаем по мужичку с серпом (на сам серп)

5. seopult.ru – Лайт версия жмём на O в лого, хард версия — жмем на U в лого

6. completo.ru – 5 раз тянуть ярлык вниз-вверх

7. Известный прикол с “Центром каминов” i-kamin.ru нажать на схему проезда (Сущевский вал), а потом нажать на кнопку “КАК ПРОЕХАТЬ” или “как пройти” и нажать на “Центр каминов” (на схеме проезда) – вот тут и будет виден и слышен прикол.

8. doroga78.ru – Светофоры — Три раза кликнуть на любом из светофоров внизу страницы. Два варианта развития.

9. zoloto585.ru – ведите мышку вправо до конца магазина там стоит охранник ткните на нём несколько раз смотреть как помиловать так и казнить)))) и так же на центральную продавщицу несколько раз

10. 32pearls.by.ru – тыкать в сотрудников. лицам до 18 лет тыкать запрещено! Внимание: может травмировать вашу ТДО!
11. pool.in.ua – кликаем на красные туфельки

12. okmedia.ru – выбрать “Виртуальный менеджер” (внизу странички слева) – она на вопросы может отвечать! Можно попробовать пригласить на свидание… или попросить: “покажи сиськи” и “покажи попу”))))

К стати, очень неплохой способ вирусной рекламы. Сделайте подобные качественные пасхалки и увидите как на ваш сайт будут появляться новые ссылки.

Начало статьи – начало эксперимента в контакте

Хочу рассказать вам как я продвигал оффлайн дело в контакте. Теперь эксперимент подошел к концу и можно огласить результаты.

Итак, есть группа капоэйра и акробатики, которая находится у меня в городе. И решил я как-то испробовать продвинуть её вконтакте. Поначалу покупал голоса и создавал объявления, об этом я писал в прошлой статье, но я решил поэкспериментировать дальше и для этого купил приглашалку вконтакте. Все было хорошо, особо я не спамил, приглашал потихоньку, каждый день по 200 приглашений, группа выросла где-то до 1000 приблизительно за несколько недель. Но тут вконтактеры решили испортить малину и сменили нафиг алгоритм приглашений. В итоге, все приглашалки накрылись медным тазом. Далее, все таки нашелся скрипт, который более-менее работал, но однажды мне тупо надоело приглашать понемногу и я решил заказать массовый прогон.

Всего было заказано 15000 приглашений, обошлось мне это что-то около 20 у.е. Прогон совершался не за раз, а за неделю. Кол-во вступивших в группу быстро начало расти и за 5 дней уже составляло 4000 человек. Это был довольно неплохой результат. Приблизительно 1/3 людей вступало в группу.

Я был несказанно рад этим циферкам, особенно, если учесть, что город у меня небольшой, всего было насчитано 60 000 человек потенциальных клиентов (выбирал по возрасту, от 15 до 30 лет), но не тут-то было. Оказалось, что большая часть вступивших в группу – пустая масса юзеров, которые даже не заходят в дальнейшем в группу.

Если брать конверсию (а здесь я её рассматриваю как кол-во людей, которые звонили или писали на мыло), то на момент 4000 человек в группе, было совершено 3 звонка и 5-10 писем на мыло. 5-10 – это потому что не все эти письма шли с вконтакте.

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

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

Что я сделал самое важное, так это то, что отправлял приглашения на мероприятие не среди всех людей, а только среди уже вступивших в основную группу. В последний день перед мероприятием на него подписалось 1100 человек. Я начал нервничать, ведь зал был рассчитан на максимум 50-70 человек зрителей, а тут даже, если каждый 10 придет, то уже более 100 человек.

Но все стало на свои места в день мероприятия. Всего пришло человек 30 от силы, причем 70% по совету друзей. Вот такие пироги, мать его.

Так что может вконтакте штука полезная и массовая, но как инструмент ведения бизнеса – крайне низко конверсионная. 95% участников группы – пассивная масса, которая скорее всего и не заходит-то в группу. Да что там говорить, заходим на первого юзера в группе у которого открыта статистика и смотрим

как думаете, человек который состоит в 315 группах – будет куда-то заходить и является ли потенциальным клиентом?

Но с другой стороны, при затратах 20 у.е., даже при такой низкой конверсии, эти деньги все равно отбиваются. Месячный абонемент стоит у меня 10-15 у.е. Так что даже 1 клиент полученный с вконтакте – уже отбил затраты на рекламу.

Что имеем. Группа капоэйра(бразильское боевое искусство) в городе с населением 650 000 человек.

Цель – проверить качество рекламы в контакте, повысить кол-во занимающихся

почему в контакте? потому что там есть выбор целевой аудитории вплоть до выбора людей по районам города.

Средства – 10 у.е.  Покупал голоса в контакте не напрямую, а через знакомого. Получилось в 3 раза дешевле. Если нужны голоса – пишите на контактный меил или аську – сделаем. Мин заказ от 20 у.е.

Первое, что следует понять при рекламе в контакте, это то, что здесь нет денег, внутренними деньгами будут “голоса”. Как вы их получите – пофиг. Или купите у знакомых, или заработаете с внутренних приложений, или купите напрямую у “в контакте”. Это неважно.

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

Рекламировать можно как услугу, так и встречу, группу и т.д. Я рекомендую создать под это дело группу в контакте(потом скажу почему), немного её наполнить, написать хороший текст на главной, видео слегка и т.д.

Далее, мы создаем рекламную компанию, где выбираем целевую аудиторию сайта. В моем городе это было 7 000 человек – не густо., учитывая что по рекламе кликают не так часто.

Далее, нужно установить цену показа. Если у вас объява неконкурентная, то цену можно ставить низкую. Я к примеру, ставил в 5 раз меньше средней и было все нормально, думаю можно было и ещё меньше

Далее, ждем. Здесь стоит сказать, что в период с утра и до вечера – почти никто не кликает, начинают только вечерком, скорее всего, из-за того, что основные пользователи – это студенты и школьники.

Итак, после 3 дней. Статистика такая: отношение кол-ва вступивших в группу к общему числу кликнувших – каждый 6 человек, отношение позвонивших/спросивших в группе/связавшихся к общему – каждый 15 человек.

В общем считаю, что если учесть, что стоимость одного клика довольно низкая – то неплохой результат. также стоит заметить, что получилось стоимость одного вступившего в группу – 8 центов. Много это или мало – фиг его знает. Возможно дороже, чем есть услуги массового приглашения в группу, но таким образом вы привлекаете действительно людей, которым интересен ваш товар, группа, а не услуга, которые со временем могут у вас купить что-то или поинтересоваться вашей услугой. Люди же, которые вступают в группу через массовые приглашения – в основном, зайдут к вам в группу только один раз, подписаны на более чем 100 групп просто для прикола.

Эксперимент считаю удавшимся, буду продолжать.

мониторинг сети: рекомендую блог про красивую внешнюю отделку

любите Стивена Кинга? Теперь у нас есть свой Кинг. Нашумевшая книга метро 2034. А здесь можно купить метро 2034 аудиокнигу