Вместо вступления

Всем доброго времени суток!

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

К сожалению, одного только CSS частенько не достаточно, чтобы с легкостью оформить тот или иной элемент формы. Наверное поэтому многие используют штуки вроде Uniform для своих форм. Лично я всегда стараюсь сократить количество Javascript, используемого в подобных целях, поэтому хочу рассказать о совершенно нативном HTML+CSS методе кастомизации радио-кнопок и чекбоксов.

Уверен, что на большая часть специалистов на Хабре, применяют схожие методы, для тех же, кто использует js-библиотеки, вроде Uniform, надеюсь будет полезной эта статья.

Поехали!

Итак, сразу поставим цель: оформить чекбоксы и радио-кнопки, чтобы внешне они были похожи на js-магию Uniform, но сделать это максимально простым, нативным по отношению в HTML и CSS способом, а также избежать применения лишних тегов, сохраняя семантику. Как-то так.

Нашей компании уже 6 лет. Она была основана на принципах agile и росла на них. Мы использовали Extreme Programming с самого первого дня, добавили немного Scrum позже и в конце концов переключились на Kanban. Хочется поделиться бесценным опытом и рассказать об изменениях нашего процесса разработки за последние 4 года.

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

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

Уже больше года я работаю над интересным и неоднозначным проектом в области e-commerce. Работа над частным случаем очень глобальной задачи, а так же периодически возникающее непонимание результатов даже среди опытных профессионалов привели к мысли создать некоторое обобщение накопленных идей.

В своем обобщении я замахиваюсь ни много ни мало на определение технологии WEB 3.0! После успеха принципов WEB 2.0 было бы странно если бы шильдик 3.0 не растащили на свои определениям разнообразные визионеры. Однако, в своих попытках они нарисовали типичный «более лучший 2.0». Попытка увеличения номера версии с помощью таких эпитетов как «красивый», «профессиональный» является не более чем маркетинговой шелухой!
_{Пример такой чепухи — текущая нумерация версий Firefox. Использую я его редко, только для просмотра верстки новых версий проектов. При каждый запуске оказывается что сменилась версия и поменялись местами какие то кнопочки в меню.}

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

Мое убеждение заключается в том, что ключевой особенностью WEB 3.0 станет «трансформация контента», которая изменит не только принципы проектирования и развития web-приложений, но так же понятия копирайта, и приведет к трансформации бизнес-моделей существующих сервисов.

Уже захотелось поспорить? Тогда велком под кат!

Как превратить посетителя интернет-магазина в покупателя? Вопрос актуальный не только для небольшого сайта, но и для огромного портала с многолетней историей. Что заставляет посетителя выбрать и заказать товар именно у Вас? Юзабилити сайта, адекватная цена товара, наличие доставки и службы поддержки клиентов — наиболее важные факторы, но исходя из статистики, это далеко не все.


До 50% покупателей не завершают процесс покупки. С чем это связано, и как сделать процент завершенных платежей равным 100%- вопросы, на которые мы постараемся ответить в нашим публикациях.
Поскольку немаловажным фактором в создании привлекательного интернет-магазина является его дизайн, продавцам необходимо иметь возможность интегрировать предоставляемую систему приема онлайн-платежей с учетом дизайна всего магазина. Поэтому для продавцов важно наличие возможности вносить изменения в дизайн платежной страницы самостоятельно и в любое время. Для этого платежная система должна предусматривать возможность изменения цветовой схемы (цвет страницы, цвет текста и ссылок) либо вручную, либо с использованием CSS, возможность добавлять баннеры, логотипы, а также видео-файлы и Java Script (например, для поддержки онлайн-консультанта).

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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

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

UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design

1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

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

И снова здравствуйте!

На сколько я могу судить, мой дебютный топик о верстке рассылок был полезен большому количеству хабровчан, и в этом я хотел бы не просто привести список правил и рекомендаций, а рассказать «что? зачем? и почему?». Какие либо моменты я могу опустить, но это лишь потому, что они были четко описаны в предыдущем топике.

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

И снова рад приветствовать хабражителей!

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

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

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

Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.

Всем привет!

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

Cellspacing

Как я уже писал более года назад, стОит обнулять все отступы для таблиц, и там где нужны отступы — добавлять новые ячейки с прозрачной .gif распоркой. Я решил упростить себе задачу и поиграться с базовыми отступами для таблицы.

Задача: расположить четыре картинки в таблице — по две на каждой строке. Между картинками должен быть зазор в 10px.

Есть отличная идея! Вы стали счастливым обладателем мозгов, которые придумали совершенно новый, никем не разработанный сервис, который покорит интернет как twitter или facebook. Однако есть, что называется, две большие разницы между инновационным сервисом и успешным стартапом. Запускать любую неведомую фигню следует с приложением всей интеллектуальной мощи организма и за пределом его физических сил.

Собственно, что и как запускать, чтобы не разориться и не провалиться?

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

Update: Часть сведений в данной статье устарели. Рекомендую свежие материалы на css-live.ru.

Введение

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?

Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.

В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.

Введение

Если вы читаете эту статью, то наверняка уже слышали о преимуществах автоматизированного бизнеса. Организованная работа с сотрудниками и клиентами, повышенная эффективность рабочего процесса, увеличение прибыли… Неудивительно, что столько компаний хотят автоматизировать свой бизнес как можно скорее. Вот только не всегда удается сделать это правильно.
Ведь обычно всё происходит как? Компания приобретает специальную программу, начинает ее внедрять и сталкивается со сложностями. Например, оказывается, что сотрудники не хотят переходить на непривычную для них систему, да и организованные бизнес-процессы не так легко перенести в строгие рамки таблиц. В итоге все заканчивается тем, что систему не используют в полную силу, а то и вовсе забрасывают и возвращаются к привычному Excel.
Такие примеры заставляют руководство серьезно задуматься перед тем, как устанавливать систему в своей компании. И это к лучшему: программа действительно способна максимально учитывать требования бизнеса, но для этого их еще нужно предъявить. То есть — составить техническое задание.
На составление, как правило, уходит много времени. Нужно понять, какие именно процессы стоит автоматизировать и на что обратить внимание прежде всего. Для этого можно задействовать сотрудников, привлечь специалистов со стороны – но все равно остаться без желаемого результата. Чтобы не пропустить важные моменты и использовать программу эффективно, нужно четко определить план действий. Именно поэтому команда «Клиентская база» создала это руководство для начинающих. Если вы планируете перевести свой бизнес на современные системы, но пока не уверены, с чего начать, то все, что вам надо сделать – это ответить на вопросы, поэтапно изложенные ниже.