Блог для вебмастеров

10 шагов к потрясающему интерактивному пользовательскому интерфейсу

Блог для вебмастеров — Sun, 22 Jan 2012 10:39:26 +0000

Ирен Перейа, главный специалист по стратегиям и опыту взаимодействия дизайнерского агентства Fantasy Interactive, дает 10 полезных советов, которые помогут вам в создании потрясающего интерактивного интерфейса для пользователей

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

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

Как сделать ваш скрипт jQuery на 67% эффективнее

Блог для вебмастеров — Thu, 19 Jan 2012 11:09:37 +0000

Интересный факт: jQuery в настоящий момент используется на сайтах гораздо чаще, чем Flash.

jQuery – это удивительный инструмент, позволяющий разработчикам и дизайнерам работать с JavaScript без особых навыков . Однако, как учил нас Спайдермен, «с большой силой приходит большая ответственность». Главный недостаток jQuery в том, что несмотря на то, что он упрощает работу с JavaScript, все равно можно написать самый настоящий го#%!код. Скрипт, который будет тормозить загрузку страницы и увеличивать время отклика интерфейса, и будет запутан такими узлами спагетти, что следующему невезучему разработчику будет не обойтись без бутылки виски.

Задача становится еще сложнее для тех из нас, кто еще не переехал в волшебную сказочную страну чудес, где ни один из наших клиентов не использует для просмотра страниц Internet Explorer – скорость JavaScript движка IE сравнима со скоростью движения ледника, и не идет в сравнение с другими современными браузерами. Поэтому оптимизация производительности нашего кода становится делом еще более важным.

Введение в объектно-ориентированные CSS (OOCSS)

Блог для вебмастеров — Fri, 16 Dec 2011 19:09:01 +0000

Ниже представлен вольный перевод статьи "An Introduction To Object Oriented CSS (OOCSS)"

Слышали ли вы когда-нибудь выражение «Содержание – наше все»? Если вы веб-дизайнер, который часто занимается работой, связанной с созданием контента, – то, вероятно, слышали. Это чересчур часто используемое, но правдивое выражение о том, что именно притягивает людей на сайт.

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

К сожалению, CSS кажется обделенным вниманием в этой области, в то время как многие другие разработчики (и не без оснований) серьезно фокусируются на производительности JavaScript и многом другом.

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

Введение в верстку на базе CSS3 Flexible Box. Часть 3

Блог для вебмастеров — Fri, 16 Dec 2011 16:26:24 +0000

Вендорные префиксы и кроссбраузерная поддержка

Вас, наверное, не удивит тот факт, что Internet Explorer не поддерживает (пока) модуль flexbox. Вот как CanIUse видит нынешнее отношение браузеров к модулю:

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

Введение в верстку на базе CSS3 Flexible Box. Часть 2

Блог для вебмастеров — Thu, 15 Dec 2011 16:48:25 +0000

В этой части статьи вы узнаете:

Анимация эластичных блоков
Колонки равной высоты: приятное совпадение!
box-orient и box-direction
box-ordinal-group
box-flex-group и box-lines
box-pack и box-align