воскресенье, декабря 18, 2011

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

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

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

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

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

пятница, декабря 16, 2011

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

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

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

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

Хорошая новость в том, что Internet Explorer 10 планирует присоединиться к вечеринке. Скачайте превью платформы и ознакомьтесь с некоторыми интересными примерами.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

четверг, декабря 15, 2011

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

Анимация эластичных блоков

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, декабря 14, 2011

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

Ниже представлен вольный перевод статьи “CSS3 Flexible Box Layout Explained“. Для удобства восприятия информации, я разделила публикацию на 3 части.

Модуль создания макета «резиновых» блоков – часто именуемый просто flexbox – это интересная часть проекта W3C. Спецификации flexbox по-прежнему не утверждены окончательно и периодически корректируются, так что остается ждать новостей от консорциума. Тем не менее, модуль является важной частью нового арсенала свойств, которые революционизируют сам подход к верстке. По крайней мере, он будет таковым, как только получит кросс-браузерную поддержку.

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, октября 29, 2011

10 советов по созданию качественной инфографики

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

Если вы заинтересованы в создании собственной инфографики, ознакомьтесь с содержимым данной стать. Мы рассмотрим несколько примеров и обсудим, что следует и чего не следует делать при создании убедительной и эффективной инфографики.

Создайте точку фокуса внимания

Инфографика слишком часто превращается в чересчур усложненную кашу из картинок и текста. Дизайнер может легко увлечься и создать вместо полезной конструкции нечто гнетущее.

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, октября 26, 2011

Наилучший метод разработки мобильного веб-сайта

Мы множество раз слышали, как 2011 называют годом мобильного интернета, хотя подобные заявления нам доводилось слышать не единожды и в прошлом. Технология непрестанно развивается, а вместе с ней и мобильные телефоны, называемые в наше время смартфонами. Использование ресурсов интернета растет с каждым месяцем, а мобильные телефоны и планшетные компьютеры появляются в каждой семье. 53,6 миллиона людей в Японии ежемесячно выходят в интернет с помощью мобильных устройств, приблизительно столько же выходят в интернет через PC. В Соединенных Штатах около 20 миллионов пользователей обновляют свой статус в Facebook ежемесячно, а значит число людей, активно пользующихся интернетом еще больше. Согласно различным источникам, это число превышает 100 миллионов и постоянно увеличивается. Еще 10 лет назад никто не ожидал подобного, но это именно так. А значит, все большее количество компаний желают завести собственные мобильные веб-сайты и теперь у дизайнеров гораздо больше работы.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, октября 15, 2011

Совершенствуем технику онлайн продаж. Часть 2: помогаем клиентам оформить заказ

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, октября 05, 2011

Совершенствуем технику онлайн-продаж: привлечение клиентов

В связи с 6-летием Inferno Solutions дарит подарки! Администрируемые VPS в Германии от 5$ в месяц. ISP manager + 1 месяц аренды БЕСПЛАТНО при переходе от другого хостера! Количество подарков ограничено.

Amazon отметил в этом году свое 16-летие. Именно он главным образом повлиял на развитие интернет магазинов. Как за последние 16 лет развивались интернет-магазины, так и возросли потребности и ожидания покупателей, основанные на предыдущем опыте покупок в интернете. Сейчас осуществить онлайн покупку проще простого, а вот создать магазин, который бы удовлетворял пожелания покупателей намного сложнее. 

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

Пути улучшения качества интернет-магазина.

Пути улучшения качества интернет-магазина

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

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

Рекламируйте свой интернет проект

Можно использовать комбинации различных маркетинговых приемов, и не только в интернете.  Различные сервисы, вроде Google Analytics покажут вам статистику посещений: откуда пользователи приходят на сайт.  Единственное, что не могут данные отчеты показать – это упущенные возможности. Например, сколько клиентов зашло на сайт конкурента, а не на ваш.

  • Проанализируйте свой сайт и сайты конкурентов, чтобы увидеть на какой позиции вы находитесь по сравнению с другими. Это поможет подобрать вам нужные ключевые слова и определить области для оптимизации. Личные профили пользователей помогут вам понять их цели, а так же могут быть использованы в качестве инструмента для оптимизации. Все это даст информацию о приоритетах клиента, ключевых словах и возможностях привлечения новых покупателей. У агентства Roundarch есть пример с ключевым словом persona, которое они использовали при работе над SEO оптимизацией для Avis.
  • Если ваш продукт продается на конкурентном рынке, то чтобы увеличить количество ссылок в поисковых системах,  можно покупать релевантные ключевые слова в таких сервисах как Google AdWords и Microsoft adCenter.
  • Создайте профили в бизнес порталах, таких как Google Places, Bing Business Portal и Yahoo Local: ссылки на профиль и услуги будут выделяться в результатах поиска. В дополнении к названию вашей компании можно указать свой физический адрес, номер телефона, сайт и часы работы.
  • Используйте почтовую рассылку для возвращения старых клиентов на сайт и привлечения новых. В недавнем исследовании Forrester, рассылка по электронной почте была признана как самый окупаемый и результативный метод по привлечению клиентов.
  • Создайте, вступайте или поддерживаете сообщества или группы в социальных сетях, имеющие отношение к вашей продукции. Вы должны отвечать на любые вопросы, относящиеся к нему, а также оказывать поддержку, если необходимо. Примером может послужить участие производителей Aspirin в качестве спонсоров в группе  Strong @Heart на Facebook.
  • Следуйте за вашими клиентами, опять же в социальные сети. Многие компании сейчас покупают рекламные места в Facebook, устраивают там различные акции и скидки. Тем самым серьезно увеличивая количество подписчиков в группах. С другой стороны такие компании как JCPenney и 1-800-Flowers.com, организовали в facebook что-то вроде интернет магазина, который позволяет совершать покупки не выходя из facebook.

 Главная страница интерент-магазина JCPenney's в Facebook позволяет пользователям совершать покупки

  • Используйте короткий, простой, интуитивно понятный и запоминающийся веб-адрес. Также необходимо позаботится о том, чтобы зарегистрировать домены похожие на ваш сайт и сделать редирект на главную страницу ( например walmart и wal-mart). Это поможет вашим клиентам попасть на сайт, даже если они допустят опечатку в названии.
  • Увеличивайте видимость в поисковых результатах с помощью SEO, включая выбор правильных ключевых слов и их создание, ссылки на сайты друзей. Создание названий, заголовков, тегов и содержания. SEO может быть очень полезен, если он делается правильно. Но попытка обмануть поисковые системы может работать в течение некоторого времени, но вы в конечном итоге будете наказаны, как это случилось JCPenney и Overstock .
  • Старайтесь размещать ссылку на любом видном месте: в печатной продукции, в офлайн рекламе, магазинах и тд.  Существуют QR коды для смартфонов, которые обеспечат пользователям быстрый переход на ваш сайт, без необходимости вводить длинный адрес.

Завоюйте доверие клиентов 

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

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

Форма входа на сайту Amazon.com

Такая кнопка входа  повышает доверие пользователя

  • Четко укажите вашу деловые отношения (в том числе конфиденциальность, безопасность и политика возращения), и сделать их доступными на каждой странице. Не заставляйте пользователей устраивать охоту на эту информацию, нужно представлять эти ссылки в контексте, где это необходимо.
  • Видимая контактная информация вселяет уверенность, даже если клиент не будет использовать ее. У вас должна быть отличная поддержка пользователей. Amazon, например, предлагает отличную поддержку через электронную почту, чат и горячую линию.
  • Менее известные бренды должны сделать все возможное, чтобы также завоевать доверие, показывая доверенной третьей стороной сертификаты и тд.. К ним относятся сертификаты (например TRUSTe), подтверждение безопасности (например, VeriSign), аккредитация (например, BBB) и рейтинги (например, Bizrate).

Повышаем доверие пользователя с помощью сертификатов

Повышайте узнаваемость продукта

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

  • Различные категории товаров, ориентированные на пользователя, баннеры и реклама, помогут пользователям исследовать другие области веб-сайта. Основная задача спроектировать сайт, который будет интуитивно понятен посетителю.
  • Громоздкие меню могут быть использованы для разделения нескольких категории сайта без лишних действий пользователя мышью. См. статью Econsultancy «25 E-Commerce Mega-Menus Dissected“, чтобы увидеть еще больше примеров. Однако, имейте в виду, что громоздкие меню совсем не панацея, они также требуют глубоких соображений практичности.

 OfficeMax's mega-menus

  • Навигационная цепочка позволяет клиентам определить, где они находятся на вашем сайте, помогает им вернуться на предыдущую страницу или расширить результаты поиска, если это требуется.
  • Размещайте окно поиска последовательно в том же месте, на всех страницах веб-сайта. Клиенты ожидают увидеть текстовое поле, а затем кнопку “Поиск”, как правило, в правом верхнем углу экрана.
  • Добавьте в ключевые слова для поиска разговорные синонимы и варианты неправильного написания слов. На Amazon, запрос “ITouch” выдает IPod Touch и так далее. Это удобно, если вы случайно допустили опечатку или не помните правильное название товара.
  • Помогите пользователю получить быстрый и более релевантный результат поиска. Очень удобно использовать интерактивный поиск, который предлагает клиенту возможный результат. Это исключает возможность опечаток и неточностей с названием.
  • Показывайте результаты на основе актуальности информации, но дайте пользователям опции для уточнения, фильтры, сравнения и сортировки результатов на основе различных критериев и возможность контролировать количество отображаемых результатов за один раз.
  • Показывайте краткое изложение основных характеристик продукта в результатах поиска, чтобы ускорить идентификацию и выбор. В дополнение к названию и изображению продукта, которые пользователь ожидает, вы должны предоставить цены, рейтинг, варианты доставки и другую соответствующую информацию. 

 Поиск на Amazon.com

Результаты поиска по запросу "polar bear book" на Amazon, включающий: (1) интеллектуальный поиск, опережающий ввод запроса; (2) поиск по синонимам; (3) сортировку; (4) параметры фильтров; (5) основную информацию о продукте (рейтинги, обзоры, форматы, цены, наличие).

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

понедельник, сентября 26, 2011

Черты, особенности и примеры успешных приветсвенных страниц

Сейчас, на многих сайтах присутствует форма приветствия посетителей. Эта область, обычно, появляется для новых посетителей, объясняя суть сайта и его функционал.

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, сентября 21, 2011

Изучаем CSS3: медиа запросы. Часть 2

Изучаем CSS3: медиа запросы. Часть 1.

Итак, начнем.

Подготовка страницы к принятию этих запросов в действительности ничем не отличается от вызова внешнего файла CSS. Все, что нам нужно, это добавить несколько параметров в строку HTML-кода. Хорошей идеей будет создать три отдельных CSS файла для вашего сайта, каждый из которых предназначен для какого-то одного типа устройств. Очень часто вы можете встретить подобные файлы с названиями mobile.css, tablet.css и screen.css. Давайте начнем с того, что взглянем на саму ссылку и посмотрим, как мы можем структурировать ее в строке, располагаемой в заголовке файла HTML5:

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 340px)" />

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

<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />    <link href="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" />

Ваш сайт в планшетном стиле не должен сильно отличаться от оригинальной desktop-версии. Когда речь заходит о планшетных и мобильных устройствах (к примеру, продукции Apple) вам не помешает следовать стратегии продуманного содержимого. Дело в том, что устройства Apple не визуализируют Flash-контент. Именно здесь пригодятся возможности HTML5 работать с аудио и видео. Впрочем, мы поговорим об этом в следующий раз. А пока, возможно, вам пригодится услуга it аудит.

Чем дальше в лес…

Теперь, когда вы настроили «медиа» параметры в HTML заголовке, перейдем непосредственно к сборке CSS. Первым делом начнем с планшета.

Вам не придется менять в теле CSS ничего по сравнению с существующим screen.css, но давайте взглянем на содержимое селектора в нашем tablet.css. Нам нужно изменить значение ширины контейнера на 700 пикселей так, чтобы оно совпадало с размерами медиа-запроса, написанного нами ранее для планшетника.

#container { width: 700px; margin-left: auto; margin-right: auto; }

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

#container #featured { background-image: url(image/featured-img_tablet.jpg); background- repeat: no-repeat; height: 270px; width: 680px; }

Теперь мы изменим ширину текстовой зоны, чтобы она вписывалась в размеры документа:

#container #content { padding: 20px 20px 30px 20px; width: 680px; }

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

#footer { width: 700px; padding: 10px 0 30px 0; margin-right: auto; margin-left: auto; }

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

Перевод статьи CSS3 Media Queries Tutorial: Part 1 

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, сентября 20, 2011

Изучаем CSS3: медиа запросы. Часть 1

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, сентября 17, 2011

HTML 5 и его значимость для SEO. Часть 2

HTML 5 и его значимость для SEO. Часть 2

Среди интересных особенностей HTML 5 следует также отметить легкоиндексируемые теги, которые он будет включать. Главным образом HTML 5 улучшит сегментацию страниц. Это будет осуществляться с помощью тегов верхнего и нижнего колонтитулов, а также nav-тегов. Такой подход будет очень полезен для SEO. Одним из наиболее интересных тегов является "article". Этот тег как нельзя лучше подойдет для идентификации ключевого контента, который сможет содержать обратные ссылки на различные сайты и будет весьма важен для построения системы ссылок. Улучшение сегментации страниц поможет Google и другим поисковым системам легко индексировать сайт при выполнении комплексных функций.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

пятница, сентября 16, 2011

HTML 5 и его значимость для SEO. Часть 1

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, августа 17, 2011

“Яндекс” предложил пользователям сообщать об авторском контенте

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

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

Игорь Ашманов положительно отнесся к этой новости: «Появляется такой фактор, как «карма» вебмастера. Одно дело – вебмастер, сайты которого всегда признавались оригинальными, другое дело – тот, у кого постоянные минусы в «карму», – прокомментировал он.

Сообщить Яндексу о появлении на сайте оригинального контента уже можно через новую форму в Яндекс.Вебмастере, однако эта опция доступна только сайтам с тИЦ > 0.   Загрузить можно текст от 2000 до 32 000 знаков. Однако, Яндекс не дает гарантий, что полученная заявка будет учитываться в алгоритме.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

понедельник, августа 15, 2011

CSS свойство word-wrap: решение проблемы переноса длинных слов

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

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

Вот наглядный пример:

CSS свойство word-wrap: решение проблемы переноса длинных слов

Теперь тоже самое, только с использованием свойства word-wrap: break-word;

А тут нужно поместить ну ооочень длинную ссылку: http://www.getincss.ru/go/aHR0cDovL3d3dy5wcmVsb2FkZXJrdsavGTdjf7bc7wLSIHDGUGYsufh7sssnhalojGFDRrdqrrrdr6zLm5ldC9ydS9ob3Jpem9udGFs

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

воскресенье, августа 14, 2011

“Нескучная” загрузка больших изображений на сайте

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, августа 13, 2011

Ускоряем загрузку страницы за счет сокращения HTTP запросов на PHP

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

четверг, августа 11, 2011

Британцы предпочитают использовать Chrome

Интересную статистику популярности браузеров можно было наблюдать в Великобритании  в прошлом месяце: бразуер Google Chrome обогнал знаменитый FireFox и занял второе место после завсегдатого Internet Explorer.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, августа 10, 2011

Мега-коллекция бесплатных иконок от «NounProject»

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, августа 09, 2011

Рекламу в Яндекс.Директ теперь можно оплатить множеством способов

С 3 августа у клиентов Яндекс.Директ появилась возможность оплачивать рекламные кампании множеством способов. “Яндекс” открыл широкую сеть приёма платежей за контекстную рекламу. Теперь по всей России работают тысячи терминалов, касс и банкоматов, через которые пользователи обычно пополняют счета в Яндекс.Деньгах, обрабатывают платежи и за рекламные кампании.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, августа 03, 2011

Понятие моделей контента в HTML5

Перевод статьи Understanding HTML5 Content Models

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

понедельник, августа 01, 2011

Проект Google Wonder Wheel окончальтельно прикрыт

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

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, июля 19, 2011

“Яндекс” решил ударить по карманам SEO-компаний

Осведомленный источник газеты «Ведомости» сообщил, что на этой неделе компанией «Яндекс» были “наказаны” тысячи сайтов, которые использовали нечестные способы продвижения. Санкции коснулись и клиентов крупнейших SEO-компаний: РБС, Megaseo, Perfectseo, Userator и Megaindex. Кроме того, даже сайты самих фирм резко потеряли позиции. По словам Очира Манджиков (пресс-секретарь «Яндекса»), для раскрутки этих сайтов использовалась целая сеть ботнет, иммитировавший поведение пользователей в поисковых системах с помощью набора  запросов и дальнейший переход на сайт. «Яндекс» давно предупреждал, что ничего кроме “честного” SEO не прокатит, правда иногда это даже сложнее, чем найти окрасочное оборудование для любимой машины ))

Однако, пострадавшие компании опровергают обвинения «Яндекса». Например, один из членов совета директоров РБС Михаил Райцин предполагает, что все это дело рук конкурентов и недоброжелателей, которые просто хотят навредить их клиентам. Другое мнение высказал автор проекта Userator Роман Морозов , заявив что «Яндекс» пытается хоть как-то оправдать случайность выдачи. «Яндекс» всегда пытался что-нибудь «пессимизировать», ему нужна случайность выдачи, и надо ее как-то оправдывать», – прокомментировал Морозов.

SEO-компаниям придется понести огромные убытки, чтобы возместить ущерб своим клиентам за неоправдавшееся вложение денег в продвижение их сайтов. Грубо говоря, если представить, что позиции потеряют все сайты, продвигаемые, например, РБС, то ущерб составит более сотни миллионов рублей, об этом поделился управляющий партнер компании «Ашманов и партнеры» Игорь Ашманов.

По материалам сайта www.allseo.ru

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

четверг, июля 14, 2011

Как сделать красивую кнопку с помощью CSS3

Есть у меня на блоге старая статейка о том, как сделать красивую кнопку с помощью CSS. Но современные возможности CSS3 позволяют оформить кнопку в разы симпатичнее :) Поэтому в этой статье речь пойдет о дизайне кнопки с помощью CSS3.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, июля 12, 2011

Причины, по которым пустое пространство так полезно в веб-дизайне

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

пятница, июля 08, 2011

Дилемма веб-дизайнера: красивый дизайн или объем продаж?

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

Здесь и кроется главная дилемма веб-дизайнера – следует ли концентрироваться на внешнем виде или все же на продажах?

Вот несколько советов, которые помогут вам решить дизайнерскую дилемму так, чтобы удовлетворить все запросы клиентов (и дизайн и продажи).

Сфокусируйтесь на своем клиенте и его запросах.

Дилемма веб-дизайнера: красивый дизайн или объем продаж?

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

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, июля 05, 2011

Наводнение в Пятигорске 2011. ФОТО

Фото с места событий, так сказать. Вот такая “красота” у нас во дворе, гараже, коридоре… Гудбай ремонт. Наводнение в Пятигорске 2011. ФОТО Наводнение в Пятигорске 2011. ФОТО

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

воскресенье, июля 03, 2011

Бесплатный премиум PSD шаблон World Traveler от themeforest!

Каждый месяц themeforest раздает бесплатные шаблоны. В этом месяце разработчики делятся с нами замечательным премиум PSD шаблоном World Traveler – для сайтов на тему путешествий и отдыха.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, июля 02, 2011

Уменьшаем bounce rate сайта + раздача купонов от DepositPhotos!

Для начала поясню, что такое “bounce rate” и почему нужно стремится его уменьшать.

Bounce Rate, или просто “Отказы” – величина, отражающая процентное отношение количества единичных просмотров страниц за одно посещение к общему числу посещений сайта.

Допустим, в течение дня ваш сайт посетило 2000 человек, но только 1000 из них посмотрели более 1 страницы сайта, остальные 1000 человек закрыли ваш сайт, не посетив больше ни одной страницы. Получается, что вы потеряли 50% посетителей, а может даже, ваших потенциальных покупателей? Эти 50% и есть величина отказов по сайту.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, июня 28, 2011

A/B тестирование – отличный способ увеличить конверсию сайта

Если вас не устраивает конверсия вашего сайта (и речь не только о продажах, об этом чуть ниже), то скорее всего, прежде чем тратить кругленькую сумму на рекламу, вам следует провести A/B тестирования сайта.

Что такое A/B тестирование?

A/B тестирование – это сравнение двух и более различных вариантов отображения некоторых элементов сайта, с целью определить при каком из них достигается максимальное количество поставленных целей.

В качестве цели, как правило, задается наиболее насущная “проблема”, например: покупка товара, клик по определённой кнопке, или даже переход на следующую страницу сайта.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, июня 25, 2011

10 CSS стилей для оформления блоков с уведомлениями

Британский дизайнер сайтов Paul Underwood, автор блога www.paulund.co.uk, решил поделиться набором разработанных им CSS стилей для оформления блоков с уведомлениями.

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

10 CSS стилей для оформления блоков с уведомлениями

В набор включены оформления для следующих типов блоков с уведомлениями:

- Информация
- Успешное действие
- Ошибка
- Предупреждение
- Подсказка
- О безопасности действия
- Сообщение
- Информация о файле для скачивания
- Предложение о покупке
- Сообщение о печати

Как использовать код?

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

Добавьте следующий код в страницу:

<div class="success"> <h4>Заголовок блока</h4> <p>Описание уведомления</p> </div>

Пример:

Оплата прошла успешно!

Уважаемый клиент, вы успешно оплатили выбранный вами товар “коньки детские” в нашем магазине.

Класс блока <div> соответствует типу уведомления. Все названия классов вы найдете в исходном коде в архиве.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

пятница, июня 24, 2011

Refine Edge: мощный инструмент для выделения сложных областей на фотографии

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

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

Позвольте вас обрадовать: в PS5 (Photoshop CS5) появился новый инструмент под названием Quick Selection. В нем есть очень мощный вспомогательный инструмент Refine Edges. Его использование существенно ускоряет и облегчает процесс выделения сложных объектов наподобие меха и волос.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

пятница, июня 17, 2011

WordPress или Joomla?

WordPress или Joomla?

Когда у вас появится желание создать свой собственный сайт, вы, вероятно, начнете перебирать в интернете различные «системы управления содержимым» или проще «CMS». Два наиболее популярных CMS – это WordPress и Joomla. В этой статье мы сравним эти системы, чтобы помочь вам определиться, какая из них лучше подойдет под ваши нужды.

Основное отличие между ними в том, что WordPress предназначена преимущественно для блогов, в то время как Joomla отлично подойдет для какого-нибудь портала или сообщества. Естественно существует множество совпадений между этими видами сайтов, да и с помощью плагинов можно существенно расширить функционалы систем. Плагины существуют в больших количествах, и их все можно скачать в Интернете. Кроме того, как для WordPress, так и для Joomla создано множество сообществ, в которых вы сможете получить полезные советы и узнать разные хитрости по поводу того, как эффективнее использовать выбранную вами систему. Многие хостинг провайдеры имеет бесплатную услугу по установке и поддержке этих систем, что может оказаться очень удобным. Наконец, хочется отметить, что для WordPress преобладает огромная база бесплатных плагинов от разработчиков-любителей, а для Joomla более распространены платные дополнения, созданные профессионалами.

Joomla

JoomlaНачнем с Joomla. Это хороший выбор, если вы заинтересованы в создании сообщества или портала, у которого планируются различные сетевые функции, такие как форум, чат, новостная лента, членство в различных группах или добавление внешних авторов для сайта. Joomla специально разрабатывалась для осуществления данных функций. С помощью Joomla можно легко создать навигационную панель для сайта без непосредственного ковыряния в html. Вы также без проблем, например, поставите дату истечения срока статьи, измените информацию об авторах сайта, создадите «градусник» и т.д. Другими словами Joomla дает вам огромное количество возможностей, особенно, в административной части сайта, где от количества настроек может закружиться голова. В связи с богатым функционалом, доступным в Joomla, было бы не лишним прочитать уроки или учебники по этой системе управления, чтобы знать с че�! �о на чинать.

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

WordPress

WordPressWordPress же очень дружелюбно относится к простому пользователю, и отлично подходит для ведения блога. WordPress легко устанавливается и обновляется без использования дополнительных навыков html. Для вас не составит особой сложности создать статью или страницы сайта, кроме того, с помощью плагинов, вы можете добавить к своему блогу огромное количество функций, которые являются стандартными в Joomla.

Поскольку WordPress ориентирована на людей без особых знаний HTML и CSS, то в ней присутствует интуитивно понятный интерфейс. К сожалению, также как и в Joomla, если вы захотите существенно изменить дизайн своего блога, вам придется сначала выучить css и html или нанять профессионального веб-дизайнера. Остальным остается использовать уже готовые шаблоны, в которых вы сможете поменять лишь цвет или логотип. Тем не менее, для WordPress таких шаблонов в разы больше чем для Joomla.
Короче говоря, преимущества WordPress заключаются в своей простоте и возможности адаптации системы для использования в качестве блога, в то время как преимущества Joomla заключаются в ее широких возможностях настройки и существенно возрастающим, по сравнению с WordPress, уровнем сложности.

Перевод статьи: Comparing WordPress and Joomla

P.S. Приглашаю принять участие в эстафете “Трастовый ливень!”  Вы сможете бесплатно скачать базу жирненьких трастовых сайтов!

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

вторник, июня 14, 2011

Инновационные способы упрощения форм регистрации и входа на сайт

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

Упрощаем форму регистрации

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

Попросите пользователя придумать себе логин после регистрации

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

Не просите пользователей подтвердить пароль

Не просите пользователей подтвердить пароль

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

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

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

Автозаполнение полей «Город» и «Штат» на основании почтового индекса

Автозаполнение полей «Город» и «Штат» на основании почтового индекса

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

Автозаполнение поля «Страна»

Автозаполнение поля «Страна»

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

Иными словами, пользователю онадобится ввести всего несколько букв, чтобы увидеть свою страну в списке.

Автозаполнение адреса оплаты из адреса доставки

Автозаполнение адреса оплаты из адреса доставки

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

Не подписывайте пользователя на рассылку новостей по умолчанию, а предлагайте сначала взглянуть на присылаемые новости

Не подписывайте пользователя на рассылку новостей по умолчанию, а предлагайте сначала взглянуть на присылаемые новости

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

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

Боритесь со спамом при помощи скрытых JavaScript полей вместо капчи

Боритесь со спамом при помощи скрытых JavaScript полей вместо капчи

Если вы получаете много спама, то вам нужно добавить капчу в форму регистрации. А вот что вам точно не нужно, так это терять из-за нее пользователей. Статистика показывает, что стандартная капча, которая требует от пользователей ввести искаженные символы, отрицательно влияет на конверсию. Что неудивительно, так как капча заставляет пользователей напрягаться.

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

Упрощаем форму входа на сайт

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

Вход с использованием e-mail пользователя

Вход с использованием e-mail пользователя

Запомнить свой e-mail пользователю легче, чем имя пользователя. Логин может быть не очень запоминающимся, а свой e-mail пользователи и так помнят, поскольку они постоянно пользуются почтой. Позвольте пользователям использовать e-mail для входа наряду с обычным логином. Это сэкономит их время и нервы, избавив от восстановления забытого логина.

Вход на сайт без перехода на другую страницу

Вход на сайт без перехода на другую страницу

Вход на сайт — распространенная задача, и пользователи должны иметь возможность залогиниться с любой страницы сайта. Если они залогинились, перенаправьте их обратно на ту страницу, где они находились. Это ускорит процедуру входа и позволит пользователям быстрее вернуться к своим делам на сайте.

Для этого есть пара способов: всплывающий блок (попап) и диалоговое окно.

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

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

Диалоговое окно

Автофокус на первом текстовом поле

Автофокус на первом текстовом поле

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

Отображение скрытого пароля

Отображение скрытого пароля

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

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

Используйте иконку со знаком вопроса для восстановления забытого пароля

Используйте иконку со знаком вопроса для восстановления забытого пароля

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

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

Кнопка «Войти» должна быть такой же ширины, как и текстовые поля

Кнопка «Войти» должна быть такой же ширины, как и текстовые поля

Кнопка «Войти» служит не только для входа: она также сообщает пользователям о том действии, которое они намереваются совершить. Маленькая кнопка входа неудобна и может заставить пользователей колебаться.

Широкая кнопка позволяет пользователю чувствовать себя уверенно, кроме того, ее сложно не заметить. Надпись на кнопке также более крупная, поэтому пользователю становится понятнее, что он собирается сделать.

Вход через Facebook, Twitter или OpenID

Вход через Facebook, Twitter или OpenID

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

Конечно, вы можете пойти еще дальше и добавить Facebook Connect для автозаполнения информации, которую иначе пришлось бы набирать; ниже показан пример с Friend.ly, приложения для Facebook. В нем единственное, что нужно сделать прежде, чем начать пользоваться приложением — это нажать кнопку «Зарегистрироваться». Информация о пользователе автоматически подгружается в поля, хотя это спорный момент с точки зрения конфиденциальности. Поэтому, возможно, вы не захотите использовать Facebook Connect на своем сайте.

Facebook Connect

Выводы

Формы регистрации и входа на вашем сайте не должны усложнять пользователю жизнь. Заполнять формы  вообще занятие не из приятных. Надеемся, что описанные в статье инновационные способы помогут вам упростить и усовершенствовать формы, чтобы пользователи быстрее зарегистрировались, вошли и начали получать удовольствие от пользования вашим сайтом. Если вы хотите узнать о других способах, вы можете прочесть статью Joshua Johnson 20 отличных примеров форм регистрации, у которых есть чему поучиться.

Перевод статьи “Innovative Techniques To Simplify Sign-Ups and Log-Ins

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

понедельник, июня 13, 2011

С возвращением меня, или все под “Трастовый ливень”!

С возвращением меня, или все под "Трастовый ливень"!Всем огромный привет! Я снова с вами, в строю блогеров, так сказать :) Тех, кто не в курсе, почему я перестала вести блог – вот то самое радостное событие. Эх, быстро время летит! Мой шилопопик уже совсем “большой” мальчик :) Так что, пора наверстать упущенное. Хочу снова радовать своих подписчиков полезными статьями, которые появятся уже на днях.

И вот пока за окном льет как из ведра, в голову пришла замечательная мысль как “отметить” поярче свое возвращение… Предлагаю вам принять участие в эстафете под названием “Трастовый ливень”. Думаю, сеошники уже поняли о чем речь? Идея проста, но “урожай” после ливня будет богатый, я вас уверяю :)

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

суббота, июня 11, 2011

Inferno Solutions – хостинг-компания успешных вебмастеров

Inferno Solutions – хостинг-компания успешных вебмастеров

На сегодняшний день можно с уверенностью сказать, что хостинг-компания Inferno Solutions является лидером предложений аренды VPS/VDS на XEN по соотношению цена-качество.

Почему именно XEN:
1. Надежность. Собственное ядро ОС и файловая система делает VPS/VDS на XEN значительно надежнее аналогов на OpenVZ.

2. Свобода. Полный контроль над системой, вплоть до внесения необходимых изменений в ядро ОС, полный доступ к таблицам IP-адресов, возможность поставить любую ОС.

3. Отсутствие оверселинга. Не секрет, что оверселинг у VPS/VDS на OpenVZ есть в 99% случаев. Оверселинг ресурсов в 2 раза клиент может даже не заметить, но на практике коэффициент оверселинга может достигать даже 10. Именно этим фактом и объясняется заниженная цена VPS/VDS на OpenVZ.

Важным обстоятельством воспользоваться услугами именно этого хостера является то, что Inferno Solutions может предоставить VPS/VDS и серверы практически под любые цели, в том числе и абузоустойчивые, кроме откровенного нелегала.

Фарма – VPS/VDS в Канаде . Возможны и другие страны по договоренности.

Адалт – VPS/VDS в Голландии или в США .

Варез, торент, хрумер, хрефер, парсер, дорвеи и многое другое сможет найти здесь надежный приют.

В стоимость аренды любого сервера включено:

- Перенос ресурсов от старого хостера.

- Круглосуточная поддержка в тикетах.

- Базовое администрирование. Эта услуга будет полезно как тем, кто впервые решил воспользоваться VPS/VDS и не имеет опыта в администрировании, так и тем, кому разово необходимы услуги администратора. Это реально сэкономит ваши время и деньги и защитит от, так называемых, скрытых платежей.

Бонус! В связи с запуском новой площадки в Эстонии клиенты Inferno Solutions получат скидку 50% на весь срок аренды при заказе любого VPS в Эстонии до конца июня! Промо-код: EST50

Отзывы десятков вебмастеров на http://zapili.net лишнее доказательство всего вышесказанного.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

среда, мая 04, 2011

Развитие интернета и защита от DDOS-атак

Развитие интернета и защита от DDOS-атак     По мере продвижения и развития сети интернет наиболее актуальна стала проблема обеспечения безопасности на её необъятных и безграничных просторах. На сегодняшний день, любой интернет ресурс – частная собственность лица или организации. Как и в повседневной жизни, собственность эта является средством манипуляции – эффективным инструментом для построения бизнеса. Следствие из этого – высокая конкуренция. Мошенничество и преступность в сети на сегодня переходит все разумные в пределах рамки. Ежедневно, огромное количество незаконно действующих пользователей бороздят просторы сети интернет в поисках очередной жертвы.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

четверг, апреля 28, 2011

Энциклопедия хостинга

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Новый рабочий кабинет – на балконе

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

Теперь можно работать в уединении до первых морозов, т.е. полгода можно дышать свежим воздухом )
Из планов по обустройству: повесить шторку (в полдень солнышко жарит), поставить монитор и клаву и, только что подумал, освещение какое-то замутить.
Из грандиозных планов – купить квартиру и обустроить балкон по полной программе…

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Статический вес и ссылки!

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Статический вес и ссылки!

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Новый рабочий кабинет – на балконе

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

Теперь можно работать в уединении до первых морозов, т.е. полгода можно дышать свежим воздухом )
Из планов по обустройству: повесить шторку (в полдень солнышко жарит), поставить монитор и клаву и, только что подумал, освещение какое-то замутить.
Из грандиозных планов – купить квартиру и обустроить балкон по полной программе…

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Новый рабочий кабинет – на балконе

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

Теперь можно работать в уединении до первых морозов, т.е. полгода можно дышать свежим воздухом )
Из планов по обустройству: повесить шторку (в полдень солнышко жарит), поставить монитор и клаву и, только что подумал, освещение какое-то замутить.
Из грандиозных планов – купить квартиру и обустроить балкон по полной программе…

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Поворот элементов с помощью CSS Transformations

На конец-то CSS сделал шаг вперед и теперь, для браузеров, поддерживающих CSS Transformations, стали возможными повороты элементов до 360 градусов. Давайте посмотрим на реализацию и примеры. Пример Mozilla CSS -moz-transform:rotate(120deg); Свойство CSS с приставкой -moz говорит о том, что оно работает только в браузерах Mozilla. Вы можете крутить элемент на любое количество градусов. Также, вы [...]

Похожие статьи:

  1. Рекламный щит на CSS3
  2. Создание вращающихся лучей с помощью CSS3 анимации и JavaScript
  3. Маска контента под углом на CSS


Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Поворот элементов с помощью CSS Transformations

На конец-то CSS сделал шаг вперед и теперь, для браузеров, поддерживающих CSS Transformations, стали возможными повороты элементов до 360 градусов. Давайте посмотрим на реализацию и примеры. Пример Mozilla CSS -moz-transform:rotate(120deg); Свойство CSS с приставкой -moz говорит о том, что оно работает только в браузерах Mozilla. Вы можете крутить элемент на любое количество градусов. Также, вы [...]

Похожие статьи:

  1. Рекламный щит на CSS3
  2. Создание вращающихся лучей с помощью CSS3 анимации и JavaScript
  3. Маска контента под углом на CSS


Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru