Блог фрилансера - сайты под ключ

адаптивный дизайн

Перерыв в работе


Новости

адаптивный дизайнПоследние 3 с лишним месяца времени на записи в блоге совсем не было. Как и у любого фрилансера, с заказами то густо то пусто. Так вот пока блог не обновлялся, было очень густо. Были и полноценные заказы на сайт с нуля, а были и мелкие заказы на доделки, доработки. Половина заказов была связанна с адаптивным дизайном. Переделка старого не адаптивного дизайна с сохранением всех элементов и структуры и создание нового, с нуля. Адаптивный дизайн сейчас очень востребованная фишка для многих заказчиков. Некоторые мои работы я уже разместил в своём портфолио.

Далее...

Перенос сайта на Danneo CMS + адаптивный дизайн

Для сайта строительной компании Мети-Март был заказан новый дизайн с учётом последних требований поисковой системы Google – адаптивность. Я, в свою очередь порекомендовал перенести сайт на последнюю версию Даннео, с чем заказчик согласился. Для наглядности мне были даны ссылки на несколько сайтов по которым нужно было равняться в плане различных визуальных эффектов и структуры дизайна.

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

Прежний дизайн
Скриншот сайта

Новый дизайн
Скриншот сайта

Были использованы стандартные моды из коробки с небольшими доделками, в том числе был заменён стандартный вывод блока социальных кнопок на блок Поделиться от Яндекса. Был изменён стандартный вывод фотографий из фотогалереи, для главной страницы использовался сторонний скрипт вывода слайдов с описанием и скрипт на jquery для эффекта смены фона при наведении на фото выводимых плиткой в основной части главной страницы.

Прямая ссылка на сайт - МетиМарт

Адаптивный дизайн ИМ Sherif-Karter

скриншот ИМИнтернет магазин Шериф Картер, занимающийся продажей автозапчастей и сопутствующих товаров, работает на самописной CMS использующей фреймворк CORE 2. С подобной CMS я уже имел дело в предыдущей работе над сайтом chef16.ru .

Кроме адаптивного дизайна нужно было ещё поменять некоторые значки в интерфейсе пользователя на надписи. А когда работаешь с самописной CMS, бывает очень сложно найти что откуда и как выводится. Некоторые вещи, показываемые в браузере, в коде страницы не видны. Приходится перебирать все файлы которые хоть как то по логике, могут формировать вывод контента.

Ну а что у меня получилось можно посмотреть по прямой ссылке - Sherif-Karter (желательно с мобильного устройства) или можете проверить в Гугле мобильность сайта.

Доработка дизайна и техподдержка

сайт строительной фирмыНа сайте предлагающем услуги по строительству домов и коттеджей была проделана следующая работа –
1. Оптимизация html кода шаблона сайта.
2. СЕО оптимизация сайта
3. СЕО оптимизация текстов
4. Доработка блоков вывода видеороликов
5. Доработка адаптивности шаблона
6. Оптимизация скорости загрузки сайта.
7. Усиление защиты от взлома сайта.

Сайт работает на CMS Джомла 3 ветки. Для защиты от хакеров из кода который генерирует CMS были удалены все признаки, по которым можно определить, на каком движке работает сайт и какая версия используется. Были обновлены все устаревшие компоненты и модули. Установил компонент защиты админки, который изменяет адрес входа и не позволяет подобрать пароль методом перебора. Шаблон сайта был изначально рассчитан на просмотр через мобильные устройства – адаптивный дизайн. Но некоторые блоки вывода информации, в том числе и вывод видеороликов а так же меню в шапке, при наполнении сайта информацией, делались без учёта адаптивности. Поэтому пришлось дорабатывать всё что вписывалось в минимальный размер экрана 320 пиксел (для просмотра на смартфонах).

Кроме всего прочего сайт очень долго загружался, особенно главная страница. Хотя и внутренние страницы не могли похвастаться быстрой загрузкой. Основная проблема была в том что графика, файлы css и js были не оптимизированы. После проведения оптимизации и минификации всех значимых файлов, тормозящих загрузку, часть файлов js была перемещена в футер. Для ещё большей скорости загрузки было включено сжатие файлов и кэширование на стороне клиента. Среднее время загрузки сайта было уменьшено на 45% для главной и на 85% для внутренних страниц. На главной странице основным фактором медленной загрузки остался большой слайдер в шапке.

Прямая ссылка на сайт - Кап-Строй Kap-Stroy.com.ru

Сайт для компании АВК-Строй

Одна из самых интересных работ последнего времени – сайт для компании АВК Строй. Сам сайт уже несколько лет работал на CMS MOD-x. Заказчику нужно было сделать удобный просмотр на мобильных устройствах, СЕО оптимизировать сайт, добавить новый функционал, ускорить загрузку сайта. Было решено перенести сайт на CMS Даннео, так как всё что хотел заказчик, лучше всего делать именно на этом движке, исходя из моего собственного опыта разработки сайтов под ключ.

Первоначально был подобран красивый адаптивный шаблон из открытых источников, немного переработанный шаблон был использован в качестве базового дизайна оформления сайта. Для увеличения скорости загрузки из шаблона были удалены все лишние стили и скрипты, а те, которые нужны, были оптимизированы стандартными методами. Это удаление комментариев в коде, удаление пустых строк. Так же вся графика была оптимизирована для того, что бы меньше времени уходило на её загрузку. Некоторые элементы графики удалось уменьшить в объёме на 55%.

Что получилось можно наглядно сравнить, посмотрев, как выглядел сайт до и после переделки.

Так же был добавлен скрипт заказа обратного звонка, подсветка пунктов меню, карта Яндекс с координатами компании, отдельный раздел отзывы и портфолио. А так как разные CMS по разному генерируют ссылки, был сделан групповой редирект 301 со старых адресов на новые. Больше всего времени понадобилось на копи-пасте всех страниц сайта. Одних только услуг более 280 страниц! Но овчинка стоила выделки, так как для каждой страницы сайта нужно было добавлять метатеги title, keywords, description улучшающие индексацию и ранжирование сайта в поисковиках. Плюс прописывать alt для всех фотографий. На старой версии сайта такой возможности не было.

Ну а по окончании работы и сдачи сайта под ключ, для того, что бы упростить изучение административной части сайта, с помощью программы BBFlashBlack сделал 6 видеоуроков по всем необходимым разделам админки. Как добавлять услуги, статьи, фотографии в портфолио, как правильно заполнять поля при добавлении любых материалов и тд. и тп.

А вот и ссылка по которой Вы можете пройти что бы увидеть вживую как работает сайт АВК-Строй