Мы совместно с заказчиком обновили сайт болгарской компании NENCOM. Стиль сайта стал более строгим в соответствии с современными тенденциями. (Вот заметка о первой версии сайта.) Также мы добавили множество полезных фишек: поиск по сайту, иконки в меню, подробный футер со ссылками и многое другое. Далее я расскажу о каждой доработке подробнее.
Меню, теги, карточка товара или статьи
Лаконичное меню сайта с крупными иконками
Выпадающий селектор тегов для фильтрации товаров или статей
Определить, что ваш сайт заражён вирусом, достаточно просто: как правило, вместо сайта будет открываться куча окон с рекламой, подпиской на уведомления, будет редирект с вашего сайта на другие и так далее. Причём активация заражённых сайтов может быть запланирована на выходные или праздники, когда её сложнее заметить и оперативно восстановить сайт из бекапа.
Вирус на сайт попадает через уязвимости в популярных скриптах администрирования типа adminer.php. Поэтому все подобные инструменты лучше закрывать паролем и заливать на сайт только на время использования, а после использования — удалять с сайта.
Чтобы удалить вирус, придётся пройтись заменами по базе данных, а также проверить все файлы движка сайта. У меня есть опыт удаления подобных скриптов, поэтому если у вас нет возможности откатить сайт до незаражённой версии — обращайтесь. Оплата, естественно, только по факту успешного удаления вируса.
После удаления всех вхождений вредоносного скрипта рекомендуется обновить CMS, удалить потенциально опасные сервисы с сайта и поменять все пароли, чтобы ситуация не повторилась.
Команда SAFETYBOX помогает предприятиям сохранять жизнь и здоровье своих работников, изменяя отношение к вопросам безопасности. По макетам от дизайнера сделал для них адаптивный сайт в минималистичном стиле на собственном движке.
Оценка сайта в Google Page Speed
В моей работе одним из критериев качества сайта является оценка в сервисе Page Speed Insights. Для проверки возьмём длинную страницу сделанного сайта, на которой есть слайдер фотографий, калькулятор стоимости, иконки и форма обратной связи:
Мне удалось поднять оценки данной страницы до 96 (в мобильной версии) и 100 (для десктопной версии). На практике достаточно вывести сайт в так называемую «зелёную зону» (выше 90 баллов). Но сайт safetybox.ru новый и самописный, поэтому у нас есть возможность и спортивный интерес для того, чтобы оптимизировать его до максимума.
Оценка сайта на телефоне
Оценка сайта на PC
Вы можете сами проверить эту или другие страницы данного сайта в сервисе Page Speed Insigths:
Аккордеонисты братья Бондаренко решили обновить дизайн сайта. Новую версию по традиции заказали мне, и, как обычно, предоставили примерные эскизы того, что они хотят. Вот, что у нас получилось:
Сайт братьев Бондаренко (на PC и на телефоне)
Сайт создан в ультра минималистичном стиле, но главное — полностью автоматизирован, то есть, он обновляется сам. На него загружается свежая лента из Instagram, видео из Ютуба, актуальные треки из музыкальных стриминговых сервисов.
Русский и английский языки переключаются без перезагрузки страницы.
Чтобы передать опыт и серьёзный подход Сергея Канина, сайт оформлен в строгом стиле, а материалы изложены лаконично и ясно.
Всё, что нужно, показано на первом экране сайта
Структура и наглядность!
Каждый тренинг показан картинкой
Сайт представляет из себя одностраничный лендинг + несколько отдельных страниц, посвящённых тренингам. Базовые разделы сайта переключаются без перезагрузки: при нажатии на меню страница скроллится к нужному месту. В нижней части находятся два постоянных блока: форма обратной связи и отзывы клиентов.
Если сайты выглядят мелко и нечитаемо, можно настроить экранный масштаб в Винде, а в самом браузере использовать комбинацию клавиш CTRL и +, -, 0 (сброс), или колёсика мыши.
При любом изменении многие сайты размываются, становятся нечёткие. Я сам верстальщик, и поэтому очень критично к такому отношусь. Замыленные иконки и фотографии — что может быть ужаснее?
Сравнение двух картинок
Если я вставляю на сайт иконку 100×100 пикселей, то и на экране хочу видеть точно такую же, хотя бы на время вёрстки. Уже потом я прогоню тесты и посмотрю сайт в разных браузерах и т.п.
Только текст
Чтобы картинки и элементы интерфейса на сайтах не размазывались, в Фаерфоксе я первым делом ставлю галочку «Только текст»:
Меню › Вид › Масштаб › Только текст
(если меню спряталось, его можно вернуть клавишей ALT)
Теперь любые изменения масштаба коснутся только размера шрифта, а графика сайта останется чёткой. Современные сайты обладают запасом резиновости, чтобы при увеличении шрифта «ничего не поехало».
Отменить системное масштабирование
В новых версиях Фаерфокс (и не только он) научился читать системные настройки и применять их без предупреждения. У меня в Винде стоял масштаб 125%, и сайты «замылились». Вот так можно вернуть масштаб 100%:
about:config (в адресной строке) layout.css.devPixelsPerPx = 1 (по умолчанию этот параметр равен -1)
Но вместе с этим вкладки, закладки и меню в браузере тоже уменьшатся.
Увеличить интерфейс (вкладки, меню)
Чтобы не ломать глаза, системные меню и шрифты в браузере сделаем крупнее с помощью дополнения:
После установки его можно найти в Меню › Инструменты. Мои настройки: шрифт Segoe UI (оптимален для интерфейса), размер 19 пикселей (если установить больше, иконки и названия сайтов на вкладках «разъезжаются»).
Экраны с высоким DPI
Для таких экранов рецепт тот же, только нужно подобрать подходящие цифры. При вёрстке сайтов подойдёт, например, масштаб 2:1 — чтобы чётко понимать, что происходит с размерами блоков.
В процессе вёрстки возник вопрос: как оптимальнее всего обозначить границы для переключения версий? К чему привязаться: к размеру экрана или к назначению устройства? В итоге привязались к назначению, исходя из этого подобрали подходящие граничные значения в пикселях.
Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».
Минималистичный сайт для поставщика замороженных морепродуктов. Всё, что полезно заказчику, собрано на одной странице. По нажатию пункта меню страница скроллится в нужное место, а меню остаётся прибитым к верхней части.
О нас
Продукция
В конце страницы (под Контактами) находится форма обратной связи.
Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.
Главная страница: большая фотка и предложение запустить демо-ролик
Новости: отмечается время и телеканал выступления
Фотогалерея: превьюшки занимают всю высоту
На сером фоне нотки: приятная мелочь
Видео: превьюшки занимают всю ширину
Биография: здесь намёк на журнал
Контакты оформлены очень скромно 😃
Сайт занимает всю ширину и высоту на любом мониторе или планшете (на смартфоне поддерживается только горизонтальная ориентация). Пункты меню переключаются без перезагрузки страницы.
Фишка сайта — постоянный плеер в нижней части:
Плеер работает на любом устройстве
Замечу, что плеер включается только по желанию пользователя, а песня не прерывается при переходе в другой раздел сайта. Это классно: запустил красивую музыку и спокойно изучаешь сайт. А если открыть видео, то плеер ставится на паузу.
Сайт для компании «Фералит» был сделан с целью мгновенного привлечения клиентов. Цель была достигнута. По словам заказчика, включение данного сайта в Яндекс.Директ на один день обеспечивает его заказами на несколько недель.
Главная и единственная страница
Секрет сайта — в его простоте. Посетитель за 3 секунды понимает, что попал именно туда, куда нужно. Это достигается за счёт крупного заголовка в верхней части сайта и полноэкранной галереи (на любом мониторе занимает всю высоту). Чуть ниже перечислены фишки компании. А дальше вариантов у посетителя немного: на странице всего четыре активные области, которые не уводят от основного экрана. Остаётся только позвонить, а по телефону гораздо проще вникнуть в задачу клиента и сделать так, чтобы он не ушёл.
Основная галерея содержит около 10 фотографий, отражающих основные виды деятельности. Дополнительные фотографии скрываются за кнопкой «Ещё».
Кликабельные области сайта
Дополнительные фотки во всплывающем окне
Схема проезда во всплывающем окне
Схему проезда мы рисовать не стали: путь слишком сложный для запоминания.
Болгарская компания NENCOM предлагает современные решения в области альтернативной энергии. Например, солнечные коллекторы, способные нагреть воду до кипения даже в зимнее время года. Подобные установки снижают потребление электричества, а в недалёком будущем позволят строить энергонезависимые дома.
Для проекта созданы логотип, сайт и визитки.
Логотип
Логотип намекает на высокие технологии
Брендированный автомобиль
Сайт
Несложный сайт продуман в мелочах. Например, видеоролики с Youtube адаптируются под любой размер экрана. В дальнейшем вёрстка была адаптирована под мобильные устройства.
CMS самописная, доработана с учётом пожеланий заказчика. Управление разделами, синхронизация разделов RU и BG, загрузка картинок — всё интуитивно понятно и просто в управлении.
Сирийская компания OUBARI занимается продажей и обслуживанием вязальных, вышивальных и других машин для производства тканей. Не так давно компания открыла офис в Москве, и для работы на отечественном рынке потребовалась русская версия сайта.
Международная версия сайта — oubari-group.com — довольно своеобразна и не отвечает современным требованиям, именно поэтому для России было принято решение сделать отдельный сайт.
oubari-russia.ru
Главная страница
Открытие сайта приурочено к ежегодной выставке, и на данный момент его основная задача — презентационная. В дальнейшем, если потребуется, сайт будет развиваться и наполняться.
Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.
Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.
Сайт живо реагирует на изменение ширины окошка: меняется шрифт, меняются размеры всех блоков. Сайт увеличивается до разумных пределов, а затем остаётся посередине окна:
Небольшой сайт для транспортной комании GP FreightTruck:
Главная страница сайта
Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.
Закончил переделку старого сайта Rainbowproduction&Co.:
Главная страница Rainbowproduction.ru
Основные шаблоны нарисовала зарубежная дизайнерша, а от меня требовалось аккуратно их сверстать, перерисовав некоторые технические детали. Мои собственные движок и админка были взяты от предыдущего сайта и немного доработаны (к примеру, раньше сайт был на русском, а теперь добавилось ещё два языка).
Сейчас набирают популярность подарки ручной работы. Такие вещи всегда ценились, но теперь их легко заказать через интернет. Надеюсь, этот простой и уютный по дизайну интернет-магазин поможет вам найти хороший подарок:
Главная страница
Сайт работает на движке PHPshop — устаревшем, но зато недорогом. Для небольшого интернет-магазина вполне подходит, а недостающие функции можно дописать самому.
На сайте представлены основные подразделения компании. Каждая кнопка слева ведёт либо на галерею, либо на нужный адрес. Галерея — это «разбросанные» фотки, которые увеличиваются при наведении.
Интернет-магазин постельного белья «Ранфорс.ру» создан на движке PHPShop. Наполняется заказчиком (были проведены многочасовые беседы по работе с этим движком и вообще с сайтом).
Апдейт. Эта страница уже неактуальна, так как после оптимизации в начале 2012 года сайт заметно изменился. О том, что было сделано, напишу в отдельном посте.
С компанией «Автодети» я сотрудничаю с момента её зарождения. За 5 лет сайт повзрослел, появились новые сервисы, разделы, акции, увеличился выбор товара, и в 2010 мы провели необходимый редизайн. Были решены 3 задачи на упрощение: навигация по сайту, подача материалов и процесс выбора товара.
Для строящегося дачного посёлка нужно было сделать сайт с основными функциями: фотогалерея, сообщения от администрации, реклама с комментариями, опросы, план работ по месяцам.
Компания «RG-Hotels» выполняет услуги генерального подрядчика на проектирование, дизайн, реконструкцию гостиниц, домов отдыха и пр. Для представления компании создан шестистраничный сайт-визитка:
На главной — приветственный текст и компании-партнёры
Фирма занимается производством сувенирной продукции. Сайт должен был отличаться от стандартных сайтов по сувенирке. Поэтому мы решили сделать его без прокрутки: всё находится внутри блока сайта, а сам блок подстраивается под размеры экрана.
Мой знакомый решил сделать редизайн своего сайта. За основу мы взяли красненький шестиугольник (бензол). Это эффектный символ, который удалось хорошо обыграть.
Постепенно сайт оброс полезными химическими сервисами, на которые теперь ведут кнопочки с главной страницы.
Сайт продюсерского центра «PRO Production» нужно было сделать в трёх основных цветах: чёрном, белом и красном. Для усиления этого эффекта большинство картинок на сайте становятся цветными только при наведении курсора мыши.