Мы совместно с заказчиком обновили сайт болгарской компании NENCOM. Стиль сайта стал более строгим в соответствии с современными тенденциями. (Вот заметка о первой версии сайта.) Также мы добавили множество полезных фишек: поиск по сайту, иконки в меню, подробный футер со ссылками и многое другое. Далее я расскажу о каждой доработке подробнее.
▼ Читать дальше
Определить, что ваш сайт заражён вирусом, достаточно просто: как правило, вместо сайта будет открываться куча окон с рекламой, подпиской на уведомления, будет редирект с вашего сайта на другие и так далее. Причём активация заражённых сайтов может быть запланирована на выходные или праздники, когда её сложнее заметить и оперативно восстановить сайт из бекапа.
Вирус на сайт попадает через уязвимости в популярных скриптах администрирования типа adminer.php. Поэтому все подобные инструменты лучше закрывать паролем и заливать на сайт только на время использования, а после использования — удалять с сайта.
Чтобы удалить вирус, придётся пройтись заменами по базе данных, а также проверить все файлы движка сайта. У меня есть опыт удаления подобных скриптов, поэтому если у вас нет возможности откатить сайт до незаражённой версии — обращайтесь. Оплата, естественно, только по факту успешного удаления вируса.
После удаления всех вхождений вредоносного скрипта рекомендуется обновить CMS, удалить потенциально опасные сервисы с сайта и поменять все пароли, чтобы ситуация не повторилась.
safetybox.ru
Команда SAFETYBOX помогает предприятиям сохранять жизнь и здоровье своих работников, изменяя отношение к вопросам безопасности. По макетам от дизайнера сделал для них адаптивный сайт в минималистичном стиле на собственном движке.
В моей работе одним из критериев качества сайта является оценка в сервисе Page Speed Insights. Для проверки возьмём длинную страницу сделанного сайта, на которой есть слайдер фотографий, калькулятор стоимости, иконки и форма обратной связи:
Мне удалось поднять оценки данной страницы до 96 (в мобильной версии) и 100 (для десктопной версии). На практике достаточно вывести сайт в так называемую «зелёную зону» (выше 90 баллов). Но сайт safetybox.ru новый и самописный, поэтому у нас есть возможность и спортивный интерес для того, чтобы оптимизировать его до максимума.
Вы можете сами проверить эту или другие страницы данного сайта в сервисе Page Speed Insigths:
https://developers.google.com/speed/pagespeed/insights/?url=https://safetybox.ru/uslugi/e-learning/effektivnoe-sovesshanie&tab=desktop
Ваш сайт долго загружается, особенно на мобильных телефонах? Обращайтесь ко мне, если нужно оптимизировать устаревший или тяжёлый сайт.
bondarenko.show
Аккордеонисты братья Бондаренко решили обновить дизайн сайта. Новую версию по традиции заказали мне, и, как обычно, предоставили примерные эскизы того, что они хотят. Вот, что у нас получилось:
Сайт создан в ультра минималистичном стиле, но главное — полностью автоматизирован, то есть, он обновляется сам. На него загружается свежая лента из Instagram, видео из Ютуба, актуальные треки из музыкальных стриминговых сервисов.
Русский и английский языки переключаются без перезагрузки страницы.
Чтобы передать опыт и серьёзный подход Сергея Канина, сайт оформлен в строгом стиле, а материалы изложены лаконично и ясно.
Сайт представляет из себя одностраничный лендинг + несколько отдельных страниц, посвящённых тренингам. Базовые разделы сайта переключаются без перезагрузки: при нажатии на меню страница скроллится к нужному месту. В нижней части находятся два постоянных блока: форма обратной связи и отзывы клиентов.
Если сайты выглядят мелко и нечитаемо, можно настроить экранный масштаб в Винде, а в самом браузере использовать комбинацию клавиш CTRL и +, -, 0 (сброс), или колёсика мыши.
При любом изменении многие сайты размываются, становятся нечёткие. Я сам верстальщик, и поэтому очень критично к такому отношусь. Замыленные иконки и фотографии — что может быть ужаснее?
Если я вставляю на сайт иконку 100×100 пикселей, то и на экране хочу видеть точно такую же, хотя бы на время вёрстки. Уже потом я прогоню тесты и посмотрю сайт в разных браузерах и т.п.
Чтобы картинки и элементы интерфейса на сайтах не размазывались, в Фаерфоксе я первым делом ставлю галочку «Только текст»:
Меню › Вид › Масштаб › Только текст
(если меню спряталось, его можно вернуть клавишей ALT)
Теперь любые изменения масштаба коснутся только размера шрифта, а графика сайта останется чёткой. Современные сайты обладают запасом резиновости, чтобы при увеличении шрифта «ничего не поехало».
В новых версиях Фаерфокс (и не только он) научился читать системные настройки и применять их без предупреждения. У меня в Винде стоял масштаб 125%, и сайты «замылились». Вот так можно вернуть масштаб 100%:
about:config (в адресной строке)layout.css.devPixelsPerPx = 1 (по умолчанию этот параметр равен -1)
Но вместе с этим вкладки, закладки и меню в браузере тоже уменьшатся.
Чтобы не ломать глаза, системные меню и шрифты в браузере сделаем крупнее с помощью дополнения:
theme-font-size-changer
После установки его можно найти в Меню › Инструменты. Мои настройки: шрифт Segoe UI (оптимален для интерфейса), размер 19 пикселей (если установить больше, иконки и названия сайтов на вкладках «разъезжаются»).
Для таких экранов рецепт тот же, только нужно подобрать подходящие цифры. При вёрстке сайтов подойдёт, например, масштаб 2:1 — чтобы чётко понимать, что происходит с размерами блоков.
bg.nencom.com
В процессе вёрстки возник вопрос: как оптимальнее всего обозначить границы для переключения версий? К чему привязаться: к размеру экрана или к назначению устройства? В итоге привязались к назначению, исходя из этого подобрали подходящие граничные значения в пикселях.
Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».
tfmarket.ru
Минималистичный сайт для поставщика замороженных морепродуктов. Всё, что полезно заказчику, собрано на одной странице. По нажатию пункта меню страница скроллится в нужное место, а меню остаётся прибитым к верхней части.
В конце страницы (под Контактами) находится форма обратной связи.
bbondarenko.ru
Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.
Сайт занимает всю ширину и высоту на любом мониторе или планшете (на смартфоне поддерживается только горизонтальная ориентация). Пункты меню переключаются без перезагрузки страницы.
Фишка сайта — постоянный плеер в нижней части:
Замечу, что плеер включается только по желанию пользователя, а песня не прерывается при переходе в другой раздел сайта. Это классно: запустил красивую музыку и спокойно изучаешь сайт. А если открыть видео, то плеер ставится на паузу.
feralit.ru
Сайт для компании «Фералит» был сделан с целью мгновенного привлечения клиентов. Цель была достигнута. По словам заказчика, включение данного сайта в Яндекс.Директ на один день обеспечивает его заказами на несколько недель.
Секрет сайта — в его простоте. Посетитель за 3 секунды понимает, что попал именно туда, куда нужно. Это достигается за счёт крупного заголовка в верхней части сайта и полноэкранной галереи (на любом мониторе занимает всю высоту). Чуть ниже перечислены фишки компании. А дальше вариантов у посетителя немного: на странице всего четыре активные области, которые не уводят от основного экрана. Остаётся только позвонить, а по телефону гораздо проще вникнуть в задачу клиента и сделать так, чтобы он не ушёл.
Основная галерея содержит около 10 фотографий, отражающих основные виды деятельности. Дополнительные фотографии скрываются за кнопкой «Ещё».
Схему проезда мы рисовать не стали: путь слишком сложный для запоминания.
Болгарская компания NENCOM предлагает современные решения в области альтернативной энергии. Например, солнечные коллекторы, способные нагреть воду до кипения даже в зимнее время года. Подобные установки снижают потребление электричества, а в недалёком будущем позволят строить энергонезависимые дома.
Для проекта созданы логотип, сайт и визитки.
Несложный сайт продуман в мелочах. Например, видеоролики с Youtube адаптируются под любой размер экрана. В дальнейшем вёрстка была адаптирована под мобильные устройства.
nencom.com
CMS самописная, доработана с учётом пожеланий заказчика. Управление разделами, синхронизация разделов RU и BG, загрузка картинок — всё интуитивно понятно и просто в управлении.
Квадратная визитка не затеряется среди прочих:
Сирийская компания OUBARI занимается продажей и обслуживанием вязальных, вышивальных и других машин для производства тканей. Не так давно компания открыла офис в Москве, и для работы на отечественном рынке потребовалась русская версия сайта.
Международная версия сайта — oubari-group.com — довольно своеобразна и не отвечает современным требованиям, именно поэтому для России было принято решение сделать отдельный сайт.
oubari-russia.ru
Открытие сайта приурочено к ежегодной выставке, и на данный момент его основная задача — презентационная. В дальнейшем, если потребуется, сайт будет развиваться и наполняться.
Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.
Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.
huberits.ru
Сайт живо реагирует на изменение ширины окошка: меняется шрифт, меняются размеры всех блоков. Сайт увеличивается до разумных пределов, а затем остаётся посередине окна:
gpft.ru
Небольшой сайт для транспортной комании GP FreightTruck:
Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.
ekofriend.com
На сайте можно заказать красивую экологически чистую упаковку (пакеты, корзиночки, коробочки). Дизайн хорошо передаёт эко-направленность:
Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.
cs-fashion.ru
Завершил разработку миниоптового интернет-магазина cs-fashion.ru:
По различным причинам эта работа затянулась почти на год. Восхищаюсь бесконечным терпением заказчицы 😃
rainbowproduction.ru
Закончил переделку старого сайта Rainbowproduction&Co.:
Основные шаблоны нарисовала зарубежная дизайнерша, а от меня требовалось аккуратно их сверстать, перерисовав некоторые технические детали. Мои собственные движок и админка были взяты от предыдущего сайта и немного доработаны (к примеру, раньше сайт был на русском, а теперь добавилось ещё два языка).
рукодельницы.рф
Сейчас набирают популярность подарки ручной работы. Такие вещи всегда ценились, но теперь их легко заказать через интернет. Надеюсь, этот простой и уютный по дизайну интернет-магазин поможет вам найти хороший подарок:
Сайт работает на движке PHPshop — устаревшем, но зато недорогом. Для небольшого интернет-магазина вполне подходит, а недостающие функции можно дописать самому.
mk-lider.ru
vodalux.ru
На сайте представлены основные подразделения компании. Каждая кнопка слева ведёт либо на галерею, либо на нужный адрес. Галерея — это «разбросанные» фотки, которые увеличиваются при наведении.
Весь сайт — это одна страница (разделы переключаются скриптами без перезагрузки). Здесь такой ход оправдан тем, что информации на сайте почти нет.
© Дизайн не мой (я просто разверстал и использовал яву-скрипт 😃
ranforce.ru
Интернет-магазин постельного белья «Ранфорс.ру» создан на движке PHPShop. Наполняется заказчиком (были проведены многочасовые беседы по работе с этим движком и вообще с сайтом).
fnxp.ru
Простой и аккуратный семистраничный сайт-визитка:
strogi.net
Главная достопримечательность нового дизайна — это пиксельный рисунок района Строгино:
avtodeti.ru
Апдейт. Эта страница уже неактуальна, так как после оптимизации в начале 2012 года сайт заметно изменился. О том, что было сделано, напишу в отдельном посте.
С компанией «Автодети» я сотрудничаю с момента её зарождения. За 5 лет сайт повзрослел, появились новые сервисы, разделы, акции, увеличился выбор товара, и в 2010 мы провели необходимый редизайн. Были решены 3 задачи на упрощение: навигация по сайту, подача материалов и процесс выбора товара.
6433436.ru
Сайт-визитка (10 страниц) для компании «Гудвил», которая решила подчеркнуть свои услуги по обслуживанию ИП:
vishenka.info
Для строящегося дачного посёлка нужно было сделать сайт с основными функциями: фотогалерея, сообщения от администрации, реклама с комментариями, опросы, план работ по месяцам.
Простой одностраничный сайт:
gdwl.ru
Задача: переделать предыдущий сайт в более строгом стиле. Сделать более похожим на зарубежные сайты юридической тематики.
Сделал сайт по дизайну интерьеров, ремонту квартир и офисов.
invest-s.ru
Шапка сайта сделана на флеше (день-ночь, огонь в камине).
rg-hotels.ru
Компания «RG-Hotels» выполняет услуги генерального подрядчика на проектирование, дизайн, реконструкцию гостиниц, домов отдыха и пр. Для представления компании создан шестистраничный сайт-визитка:
Цветастый логотип полностью определил направление дизайна будущего сайта:
Фирма занимается производством сувенирной продукции. Сайт должен был отличаться от стандартных сайтов по сувенирке. Поэтому мы решили сделать его без прокрутки: всё находится внутри блока сайта, а сам блок подстраивается под размеры экрана.
diaclub.ru
xumuk.ru
Мой знакомый решил сделать редизайн своего сайта. За основу мы взяли красненький шестиугольник (бензол). Это эффектный символ, который удалось хорошо обыграть.
Постепенно сайт оброс полезными химическими сервисами, на которые теперь ведут кнопочки с главной страницы.
pravoteka.ru
«Правотека» полезна для практикующих юристов, консультантов, студентов, а также для тех, кто хочет получить юридическую консультацию на форуме.
Сайт продюсерского центра «PRO Production» нужно было сделать в трёх основных цветах: чёрном, белом и красном. Для усиления этого эффекта большинство картинок на сайте становятся цветными только при наведении курсора мыши.
Сайт был задуман как подарок на день рождения девушке заказчика. Все работы (в том числе сканирование и ретушь сотни фотографий) заняли 2,5 дня.
Нажимаешь на рычаг переключения скоростей — попадаешь на главную:
Это мой первый сайт, сделанный на заказ:
Входная страница со светодиодным мигающим логотипом:
Иван Титов