Процесс: Разработка сайта Курскхлеб / Свежий хлеб
В далеком июне 2011 года я работал в Showbiz Studio в должности арт-диретора. К нам пришел представитель заказчика и рассказал, что они сейчас обновляют линию продукции, запускают новые бренды и хотят быть современными и не отставать от других подобных предприятий в отрасли и наконец-таки сделать себе сайт.
Из общения с клиентом выяснилось, что нужно организовать презентацию как самой компании, так и ее новых брендов. Показать всю выпускаемую продукцию и места, где она продается. А также помочь производителям сырья и дилерам начать работу с предприятием.
Курскхлеб
июнь 2011
Заказчик
Крупнейшее предприятие области, производитель хлеба и хлебобулочных изделий.
Задача
Разработать сайт компании, который будет знакомить посетителей с деятельностью компании, ее продукцией и их характеристиками, новыми торговыми марками, местами сбыта, и объяснять потенциальным партнерам как начать сотрудничество.
Решение
Было предложено разделить информацию разного рода и сфокусировать внимание посетителей на важных в тот момент для клиента вещах.
Поскольку страниц было запланировано достаточно много и х сгруппировали в несколько смысловых блоков.
Для удобства и понятности в главном меню сайта предложено не вываливать все подряд, а вывести ссылки на смысловые разделы. И даже отказаться от всплывающего меню с подразделами — неудобного элемента управления в вебе в пользу отдлельных подменю внутри самих разделов.
Структура разделов:
В шапке сайта предложено вывести ссылки на наиболее важные разделы, контактную информацию, и сделать такую шапку фиксированной на всех страницах сайта. Прототип разработан мной в программе Axure.
Раздел «Презентации» (по совместительству главная)
На главной странице расположить три тизер-баннера на презентации трех торговых марок. Их можно выводить как сразу три в узком формате, так крупно, сменяющими друг-друга в ротируемом блоке.
Поверх изображения баннера выводятся логотип бренда, медальки и логотипы сертификатов, если есть, а также прямые ссылки на продукцию бренда в каталоге.
Размер блока тизеров должен быть таким, чтобы пользователь видел его целиком, не прибегая к прокрутке.
Если же пользователь захочет прокрутить ниже, то тут же на главной выводится лента новостей предприятия в виде заголовков и/или миниатюр изображений.
В футере традиционно располагаются копирайты и прямая ссылка на раздел истории компании, поскольку он важен для клиента.
При щелчке на любой из тизеров должна была открываться презентация выбранного бренда.
На странице презентации (как и на на остальных страницах сайта) футер и шапка остаются неизменными. Сама презентация представляет собой полноэкранное слайд-шоу, с элементами управления и поясняющими текстами поверх изображения. Тексты должны быть короткими, а изображения должны привлекать внимание посетителей. Слайды переключаются по времени или по желанию пользователя. Фотографии или графика должны быть оригинальными, снятыми на предприятии или приобретенными (если найдутся нужные по теме).
Поверх презентации также выводятся: логотип бренда, ссылка на страницу продукции бренда в каталоге, ссылка на страницу со списком презентаций и элементы преключения слайдов.
Раздел «Продукция»
Этот раздел стоит первым в меню, и представляет собой иерархический каталог продукции предприятия. На основной странице выводятся все виды продукции. Каждый вид — это отдельный раздел. Делать еще один уровень иерархии — бренды в данном случае не нужно, поскольку мы знакомим посетителей с брендами и их названия большинству ничего не дадут. Тем не менее мы группируем виды по брендам на одной странице, чтобы потребитель запомнил что к чему принадлежит. И далее используем категории в связке с брендами.
Названия видов продукции и их изображения являются ссылками на разделы этой категории. В правом блоке выводятся конкретные продукты без привязки к разделам. Возможно это будут новинки каталога или специально выбранные администратором сайта позиции. (Новинки приведены для примера). Количество элементов не более высоты контента в левой колонке. Этот блок нужен для привлечения внимания к каким-то конкретным продуктам. По клику на названии или изображении — пользователь перейдет сразу на страницу данного продукта.
На странице категории приводится список продуктов.
Логотип бренда остается вверху для запоминания. Рядом же выводится иллюстрация выбранной категории. (В данном случае мы в категории «Хлеб»). Рядом же краткое описание категории.
Затем выводится продукция в этой категории. Ниже список других категорий того же бренда сразу с подкатегориями, если у каких-то они есть. Т.е. мы не плодим лишнюю страницу «Кондитерские изделия», а предлагаем сразу перейти, например, в «Торты» или «Пироженные».
Ниже прямые ссылки на категории брендов, по которым откроется предыдущая страница и прокрутится до категорий выбранного бренда.
В правой колонке выводятся: случайная новинка из категории (для привлечения внимания именно к новинкам и выделения их из ссписка продукции, который может быть немаленьким), ниже расположен блок сортировки списка продуктов по параметрам. Сортировка позволяет упорядочить список продуктов по значимым для потребителя параметрам, причем на этом уровне он еще не видет характеристик продуктов, но уже может найти наименее калорийный продукт или вывести только продукты с определенными свойствами. (в зависимости от категорий некоторые критерии сортировки могут меняться). Блоки новинки и сортировки остаются на экране при прокрутке страницы для удобства пользования в случае длинного списка в левом блоке.
На странице описания продукта мы видим крупное его изображение. (или несколько) и его характеристики. Ниже краткое описание продукта, его преимущества или особенности. Если продукт имеет награды то ссылки на них выводятся далее. По клику можно открыть диплом или фото медали, полученных товаром в разделе «Награды» на сайте.
Далее как и на прошлой странице выводятся подразделы и категории выбранного бренда. И ссылки на категории брендов.
В правой колонке выводятся похожие или связанные продукты. С возможностью прямого перехода к страницам их описаний, независимо от категорий, в которых они находятся.
Раздел «О компании»
Одновременно открывается первый подраздел — Предприятие. В нем кратко и нескучно рассказывается о предприятии, о его деятельности. Текст может перемежаться картинками или видео.
В правом блоке выводится подменю — навигация по подразделам раздела «О компании».
Ниже выводятся ссылки на описание новых вакансий (если их много, то несколько случайных). Поскольку в данном разделе эта информация может понадобиться посетителям. Рядом с вакансией выводятся важные данные из ее описания: зарплата, город, график и т. п. Подменю и блок новых вакансий остаются на экране при прокрутке страницы. Если вакансий нет, то вместо них выводится информация, что сейчас нет вакансий, но мы принимаем резюме и телефон отдела кадров.
История компании должна выводиться в виде привычного нам блога. Так она лучше воспринимается. Краткий текст о важном событии, дата или период (особенно для заполнения прошедших событий) и картинка или видео для иллюстации блока текста. Новые важные события в истории компании будут публиковаться тут же — как добавление поста в блог.
В правой колонке подменю и новые вакансии.
Список руководителей с должностями, фотографиями, регалиями или краткими историями и телефоны для прямой связи или же через секретаря. Правая колонка как в предыдущих страницах раздела.
Выводится описание раздела: что это вообще и для чего. Ниже список миниатюр дипломов или фотографий призов с кратким описанием. Награды выводятся в порядке: сначала новые. Сортировка не предусмотрена. По клику элемент открывается на весь экран.
Награда открывается на весь экран. Показывается крупно диплом или фото статуэтки или медали. Справа выводятся лауреаты: продукты и/или люди ее удостоенные, с прямыми ссылками на них. Навигация по наградам в стиле обычной фотогалереи. (вперед-назад по хронологии получения), или воврат к списку миниатюр для выбора.
На странице географии продаж можно найти где продается продукция компании. Выводить длинный список нецелесообразно. Поэтому страница начинается с описания того, что можно на странице сделать. А именно: раскрыть полный список (для тех кому такое представление удобнее) или найти все точки по названию, населенному пункту или продукту, который в них продается. Найденные элементы выведутся на Яндекс.карте, при наведении появится контактная информация. Ниже результаты поиска обычным списком сразу с контактной информацией. Поиск осуществляется по области, чтобы было удобнее. И выводится селектор, перемещающий карту на нужную область.
Справа выводится то, что пользователи искали до вас. А также полезная тем, кто сюда зашел, контактная информация.
Список вакансий на предприятии с навигацией и поиском. По клику на названии — переход к подробному описанию. И рядом ссылка на скачивание анкеты. Из-за ограничений в бюджете проекта, от механизма онлайн-анкетирования пришлось отказаться в пользу скачивания анкеты с формами в PDF для каждой вакансии, возможностью ее заполнения на компьютере пользователя и отправки обратно. Анкеты нужны для получения именно той информации, которая интересует работодателя или определения навыков для конкретной вакансии (люди часто не могут нормально сформулировать свои умения и все ограничивается каким-нибудь «стрессоустойчивый, коммуникабельный».
Описание вакансии подробное и конкретное. Ссылка на анкету и кнопка для отправки ее назад.
Раздел «Новости»
Список новостей с навигацией по времени и полнотекстовым поиском. На одном экране выводятся новости за неделю или за месяц (определяется автоматически, если публикуются редко). Справа выводятся новики каталога — раз уж мы в новстях, то новинки каталога тут будут кстати.
Полный текст новости. Может перемежаться картинками и видео. Вместо текста «предыдущая новость», «следующая новость» выводятся реальные заголовки этих новостей.
Справа также случайные новинки каталога.
Раздел «Сотрудничество»
Тоже имеет свои подразделы, ссылки на которые будут выводиться в правой колонке. Дополнительно выводится ссылка на подраздел «География продаж», поскольку он может быть полезен как в разделе «О компании», так и в разделе «Сотрудничество».
Автоматически раскроется первый подраздел — «Условия работы».
Краткая информация об условиях работы вообще и конкретно для Дилеров и Поставщиков. В правой колонке подменю телефоны, которые могут оказаться полезными тому, кто сюда зашел.
Список файлов для скачивания. Отдельные для дилеров и для поставщиков. Тут могут быть также полезные документы (типовые договоры или соглашения и т. п.).
Вход в планируемый онлайн-сервис для дилеров и информация о нем. Чтобы предприятия знали, что будет такой сервис и что в нем будет.
В данный проект сервис не вошел по бюджету и срокам, и был отложен на будущее. В общих чертах — это сервис онлайн-заказа продукции поставщиками со склада производителя, онлайн-остатки, накладные и т.д.
На странице выводится сначала контактная информация всех руководителей. Справа в колонке есть селектор контактных данных людей по отделам. И возможность открыть все телефоны предприятия («Все отделы»).
Концепция была принята клиентом. Прототип нарисован и согласован. Дизайнер даже начал рисовать.
Но внезапно производство было отложено по неизвестным мне причинам.
На КДПВ незавершенная и несогласованная, но нарисованная дизайнером одна из страниц сайта.
Послесловие
В марте 2012 года клиент снова появился с немного изменившимися задачами и под маркой холдинга «Свежий хлеб», объединивший несколько заводов. Список требований и пожеланий, преимуществ и прочая полезная информация была подготовлена менеджером после встречи. В первой итерации клиент запросил и оплатил анализ требований и концепцию, оценку стоимости и длительности этапов производства, и если все это устроит — то «живой» прототип, а за ним дальнейшее производство.
На основании документа от менеджера с информацией со встречи мной была подготовлена концепция нового сайта, отвечающего новым требованиям и решающая новые задачи.
Я думаю, что теперь могу привести этот документ полностью. В нем приводится анализ требований и пожеланий клиента, анализ сайтов, которые ему нравятся, концепция на основе анализа и список вопросов, которые надо задать клиенту на следующей встрече. Ссылку на этот файл я привожу ниже:
С тех пор, как я передал менеджеру этот документ, о судьбе проекта мне ничего неизвестно.
P.S.
Меня зовут Артем. И сейчас я ищу работу.
[email protected]
Skype: tau-home
41 комментарий
Ты можешь и намного лучше.
А вариант дизайнера вообще не понравился.
А чего закрыли сайт сейчас?
мне тоже не понравился вариант дизайнера, но дорабатывать не пришлось ввиду того, что проект внезапно прекратился, а «дизайнер» исчез.
а вариант с личным бизнесом не рассматриваешь?
Причем я не хочу уезжать отсюда. И я уверен — качественная работа, за которую ты можешь ответить, объяснить что да как и почему будет востребована и тут. И никто не заставляет ограничиваться местными заказчиками.
Хороший пример — агентство coalla.ru
Они работают в основном с заказчиками не из своей области (преимущественно Москва), они работают с оплатой специалистов по времени (!!!)
И да, они в Смоленске.
Сомнительна необходимость фильтров в каталоге продукции, они прежде всего имеют смысл на сайте магазина. Зачем нужен поиск по вакансиям и по местам продаж, когда всё это можно показать наглядно — у предприятий такого калибра не бывает огромных баз данных по этой теме, как у того же «Яндекса», под впечатлением от которого, вероятно были приняты некоторые решения в процессе прототипирования.
Зачем нужно скачивать, заполнять и загружать анкету (а можно ли её распечатать, заполнить, отсканить и отправить в виде картинки или только ворд? или там будет пдф? а если у меня нет ворда?), когда вместо этого можно показать лаконичную форму, заполняемую без лишних вопросов за минуту-другую без необходимости открывать дополнительные приложения или сканировать документы. Почему бы тут же не привести контактную информацию отдела кадров? Зачем нужна пагинация? Это же не архив блога, всякая вакансия имеет срок действия, после закрытия она удаляется.
Почему только три месяца и три года для выборки из архива новостей? А для чего нужен поиск по новостям? Так ли важны устаревшие новости на сайте хлебозавода, что им выделено столь значимое место в навигации (ведь три актуальных новости и так видны на главной странице)? А зачем вообще три отдельных поисковых формы, почему бы их не объединить (хотя лично мне представляется сомнительной необходимость использования поиска на таком сайте)? А будет ли поиск искать по леммам или найдёт только прямые вхождения? И это далеко не все вопросы, которые возникают в процессе просмотра представленной работы.
Как по мне, так этот прототип несколько оторван от реальной жизни и представляет из себя компилят удачных по мнению автора интерфейсных паттернов, заимствованных на крупных ресурсах и предлагаемых клиенту без оглядки на его потребности и реалии. По моему глубокому убеждению при реализации описанной задачи требовалось простым и очевидным образом структурировать немногочисленную информацию, вместо чего мы видим подмену цели сомнительным средством — попытку создания инструментов для самостоятельного вычленения нужной информации самими пользователями. Предложенный прототип содержит одну глобальную проектную ошибку, когда вместо погружения в предметную область и поиска конкретных решений используются популярные стереотипы не имеющие мало общего с контекстом задачи. О таком соблазне ещё в девяностых писал Нильсен в наверняка известной тебе и всем остальным книге.
Тем не менее, как справедливо сказано выше, подход действительно основательный и ты находишься на правильном пути, всё остальное придёт с опытом. Я бы со своей стороны посоветовал тебе выкинуть axure (который нужен прежде всего для крупных рабочих коллективов, а также там, где проектная часть является конечным результатом, передаваемым вместе с документацией сторонним разработчикам) и делать прототипы исключительно руками в HTML и с реальными данными. Это, с одной стороны, позволит избежать разного рода ошибок, с другой — глубже погрузит тебя в задачу, а с третьей — заставит уже на этом этапе задуматься о целесообразности того или иного решения и как дополнительный бонус — будет дополнительной практикой в быстрой вёрстке (очень полезный навык).
Клиент настаивал на том, что это важно и ссылка туда должна быть на каждой странице. Что на мой взгляд совершенно не нужно. Я предложил вариант, который всех устроил.
вероятно я забыл ее поместить также и в раздел. В любом случае в процессе производства это делается быстро и дешево.
ссылка на подробную контактную информацию рядом с краткой. не вижу противоречий
Была задача познакомить потребителя с продукцией, наименований которой сотни.
Потребителю по большому счету плевать на разделы каталога, а вот найти, например, низкокалорийные продукты, без сахара и т.д. было бы полезно.
Об объемах информации мы судить в тот момент не могли. Предложен масштабируемый функционал.
Об этом я уже написал в комментарии к слайду.
В компании, где я работал онлайн-анкетирование увеличивало стоимость проекта, а он и так был достаточно объемный, причем с ограниченным бюджетом.
Мы не знаем количества вакансий. Если их много — появляется навигация.
это не 3, а такая навигация. если нажать на предыдущий, то элемент управления сместится вправо и текущий месяц (год) станет следующим.
копеешная функциональность, за которую можно взять доп.деньги :-)
если честно, я не помню зачем это делалось. хуже не стало.
Поиск внутри раздела работает лучше и пропадает необходимость сложной сортировки результатов. К тому же поисковая строка выглядит везде одинаково и находится в одном и том же месте.
Это вопрос к создателям движка на котором работают сайты Шоубиза.
Смысл прототипов в то время в той компании был в том, чтобы показать клиенту как мы поняли его задачу, что конкретно будет на сайте, и в каком примерно виде. Клиент мог походить по ссылкам, попробовать эмуляцию каких-то функций. К тому же производство такого прототипа было очень быстрым. Это позволяло внести быстро правки до рисования сайта и не работать в убыток из-за переделок. К тому же дизайнеру оставалось только оформить прототип, хотя предложение интересных визуальных решений не возбранялось. Другое дело, что их никто особо не мог предложить.
По моему глубокому убеждению при реализации описанной задачи требовалось простым и очевидным образом структурировать немногочисленную информацию,
Заказчик зачастую плохо представляет что ему нужно и самое подробное ТЗ редко помогает ему в этом. Обычно на этапе ТЗ все замечательно. Люди бегло его читают (елси читают), подписывают и проект идет в производство. А когда страницы уже нарисованы, оказывается что хотели еще то и это, а это представляли себе не так совсем и т.д.
Прототип решает эти проблемы. Причем разночтения в ТЗ возможны, в с утвержденным прототипом не поспоришь. Хочешь что-то кардинально изменить по сравнению с прототипом — пожалуйста в следующей версии и за отдельные деньги.
Сейчас я после определения функций и разделов, стараюсь требовать у заказчика по-возможности весь контент (или его примеры) для его сайта до проектирования и рисования. Это помогает лучше разобраться в том, что
Часто клиент не понимает что ему нужно. Они хотят как у тех или у этих. Сделайте на раздел история и вопрос-ответ, потому что у всех на сайте история и FAQ. Поэтому подмена происходит гораздо раньше. И ожидаемый результат очень зависит от стереотипов заказчика. Часто что-то новое, даже более подходящее воспринимается заказчиком в штыки (поскольку не так как у всех). Ну и не стоит забывать, что при тех бюджетах и сроках в конвейерном режиме, с которыми работал Шоубиз, речи о качественном анализе не было.
Спасибо. Прототип приведен просто в качестве иллюстрации того, как проектировался указанный сайт в Шоубизе, сколько времени прошло, к чему все пришло в итоге.
Если ты открывал документ, приложенный в конце, то можешь увидеть с какими задачами пришел клиент через год, и какая концепция для их решения была предложена.
Речь шла о стереотипах автора прототипа. Ты совершенно прав, заказчик плохо себе представляет, как должен работать его сайт. И не потому, что он плохой заказчик, а потому, что он печёт хлеб, а не занимается разработками. Именно поэтому он обращается к сторонним подрядчикам, ожидая от них эффективного решения, в связи с чем увязывание серьёзных проектных ошибок с некомпетентностью заказчика выглядит признанием собственной слабости.
Если ты проводил масштабные исследования и точно знаешь, что нужно потребителю хлеба в Курске, то у тебя есть отличные исходные данные для создания хорошо структурированного полезного каталога с правильными разделами. Тем не менее, ты отказываешься от структуры и подменяешь её чем-то аморфным, неочевидным, более сложным в реализации и не несушим очевидных плюсов.
Значит, было плохое ТЗ.
Приступая к проектированию, следует изучить исходные данные для решения поставленной задачи. Проектирование неизвестно чего даёт непредсказуемый результат без практической ценности.
Проектировщик обязан знать свою технологическую базу, иначе он строит воздушные замки.
Дабы не раздувать далее этот комментарий до непомерных размеров, что может сделать дальнейшее обсуждение неудобным, сведу ответ на твои возражения по существу моих замечаний в комментарии выше к общей проблеме. Но прежде напомню задачу, которую ты обозначал в начале топика:
Мы видим в прототипе, что часть функционала (например, вакансии) выходит за рамки задачи, часть явно избыточна (поиск по карте, когда на ней и так всё видно (!), по вакансиям и т. д.), другая часть не является очевидной (навигация в новостях). Оставим в стороне популярную ошибку фанатов студии Лебедева, вслед за ней смешивающих цели и задачи и не будем далее углубляться в эффективность предложенного решения (это отдельная и довольно глубокая тема, можем обсудить лично, если интересно), и сосредоточимся на его рациональности.
Что является успешным решением задачи? Вряд ли кто-то будет спорить, что успешным решением будет не просто достижение поставленных целей, а достижение их с наименьшими затратами в наименьший срок. Если предполагать о сроках в студии-подрядчике я не могу (возможно, сайты в «Шоубизе» делаются очень быстро и в срок), но вот о стоимости предлагаемых тобой решений я вполне могу судить. И тут обнаруживается странная вещь: вместо простого сайта за несколько десятков тысяч рублей предлагается избыточная функциональность ценой в сотни тысяч под прикрытием аргументов «копеешная функциональность, за которую можно взять доп.деньги» и «предложен масштабируемый функционал».
Копейки там, копейки сям вместо простого и очевидного решения удорожают проект в разы — разве это успешное решение задачи? О какой масштабируемости можно говорить на сайте хлебозавода? Масштабируемость здесь выглядит скорее подменой понятий, чем объективной необходимостью в контексте обозначенной задачи — поисковая форма в каталоге вакансий не обеспечивает ровным счётом никакой вакансии, а всего лишь служит неоевидной заменой наглядному рубрикатору.
Я знаю тебя как увлечённого идеалиста в хорошем смысле этого слова, но в данном случае твой идеализм и склонность к стереотипному мышлению сыграли с тобой злую шутку, полностью заслонив практическую рациональность, явив результатом необоснованно дорогое и функционально избыточное решение.
Артем, ищешь работу в курске? а фриланс разве не вариант? удаленная работа на постоянных заказчиков или студии, уровень оплаты то другой, нежели в курске
одна из серьезных проблем в них — невозможность нанять хорошего исполнителя. хороший исполнитель стоит хороших денег. из-за невнятного ценообразования большинство проектов делаются студиями в убыток. и не готовы платить за хорошее исполнение.
я пробовал. в большинстве случаев нужно быть в офисе в одной из столиц.
но вы конечно правы. надо запускать собственное портфолио и искать заказчиков самостоятельно.
Кстати, если есть компании, которые находятся в Смоленске и делают круть для Москвы, то почему тебе не работать с ними удаленно, если ты делаешь все круто? Получается, хорошие исполнители, которых ты ищещь — это как раз они.
но это не совсем исполнители. они студия полного цикла.
и я уже говорил. удаленных вакансий сейчас почти нет. всем нужны люди в офис.
а на фрилансе творится черт знает что.
нашел там 6 заказов которые устраивали по оплате, трое из заказчиков — были обмануты. один оказася сам кидалой =)
поправочка, обмануты до того как обратились ко мне ^^)
Я даже не знаю, что тут можно предположить — то ли ты просишь дороже, чем стоишь на самом деле, то ли спрашиваешь не там, где надо, то ли не умеешь себя продавать. Странно всё это.
возможно дело в том что специализируюсь на cmf drupal, специалистов там не хватает, и все заказы брал на друпал.ру.
потом попалось объявление: требовался в студию удаленно друпал-ниндзя, к тому времени писал немного модули и делал простые сайты, устроился — договорились на 20тыс и 4 часа в день, правда через год оказалось что работодатель не в курсе о моих 4 часах в день =)
в какой-то момент решил что с меньшими нервами я сам могу заработать больше, клиенты находятся действительно без проблем, много студий с которыми потом можно еще долгое время сотрудничать, за 4 года меня кинули два раза на мелочь — ничего особенного, один раз возвращал аванс. и с самого начала, хоть заработок в месяц был и переменным — нижняя планка не опускалась ниже местных хороших зарплат.
в общем вернулся на фриланс, поднял почасовой рейт и стал искать, попалась студия — сделал пару модулей — так и работаем уже год, настроены сотрудничать долго, оплата почасовая, заказы масштабные интересные, доверие и здоровая обстановка. немного похвастался да.
и у меня до сих пор нет портфолио, всегда достаточно было пары ссылок на свои работы, никто никогда не усомнился в том, что это мои работы. а еще с нами в команде работает человек у которого уже 10 лет стажа на фрилансе, срок внушает уважение =)
конечно портфолио нужно если вы ориентируетесь на крупные заказы и работу по договору, но на удаленке это конкуренция, а по месту — малые деньги.
научиться делать сайты-визитки и делать темы для друпала можно за пару месяцев. верстке можно не учиться совсем, просто первое время она будет отнимать много больше времени чем потом, а так, на все кроссбраузерные косяки есть гугл.