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

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

Улучшаем шапку сайта 1
Старая версия шапки

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

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

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

Улучшаем шапку сайта 3
Первая версия обновленной шапки сайта

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

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

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

Улучшаем шапку сайта 4
Вторая версия обновленной шапки сайта

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

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

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

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

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

Бесподобный мистер Фокс 5
Сцена из мультфильма

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

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

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

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

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

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

Бесподобный мистер Фокс 7
Сцена из мультфильма

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

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

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

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

Как считаем?

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

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

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

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

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

Анимация элементов при прокрутке 10
Делим отступ на 30 чтобы получить небольшое число

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

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

Анимация элементов при прокрутке 11
Разделение на анимацию вверх и вниз

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

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

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

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

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

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

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

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. Интернет магазин — сайт для презентации и покупки товаров. На таких сайтах используется фильтрация, разбиение по категориям, выбор размеров. Пользователи могут добавлять товары в корзину и оформить заказ, выбрать способы доставки и оплаты.

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