Заказать
Поиск...
Здесь будут отображены результаты поиска
Современная правильная разработка веб сайтов 2020

Современная правильная разработка веб сайтов 2020

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

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

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

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

HTTPS

Наличие SSL сертификата раньше требовалось только интернет магазинам, причем каких-то пару лет назад было не у каждого из них. Сейчас этот атрибут необходим для любого веб ресурса. SSL сертификат - это надстройка над протоколом HTTP дающая криптозащиту данных. Данные, переданные по протоколу HTTPS защищены от взлома (не от кражи. При их передаче также есть риск перехвата, но при этом злоумышленник не сможет получить данные в первичном виде так как они зашифрованы 256 бит шифрованием). Помимо защиты, наличие SSL сертификата дает солидность ресурсу. Убирается значок "не защищено" в окне браузера, который в свою очередь еще и краснеет при любом использовании форм на сайте. Также с сентября 2018 года SSL сертификат введен как один из факторов ранжирования сайта у Google и затем у Yandex. То есть сайты с SSL сертификатами имеют лучшие позиции в поисковой выдаче, чем сайты без такого сертификата. Разумеется на позиции в поиске влияет целый ряд показателей.

robot.txt, sitemap.xml, metrika, schema.org, meta, canonical

Файлы robot.txt и sitemap.xml необходимы поисковому роботу для правильной индексации ресурса. Их отсутствие ведет к плохому индексированию, что влечет за собой худшие позиции при поиске. В таком сервисе как Yandex веб мастер, отсутствие этих файлов отмечено как ошибка в разработке сайта. Тоже самое и у Google.

Каноническая ссылка, метатеги, а также schema.org - все это ключевые составляющие внутренней SEO оптимизации сайта. К сожалению об этих аспектах либо забывают вовсе, либо намеренно, чтобы потом взять дополнительную плату за SEO, либо делают, но делают неправильно. В компании VASGA при разработке любого веб ресурса (корпоративный сайт, интернет магазин, веб сервис, лендинг, промо сайт) мы закладываем правильное внутреннее SEO в начальную разработку проекта и указываем это в договоре.

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

Schema.org - самый редко используемый атрибут во внутреннем SEO. Также этот атрибут вызывает массу ошибок при внедрении, так как обладает определенной структурой. По сути Schema.org позволяет определить принадлежность контента сайта определенной группе. Например, обрамление контента схемой person - дает представление о том, что здесь указана информация о каком-то человеке, blogposting - о том, что эта пост блога и т. д. Для интернет магазинов необходимо использовать schema.org для обозначения товаров на витрине магазина, а также на каждой отдельной страницы конкретного товара.

Также стоит применять внутреннее SEO для изображений на сайте. Для этого каждое изображение должно содержать атрибуты alt и title.

Дизайн сайта. Границы стираются. Сайт на мобильниках = приложение

Дизайн сайта должен соответствовать не только удобству пользования, но и времени. Современные технологии позволяют делать невообразимые трансформации сайта в разных браузерах и на разных устройствах. Есть концепции responsive design, отдельные виды типа flex design, но самое главное, что нужно знать - если ваш сайт на мобильниках выглядит просто ровно, то этого не достаточно. Поведенческие факторы пользователя при использовании десктоп и мобайл разные, поэтому и сайт должен выглядеть по-разному. Зачастую разработчики лишь скрывают меню под кнопкой гамбургер (так дизайнеры прозвали кнопку, состоящую из трех полосок. которая служит открыванием меню). На деле же некоторые разработчики не трансформируют footer сайта, а ведь он вообще не нужен при просмотре сайта со смартфона. Полный перечень аспектов дизайна мы опишем в другой статье. Здесь общими словами подведем итог. Сайт на смартфоне должен выглядеть как мобильное приложение. Тогда его (сайт) можно отнести к концепции современной веб разработки.

Анимация

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

  • Линейная анимация с помощью CSS3. Самый распространенный способ придать нескучный вид своему сайту
  • Программная анимация на javaScript. Способ посложнее первого, но он дает возможность взаимодействовать с пользователем напрямую
  • Использование сторонних программ для создания видео анимации и прочей анимации, которую можно разместить на сайте с помощью тегов контейнеров (типа iframe)
  • Псевдо 3Д и полноценная 3Д анимация на ThreeJS и WebGl.

3D моделирование

3Д моделирование на сайте - тема крайне интересная. Она пока только набирает обороты, но уже профессиональные веб студии, в том числе и наше digital агенство VASGA, используем эту технологию по полной. Тут самое главное не пытаться создать 3Д игру с крутой графикой в браузере, так как это пагубно скажется на загрузке веб сайта. Тем не менее, будущее за 3Д. Оно плотно пересекается с концепцией виртуальной и дополненной реальности и дает новое восприятие веба. Любой веб сайт, где уже содержится 3Д моделирование имеет вау-эффект. С ростом скорости трафика, внедрением 5G технологий и упразднением технологии 3Д моделирования, этот вау-ээфект будет только набирать обороты.

Мы разработали 3Д модель навигационного оборудования Fort monitor. Посмотреть его можно по ссылке. Также мы разработали концепцию интернет магазина одного или нескольких товаров, представленных в 3Д. Интернет магазин с 3Д товарами представлен на нашем сайте по ссылке.

Наличие видео, PDF файлы

Использовать разный формат данных на сайте дает одни только преимущества. Наличие видео формата MP4 и OGV (для разных браузеров), а также PDF презентации, в которой кратко описана деятельность компании будет хорошим бонусом в индексировании. Но не стоит перегружать сайт кучей видео файлов. Это может привести к медленной загрузке, если вы не обладаете большими серверными мощностями. В этом случае, стоит использовать такие сервисы как YouTube в качестве видео хостинга и делать дополнительные ссылки с видео на ваш ресурс.

Для некоторых сайтов мы специально разрабатываем промо ролики, которые служат одной цели - быстро и доступно показать деятельность компании. Ярким примером является сайт glonass-sib.ru. Они занимаются установкой навигационного оборудования на различные транспортные средства. Ролик, описывающий это, встроен на главную страницу сайта и является частью дизайн концепции.

Геотаргетинг

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

Если у вас онлайн площадка, и вы доставляете товары по всей России, то стоит все равно указать ключевой регион деятельности (например, Москва). Таким образом, вы сможете попасть в поисковую выдачу по ключевым запросам, где таргетинг имеет значение. Стоит пояснить, что поисковый алгоритм хорошо натренирован отличать запросы с геотаргетингом и без (запрос "рецепт пиццы" не привязан к определенной территории, а запрос "заказать пиццу" имеет такую привязку). Поэтому не стоит игнорировать этот пункт.

API и сервисы

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

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

Если учитывать все вышеупомянутые пункты в разработке своего веб сайта, то можно достигнуть отличных результатов по ведению бизнеса онлайн. Наша компания с удовольствием разработает современный корпоративный сайт или интернет магазин, а сервис Lirso дадут вашему бизнесу аудиторию проверенных надежных людей. Желаете перевести свой бизнес в e-commerce и стать частью правильного веба - обращайтесь за помощью к представителям компании VASGA по реквизитам, указанным на нашем сайте.

Мы на Behance Мы на Dribbble Мы на Youtube
Li
К началу страницы