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

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

1. Размещение ключевой информации выше линии сгиба.
2. Простая навигация.
3. Динамичность.
4. Современность, уникальность, эстетическая привлекательность.
5. Быстрая загрузка.
6. Демонстративность.
7. Использование крупных заголовков.
8. Оптимизированность для поисковых систем.

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

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

В ходе редизайна сайта Westskate.ru я постаралась воплотить все принципы эффективного дизайна, используя HTML, CSS, JavaScript и jQuery, добавив лишь небольшой Flash-баннер для простой анимации.

Детали реализации

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

Задачей было уместить основной обзор в одно окно без вертикальной прокрутки, сохранив одинаковое отображение при разных разрешениях экрана (от 980px до 1980px по ширине). Для этого использовались независимые слои (div) с разными значениями z-index. «Шапка» сайта фиксируется вверху, а «подвал» — внизу.

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

Для «выезжающего» справа блока каталога (активируется кнопкой) анимация реализована через animate() в jQuery. Его ширина вычисляется динамически: bod_width = $(window).width() - 40.

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

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

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

На странице реализовано несколько динамических элементов:

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

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

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

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

Была проведена значительная работа по оптимизации:

• Сжатие изображений: Создан PHP-скрипт для пакетного уменьшения изображений товаров (с 6-7 КБ до 2-3 КБ каждое) без видимой потери качества.
• Маскировка загрузки: Вместо стандартных скриптов предзагрузки используется блок с надписью «Загрузка…» и белым фоном, который скрывает нижнюю полосу с товарами до полной загрузки всех ресурсов. После загрузки блок скрывается с помощью $(window).load(function(){}).
• Минимизация запросов: К базе данных происходит минимальное количество обращений (только для получения данных о скидках и случайных товарах).
• Оптимизация кода: Использованы сокращенные свойства в CSS, что позволило уменьшить файл стилей до ~17 КБ.
• Сжатие на стороне сервера: Через настройки .htaccess включено Gzip-сжатие для JS- и CSS-файлов. Применение PHP Gzip сжатия уменьшило размер страницы с 40 КБ до 8 КБ.

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

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

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

Крупный заголовок страницы реализован с помощью техники Image Replacement (CSS). В коде заголовок прописан в теге <h1>, что важно для SEO, а средствами JavaScript он стилизуется под особый шрифт. Это не мешает корректной индексации.

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

Поисковая оптимизация была одной из ключевых задач:

• Независимость блоков позволила расположить оптимизированные тексты с ключевыми словами (в выезжающем каталоге) в приоритетном для поисковиков порядке.
• Блок с главным заголовком <h1> выводится первым, сразу после открывающего тега <body>, что повышает его значимость в глазах поисковых систем.
• У всех изображений на странице прописаны атрибуты alt и title.
• Осознанный отказ от AJAX для контента: Несмотря на возможность сделать загрузку товаров через AJAX (для улучшения кеширования и скорости), от этого было решено отказаться. Динамически подгружаемый через AJAX контент (картинки товаров с ключевыми подписями) не индексируется поисковиками, что неприемлемо для SEO-задач.

Вместо заключения

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