Переделываю свой собственный сайт

Вообще это своего рода полигон, на котором постоянно обкатываю новые возможности, идеи из области веб-дизайна, появившиеся у меня в процессе бытия. Сегодня вот решил в очередной раз все поменять… ибо все хорошо в существующем сайте, но хочется сделать его максимально простым ибо совершенство это не когда нечего добавить, а скорее когда нечего отнять... вот и приступаю...

Во второй половине описания проекта будет много специальных слов, понятных специалистам, потому читать рекомендую только знатокам терминологии. Простым же языком скажу, что сделал все по максимуму просто, с помощью текстового редактора и небезизвестной в среде веб – разработчиков "кузькиной матери", при этом предельно минимизирую использование скриптов и стилей.

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

Подвешиваю все элементы как бы парящими в воздухе, чтобы придать объем пространству сайта. Фон подбираю такой, чтобы одинаково хорошо читались как темные, так и светлые цвета все как бы парит в воздухе, что позволяет достичь вау – эффекта… Ессно, не забываю про отступы, типографику.

Включаю в блоке контактов кипкод, как новую технологическую возможность сохранять отложенную информацию как электронную визитку.

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

Ну а теперь, как обещал, перечислю те задачи, что ставил перед собой в ходе работы над этим дизайн-проектом и их решение... Мужайтесь !

Стараюсь сделать сайт максимально простым. Обязательно думаю о понятной структуре с точки зрения сео… Делаю все максимально на самописном коде… От Bootstrap4 таки на этот раз решил избавиться, чтобы не было избыточного кода, но делаю весь код по правиламHtml5 а для выравнивания использую Flex-верстку…
Выглаживаю внутреннюю структуру сайта… анимацию использую средствами Css3 В соответствии с законами восприятия и рекламных технологий практически создаю на главной странице интерактивную презентацию собственных возможностей. Делаю блочную систему для первой страницы по канонам Landing page и переходы между блоками с помощью нескольких типов меню, анимирую эти переходы.
Обложку сайта – его хедер делаю полноэкранной со сложной структурой бекграунда. Но для отображения изображений максимально стараюсь использовать современные форматы, дающие выигрыш "по весу". SVG, например, дает масштабировать картинку без потери качества, что важно например при создании иконок, инфографики - делать иконки любого размера.
Скурпулезно прописываю руками, активно используя текстовой редактор Atom HTML и стили, добавляю скрипты калькуляторов и пр. (с ними у мну хуже, но тут пригодилась помощь из зала). Простая, но при этом эффектная анимация интерактивных объектов.
Конечно, вишенка на торте – в соответствии с фирменным стилем студии – подключаю фоном скриншот " ломаные линии ", уже полюбившийся посетителям :)
Нужно убрать излишнюю вложенность, оставив только ту структуру контента, которая подразумевает деление именно структурное на разделы и подразделы. Ну, тут все понятно. Изменяю структуру сайта, переношу разделы. (тут у меня, впрочем и был порядок, но я его еще упорядочил)
Подключил где нужно редирект, чтобы не "терялась" уже востребованная информация… Обрамляю страницу – выношу все меню и прочую инфу, что должна быть под рукой на поля вокруг и фиксирую
Также необходимо получить высокую валидность всех основных страниц разделов, исключив все возможные ошибки в коде. С помощью спец. программ тестирую и исправляю недочеты вплоть до полного и тотального уничтожения всего, что не соответствует принятым правилам кодировки..
Добиться максимально возможной скорости. Сократить код за счет минимизации CSS и используемых скриптов. Оставляю только необходимые для работы сайта скрипты и стили, свожу их в один файл или выношу в отдельный чанк и подключаю в начале – для стилей и для скриптов – в конце кода страницы. Сжимаю весь код и добиваюсь высоких показателей скорости – 99 % для десктопа и 89% для мобильной версии сайта. Больше выжать не удастся, ибо тут уже вмешиваются подключенные приложения типа Яндекс метрики, от которых отказываться не готов пока…
Старательно добиваюсь полноценной мобильной версии, проверяя масштабируемость отображения на экранах различного размера, вношу в код CSS нужные уточнения для этого.

Собственно, вот, сайт готов и находится в стадии тестирования…Если Вы видите этот текст, то Вы уже на месте... Если есть у кого что сказать, буду рад конструктивной критике

Просмотров: