Перейти к навигации · Перейти к содержимому

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

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

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.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подробнее про «слеш» http://www.htmlhelp.com/…roblems.html#…

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

Спасибо.

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

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

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

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