Улучшаем шапку сайта

Переделываем шапку на сайте бухгалтерских услуг.

Старая версия шапки

Давайте посмотрим и скажем, что здесь не так.

  1. Шапка растянута на всю ширину страницы, это плохо так как на широких мониторах будут дыры, как и видно на изображении выше.
  2. Лого и навигация занимают очень мало места, хотя и являются важными элементами в шапке сайта.
  3. Нет призыва к действию, номера телефона, шапка сама по себе в данном виде бесполезна.
  4. При клике на пункт меню ничего не происходит. Поначалу я не понимал что там не там, оказывается что ссылка-то была, но это было не слово, а полоска высотой в 1px под пунктом меню. Только при нажатии на неё, браузер переходил на другую страницу. Сложная задачка 🙂

Теперь давайте исправим эти недостатки

Первая версия обновленной шапки сайта

Теперь шапка располагается по центру экрана и не будет расползаться, образовывая дыры. Мы равномерно распределили место между ключевыми элементами: логотип, меню, контакт. Теперь они имеют достаточный отступ от друг друга. Под телефоном также добавили кнопку-призыв «Заказать звонок».

Спустя время я решил её немного подкорректировать. Я задал себе вопрос: «Что хочет сделать человек, попав на сайт бухгалтерских услуг?». Сам я в прошлом искал информацию на таких сайтах, и единственное что я хотел, задать вопрос, попросить помощи.

Поэтому правую часть шапки я дополнил двумя кнопками: «Задать вопрос» и «Помощь и консультации». Еще добавил пункт меню «Главная», так как не все пользователи понимают, что логотип является ссылкой на главную страницу.

Вторая версия обновленной шапки сайта

Как вам? Понравилась трансформация?

Бесподобный мистер Фокс

Сегодня смотрел мультфильм «Бесподобный мистер Фокс» и хотел бы порекомендовать его вам к просмотру.

Что мне в нем понравилось?

— Интересная подача, стиль Уэса Андерсона
— Проработанные персонажи
— Юмор

Сцена из мультфильма

Мультфильм выполнен в кукольном стиле, конечно, графика не стоит в сравнении с другими мультфильмами, но на то он и есть кукольный стиль. Очень понравилась режиссура Уэса Андерсона, его стиль заметен и в других его фильмах.

Уэс Андерсон на съемках «Бесподобного мистера Фокса»

Посмотрели с женой на одном дыхании. Мультфильм необычный, я почувствовал его отличие от других похожих друг на друга.

Мне понравился момент, когда Фокс разговаривал с волком. Не буду спройлерить 🙂

Я с радостью провел 1.5 часа за просмотром этого классного мультфильма.

Я не претендовал на какой-то обзор, просто хотел поделиться.
Спасибо за просмотр!

Сцена из мультфильма

Анимация элементов при прокрутке

Задача: сделать изображения листьев подвижными при прокрутке.

Я никогда такого не делал, решил пройтись по плагинам, но вскоре понял что проще будет разобраться с этим подручными средствами — простым позиционированием css.

Как считаем?

«Отсчет будем делать от чего-то подвижного, то есть нужна величина изменяющаяся» — подумал я. А какая величина подвижная при прокрутке? Все верно, отступ от верхнего края.

Итак, мы получаем отступ при прокрутке и кладем в переменную.

Получение отступа от верхнего края страницы. this в данном случае — document

Отступ получили, но если мы просто будем ставить смещение на размер отступа, нас ждет бунт листочков.

Это не было моей целью. Значит нужно делить число отступа, и получить небольшое смещение. Я делил на 100, на 80, в итоге пришел к значению 30.

Делим отступ на 30 чтобы получить небольшое число

Супер! Теперь смещение листьев идет так как нужно!

Для того чтобы листья перемещались какие-то вверх, какие-то вниз, я сделал классы. bottom и .top, а в зависимости от класса проставлял знак «-» к числу отступа.

Разделение на анимацию вверх и вниз

Итак, что я как разработчик хочу? Писать меньше кода, который в итоге будет делать больше. Значит я хочу чтобы текущий код работал на все листья.
К сожалению листья так не думают. Где-то на середине страницы, все листья сместились и получилась такая каша.

Просмотрев на сколько пикселей они сместились при прокрутке, я решил просто вычесть и прибавить это число к изначальному позиционированию элементов

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

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

Результат на странице

https://dev-postnov.ru/works/bounty/

Термины в разработке сайтов

Независимо от того, кого вы выберете в исполнители, вам придется общаться с тем, кто имеет дело с созданием сайтов.

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

Сколько же еще людей из области создания сайтов не замечают, что разговаривают на языке, который не понятен заказчику? Здесь я приведу список терминов и сокращений, знание которых поможет вам понимать разработчика.

HTML (Hyper Text Markup Language) — язык гипертекстовой разметки документа. Браузер видит код страницы и воспроизводит его пользователю в удобном и понятном виде. С помощью этого языка написаны все сайты в интернете.

CSS (Cascading Style Sheets) — каскадные таблицы стилей. Язык описания внешнего вида сайта. CSS используется для задания размера и цвета шрифтов, расположения блоков, графического оформления таблиц, маркированный и нумерованных списков и др. Без CSS сайты выглядели как word-документы.

Скрипт — код, программа, созданная на одном из языков программирования, выполняющая определенную функцию. Скрипты позволяют положить товар в корзину и оформить заказ, считать количество посетителей на сайте, оставлять комментарии к фотографии, загрузить фото на сайт и др.

Домен (англ. domain — область) — адрес сайта в Интернете, который вы набираете в адресной строке, например: «http://dev-postnov.ru». Может содержать буквы, цифры и дефис.

FTP, ФТП (File Transfer Protocol) — Протокол передачи файлов в компьютерных сетях. С помощью FTP можно подключиться к серверу и просматривать, загружать, редактировать и удалять файлы.

Контент — (англ. Content — содержание) это информация на сайте: текст, изображения, аудио- и видеоматериалы.

CMS, ЦМС (Content management system) — «система управления содержимым». Система для создания, редактирования, управления контентом. В системе используются разные типы данных: документы, аудио- и медиафайлы, фотографии и пр. Чаще используются CMS для создания и управления сайтом.

Кроссбраузерность (от англ. сross — пересечение, browser — программное средство просмотра) — отображение и работоспособность сайта, при котором сайт корректно просматривается во всех популярных браузерах.

Адаптивность — отображение и работоспособность сайта, при котором сайт корректно и без ошибок просматривается с мобильника, планшета и ноутбука.

РСЯ (Рекламная Сеть Яндекса) — рекламная площадка Яндекса. РСЯ собрал тысячи сайтов-партнеров, которые показывают рекламные объявления.

SEO, СЕО (Search engine optimization) — поисковая оптимизация сайта. Комплекс действий, которые улучшают позиции сайта в выдаче поисковых систем по определенным запросам.

Хедер, шапка сайта (от англ. header) — область страницы, находится вверху страницы и содержит меню, контакты, адреса и логотип сайта.

Футер, подвал сайта (от англ. footer) — область страницы, которая находится внизу страницы и содержит дополнительные ссылки на разделы, категории, ссылки на партнеров, форму подписки.

Слайдер, карусель (применимо к изображениям) — блок на сайте, в котором есть переключение и перелистывание изображений.

Если вы чего-то не понимаете, обращайтесь, я с радостью помогу и объясню вам.

Какой тип сайта мне нужен? Решение

После желания заказать сайт появляется много вопросов, среди них: «Какой тип сайта подойдет мне?».

Вопрос может возникать потому что на сайтах веб-студий и фрилансеров есть сайты или тарифные планы на выбор: «Landing», «Посадочная страница», «Корпоративный», «Сайт-визитка».

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

Разберем основные типы сайтов:

  1. Простой сайт, landing Page, посадочная страница, сайт-визитка, сайт-услуг — это типы сайтов которые в большинстве своем представляют одну страницу, которая знакомит посетителя с услугами, преимуществами, ценами компании или отдельного человека. Сайты такого типа реализуются в короткие строки и экономнее по сравнению с другими типами.
  2. Коммерческий сайт, корпоративный сайт, малый бизнес — такие сайты создают компании которые хотят предоставить более полную информацию о компании, разместить справочную информацию для поддержки пользователя, технологии для выбора товаров и услуг: калькуляторы и тому подобное. На таких сайтах обычно более 5 страниц.
  3. Сайт-каталог, каталог продукции — сайты этого типа это сайты которые используются как витрина магазина, но без покупки товара. Предназначены для презентации товаров. Конечная цель — привлечение покупателя к товару. Сайт должен информативно описывать рекламируемый товар, рассказать об особенностях и преимуществах.
  4. Интернет магазин — сайт для презентации и покупки товаров. На таких сайтах используется фильтрация, разбиение по категориям, выбор размеров. Пользователи могут добавлять товары в корзину и оформить заказ, выбрать способы доставки и оплаты.

Не поняли какой сайт нужен вам? Напишите мне в личном сообщении или в комментариях и мы вместе разберемся с этим.