Mobile First: да или нет?

Вступление

Раньше просмотров с компьютера было больше и все сайты создавали сначала для больших экранов (для ПК), затем начали создавать адаптивные версии для смартфонов или отдельные мобильные версии сайтов. Сейчас все наоборот, поскольку просмотров с телефона стало гораздо больше, чем с ПК. Пришло время нового направления в разработке — mobile first, что означает «сперва для мобильных», а для десктопа — это уже второстепенный шаг.

Что такое Mobile First и в чем его суть

Понятие Mobile first (в переводе самого Гугла означает индексирование, которое направлено на мобильные устройства) — это новая концепция индексации, следуя которой для ранжирования сайтов Google использует мобильные версии страниц веб-сайтов. Раньше Гугл сперва учитывал десктопную версию, а оптимизация под смартфоны лишь улучшала ранжирование.

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

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

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

Есть ли разница между адаптивным дизайном и Mobile First

Оба способа гарантируют комфортное взаимодействие с веб-сайтом. Рассмотрим подробнее их главные отличия.

  • Адаптивный вариант. При создании веб-проекта создают статичные макеты, рассчитанные на разные гаджеты. Шаблоны имеют структуру расположения и размера зависимо от экрана. Как правило, создают стандартные макеты от 320 до 1600 пикселей. Специальные скрипты выявляют размеры дисплея конкретного посетителя и открывают подходящий шаблон. В таких макетах учитывают особенности разных моделей устройств. Допустим, для больших экранов — создают только горизонтальный вид, а для гаджетов — возможность переключения между горизонтальным и вертикальным видом.
  • Вариант Mobile First. При таком раскладе сначала создается и открывается версия для гаджетов. После этого она изменяет масштаб зависимо от ОС, вебмастер сможет вносить в дальнейшем правки, добавляя дополнительные опции и работать со стилями.

Как работать с Mobile First

Работа по такому принципу проходит так:

  1. Создается дизайн, чтобы на смартфоне всё смотрелось красиво. Основываясь на нарисованном дизайне пишут код. Либо код и сам дизайн создают параллельно исходя от общего видения.
  2. При необходимости создают отдельный вариант версии для ПК, если необходимости нет — делают так, чтобы мобильный дизайн мог «увеличиваться» до больших размеров.
  3. При внесении правок работают сначала с версией для смартфонов и только потом переходят к компьютерной версии.

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

Особенности проектирования

Делаем акцент на контенте

Маленькие дисплеи смартфонов вносят свои требования и чтобы получить от посетителя целевое действие, то сначала необходимо «подать» ему то содержимое вебсайта, которое даст конверсию. Для разных видов бизнеса можно выделить стандарты поведения посетителей: зачем они здесь; что ищут; что сделает поиск удобнее; что им нужно сделать, когда они найдут то, что они искали?

Возьмем для примера торговую онлайн площадку. В поступках посетителей есть следующие закономерности:

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

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

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

Создаем визуальную иерархию

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

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

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

Упрощаем навигацию

Удобная навигация – важная задача. Необходимо обеспечить пользователю удобство посещения ресурса и уложиться максимально компактно.

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

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

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

  • посетители на сайте чаще взаимодействуют с навигацией в нижней части экрана (правило “большого пальца” в действии);
  • такое размещение навигации на сайте напоминает интерфейс множества приложений, поэтому человеку будет проще ориентироваться на веб-проекте.

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

Создаем интерфейс User-friendly

Комфорт посетителя – важное требование Mobile First. Создав идеально проработанный UX, можно рассчитывать на то, что человек вернется на вебсайт еще ни один раз.

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

  • Расположение содержимого в области просмотра;
  • Грамотная типографика;
  • Нацеленность на сенсор;
  • Устранение контента, который не воспроизводится;
  • Оптимизация всех виджетов сайта;
  • Уменьшение ненужный пользовательских действий.

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

Где нужно применять

Mobile First можно использовать абсолютно везде, если в этом есть необходимость: в информационных и новостных сайтах, интернет-магазинах, сервисах доставки и дистанционных услуг, службах такси, социальных сетях и сервисах. Реализовать mobile first можно абсолютно на любом проекте, если перед вами стоит главная задача – обеспечить пользователям удобный просмотр контента со смартфона.

Плюсы и минусы Mobile First

Говорить, что Mobile First подойдет абсолютно всем неправильно. У данной концепции есть свои преимущества и недостатки, поэтому нужно взвесить все плюсы и минусы перед принятием решения.

Плюсы:

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

Минусы:

  • Временные и финансовые затраты на разработку mobile first;
  • Визуальное оформление весьма ограничено.

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

Техническое задание на разработку сайта: как правильно составить и оформить

Вступление

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

Для чего нужно техническое задание

Техническое задание (ТЗ) — это документ, содержащий технические и смысловые требования к сайту.

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

Чем более детально и вдумчиво составлено ТЗ зависит, тем яснее свои задачи понимают все участники процесса разработки. Подробное техзадание выгодно как для заказчика, так и для исполнителя.  

Преимущества ТЗ для заказчика

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

  • Страховка от некачественной работы. Если заказчик будет недоволен результатом работы, он сможет сослаться на прописанные в ТЗ договоренности. 
  • Способ структурировать задачу. Часто бывает, что заказчик не знает, чего хочет: его пожелания по поводу будущего сайта неконкретны, а формулировки размыты. И тут на помощь приходит ТЗ. Последовательно отвечая на вопросы по проекту, клиент ясно обрисовывает задачу для себя и подрядчика.
  • Защита от незапланированных трат. Точную стоимость готового веб-ресурса сложно выяснить «на берегу». Но техзадание поможет сформировать адекватное представление о предстоящих затратах. 

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

Преимущества ТЗ для исполнителя

Исполнитель, проект-менеджер digital-агентства или разработчик-фрилансер, также заинтересован в составлении подробного вдумчивого техзадания по ряду причин. К ним относятся: 

  • Способ ясно обозначить задачу. Быстро и без проблем разработать нужный ресурс поможет описание всех значимых для заказчика деталей. 
  • Возможность «блеснуть». Классное ТЗ наглядно продемонстрирует экспертность исполнителя. 
  • Защита проделанной работы (и гарантия оплаты). Представьте ситуацию: подрядчик берет в работу крупный проект, разрабатывает сложный веб-ресурс, погружается в тематику, тратит свое время…и представляет готовый сайт заказчику. Но заказчик недоволен! Он утверждает, что хотел CMS на Java, а не на PHP.  Что делать? Обратиться к ТЗ. Если тот или иной нюанс не был прописан в документе, то клиент не может требовать его выполнения.
  • Способ заработать. ТЗ – это первый важный шаг при создании сайта. На этом документе базируется техническое и смысловое содержание ресурса. А потому нередко агентства и фрилансеры расценивают составление техзадания, как отдельно оплачиваемую услугу. 

Особенно большое значение техзадание имеет при создании крупных веб-ресурсов со сложной структурой. Не поленитесь и сделайте ТЗ качественно…или делегируйте задачу специалистам DIART AGENCY. Мы на разработке сайтов собаку съели, а потому зададим все нужные вопросы и уточним важные детали быстро и прицельно точно. В результате вы получите подробный профессионально выполненный документ для создания 100% эффективного ресурса. Поверьте, это сэкономит ваше бесценное время и нервы. 

Кто составляет техническое задание

В чьи обязанности входит составление ТЗ: заказчика или исполнителя? На этот вопрос нет однозначного ответа. 

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

Составление ТЗ — это совместная работа заказчика и исполнителя.

Бриф на разработку сайта

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

  • что за компания нуждается в сайте, какие продукты производит или продает, на какую целевую аудиторию ориентируется; 
  • почему принято решение о создании сайта, какие цели он должен решить;
  • какие конкретные пожелания и идеи уже есть по будущему сайту; 
  • какие сайты нравятся и почему; 
  • какие сайты совсем НЕ нравятся и почему. 

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

Структура и объем технического задания

Каждое ТЗ состоит из двух основных смысловых разделов: организационной и технической частей.

Организационная часть: общая информация о проекте

Для всех специалистов, которые будут работать над разработкой сайта, в ТЗ нужно добавить вводную информацию о проекте:

  • Общие сведения о компании и целях создаваемого сайта.
  • Подробное описание ЦА сайта, ее интересов и «болей».
  • Описание объема работ. Важно, чтобы каждый специалист, работающий над проектом, видел «картину» в целом. Разработка простого сайта-визитки и создание интернет-магазина с поддержкой всех необходимых сторонних сервисов – это разные вещи. 
  • Информация об особенностях будущего сайта, деталях, на которые нужно обратить особое внимание. 
  • Сроки выполнения работы. 

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

Техническая часть: требования к сайту

К важным техническим аспектам проекта, описать которые необходимо в техзадании относятся: 

  • Система управления контентом сайта (CMS). Выбор «движка» – один из первых важных выборов, с которыми предстоит столкнуться при разработке веб-ресурса. «Движок» может быть коммерческим (как 1C-Битрикс),  бесплатным (как WordPress, Joomla, OpenCart) или самописным, то есть создаваемым разработчиком с нуля по требованию заказчика. 
  • Кроссбраузерность. Важно указать, на каких версиях популярных браузеров должен работать будущий сайт. 
  • Адаптивность. На каких устройствах будет чаще всего использоваться сайт? Нужна ли ему мобильная версия? Эту информацию также необходимо добавить в ТЗ.

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

Структура сайта

Создание структуры — своего рода «фундамента» сайта — это один из важнейших этапов разработки. Успех сайта во многом зависит от того, насколько удачной и удобной для пользователя будет его структура и ее элементы.

1. Сквозные элементы

Сквозными структурными элементами называют те элементы, которые демонстрируются на всех страницах сайта. К ним относятся: 

  • Хедер (header, шапка сайта) — отдельный информационный блок, располагающийся вверху на каждой странице сайта. В хедере содержатся название и логотип компании, элементы навигации по сайту (меню), контакты, корзина (если речь об интернет-магазине), кнопка «вход/выход» (если на сайт добавлена возможность регистрации). 
  • Футер (footer, подвал сайта) — нижний информационный блок с полезной, но не первостепенно важной информацией. В футер обычно выносятся ссылки на социальные сети компании, полные контактные данные, навигационное меню.
  • Сайдбар (sidebar) — закрепленная боковая панель сайта, которая размещается справа или слева от основного контента и улучшает показатели юзабилити ресурса. Размещенная в сайдбаре информация упрощает навигацию, а также может содержать анонсы или комментарии, рекламу. 
  • Всплывающие окна, попапы (pop-up) — элемент интерфейса, появляющийся поверх основного контента на странице в ответ на определенное действие пользователя. В попап может быть добавлена форма подписки на рассылку, заполнения заявки, заказа звонка. 

В ТЗ нужно добавить как можно более подробное описание вышеуказанных элементов.

2. Уникальные страницы

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

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

Уникальными могут быть страницы самых разных типов. Из описания могут быть примерно такими: 

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

Каждую уникальную страницу нужно описать максимально подробно и добавить к описанию все имеющиеся вспомогательные файлы. 

3. Прочие страницы

Нередко специалисты, составляющие ТЗ на разработку сайта, забывают добавить описание структуры типовых страниц, к которым относятся: 

  • Страницы ошибок. То есть те страницы, которые увидит пользователь в том случае, если на сайте что-то пойдет не так. 

Больше примеров оформления таких страниц можно посмотреть тут.  

  • Страница результатов поиска по сайту. 
  • Страница авторизации пользователей. 
  • Типовая текстовая страница. То есть структура, на основе которой будут создаваться все новые страницы сайта.

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

Рекомендации для составления ТЗ

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

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

Пишите однозначно и точно

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

Вот несколько не самых удачных формулировок: 

  • «Сайт должен быть удобным». Удобным для кого? По каким критериям будет оцениваться его удобство?
  • «Сайт должен содержать экспертный контент». Что делает контент экспертным? Кому он должен таковым показаться? 
  • «Сайт должен выдерживать большие нагрузки». То есть какие? Сотню или тысячу пользователей запросов пользователей одновременно? А может гораздо больше? 

Используемые в ТЗ формулировки должны быть точными и четкими, лучше всего – имеющими цифровое значение. 

Укажите общую информацию

Обязательно добавьте в техзадание вводные данные, которые помогут исполнителю лучше понимать задачу:

  • для какой компании создается сайт? 
  • какой целевой аудитории он должен быть полезен? 
  • на какие нюансы работы стоит обратить особое внимание? 

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

Поясните сложные термины

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

Опишите инструменты и требования к хостингу

Зафиксируйте в ТЗ, на каком «движке» будет работать будущий сайт и какой функционал необходимо внедрить в ходе разработки.

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

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

Укажите структуру сайта

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

Объясните, что будет на каждой странице

Какие элементы будут на каждой странице сайта? Для чего? Зафиксируйте информацию по наполнению каждой страницы, сделав это одним из двух способов:

  • Способ 1. Прототип. Создание прототипа — наиболее наглядный способ демонстрации интерфейса будущего сайта.
  • Способ 2. Перечисление. Перечисление — менее энергозатратный способ, подразумевающий простое перечисление запланированных элементов.

Распишите сценарии использования сайта

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

Приведем для примера сценарий авторизации в типичном интернет-магазине (OZON, Wildberries и т.п.): 

  • пользователь нажимает на кнопку «Войти» — сайт открывает форму входа/регистрации →
  • пользователь вводит номер телефона/e-mail и получает код для входа — сайт открывает форму ввода кода для подтверждения учетной записи →
  • пользователь вводит полученный код — сайт открывает версию сайта для авторизованного пользователя. 

Если в разработке лендинг или простой сайт-визитка, то прописывать пользовательские сценарии необязательно.

Определите, кто отвечает за контент

Ведь как выглядит сайт без контента? Как рама без картины. 

Поэтому заранее подумайте о том, кто будет поставлять контент: наполнять сайт текстами, фото- и видеоматериалами. Варианты работы по созданию контента:

  • контент предоставляется исполнителем и включен в стоимость сайта;
  • контент предоставляется исполнителем и оплачивается заказчиком отдельно;
  • контент предоставляется заказчиком. 

В ТЗ важно прописать объективные оценки качества контента (например, уникальность текста в процентах). При этом стоит отказаться описательных качественных характеристик – «интересный», «привлекательный» и тому подобные. 

Опишите дизайн (если сможете)

Сложно описать дизайн объективно. Но кое-что указать все-таки можно: 

  • предпочтительная цветовая гамма; 
  • шрифты (или их общие характеристики);
  • пожелания к дизайну конкретных элементов сайта.

Если у заказчика есть брендбук, то нужно приложить его к техзаданию.

Лайфхаки по составлению ТЗ

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

Где взять сайты-образцы

На просторах интернета можно найти множество сайтов-образцов для вдохновения. Особо обратить внимание стоит на креативную медиа-платформу Behance, сайт конкурса профессиональных веб-дизайнеров и разработчиков Awwwards и собирающий лучшие сайты мира ресурс All Awards

Как определить цветовую гамму

Не знаете, как выбрать цвета для сайта? Попробуйте поискать в интернете палитры хорошо сочетающихся оттенков, просто вбив в поисковую строку «подборки цветов». Или воспользуйтесь сервисами для создания цветовых схем: Adobe Color CC, Colormind, Coolors и тому подобными.

Как подобрать шрифты для сайта

С шрифтами важно не прогадать, ведь от них зависит то, насколько читабельным будет контент на сайте. Прежде всего, внимание стоит обратить на четкие шрифты без засечек. А для подбора более необычных вариантов можно воспользоваться онлайн-инструментами: 

В интернете легко найти альтернативу вышеуказанным сервисам. Найдите ту, что подойдет именно вам!

Есть ли специальные требования для написания ТЗ

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

Ошибки при написании ТЗ

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

Нет ограничений во времени

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

Отсутствие наглядности

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

Утрата данных доступа

Важно отнестись к данным доступа серьезно. Получив все нужные логины и пароли (к примеру, для входа на хостер или DNS-регистратор) от разработчика, следует аккуратно приложить их к ТЗ и не потерять впоследствии. 

Качественные прилагательные

В ТЗ следует избегать пространных пожеланий, которые можно интерпретировать двояко. Согласитесь, что у каждого человека весьма субъективные представления о том, что такое «красивый» сайт.

«На усмотрение разработчика»

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

Не прописана цель создания сайта

Нужно сразу определить, какие ключевые (читай, продающие) действия ожидаются от пользователя. В дальнейшем это значительно упростит настройку сквозной аналитики проекта.

Не учтена семантика

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

Нет пользовательских сценариев

При создании сайта важно ясно представлять, каким будет поведение ЦА: с какой целью пользователи будут переходить на сайт, какая информация понадобится им в первую очередь, что поможет им совершить целевое действие. 

При полном отсутствии опыта в составлении ТЗ стоит прибегнуть к помощи грамотных специалистов. Это поможет получить предсказуемый рабочий результат.

Пример-образец технического задания

Заключение

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

Как адаптировать сайт под мобильные устройства: пошаговая инструкция

Вступление

Сегодня больше половины транзакций в сети осуществляются с использованием мобильных устройств. Согласно статистике «Similarweb Introduces», мобильный трафик за период с 2017 по 2021 год уже вырос на 50%. И продолжает неуклонно расти.

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

Изображение: maestro / shutterstock.com

Проблемы, которые решает адаптация сайта

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

Проблема 1: Некорректное отображение текста и элементов

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

Проблема 2: Отсутствие популярности ресурса

Адаптированный сайт, будучи простым и приятным в использовании, не отталкивает потенциального клиента, а привлекает его, заставляя посещать сайт снова и снова. Посетители особо удачных адаптированных версий сайта советуют его знакомым по принципу сарафанного радио: «Смотри, как удобно они сделали!».

Проблема 3: Низкое ранжирование сайта в поисковой выдаче

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

Изображение: maestro / shutterstock.com

Проблема 4: Низкая конверсия

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

Проблема 5: Неработающий таргетинг

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

Приступаем к адаптации

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

Существует три основных вида адаптации сайта:

  • Создание адаптивного дизайна. 
  • Преобразование сайта в мобильную версию.
  • Создание динамической демонстрации. 

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

Создание адаптивного дизайна

Адаптивный дизайн — самый простой и эффективный способ общей адаптации веб-ресурса. Его суть состоит в том, что сам по себе код сайта HTML остается без изменений. Наша задача — видоизменить дизайн сайта, сделав его адаптивным.

Изображение: maestro / shutterstock.com

Для этого мы можем:

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

Теперь пошагово выполняем каждое из указанных действий:

  1. Открываем доступ к коду страницы (или ее исходному ресурсу). Речь идет о параметрах CSS, JScript, изображениях всех форматов и тому подобное.
  2. Вписываем в код страницы специальный метатег под названием «Viewport». Он позволит нам настроить ширину страницы под нужды того или иного устройства, в нашем случае — мобильного. Параллельная переадресация при использовании этого метатега самостоятельно не применяется.
  3. После инжекта метатега (HTML-код которого Вы легко можете найти в открытых источниках), создаем разметку и настраиваем CSS-фреймворк, используя инструкции и свойства кода.

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

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

Изображение: Десктопная версия сайта логистической компании / allitec.ru
Изображение: Мобильная версия сайта логистической компании / allitec.ru

Что мы получаем в итоге? Узнаваемый при просмотре с экрана мобильного телефона или планшета сайт. 

Создание мобильной версии сайта

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

ВАЖНО! При создании мобильной версии сайта обязательным условием станет вписывание в код сайта тега типа «Link rel=»alternate» с добавлением действующего адреса мобильного сайта. Зачем нужен этот тег? После создания второй веб-страницы и присвоения ей доменного имени, автоматическая система идентификации поисковых систем (у Яндекса и Гугла уж точно) посчитает оба сайта за дубликат одного и, скорее всего, заблокирует один из доменов к выдаче. У поисковиков это называется антиспам-политикой.

Динамическая демонстрация

Динамическая демонстрация по своей сути объединяет оба предыдущих метода адаптации. При ее использовании вы сохраняете единственный адрес для мобильной и ПК-версий сайта, но код формата HTML все же меняется.

Каждый из трех, приведенных выше, способов адаптации сайта под мобильные устройства

Как самостоятельно адаптировать сайт под мобильные устройства

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

Также вы можете использовать специальные онлайн-конструкторы по созданию сайтов. Самым популярным из них является к Tilda. 

Создание сайта на Tilda

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

Изображение: Tilda / tilda.ru

В интерфейсе Tilda вы сможете найти вкладку по созданию сайтов для мобильных приложений. На сайте реализован достаточно удобный пользовательский интерфейс, а также имеется доступный FAQ. К основным преимуществам сервиса относятся: 

  • широкий инструментарий, доступный каждому;
  • понятный пользовательский интерфейс;
  • высокая скорость работы;
  • интересный выбор дизайнерских решений (например, шрифты и оформление блоков);
  • выбор шаблонов для ориентирования.

Вместе с тем, сервис обладает и рядом особенностей:

  • ежемесячно взимаемая плата за использование расширенных функций сервиса;
  • принадлежность сайта платформе Tilda и использование ее внутреннего движка;
  • ограниченный функционал для создания объемных многостраничных сайтов;
  • ограниченное место на хостинге.

Другие конструкторы сайтов

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

  • Wix.com;
  • uKit.com;
  • Nethouse.ru;
  • Конструктор сайтов от Tinkoff.ru;
  • Bitrix24.ru.

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

Как проверить готовый сайт на адаптивность

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

При работе с браузера Google Chrome просто нажмите F12 и выберите соответствующую функцию в «Инструментах разработчика». Аналогичная процедура применяется в Yandex Browser.

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

Изображение: source / shutterstock.com

Заключение

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

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

За экспертной оценкой ресурса и помощью в адаптации обращайтесь в наше агентство. Мы уже много лет помогаем компаниям адаптировать ресурсы под смартфоны и планшеты. А потому дадим экспертную оценку вашего сайта, поможем с выбором оптимального способа адаптации и его реализацией. Вам понравится работать с нами! 😉

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