Советы по веб разработке от экспертов VASGA

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

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

Задать основной ID для body

Сам язык разметки уже структурирован, но мы также преследуем структуру иерархии при создании классов объектов и задании уникальных ID. Так мы в каждом проекте задаем ID для body (как правило в честь компании, для которой разрабатываем проект), а затем вызываем функции Ajax через этот ID. Также ключевые стили прописываем с использованием ID тега body.

Разделить адаптивные трансформации и стандартные стили

Для общих трансформаций сайта мы используем отдельный сайт adaptive.css. В нем мы собираем только те трансформации адаптивного дизайна, который распространяется на весь проект и весомую часть страниц. Это дает возможность не запутаться в структуре и быстро вносить правки при изменении дизайна.

Использовать систему версий

Обозначаем корневой каталог как версию проекта. В процессе доработок мы меняем номер версии и вносим дополнительные правки, при этом не нарушаем целостность всего проекта. Также подобный метод позволяет пользователю всегда получить свежую версию сайта без очистки кэша (CTRL + F5).

Использовать device.js

Мы используем device.js для определения устройства, с которого просматривается сайт. Значения просмотра, а именно тип устройства, тип платформы, мы вносим как базовые классы в тег body. Это позволяет менять концепцию сайта, делать дизайн адаптивным и подстраивать контент в целом через обращение body.desktop или body.mobile или body.tablet.

Не нагромождать фразы и стоп-кнопки при создании лендингов

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

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

Функционал для удержания

Чем дольше пользователь проведет время на сайте, тем вероятнее, что он что-то закажет или купит. Более того, поисковый робот также анализирует время пребывания пользователей на сайтах и отдает предпочтение тем, где время посещения больше. Поэтому при разработке сайта необходимо продумать функционал для удержания. Самое банальное - это трансформировать форму обратной связи в некий опрос. На основе такой концепции появились даже отдельные виды лендингов. Их называют Quiz-сайтами. Предлагать пользователю выборку из определенных опций с последующим оформлением заказа еще и выгодно тем, что по сути вы получаете подогретого клиента, позитивно настроенного на сотрудничество. В свое время мы создали несколько сервисов для удержания на сайте нашего партнера Бетон-Строй Компани. Калькулятор расчета объема бетона для фундамента и сервис доставки бетона в сочетании с политикой открытых цен дали свои плоды. Во-первых, клиент стал дольше проводить время на сайте, во-вторых, клиент стал полностью понимать все нюансы услуги (стоимость доставки, стоимость бетона, время доставки, количество машин и т. д.), что в свою очередь сократило время на заключение договора.

Концепция мобильного приложения

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

1) Необходимо, чтобы каждая активная кнопка была не меньше 36 пикселей по ширине и высоте. 36 пикселей - это минимум в удобстве нажатия.

2) Футер - важная, но не обязательная часть сайта. В авторских проектах, особенно концепциях мультиэкрана, футеры как правило вообще не используются. Для классических сайтов футер - неотъемлемая часть дизайна. Это сборщик важных ссылок, дополнительное упоминание о контактах и реквизитах компании (особенно важно, если меню скрывается при скроллинге). И тем не менее, на смартфонах футер необходимо полностью скрывать.

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

4) Использовать отступы в 20 пикселей по бокам для контента. Этот минимум не забирает много пространства и при этом дает удобство в чтении текста и просмотре прочего контента.

Меню сайта VASGA, если смотреть с десктоп.

Меню сайта VASGA, если смотреть с планшета.

Появление мобильного формата меню внизу экрана. Трансформация контента. Вид сайта VASGA со смартфона.

Понимание конечного пользователя и анализ целевой аудитории

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

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

Мы обязательно будем еще делиться своим опытом и практическими кейсами в дальнейших постах. Следите за событиями. Если вы в поиске компании, которая сделает надежный веб сайт, приносящий результат, то смеем вас обрадовать, - вы ее нашли! Обращайтесь к нам за разработкой сайтов и написанием софта по реквизитам, указанным на сайте или звоните в отдел продаж по телефону +7 937 622-72-77. Наши менеджеры вас проконсультируют.