Колор-Код, Маркетинг-Код, Райтинг-Код

Эффективный веб-дизайн — от теории к практике, — или Эмуляция Flash средствами HTML, JS, JQuery

К эффективному веб-дизайну принято относить следующий перечень требований:

  • Все самое главное — до линии сгиба *
  • Простая навигация
  • Динамичность
  • Современность, уникальность, эстетическая привлекательность
  • Быстрая загрузка
  • Демонстративность
  • Большие заголовки
  • Оптимизированность для поисковых систем

————————

* Хотя здесь «бабка на двое сказала». Последние исследования показали, что пользователям совершенно комфортно листать страницу, используя полосу прокрутки, подробнее здесь и здесь (русский вариант). Тем не менее, страница, умещающаяся в одно «окно», является более предпочтительной.

Большей части этих требований отвечает популярная технология Flash, с которой легко достигаются динамичные эффекты, эстетическая привлекательность и демонстративность. Однако она совершенно не читается поисковиками, а ее «вес» заставляет забыть о скорости загрузки. Часто два этих пункта становятся убийцами успешности сайта.

Я попыталась воплотить все требования эффективного веб-дизайна (редизайн сайта Westskate.ru) на основе HTML (+CSS), JavaScripts и JQuery, с использованием маленького flash-баннера в качестве элементарной анимации.

Редизайн сайта Westskate.ru

Эффективный веб-дизайн

Все самое главное — до линии сгиба

 

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

Понятно, что при слишком маленьких разрешениях, блоки сайта будут «наезжать друг на друга». Моими ориентирами был спектр от 980px до 1980px по ширине.

Уменьшение / увеличение не обошло и основное изображение, расположенное по центру справа — я использовала картинку, по исходным размерам отвечающую просмотру при максимальном разрешении. Это важно, т.к. иначе, при увеличении она теряла бы качество. Для того, чтобы сделать ее «гибкой» и сжимать в зависимости от размера экрана, я указала в параметрах ее высоты процентное соотношение. То же было сделано для отступа от правого края («margin-right:7%»).

С «выезжающим» блоком справа («выезжает» при нажатии на вертикальную красную кнопку «Каталог») я поступила иначе. Для анимации движения я пользовалась «animate» (JQuery) — а ширина этого блока определяется по вычислению: размер экрана с вычитанием 40px отступа слева ( bod_width = $(window).width() — 40;). Собственно, на эту ширину оно и должно «выезжать».

Простая и наглядная навигация

Эффективный веб-дизайн
Эффективный веб-дизайн

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

Динамичность

На странице включено несколько динамичных элементов: прокручивающиеся при наведении товары в нижней полосе (при этом, товары каждый раз случайные — всегда новые при каждом обновлении страницы); выезжающий справа полупрозразразрачный блок при нажатии на вертикальную красную кнопку «Каталог»; маленький flash-баннер с элементарной рекламной анимацией; открывающиеся окошки мини-чата, скидок и полной навигации («Мой Westskate») — при нажатии на соответствующие кнопки над полосой прокрутки продукции.

Современность, уникальность и эстетическая привлекательность

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

Быстрая загрузка

С этим дело обстояло сложно. Ведь, по идее, я должна была использовать массу картинок товаров (для линейки продукции), а сами по себе даже мини-изображения, в сумме, весили достаточно много. Для их уменьшения (до совсем маленьких размеров — 85px по ширине — которые и используются в прокрутке), мне понадобилось создать php-скрипт, который взял бы все изображения из каталога и скопом уменьшил их в отдельную папку. Таким образом, из исходных 6-7 КБ за картинку, я получила 2-3 КБ соответственно. Конечно, можно было выиграть еще больше (с потерей качества), но на качестве я экономить не хотела.

Предзагрузка изображений.

Скрипты для предзагрузки изображений (JavaScripts, JQuery) и т.д. часто используют скрытую загрузку и установку кэша на картинки. Это значит, что картинки все равно подгружаются (весят не меньше и по времени берут не меньше), просто процесс маскируется. Зачем вообще «предзагрузка изображений»? Для того, чтобы убрать неприглядность загрузки каждой отдельной картинки по одиночке. Вместо скрипта предзагрузки я решила маскировать это иным способом: одно из первых, что делается на странице при ее загрузке — это блок с белым фоном и надписью «Загрузка…» — он то и заслоняет полосу изображений, пока страница грузится. После полной прогрузки страницы (вместе с изображениями), блок убирается по команде JQuery: $(window).load(function(){}).

Прочее

На странице я использовала минимум запросов к БД (только скидки и случайные товары). Использование сокращенных символик в CSS (чем пользуюсь всегда) и небольшая оптимизация позволили иметь сравнительно небольшой файл стилей (~17 КБ).

Сжатие

В .htaccess файле я использую сжатие для JS и CSS. Подробнее о сжатии читайте мою статью

Быстрый сайт, или Как тяжелые и неповоротливые слоны становятся легкими и ловкими гепардами

PHP Gzip сжатие позволило сократить размер php страницы с 40 до 8 КБ:

Original Size: 40.22 KB
Gzipped Size: 7.92 KB

Демонстративность

Демонстративность, или «товар лицом», достигается, в основном, демонстрацией случайных товаров в линейке продукции, и подкрепляется заметным заголовком и крупными иконками разделов каталога в центре страницы. Таким образом, делается все, чтобы привлечь внимание покупателя непосредственно к каталогу и выбору, вместо кучи текста или красивых рекламно-плакатных маневров.

Большие заголовки

Как мы видим, на странице используется крупный заголовок. Он выполнен с участием техники Image Replacement (JS+CSS, замена текста картинкой), т.к. в заголовке особый шрифт. Стоит отметить, что данный способ совершенно не мешает индексации поисковика. В коде страницы написан тот же заголовок (с максимально ранжируемым тегом h1) с теми же словами. Его преобразование происходит средствами JS в качестве оформления.

Оптимизированность для поисковых систем

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

Оптимизированными для поисковых машин являются все картинки на странице — у всех прописаны атрибуты ALT и TITLE. Открою небольшой секрет. Когда я работала с веб-дизайном, передо мной стоял выбор. На самом деле, я могла бы подгружать линейку товаров динамически — средствами AJAX. Я бы могла перевести на AJAX все запросы к БД (тем более, что они минимальны), а для страницы использовать расширение html вместо php. За счет этого, я могла бы создать идеальное кеширование, что, при повторном заходе, могло бы открывать страницу значительно быстрее. Вместе с тем, такой способ убрал бы из индексации картинки линейки товаров (т.е., то, что подгружалось бы AJAX), а это обстоятельство меня не устраивало, т.к. в подписях картинок используются ключевики.

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

Этот материал опубликован в Колор-Код, Маркетинг-Код, Райтинг-Код и тегирован , , , , . Bookmark the permalink.

2 отзывов на Эффективный веб-дизайн — от теории к практике, — или Эмуляция Flash средствами HTML, JS, JQuery

  1. Алексей говорит:

    Все здорово и замечательно!

    Но есть пожелание — уберите атрибут title с картинок-иконок товаров. При наведении у вас появляется описание и когда курсор на картинке описание из title перекрывает и картинку и описание — выглядит нехорошо.

    И по поводу сжатия: раз уже сжимать скрипты и CSS, то идти до конца :) и картинки объединять в спрайты.

    • N.Volodina говорит:

      title, возможно, уберу, хотя они играют некоторую роль для поисков, подкрепляя alt)) CSS спрайты активно пользую везде, в т.ч. и там))но с CSS спрайтами тоже есть одна тонкость. как бы они ни были хороши и рациональны, однако, если мы разместим ВСЕ картинки (интерфейс-картинки) в один файл и он получится слишком большим, в итоге мы можем получить больше нагрузку на сервер и больше тормозов сайта соответвственно. Поэтому вместо слишком большого одного CSS спрайта лучше разбить его на 2-3-4. Кроме того, в таких разделённых CSS спрайтах мы получим и лучше качество в связи с обработкой цветовой палитры (png и gif), и суммарный размер (тяжёлость) таких файлов окажется меньше, чем одного громоздкого, где понамешано всё без разбору. Соответственно, в каждом отдельном случае нужно смотреть и проверять, что рациональнее ставить. А для поисковиков, к примеру, в ряде случаев лучше ставить всё же картинки. Так что, палка не столько о двух, а о трёх, и более концах..)
      Спасибо большое за отзыв)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>