Уникальная дизайн-машина для вашего SEO сайта

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

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

Процесс рождения дизайн-машины для seo-сайта в Webmarka:

1. Создание легкого прототипа дизайна сайта с использованием технологий HTML5, AJAX и CSS, сбор дополнительных пожеланий заказчика, анализ и создание окончательной версии статического HTML5 шаблона.
2. Разработка ядра динамического дизайн-шаблона на основе выработанного прототипа с подключением к нему дизайн-фреймворка (Uikit 3, Bootstrap 4, Spectr, Bulma или другого) с поддержкой Less & SCSS (с прозрачным кешированием), режимом отладки для работы с препроцессорами CSS, с возможностью конвертирования мелких картинок в base64 на ходу, простейшим и очень удобным API для управления шаблоном, с автоопределением мобильных устройств двумя способами (media query или по заголовкам http) и возможностью включения подшаблонов (partial) и микро-шаблонов.
3. Запуск тестового альфа-сайта с тестовым динамическим шаблоном на локальном сервере студии с демо-контентом.
4. Кастомизация дизайн-фреймворка шаблона сайта под фирменные цвета компании заказчика, создание дополнительных стилей в LESS. Определение колористики сайта, окраски различных зон, цветовых пятен.
5. Разработка микро-шаблона автоматической генерации микроразметки для тегов Opengraf согласно стандартам Open Graph протокола, создание микро-шаблона автоматической генерации микроразметки application/ld+json с использованием сервисов Google и Yandex.
6. Разработка микро-шаблона автоматической генерации нужных title, keywords, description для страниц и категорий сайта с возможностью ручного проставления нужных тегов из CMS.
7. Дизайн и верстка шаблона модуля навигации по сайту для генерации микроразметки хлебных крошек на сайте по правилам Schema.org
8. Дизайн и верстка шаблона навигационного верхнего меню для сайта с типом микроразметки SiteNavigationElement, разработка дизайн-шаблонов для боковых меню.
9. Дизайн и верстка респонсивного основного нейтрального дизайн-шаблона раздела компании с вариациями стиля отображения информации. Подключение к ним микро-шаблонов генерации метатегов, а также требуемых типов микроразметки по стандартам Open Graph и application/ld+json.
10. Дизайн и верстка респонсивного дизайн-шаблона блога новостей c автоматической генерацией превью-изображений (thumbnails) с заданными размерами и качеством, с автосохранением их в заданной папке, разработка дизайна и верстка шаблона карточки новости. Подключение к ним микро-шаблонов генерации метатегов, а также требуемых типов микроразметки по стандартам Open Graph и application/ld+json.
11. Дизайн и верстка респонсивных дизайн-шаблонов блога фотогалереи и видеогалереи для материалов CMS Joomla с разработкой требуемых кастомных (дополнительных) полей (JC-Field) c автоматической генерацией превью-изображений (thumbnails) с заданными размерами и качеством, с автосохранением их в заданной папке. Подключение к ним микро-шаблонов генерации метатегов, а также требуемых типов микроразметки по стандартам Open Graph и application/ld+json.
12. Дизайн и верстка респонсивных дизайн-шаблонов требующихся по ТЗ разделов сайта (для закупок, персонала, руководства, вакансий, горячей линии, обратной связи, раздела FAQ, других) для материалов CMS Joomla с разработкой требуемых кастомных полей (JC-Field). Подключение к ним микро-шаблонов генерации метатегов, а также требуемых типов микроразметки по стандартам Open Graph и application/ld+json.
13. Создание логотипа в векторном формате svg, цветной, черно-белый, белый и прозрачный варианты логотипа и логознака. Разработка анимации для лого и других элементов сайта на главной и других страницах сайта. Разработка и добавление качественного фавикона для сайта на основе логотипа или логознака компании-заказчика для всех платформ (iOS, Android, PC, MAC и др.).
14. Создание набора декоративных векторных иконок сайта в формате svg (разработка и поиск, подбор, генерация, сжатие и адаптация), дополнительная перегенерация для спрайт-набора иконок в формате svg (js-sprite). Добавление возможности замены иконок, добавления иконок в спрайт, а также смены цветовой гаммы иконок согласно требованиям корпоративного дизайна в любой момент. Создание статического html-гайда по иконкам, для визуального выбора иконок и легкого использования их на рабочем сайте редакторами при встраивании их в материал.
15. Разработка респонсивных и уникальных по стилю интерактивных модулей для вывода избранной информации с разделов руководства, персонала, а также отдельных виджетов видеогалереи, фотогалереи для главных страниц сайта, а также, если есть необходимость, создание дополнительных слайдеров для главных и второстепенных страниц, видеохедеров (с динамическим видеофоном), языковых модулей (для мультиязыных сайтов). Создание модуля для отображения акаунтов компании в социальных сетях.
16. Выгрузка тестового бета-сайта на рабочий виртуальный сервер студии для проверки работы дизайн-шаблона и созданных расширений в рабочем режиме. Отладка производительности. Отладка генерации метатегов, микроразметки, валидация микроразметки с помощью специальных инструментов Google и Yandex. Тест быстрой загрузки сайта с помощью Google’s PageSpeed Insights. Подключение модулей для онлайн-чата, формы заказа обратного звонка, просто обратной связи, формы опроса. Интеграция (при необходимости) с CRM (AmoCRM, Bitrix 24 и других систем для управления взаимоотнощениями с клиентами).
17. Наполнение сайта рабочим контентом, верстка элементов контента.
18. Повторный тест загрузки сайта с помощью Google’s PageSpeed Insights.
19. Стараемся максимально оптимизировать все ресурсы (картинки, видео, скрипты, стили), необходимые для работы сайта. Включение, где можно, CDN для JS и CSS, чтобы ускорить сайт. Создание, сжатие и структурная минимизация критического CSS для еще большего ускорения загрузки сайта. Установка и настройка компонента защиты сайта, создание полного .htaccess, затем оптимизация .htaccess по служебным инструкциям, настройка закрытого доступа к админпанели сайта.
20. Проверка сайта закачиком (на самом деле заказчик присутствует практически на всех этапах создания дизайна и верстки шаблона). Устранение мелких недочетов, правки в коде, верстке, контенте.
21. Выгрузка готового сайта на боевой сервер хостинга. Проведение работ по окончательной настройке работы сайта. Прогон по чек-листу SEO. Подключение различных метрик и систем онлайн-статистики к сайту.
22. Финиш. Приемка сайта закачиком и успешная сдача проекта.

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