Редизайн «Юниаструм банка»
Опубликовал Александр Шабуневич — 25 Апрель 2006, 14:20
Буквально на днях завершился редизайн сайта Юниаструм банка. Теперь он сверстан по веб-стандартам и даже проходит валидацию!
Немного о дизайне
Дизайн был заказан у известной конторы 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=»#»>Vladson</a>’) не правильно
document.write(’<a href=»#»>Vladson<\/a>’) правильно
Подробнее про «слеш» http://www.htmlhelp.com/…roblems.html#…
отличный сайт! верстка профи. поздравляю с таким успешным и крупным проектом!
Спасибо.
Кстати, наслушавшись ваших советов, сделал версию для PDA — вроде получилось хорошо, можете проверить =)
Там действительно оказалось не все очевидно. Может даже как-нибудь напишу об этом…
Мне понравилось — «контора» :)
Мне понравилось. Сверстано грамотно.