Редизайн «Юниаструм банка»

2006-04-25 перейти к комментариям

Лого Юниаструм

Буквально на днях завершился редизайн сайта Юниаструм банка. Теперь он сверстан по веб-стандартам и даже проходит валидацию!

Немного о дизайне

Дизайн был заказан у известной конторы Defa. Страница у них получилась легкой и чистой — появилось много свободного пространства.

Для сравнения, как выглядела первая страница до редизайна (слева) и после (справа):

Юниаструм раньшеЮниаструм теперь

Саму верстку «Дефа» сделала таблицами — другого никто и не ждал. Но «Юниаструм банк» известен своими интересами к новым технологиям (например, к нанотехнологиям), а потому не обошел вниманием и современные интернет-технологии. Было решено переделать предоставленные дизайнерами макеты, сверстав их при помощи CSS.

Немного о верстке

Я считаю макет дизайна достаточно сложным — растягивающиеся четыре колонки, футер, прижатый к низу, обязательное задание минимальной ширины (чтобы в IE всё не поползло вниз) и кое что еще. Но со всем этим, как видите, можно справиться.

Для колонок использовался конечно же float. Для левой — float:left, для центральной — float:right. Новости на главной вытягиваются в линию при помощи того же float:left.

Футер прижимал методикой, которую улучшил Cameron Adams. Правда в IE 7 beta не работает (damn, только ведь недавно хвалил), но на то она и beta. Потом что-нибудь придумаем.

Проблема минимальной ширины решена известным методом от cssplay. Просто и элегантно — никакого JavaScript.

Преимущества

Что же это дало сайту? Перечислю хотя бы три причины.

Во-первых, следование стандартам во всех отраслях я считаю критичным для серьезных компаний.

Во-вторых, вес страницы уменьшился в 3 раза по сравнению со старым вариантом дизайна и в 2 раза по сравнению с новым вариантом, сверстанным «Дефой». Очевидно, что это положительно скажется на скорости загрузки сайта и стоимости трафика.

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

Теги: , , ,

Комментарии RSS для комментариев

  1. # Владимир Яшников — 835 дн. назад:

    А ты принимал участие в редизайне?

  2. # Spr!tE — 835 дн. назад:

    Ну да, я и делал верстку. А иначе зачем бы я тут об этом рассказывал =)

  3. # Владимир Яшников — 835 дн. назад:

    Молодец, правда. :)

  4. # AngryCAT — 835 дн. назад:

    Ага мне тоже понравилось. Правда, нет стиля для налодонников (ну, да с них пока мало кто серфит ;) ).
    И стиль для печати, наверное, всё-таки лучше монохромным сделать. Там, кстати, на первой странице при просмотре страницы для печати перед курсами валют у меня видны какие-то два прямоугольника. Один синий, а другой жёлтый.

  5. # Spr!tE — 835 дн. назад:

    AngryCAT: для наладонников я еще ни разу не делал. они наверное уже умеют сами странички сжимать до своих размеров…

    про прямоугольники — это не в опере случаем? у нее вообще стили для печати часто глючат без особой причины… а вообще, альтернативные стили еще будут слегка доработаны. спасибо!

  6. # Владимир Яшников — 835 дн. назад:

    Growth of the PC based internet is slowing down. Growth of the mobile phone based internet is accelerating. Only 41% of all internet access is by people who only access by PC. Already 25% of all internet access is only by mobile phone. Soon more people will access by mobile than PC. How soon? By 2008.

    Источник

    Не всё так просто :)

  7. # Spr!tE — 835 дн. назад:

    Ну для телефонов одним CSS точно не отделаешься. Там только wap поможет =)

  8. # Андрейка — 834 дн. назад:

    Неправда. Когда я верстал http://it-outsourcing.borlas.ru мне пришлось делать стили как для современных браузеров (PC, OS X и *nix), так и для модильных устройств. Все это тестировалось в них – несколько наладонников (windows, palm), а также в телефонах (Opera Mini).

    И там, знаешь ли, много ньюансов…. Так что пора уже, пора.

  9. # AngryCAT — 834 дн. назад:

    Попробывал распечатать в PDF Printer (картриджи в Германии дорогие :) ), жёлтый прямоугольник пропал, а синий всё равно остался. Перед этим смотрел действительно Оперой.

  10. # Finist — 829 дн. назад:

    А мне не очень понравилось… как то все слишком просто… нет чувства что банк действительно серьезный.

  11. # Vladson — 829 дн. назад:

    Однако не совсем стандартам соответсвует, возможно тут вина не верстальщика а уже третих лиц, но в коде есть место где в ссылке пустой href (по стандарту нужно хотя бы href=»#» поставить) а так-же в JS скрипте есть место где текст прописан не совсем правильно (точнее один «слеш» не в тему)

    На этом сайте тоже кстати не всё хорошо, ссылки должны быть в «rawurlencode» а тут в двух местах типичный текст, а так-же один «пустой» span (нужно хотя бы nbsp поставить)

  12. # Spr!tE — 828 дн. назад:

    Vladson: ну Вы всё откопали =)
    Про решетку в href — это дельно. А вот про слеш не понял.

    Про этот сайт: пустой span — это издержки движка. Даже заморачиваться не хочется по этому поводу.

    Про кодирование ссылок — все верно (уже исправлено), а сделано так было из-за незнания как поведет себя Technorati с такими URL (а теги изначально затачивались под него). Но так как они не выдаются в RSS, то и фиг с ним, с technorati =)

    Скажу по секрету: там еще огромная куча страниц, которая даже валидацию не проходит. Не все сразу =)

  13. # Vladson — 828 дн. назад:

    Исправить пустой спан тут легко, достаточно перед закрывающим тегом поставить   и будет норма
    (делается это в файле движка, конкретнее сказать не могу не помню, я не помню просто чтоб в стандартном Textpattern 4.0.3 было такое место)

    >>> А вот про слеш не понял. внутри <script>

    document.write(’<a href=»#»>Vladson</a>’) не правильно
    document.write(’<a href=»#»>Vladson<\/a>’) правильно

  14. # Vladson — 828 дн. назад:

    Подробнее про «слеш» http://www.htmlhelp.com/tools/validator/problems.html#script

  15. # demetrius — 826 дн. назад:

    отличный сайт! верстка профи. поздравляю с таким успешным и крупным проектом!

  16. # Spr!tE — 826 дн. назад:

    Спасибо.

    Кстати, наслушавшись ваших советов, сделал версию для PDA — вроде получилось хорошо, можете проверить =)

    Там действительно оказалось не все очевидно. Может даже как-нибудь напишу об этом…

  17. # Kseire — 725 дн. назад:

    Мне понравилось — «контора» :)

  18. # Alexander — 723 дн. назад:

    Мне понравилось. Сверстано грамотно.

Что вы об этом думаете?

Помощь по Textile, gravatar

Автотипографика Таблица с прокруткой и фиксированным заголовком