Наверное, все сталкивались с проблемой, когда в блоке фиксированной ширины нужно было поместить длинную фразу, например ссылку. В результате чего, этот блок начинал разъезжаться по ширине этой фразы, либо фраза вылезала за границу блока. Многие поступают неправильно – скрывают такой контент свойством overflow:hidden, грубо говоря, отрезается лишняя часть фразы, что делает ее нечитабельной.

“Зато не портит дизайн!”, – скажите Вы. Не нужно торопиться с использованием overflow:hidden, ведь существует такое замечательное свойство в CSS как word-wrap. Оно “обертывает” фразу в рамках ширины блока, разбивая ее на строки.

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

Эту проблему можно решить с помощью CSS и небольшого файла GIF, с анимацией загрузки. Все, что для этого нужно – задать для больших изображений фон с GIF файлом

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

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

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

В коллекцию входят такие иконки как: ультразвук, пеленальный столик, двигатель, дерматология и т.д . Иконки удобно “расфасованы” по категориям и доступны в векторном(!) формате SVG, что означает, что вы можете задать им любой размер.

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

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

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

Что показывал Google Wonder Wheel?

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

У сайта Five Simple Steps простой интуитивный дизайн с интересной особенностью: если сузить окно браузера, верхнее правое меню из обычного горизонтального превращается в выпадающее.

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

Конечно, в таком выпадающем меню легче выбрать, куда перейти, чем в обычном меню с рядом крошечных ссылок, хоть это и два клика вместо одного (кстати, …

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

HTML5 и CSS3

Говоря о тенденциях в веб-дизайне в 2011 году, нельзя не упомянуть HTML5 и CSS3. Обе технологии упрощают разработку сайтов и их интеграцию с социальными сервисами