1. 1Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
2. 2Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.
3. 3Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.

Посредством CSS этого добиться невозможно, по этому я решил использовать jQuery:

$('ol.custom li').each(function(){
	$(this).prepend('<span>' + ($(this).index() + 1) + '</span>');
});

При этом с самим списком ничего делать не нужно (никаких вложенных тегов и т.д.), только добавить класс custom к тегу ol и задать стили для тегов li и вложенных в них span:

ol.custom li {
    list-style:none;
    margin:0 0 15px 0;
}
ol.custom li span {
    display:block;
    float:left;
    width:21px;
    height:19px;
    padding-top:2px;
    margin-right:10px;
    text-align:center;
    color:#fff;
    background:#84c225;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

В примере я использовал css3, но можно конечно сверстать и на картинках.

Конечно только ради одного списка использовать jQuery не целесообразно, лучше написать на голом js. Но в моем случае эта библиотека уже была подгружена и я решил не изобретать велосипед.

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

Скорость загрузки очень важна для IT-компаний, особенно интернет-провайдеров. Почему? Да потому что впечатление от сайта у потенциальных клиентов напрямую влияет на их конечное решение. Если сайт медленно грузится, у них складывается мнение, что после подключения к интернету через этого провайдера у них все сайты будут так медленно грузиться.

2. У сайта сменяется фоновый рисунок при перезагрузке страниц, это негативно сказывается на брендинге – у пользователей должно быть четко сформированное представление о том, как выглядит сайт и как он вписывается в фирменный стиль компании.
3. На первом экране сайта (то, что видят пользователи в первую очередь при попадании на сайт) – рекламный блок (который кстати не вписывается в общую картину дизайна) и два блока компьютерных новостей – это ненужная для целевых посетителей информация, которая оттягивает их внимание от того, зачем они сюда пришли. А то, что там вперемешку с рекламой есть еще и информация о тарифных планах X-com, говорит о том, что сделано это совершенно бездумно. Эту информацию никто читать не будет, это ведь блок рекламы, на него практически никто не обращает внимание.
4. Помимо этого сайт просто напичкан другой ненужной информацией: сегодня в кинотеатрах, вебкамера Актау, погода, сейчас на сайте и т.д. – в общем не сайт компании, а развлекательный портал какой-то.
5. Главное меню сайта некорректно отображается и очень неудобное. Впечатление от красивых эффектов при наведении мыши никогда не заменит для пользователя удобство пользования им.
6. На главной странице должны быть не новости (в данном случае это поздравления с новым годом, да пользователей интернета просто тошнит от этих банальностей, они есть на каждом сайте) – здесь должны быть акции, скидки, выгоды для клиентов, преимущества компании, самые ходовые тарифные планы и т.д. чувствуете разницу?
7. Форум меня вообще повеселил. Общаются на все возможные темы, кроме тех, которые действительно должны обсуждаться – помощь клиентам, ответы на часто задаваемые вопросы, настройка интернета и т.д.

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

Общее впечатления от сайта – 3 из 5.

Как и многие другие web-разработчики я просто обожаю Internet Explorer, особенно версию 6. В то время, как появляются такие мощные техники, как HTML5 и CSS3, разработчики IE даже и не думают их внедрять. Ну да, в принципе наверное лучше и не надо. Пусть хотя бы с предыдущими версиями разберутся. Ладно, хватит о грустном. Давайте лучше рассмотрим, как подключить CSS3 и HTML5 в нашем самом любимом браузере:

1. Как включить HTML5 в Internet Explorer

Большинство современных браузеров уже поддерживают HTML5, но Internet Explorer, как известно, всегда плетётся где-то позади. Чтобы заставить IE всё же воспринимать новую версию разметки, нужно подключить небольшой скрипт:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

В данном примере скрипт подгружается с сайта googlecode.com, но его можно скачать и подгружать со своего сервера.

2. Как подключить CSS3 свойство text-shadow в Internet Explorer

Опять же, Internet Explorer – это единственный браузер, который не поддерживает это CSS свойство. Правда в случае с тенью, заставить его делать это не получится даже с помощью скриптов. Единственный выход – это использовать CSS свойство filter для IE, как альтернативу text-shadow. Вот пример:

p.shadowed {
text-shadow: #0000ff 0px 0px 3px; /* Для нормальных браузеров */
filter: glow(color=#0000ff,strength=3); /* Для нашего любимого IE */
}

Подробнее о CSS свойстве filter можно прочитать в этой статье: http://webering.ru/articles/6/article/8

3. Как подключить CSS3 свойство box-shadow в Internet Explorer

На мой взгляд, box-shadow – это одно из самых классных свойств в CSS3, потому что с помощью него можно добавить тень к любому HTML элементу, не используя при этом картинки.

.shadowed{
box-shadow: 10px 10px 5px #888;
}

Но не спрашивайте меня, поддерживает ли его IE! C ним, как всегда, придётся использовать костыли. В данном случае это опять будет свойство filter.

.shadowed {
filter:
progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

4. Закруглённые углы в Internet Explorer

Закруглённые углы приобрели большую популярность в веб-дизайне. Причины этому понятны – выглядят такие углы классно. Разработчики спецификации CSS3 это прикрасно понимали и по этому создали CSS свойство border-radius, с помощью которого можно создавать HTML элементы без единой картинки. Для тех, кто не в курсе приведу пример использования этого CSS свойства.

.round{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

В IE же, как всегда, не обошлось без костылей. Теперь это будет снова использование JavaScript.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
  DD_roundies.addRule('.roundify', '10px');
</script>

В данном случае все HTML элементы с классом roundify будут с закруглёнными углами. Подробнее читайте на домашней страничке скрипта: http://www.dillerdesign.com/experiment/DD_roundies/ (англ.) Там же можно его скачать.

5. Макеты с несколькими колонками в Internet Explorer

CSS3 даёт возможность отображать любой контент в несколько колонок. В Firefox и Safari это можно сделать с помощью следующих стилей:

.column {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}

Но сделать что-нибудь подобное в Internet Explorer не представляется возможным. Но есть один способ, который может справиться с этой проблемой, используя Jquery. Всё, что нужно сделать – это убедиться, что на сайте подключена последняя версия Jquery и использовать вот такую функцию:

$(function(){
$('.wide').columnize({width:400});
$('.thin').columnize({width:200});
});

Подробности в этом посте: http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/ (англ.), там же ссылка на домашнюю страничку скрипта, где его можно скачать.

6. Поддержка псевдо-селекторов CSS3 в Internet Explorer

Чтобы заставить нашего любимого Internet Explorer понимать псевдо-классы CSS3 можно воспользоваться очень полезным скриптом ie-css3.js, который написал Keith Clark.

Использование: скачайте DOMAssistant и ie-css3.js и подключите их таким образом:

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

Подробности здесь: http://www.keithclark.co.uk/labs/ie-css3/ (англ.)

7. Прозрачность в Internet Explorer

Прозрачность – это еще одно свойство, о котором не знает Internet Explorer. В этом случае нам снова поможет свойство filter.

.element{
    opacity:.7; /* Для нормальных браузеров */
    filter:alpha(opacity=70); /* Костыли для IE */
}

8. Вращение HTML элементов в Internet Explorer

В CSS3 вращать элементы можно с помощью свойства transform.

transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);

В Internet Explorer для этих целей будем использовать всё то же свойство filter.

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

Стоит заметить, что используя вышеприведенный стиль Вы не пройдете WC3 валидацию, но когда речь идет о IE, с этим можно смириться.

9. Поддержка RGBa в Internet Explorer

Буква a в конце известной всем аббревиатуры означает alpha (альфа). Эта новая фича позволяет задавать прозрачность для цветов.

 .color-block {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Для всех браузеров, кроме IE */
}

В Internet Explorer опять прибегнем к свойству filter.

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

10. Использование нестандартных шрифтов в Internet Explorer

В последнее время использование нестандартных шрифтов на веб-сайтах стало очень распространенным. С Internet Explorer, как всегда, есть свои особенности – он понимает шрифты только в формате EOT. Чтобы сконвертировать ваши нестандартные шрифты в этот формат, воспользуйтесь этой бесплатной онлайн утилитой.

@font-face {
    font-family: " название шрифта ";
        src: url( /расположение/шрифта/НазваниеФайлаШрифта.eot ); /* Для IE */
        src: local(" название шрифта "), url( /расположение/шрифта/НазваниеФайлаШрифта.ttf ) format("truetype"); /*  не IE */
    }

/* Затем используем это название, как обычный web-safe шрифт */
.element {
    font-family:" название шрифта ", verdana, helvetica, sans-serif;
}

Это был свободный перевод статьи 10 ways to make Internet Explorer act like a modern browser.

А вот тут проводится раскрутка сайтов по выгодным ценам!