Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать кегль, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

Минусы: … их вроде как нет, но!
А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

Нет!

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.

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

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

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

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

Похоже, производители браузеров в гонке за количеством внедренных черновиков – забыли, что стандарты нужно не только поддерживать, но и поддерживать правильно и одинаково.

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

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

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

Не претендую на новаторство, возможно, многие уже используют все то, что будет описано. Этот топик скорее предложение к дискуссии по поводу подготовки макетов к верстке. Думаю, обитатели хабра, особенно посещающие ветку «Веб-дизайн», в основной массе знакомы с ресурсом ilovepsd.ru. Поэтому пожелания с этого сайта, по работе с файлами, я перечислять не буду. Кто заинтересовался, прошу под хабракат.

Не так давно во всеми любимом SmashingMagazine была опубликована статья, в которой автор приводит свою теорию о 16 пикселях как размер для основного текста, и приводит доводы в её защиту. Статья вызвала довольно горячее обсуждение, и сегодня мы выкладываем её перевод.

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

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Компания Google внедрила в браузер Chrome поддержку экспериментального атрибута autocomplete type и теперь обращается с призывом ко всем веб-мастерам использовать этот атрибут в описании всех онлайновых форм. Просто добавьте его в поле input, например, для email это может выглядеть так:

<input type=”text” name=”field1” x-autocompletetype=”email” />

Таким образом, владелец сайта может гарантировать, что функция Chrome Autofill точно сработает на этом поле.



Google сейчас договаривается с другими заинтересованными сторонами, чтобы стандартизировать данный атрибут как часть спецификаций HTML5. Пока что у него экспериментальный статус, что подчёркивается приставкой x- в полном написании x-autocompletetype.

Нынешний стандарт в данной области RFC 4112 практически нигде не используется и явно нуждается в обновлении.

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

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.

Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.

Информер был навеян сбором средств Алексеем Навальным на http://rospil.info.

Я тоже добавил свою копеечку, а так как мне было интересно сколько же наберут, я постоянно обновлял сайт, чтобы проверить не написал ли Алексей отчёт, и жалел что нет информера на котором бы просто отображалась сумма.

Собственно сегодня выдалась свободная минутка, и родился вот такой информер:



Хотите такой-же? Добро пожаловать под кат.

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

История эта напоминает как минимум три разных истории сразу:

• проблему 2000 года (кто-нибудь помнит такую?),
• традиционно внезапное для ЖКХ наступление зимы в конце ноября,
• мировой финансовый кризис: все ждали, что пузыри однажды лопнут, но никто не понимал, куда и зачем в связи с этим бечь — авось как-нибудь само, too big to fail, и все такое.

Каждый дует в свою дуду (ну а в какую ж еще?)

Одни — идеологи IPv6 и производители телекоммуникационного железа, ожидающие расширения рынков, — предлагают срочно все бросить и заняться внедрением v6. Другие — среди них большинство технических экспертов — относятся к идее полного перехода на IPv6 как к бреду сумасшедших из IANA. Третьи — большинство участников индустрии, включая практически всех российских операторов — вообще не парятся (см. выше пункт про мировой финансовый кризис).

Попробую привести аргументацию каждой из групп.

Чистое SEO, которое так не любят многие профи от веба, медленно, но верно умирает. И слава богу.

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

Совсем недавно хороший знакомый рассказал свое видение того, почему со словами «продвижение» и «SEO» связан на 99% негатив со стороны разработчиков.

Получилась сказка.

Действующие лица:
Будущий владелец сайта – человек, считающий себя супер-бизнесменом и уверенный, что знает все лучше других;
Вебмастер – начинающий верстальщик-программист-дизайнер, который полагает, что установка бесплатной CMS с типовым шаблоном и закидывание на все это контента, который остался от полиграфических материалов клиента, и есть разработка сайта;
SEOшник – рубаха-парень, который прочитал пару книг по оптимизации, освоил биржу ссылок и зарегистрировался три месяца назад на форуме оптимизаторов.

Дизайнерская компания Volkside сделала подарок веб-разработчикам, выпустив бесплатный букмарклет Wirify, с помощью которого можно отобразить каркас (wireframe) любого сайта одним щелчком мыши. Полезная вещь, чтобы быстро оценить некоторые аспекты дизайна сайта: модульную систему вёрстки, визуальную иерархию, свободное пространство, симметрию, золотое сечение, правило третей и т.д.

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