CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.

Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3...». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.

Modernizr — это небольшая простая JavaScript-библиотека, которая поможет получить ответ на вопрос поддерживает ли браузер пользователя такие технологии как:

Мне повезло: я побывал по обе стороны баррикад и теперь знаю, что и как делает заказчик на проектах разного уровня и что делает фрилансер, чтобы получить или провалить такой проект. В итоге я уверен, что 95% фрилансеров говорят с заказчиком на разных языках.

Осторожно, butthurt.

Здравствуй Хабр!
Вот и настало время второй, и, надеюсь, долгожданной части. Настоятель рекомендую ознакомится с первой частью, ибо без этого будет тяжело понять, о чем я буду писать. В этой части я отойду от теории к практике, а именно покажу небольшое проект для комплексной оптимизации изображений.

Заказчик: основы самообороны

Общение заказчика с исполнителем — тема вечная. Уж сколько копий было сломано, сколько слов всяких нехороших сказано, а всё равно проблема жила, живёт и будет жить, как дело Ленина в умах последователей. Однако, подобные «разговоры» довольно сильно отличаются друг от друга, как, впрочем, и сами заказчики. Что же делать в каждом случае? Давайте разберёмся!

1. Незнайка или «Найди то, не знаю что»
Подобный диалог, наверное, самый распространённый и обычно включает одну-единственную фразу, полностью перечёркивающую все попытки выяснить требования: «Ну вы же разработчик / админ / программист / Всевидящее Око (нужное подчеркнуть)! Вы же лучше знаете, как должно быть!» Конечно, мы, гении, знаем всё. Но намекнуть-то можно? Тогда уже и варианты появятся, и детали уточнятся, и найдётся «то самое», от чего заказчик будет рад, а у исполнителя вырастет рейтинг да пополнится кошелёк. В противном случае всё бесполезно, «алес капут!», как говорят немецкие коллеги.

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Намба 0: Вступление

Однажды, задумчиво листая башорг, я вдруг понял, что большинство цитат довольно длинные и очень часто их просто лень читать. В наш век всеобщей спешки — на это уходит много времени. Таким образом родился новый формат: Шортики (от английского слова Short — короткий). Шортик — это короткая (из одного-двух предложений) шутка, жестко ограниченная 255 символами (чтобы не повадно было).

Как раз в этот момент я хотел подучить программирование и искал несложную задачу. Сайт я накидал довольно быстро — за пару вечеров, рассказал о нем коллегам по работе и паре знакомых в IRC, и собирался уже о нем забыть, как вдруг обнаружил, что за два дня сайт посетило 500 человек, из которых чуть ли не треть подписалась на RSS. Стало понятно, что концепция людям понравилась. Немного прилизав сайт внешне, я решился показать его Хабрасообществу — Шортики — короткие и смешные, прошу любить и жаловать.

P.S. Учитывая то, что это не совсем стартап (проект пока некоммерческий, да и «стартап» — слишком громкое слово для моей поделки), приобретенная за годы пребывания на сайте хабрасовесть не позволила мне написать нетехническую статью. Поэтому, под катом вас ждет занимательная история о том, как мы готовили Шортики к Хабраэффекту.

Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

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

Представляю вашему вниманию перевод статьи под названием "Fundamental Guidelines Of E-Commerce Checkout Design" от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.



В связи с этим событием хотелось бы представить Вам подборку 10 css3 кнопок, которые смогут облегчить вам жизнь при верстке и создании web приложений.

Скорость загрузки веб-сайтов всегда была важной темой, но стала еще более актуальной с апреля 2010 года, когда Google стал учитывать её при ранжировании сайтов в поисковой выдаче. Однако, основной уклон, как правило, делался на уменьшении размера файлов, оптимизации параметров сервера, CSS и Javascript.
Также имеет место еще один немаловажный фактор. Это скорость, с которой веб-страницы формируются на сервере. Большинство крупных современных сайтов хранит всю информацию в базах данных и используют различные языки (например, PHP или ASP) для её извлечения, формирования HTML-страницы и отправки её браузеру.

www.ilovepsd.ru — небольшой справочник по «Фотошопу» для веб-дизайнеров, но будет полезен и верстальщикам. Например, если вы занимаетесь версткой, то можете ссылаться на него, как на требования к макетам дизайнера.

Справочник призывает работать в «Фотошопе», соблюдая правила хорошего тона. Цель проекта — ускорить процесс дизайна, улучшить чтение файлов проекта и облегчить процесс верстки.

Полезные (и по делу) советы от комментирующих будут добавлены в проект. Велкам.

UP. Сделана фейсбук пейдж для желающих отписаться.

Преамбула

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

И вот, вы, принимая пост, знакомитесь с командой: вроде бы есть потенциально сильные разработчики с опытом, есть несколько подающих надежды юниоров. Но что-то сразу бросается в глаза. И чем дольше вы вглядываетесь в эти занятые работой умные лица, тем более понимаете, что перед вами не команда, а «группа разработчиков». А то, что они пишут… Вы и не думали, что программисты могут так писать код. Вы смотрите на пластилиновую архитектуру, на классы в 6000 строк кода, на методы, занимающие десять страниц машинописного текста, на кейсы, ветвящиеся как головы Лернейской гидры. И у вас появляется невольный вопрос: а можно ли что-то с такой командой сделать вообще?

И мой ответ — можно. И нужно!

Запустили в свободное плавание проект МногоЛого.ру, созданный специально для дизайнеров.

Про идею
Рабочее время должно быть оплачено. С этим не поспоришь. Но как часто бывает, на 99 вариантов логотипа (то же самое касается макетов сайтов) потрачено 2 недели, а ОДИН вариант, который выбрал заказчик, сделан за 2 часа. И, соответственно, заказчик оплатил ОДИН логотип, или 2 часа потраченного на него времени.
Что делать с остальными вариантами и потраченным временем?
Мы хотим предложить дизайнерам продать МНОГО логотипов, получить деньги за ту работу, которую дизайнеры реально сделали, за то время, которое потратили.

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

В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.

Когда графический интерфейс пользователя только появился, дизайнеры проектировали диалоговые окна используя двоичный подход: «OK» и «Отмена». Нажатие кнопки «OK» в диалоговом окне означало, что пользователь хотел, чтобы система начала действовать. Нажатие кнопки «Отмена» означало то, что пользователь хотел вернуться обратно к приложению без принятия каких-либо действий. В то время как данный подход, в прошлом, был стандартом для ОС и приложений, сегодня принят более удобный для пользователя подход к проектированию диалоговых окон.

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Прелюдия

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

В рамках данной статьи я поделюсь своим опытом проектирования сайтов средней сложности. Данный подход зарекомендовал себя понятным как разработчикам, так и клиентам. Я не собираюсь открывать Америку, представленные ниже инструменты всем прекрасно знакомы. Суть данной статьи как раз в том, что бы продемонстрировать насколько просто можно представить достаточно сложные задачи.

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



Итак…

1. Отсутствие фирменной концепции (логотипа, слогана, и т.п.).

Первое, во что упирается мой взгляд при заходе на страницу – логотип сайта и слоган под ним. И благо, если на сайтах магазинов есть хотя бы логотип. Из 50 магазинов, выданных гуглом по разным конкурентным запросам, логотипа не было у 6. Не так уж и много, но и не так уж мало.

Многие владельцы интернет-магазинов банально не понимают (лично спрашивал) – огромная часть продаж строится на бренде. У человека в голове есть ряд ячеек, заполненных брендами известных фирм. К примеру, «наушники – Koss», «операционная система – MacOS X», «газировка – Coca-Cola», и т.д. и т.п. Первоочерёдная задача фирменой концепции – заполнить ячейку «интернет-магазин — ?» вашим названием. Тогда пользователь будет возвращаться снова и снова.