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



Предыдущие топики о SVG:

• Знакомство с SVG-графикой
• Стилизация SVG-графики
• Текст в SVG

Применение веб-шрифтов становится все популярнее: согласно HTTP Archive, за последний год число сайтов, использующих дополнительные шрифты, выросло вдвое — с 6 до 12%.

Слабым местом веб-шрифтов является производительность, однако ситуация постепенно меняется в лучшую сторону: появляются более совершенные методы сжатия, улучшается поддержка браузерами, unicode, отдельные наборы шрифтов и т.д.

Чуть больше месяца назад на Хабре проходил конкурс от интернет-издания ToWave.ru, в котором предлагалось хабраюзерам высказывать идеи, замечания и предложения по развитию проекта. Призы были интересные — три планшета Samsung Galaxy Tab 2 7.0 P3110 8Gb, два планшета Samsung Galaxy S WiFi 5.0 8Gb и полезные книжки. Я, к сожалению, заметил конкурс только спустя несколько дней после старта, и большинство полезных идей и советов было уже высказано. Но, как говорится, лучше один раз увидеть, чем сто раз прочитать.

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

В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

Создание фотогалереи для адаптивного дизайна — не самая простая задача. Следует учитывать отображение на экранах различной ширины, при этом не загружая слишком много графики на мобильных устройствах. Хорошее решение — Gamma Gallery, выглядит очень круто.



Демонстрация | Исходники

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.



Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

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



Предыдущие статьи: Знакомство с SVG-графикой и Стилизация SVG-графики

В этой статье подробно и с фотографиями описан обычно скрытый от нас процесс: исследование действий пользователей при работе с браузером. Оно проводилось для разработки новой функции Firefox — «Save for Later», которая позволяет сохранять контент для чтения или просмотра позже. Также показано немного рабочего процесса и мозгового штурма в Mozilla.

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

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

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

Большие и популярные сайты

Behance - работы лучших дизайнеров со всего мира

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

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

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



Вот его основные особенности:

В последнее время появляется все больше устройств с экранами, плотность пикселей которых очень высока: компания Apple выпустила MacBook с Retina, Google анонсировал Nexus 10 с разрешением 2560x1600 пикселей. Вместе с современными технологиями приходят новые проблемы для разработчиков сайтов. Например, на новых экранах растровые изображения смотрятся не очень хорошо, их необходимо оптимизировать под Retina. В этой подборке представлены некоторые инструменты, помогающие в этом.

Picturefill (демо), автор Scott Jehl

Делает изображения адаптивными и независимыми от разрешения экрана.

Продолжаем изучать SVG-графику, на этот раз коснемся стилизации.
Первая часть: Знакомство с SVG-графикой.



Демонстрация примеров / Скачать исходники

Изменение внешнего вида SVG-элементов аналогично HTML, с некоторыми особенностями. Например фон назначается свойством fill, а не background-color, граница — stroke вместо border. Если вы работали с Adobe Illustrator, подобная терминология будет знакома.

Это перевод заметки Криса Койера Why Ems? на css-tricks.com.



Я долгое время применял px для установки font-size, из-за чего размер шрифта не мог меняться в Internet Explorer 6-8. Переход на em имеет ряд преимуществ, и в этой статье они детально рассмотрены.

Ratchet — новый фреймворк, который позволяет быстро создавать прототипы приложений для iOS. По сути является аналогом Twitter Bootstrap для мобильных устройств.

Сайт проекта | Ratchet на GitHub | Обсуждения в Google Groups | Twitter

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

С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.

Фиксированное соотношение сторон

В этой подборке представлены уроки с наглядными примерами по созданию CSS-кнопок на любой вкус.

Fancy 3D Button with CSS3 [Демо | Подробности]