Сайт-визитка на HTML5 и CSS3




Сайт сергей-бойков.рфЗаканчивается работа над новым сайтом https://сергей-бойков.рф/. Задания, как такового не было. Человек просто заказал сайт-визитку и высказал пожелание, чтобы в основе сайта лежали его фотографии. Это означало и небольшую галерею, и фото-фон. Фотоматериалы были предоставлены в наше распоряжение, и я начал работу. Сразу подумал, что хорошо бы использовать в качестве фона не одну фотографию, как обычно, а несколько меняющих друг друга! А чтобы всё это не выглядело скучно — верхний край секций сделал наклонным и «зарядил» всё плагинами.

Свобода выбора повлияла на то, что я не стал отказываться от экспериментов над подачей материала и программной части сайта. Сверстал «резиновую» основу сайта на HTML5 и CSS3. Такой код предоставляет огромную свободу при минимуме нагрузки на сервер. Исходный код индексного файла составил 22 килобайта (со всеми вставками JavaScript), а каскадной таблицы стилей – всего 8 килобайт. Основной «вес» был отдан фотографиям. Естественно, они сначала были оптимизированы для публикации в интернете, чтобы не замедлять загрузку сайта.

Вид галереиПрограммная часть – фреймворк jQuery, давно ставший самым популярным у веб-дизайнеров, благодаря наличию огромного количества плагинов. Хотя, по правде говоря, первоначально хотел полностью построить сайт на jQuery Tools, что уменьшило бы «вес» программной части сайта. Но! Желание сделать сайт ещё и эффектным перевесило все доводы.

Плагины localscroll и scrollto обеспечивают плавную перемотку страницы к нужному разделу, делая просмотр сайта приятным с физической и эстетической точки зрения. Для просмотра галереи использован старый (2008 года) добрый и надёжный плагин lightbox для того же jQuery. Хочется подыскать ему замену, но пока не нашёл бесплатный плагин с такой же физикой…

Обратная связь с посетителями обеспечивается почтовой формой. С ней приключился казус: все письма, отправленные из этой формы приходили на Mail.ru в виде нечитаемых символов – выглядели «кракозябрами». Причина оказалось простой – сервис Mail.ru не определяет автоматически современную универсальную кодировку – utf-8. Я уже связался со специалистами этого сервиса и описал им проблему. На другие популярные почтовые сервисы – Yandex-почта и Gmail письма приходят в нормальном виде без проблем. Пришлось попросить клиента завести почту на Yandex, что не считаю правильным, но на данный момент это оказалось самым простым и эффективным решением!

Перейдите по ссылке и оцените новый сайт, в котором осталось доточить только мелочи. Например – нарисовать иконку сайта и закончить карту с метками от Сергея. Перед ним я поставил новую задачу – снять виды под конкретную задачу – для сайта. Будем смотреть, дорабатывать, пока не придём к окончательному виду!


Опубликовал Administrator - 20 декабря 2015, 20:43 - 113 просмотров


Похожие записи: Разновидности логотипов и их стили.
Любовь и ненависть в CSS
Ручная сортировка публикаций в Ruxe Engine
Аксиоматический CSS. Часть 3. Синтаксис.
Аксиоматический CSS. Часть 2


Комментарии




Зарегистрируйтесь или войдите в Ваш аккаунт, чтобы оставить комментарий.



 

Вход на сайт


Avatar