Авторам проекта желаю успехов и стремительного развития. Побольше интересных интервью с известными веб-разработчиками.

1) как научиться верстать как webmolot?

Чтобы научиться верстать как webmolot, нужно много верстать и делать это с удовольствием.

2) можно ли обращаться к Вам время от времени за советом по верстке?

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

3) работали ли вы у Лебедева?

Не работал.

4) Добрый день, верстаю сайт. Во всех браузерах всё хорошо, а в ie6 всё плохо. Помогите, пожалуйста, я вам заплачу и буду всем своим друзьям советовать.

Я помогаю советами по конкретным вопросам, а не исправляю ошибки других верстальщиков.

5) Хочу заказать у вас верстку. За сколько сделаете?

Сделаю за дорого! Если хотите поточнее, то присылайте макет на оценку.

6) Добрый день! Андрей, я очень начинающий новичок, поэтому не ругайте за такой вопрос пжл) … дальше много текста

Ну как я вас могу ругать? Если Вы решились написать мне, тогда Вы уже молодец! Если написали более менее внятный вопрос, еще лучше. Но давайте договоримся, прежде чем спрашивать, как выравнять картинку по центру блока, введите этот запрос в поисковике :)

7) Привет. Я директор компании X… Хочу предложить сотрудничество. Компания находится в тройке лучших студий рунета. … как правило еще на пол страницы текста о заслугах компании и о том, какие они крутые, а в конце скромно. Оцени, пожалуйста, макет на верстку. Только с учетом того, что бюджет на него ограниченный и платить мы много не сможем.”

Мне приятно работать с крутыми компаниями, потому что, как правило, у них серьезный подход к работе, красивый дизайн, хорошее ТЗ. Однако, стоимость услуг для всех заказчиков у меня одна. С постоянными заказчиками работаю без предоплаты, думаю, это лучше любой скидки.

8) Можно попросить у вас макетик потренироваться верстать.

Макеты, которые присылают мне заказчики на оценку, находятся только у меня и больше ни у кого.

9) Хочу заказать у вас создание сайта под ключ. Нужен дизайн, верстка, CMS.

Специализируюсь исключительно на верстке сайтов. Это не значит, что я не умею рисовать и интегрировать верстку с CMS. Умею и иногда делаю проекты под ключ для друзей и только для них.

10) Андрей, я верстальщик со стажем, за плечами много проектов. Хочу работать на вас, т.к. самому сложно искать заказы.

Вы по адресу, я ищу хорошего верстальщика, даже трех хороших верстальщиков. Почитайте статью на эту тему.

11) Привет! Я цепляю сайты на CMS, верстка не мой конек. Можем ли мы сотрудничать с тобой и совместно делать сайты для заказчиков.

Да, можем. Я всегда открыт для интересных предложений. Основные условия, это профессиональное исполнение своей работы и соблюдение сроков.

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

Но как ни странно, иногда эти самые неприятные баги могут приятно удивить верстальщиков, заставить их подскочить с кресла и воскликнуть: “Это не баг, это фича!”

Не все баги одинаково бесполезны

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

1. Position:fixed в ie6

Если блоку назначить свойство overflow со значением auto или scroll, а его дочернему элементу прописать position:relative, то дочерний элемент будет оставаться на месте при прокрутке родителя. А так как IE6 не поддерживает значение fixed, то этот баг можно считать отличной фичей. Есть много ситуаций, где он может быть полезен. Например, когда нужно фиксировать шапку сайта вверху страницы.

Бонус четвертого задания “Верстальщика-виртуоза”, к сожалению, так и не был никем решен, а разгадкой для его решения была эта багофича.

2. !important в ie6

В примере про футер я рассказывал про то, что IE6 живет по закону “кто последний тот и папа”, а на свойство !important он забивает.

height:auto !important; height:100%;

Такой код он поймет по своему и установит высоту в 100%, а все другие браузеры это значение проигнорируют. Существует масса других хаков для “ослика”. Но этот способ хорош тем, что он валидный. Думаю, его так же можно считать фичей.

3. Min-height в ie6

Как известно, ie6 не поддерживает min-height. Это свойство незаменимо, когда необходимо выполнение следующих условий:

• высота блока должна определяться высотой контента
• если контента мало, высота блока должна фиксироваться

Но, к счастью, у шестерки есть проблемы со свойством height, когда контент, который не вмещается в блок с заданной высотой, не выходит за границы блока, а растягивает этот блок. Поэтому можно спокойно писать height вместо min-height, и это свойство будет определять минимальную высоту в ie6. Это же правило работает в ie6 и для свойства min-width

4. Margin:auto в ie6

В ie6 нельзя выровнять блок по центру, прописав к нему margin:auto. Но, к счастью, у него есть полезная багофича со свойством text-align – это свойство работает не только для текста, но и для блоков внутри контейнера, которому задается свойство. Таким образом, задав для контейнера text-align: center, мы сможем выровнять внутренние блоки по центру контейнера.

Предлагаю обсудить другие баги браузеров, которые иногда бывают полезными для верстальщиков.

Обязательные требования:

1. Чистый HTML и CSS, никаких javascript, expression, условных комментариев и др.
2. Верстка кроссбраузеная IE5.5 +, FF2.0 +, Opear 9.0 +, Safari, Chrome
3. Валидный код HTML и CSS для Doctype HTML5, XHTML 1.0 Strict, XHTML 1.0 Transitional
4. Минимальный HTML и CSS

Какое практическое применение этого задания?

Например, для установки на сайт кнопки онлайн чата. Ее можно вынести в отдельный блок, который будет всегда на виду. Или для поддержания обратной связи с пользователями сайта, как это делают сервисы www.uservoice.com и www.reformal.ru

Чтобы всегда быть в курсе предстоящих конкурсов, подпишитесь на E-mail рассылку. Сделать это можно через специальную кнопку в блоке Подпишитесь!, который находится вверху сайдбара

Успехов! Награда ждет своего победителя!

Правила конкурса

P.S. с заданием конкурса довольно быстро справились, поэтому я добавил бонус к заданию. Думаем, решаем, виртуозничаем ;)

- Хочу заказать верстку, Вы свободны?
- К сожалению, занят :(
- А хорошего верстальщика не посоветуете?

На этот вопрос я чаще всего отвечаю: “Такого человека, за которого мог бы на 100% ручаться, нет”. После этих слов потенциальный заказчик уходит расстроенный на фриланс, и как дальше складывается его судьба я не знаю…

Ответ, который я даю – неправильный. “Отфутболить” клиента, на мой взгляд, это верх цинизма. Я решил положить этому конец и найти хороших верстальщиков в интернете, чтобы советовать их в случае необходимости. Предлагаю конкурс под названием “Верстальщик на все 100%”. По итогам конкурса я объявлю трех хороших верстальщиков, за которых смогу поручиться.

Если Вы считаете себя хорошим верстальщиком, вам нужно:

1. представиться (имя, город, возраст)
2. дать ссылку на самую лучшую вашу верстку (интересную работу, не шаблонную)
3. дать анализ своей верстки (чем она хороша, на что нужно обратить внимание)
4. дать оценку по срокам такой верстки (в часах)
5. дать оценку по стоимости такой верстки (в $)
6. привести доводы, почему я могу за вас поручиться на 100%

Ответы можно писать в комментариях или присылать на почту webmolot@gmail.com c пометкой “Верстальщик на все 100%”.

Для победителей я гарантирую по одному заказу на верстку как минимум. Но если вы хотите получать регулярные заказы от меня, необходимо так же ответить на вопрос: “Чтобы регулярно получать новые заказы от Вебмолота, я готов на…”

подсказка: Вебмолот – живой человек с определенными потребностями

Если есть люди, за которых вы можете поручиться на 100%, расскажите им об этой акции. Конкурс будет проводиться до тех пор, пока не найдутся три хороших верстальщика.

1. Twitter.com
2. Facebook.com
3. Google.com
4. Yahoo.com

1. CSS спрайт Twitter

Спрайт подключается к строчному элементу <span>, который делают блочным (display:block), чтобы задать ширину и высоту. Для каждого элемента через класс прописывается свойство background c необходимыми координатами (background-position). Спрайт сделан сеткой в виде шахматной доски с ячейками 16*16px залитыми фоном.

Плюсы:

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

Минусы:

- можно использовать только для блоков с фиксированными размерами

2. CSS спрайт Facebook

На Facebook спрайты разделяются на типы, роловеры выделяются в отдельные спрайты. На картинке три различных спрайта. Хотя, не совсем понятно необходимость третьего, т.к. на нем повторяются иконки со второго. Спрайт подключается к строчным тегам <a> <i> <span>. У элементов задана высота и ширина. Для каждого элемента через класс прописывается свойство background-image c необходимыми координатами.

Плюсы:

- спрайты разделены по типам, это позволяет загружать необходимые изображения быстрее

Минусы:

- можно использовать только для блоков с фиксированными размерами
- повторяются иконки на различных спрайтах

3. CSS спрайт Google

Спрайт подключается к строчным тегам. У элементов задана высота и ширина. Для каждого элемента через класс прописывается свойство background-image. Довольно часто координаты прописываются через инлайн-стили.

Плюсы:

- спрайт компактный

Минусы:

- можно использовать только для блоков с фиксированными размерами
- картинки размещены не по сетке, сложно расширять и поддерживать такой спрайт
- использование инлайн-стилей

4. CSS спрайт Yahoo

Спрайт Yahoo сразу сложно заметить, т.к. он очень сильно растянут по высоте. Подключается к строчным и блочным элементам. Для строчных элементов ширина устанавливается при помощи внутреннего отступа (padding). Для всех элементов через общий класс прописывается свойство background-image. Координаты прописаны через дополнительный класс для каждого отдельного элемента. За счет того, что картинки на спрайте находятся на расстоянии друг от друга, их можно применять для блоков различного размера и определять для них различные значения background-position.

Плюсы:

- можно изменять размеры блоков не меняя сам спрайт
- задается через единый класс, поэтому не надо повторять много раз в стилях одно и то же значение для свойства background-image
- строчные элементы остаются строчными, ширина для них устанавливается через внутренний отступ

Минусы:

- спрайт очень большой по размерам

Подводим итог

Можно заметить, что единой технологии нету ни у одного из “подопытных” кроликов сайтов. Каждый спрайт “заточен” под сайт с его специфическими особенностями, у каждого есть свои плюсы и минусы. Я не осмелюсь критиковать уважаемые мной сайты, но данный анализ позволяет вывести формулу, по которой нужно делать лучшие спрайты.

Лучший CSS спрайт должен:

• легко поддерживаться и расширяться
• задаваться через единый класс, чтобы не переписывать много раз свойство background-image для элементов
• иметь возможность задаваться для любого элемента не зависимо от его размеров
• находить золотую середину между весом и количеством картинок в нем. Если картинок слишком много и вес значительно увеличивается, то нужно спрайт разбивать на несколько типовых спрайтов

Своих 5 копеек:

Так же хочу отметить, что ни один из приведенных сайтов не использует один простой, но очень полезный прием. Я часто задаю спрайты не для тегов <span> <em> и <a>, как делают сайты-гиганты, а для однопиксельной прозрачной картинки. Какой в этом смысл спросите вы?

Дело в том, что картинка является строчным элементом и в тоже время для нее можно задавать необходимую высоту и ширину, чего нельзя сделать для тегов <span> <em> и <a>

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

Запустилась новая, уже третья по счету, версия сайта www.webmolot.com. Напомню, что это сервис по профессиональной верстке сайтов. Предыдущая версия, несмотря на положительные отзывы посетителей, уже изжила себя. Сайт не выполнял те задачи, которые я ставил перед ним. Хромала навигация, обратная связь, поиск, были сложности с ведением блога. Не хватало изюминки, которая делала бы сайт узнаваемым. Все это натолкнуло меня на мысли о новой версии сайта. Я решился и взялся за ее создание.

Делал сайт я достаточно долго. Постоянно возникали какие-то препятствия, которые хотели мне помешать и сбить с толку.

Все через ж…

Во-первых, арестовали крупнейшую хостинг-компанию 3FN, где находился и мой сайт. Самое неприятное в этой истории то, что у меня не было свежего бэкапа, а американская компания, которой передали все права на серверы 3FN, просила за него 2000$. Я всегда знал, что Америка – интересная страна, но не знал, что настолько. Мало того, что у меня незаконно отобрали сайт, так еще и просили за него выкуп. Деньги я решил сэкономить на мороженое и сам восстанавливал потерянные файлы. К сожалению, часть комментариев в блоге восстановить не смог.

Во-вторых, все время на пути попадались какие-то бездарные дизайнеры и обещали самый лучший дизайн, а делали самый худший. Вот за этот дизайн Янис Маркин begin_of_the_skype_highlighting     end_of_the_skype_highlighting просил 900$. Может я чего-то и не понимаю в дизайне, но эта работа явно не соответствовала главному требованию ТЗ – сделать сайт “лёгким” и “воздушным”. Второй дизайн поразил меня еще больше. Его я заказывал у Алексея Попова (к сожалению, не сохранился jpg). Он просил за свое творение 1500$. Хочу отметить, что я обращался не к студентам и готов был платить хорошие деньги. Но видимо мне не повезло, и “супердизайнеры” решили просто содрать деньжат. И у кого-то это даже получилось.

В-третьих, во время работы у меня сгорела флешка, на которой находились все мои наработки по верстке. Резервной копии не было, поэтому пришлось восстанавливать всё с нуля.

А нас рать!

Несмотря на все эти неудачи, положительных моментов в работе все равно было больше. И самое главное, что я получил удовольствие, работая над созданием новой версии.

Я понимал, что хорошего результата в работе можно добиться только тогда, когда работаешь в гармонии и в радости, поэтому не обращал внимания ни на что и двигался к своей цели.

В результате получилось то, что Вы видите сейчас. Я не претендую на лучший сайт рунета и не жду от вас комплиментов, но мне самому нравится эта версия! Сайт получился простым, понятным и функциональным. Очень надеюсь, что кто-то тоже так думает.

Что появилось нового?

• появилась возможность настраивать дизайн и структуру сайта
• использование Ajax для форм сайта
• улучшилась навигация по сайту
• английская версия
• новое большое портфолио
• расширенный социальный профиль
• блок вопрос-ответ
• появилась удобная форма заказа
• онлайн чат
• подписка на рассылку
• прокрутка постов как в Twitter
• блок с последними комментариями в сайдбаре
• возможность поделиться ссылкой на статью
• блок “Читать похожие статьи”
• возможность перелистывать статьи (предыдущая – следующая)
• кнопка “Вернуться к началу страницы”
• возможность использовать в комментариях html-теги
• удобное представление html и css кода

Так же я решил добавить кнопку “Идеи по улучшению”, она ведет на страницу, где вы можете высказывать свои замечания и идеи по улучшению сайта. Ваши советы мне очень помогут. Я уверен, что вместе мы сможем сделать сайт еще лучше! Свои мнения и вопросы пишите в комментариях.

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

Сейчас все будет по-другому. Я буду писать в блоге, буду проводить конкурсы, отвечать на ваши вопросы, дарить подарки. У меня накопилось много идей, которые не заставят вас скучать. Одним словом – Вебмолот выходит из спячки – можете так всем и передать!

1. верстка должна в точности соответствовать рисунку (пиксельная точность)
2. верстка резиновая. Левая колонка фиксированной ширины, правая – тянется
3. минимальная ширина страницы 600px
4. футер прижат к низу страницы
5. колонки растягиваются на всю высоту экрана
6. кроссбраузерность Internet Explorer 5.5 +, Mozilla Firefox 2.0 +, Opera 8.5 +, Google Chrome, Safari 3.0 +
7. валидный HTML и CSS
8. чистый HTML и CSS, без javascript, expression и др.

Успехов! Награда ждет своего победителя!

• Правила конкурса
• Первое задание конкурса
• Второе задание конкурса

Обычное состояние (кликабельно):

При наведении (кликабельно):

За основу берем правильное решение предыдущего задания (архив).
При верстке необходимо соблюдать условия:

1. верстка должна в точности соответствовать рисунку (пиксельная точность)
2. кроссбраузерность Internet Explorer 6.0 +, Mozilla Firefox 2.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +
3. валидный HTML
4. не использовать дополнительные картинки (только img.gif из предыдущего задания)
5. не использовать javascript
6. не использовать .htc файл

Успехов! Награда ждет своего победителя!

• Правила конкурса
• Первое задание конкурса