Перестаньте делать обычные сайты. Адаптив — это не страшно

Перестаньте делать обычные сайты. Адаптив — это не страшно
Вадим Филиппов, руководитель проектов

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

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

Перестаньте делать обычные сайты. Адаптив — это не страшно

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

Лирическое отступление

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

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

Зачем и кому это нужно?

Вы же хотите заиметь лояльного клиента и немного денег? Тогда срочно бегите к заказчикам и продавайте адаптив. Адаптив полезен e-commerce, так как все больше людей попадают в капкан своих телефонов и делают покупки с них. Адаптив нужен простым компаниям (корпоративный сайт), чтобы потенциальные клиенты, сотрудники и просто курьеры не испытывали проблем при поиске телефона и адреса на вашем сайте. И вам, мои любимые блогеры, нужен адаптив, чтобы пользователи мобильных устройств комфортно читали статьи в любых условиях.

Не хватает аргументов для продажи? Тогда знайте, что Гугл понижает в выдаче сайты, которые не «mobile friendly». А где Гугл, там и другие поисковые системы подтянутся.

И вот мы у клиента

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

Если вам не повезло, не расстраиваетесь. Клиент может сказать «Мне нравится мой текущий сайт, но адаптив это круто и весело, давайте сделаем». В этом нет ничего страшного, главное донести до клиента, что сайт может немножко изменится, так как адаптив должен подчиняться некоторым правилам, но вы, конечно же, сделаете все, чтобы сайт нравился ему как и раньше.

Смета

Возьмем в расчет, что у вас есть какая-то базовая смета, по которой вы составляете КП для клиента. Очевидно, базовая смета зависит от сложности проекта.

Так вот...

Как отличаются сметы при создании сайта «с нуля» с адаптивным дизайном и без него?

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

  • В проектировании время увеличилось на 30%. Это полностью покрыло время на создание адаптивного прототипа;
  • Добавилась строка «Описание поведения активных элементов на гаджетах — 3ч»;
  • В верстке время каждого макета увеличилось в 1,5 раза + скорректировались риски;
  • Тестирование верстки также увеличилось в 1,5 раза + скорректировались риски;
  • Отладка верстки увеличилась в 2 раза.

Как видите смета разрослась, но не на много. Я думаю, что вам не составит труда объяснить клиенту, почему произошло увеличение цены.

С сайтом «с нуля» все достаточно ясно, но что делать, если клиент не хочет менять большую версию сайта?

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

Теперь вернемся к смете для такого проекта.

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

  • Проектировщик должен составить прототип, учитывая структуру текущего сайта, и выстроить блоки так, чтобы логика при перестроении не ломалась. Смело увеличивайте время в 2 раза от базовой сметы. Помните, проектировщик здесь делает самую ответственную работу.
  • Дизайнер. Тут можно вложить дизайн двух разрешений одной страницы в бюджет, но тогда его будет сложно утвердить, да и не очень-то профессионально это :) Я рекомендую закладывать работу дизайнера на задачи типа «Отрисовка иконок в SVG» (вы ведь пользуетесь им, да? 21 век на дворе), «Отрисовка дополнительных элементов сайта» (например: внешний вид галереи для телефонов, меню, подсказки форм и т.п.).
  • В верстке и далее все как в проекте «с нуля» (см. выше).

Процесс разработки

Адаптив вносит некоторые изменения в процесс разработки сайта.

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

Проектирование

Как я говорил выше, проектировщик должен делать адаптивный прототип. У нас с этим проблем не возникло, мы используем в работе Axure RP, он позволяет делать несколько лайаутов. Проектировщик также должен решить, что будет видеть пользователь на разрешении 1024.

Проблема 1024

Еще остались пользователи, которые сидят с мониторами 1024 px по ширине. Согласитесь, показывать им версию для планшетов (например, iPad в горизонтальном положении имеет 1024 px) как-то нелогично. По идее, такие пользователи должны увидеть версию для ПК. Но тут решать вам.

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

Дизайн

Если вы выбрали вариант отрисовки всех макетов, то процесс в дизайне не очень сильно меняется, просто уходит гораздо больше времени. Но если вы выбрали частичную отрисовку, то вам придется потрудиться, чтобы ничего не пропустить. Для начала составьте список элементов страниц, которые чаще всего повторяются по сайту, назовем это страницей виджетов. Обязательно покажите, как от размера экрана меняются кнопки, поля ввода, сообщения об ошибке форм, заголовки и так далее, думаю, вам понятно. После этого нарисуйте меню для мобильных устройств, чтобы точно понимать, как оно будет выглядеть и работать. Не забудьте о векторных иконках и прочей небольшой графике, которую нужно будет убрать в спрайт. Если у вас e-commerce проект, то после этого этапа можно вернуться к проектированию и внести изменения в прототип. Так вы лучше поймете, как пользователи будут взаимодействовать с сайтом.

Frontend-разработка

Здесь почти никаких изменений. Фронтендер использует ранее оговоренную сетку и руководствуется принципом «Mobile first».

В задаче исполнитель должен получить от вас такой набор:

  • Прототип (помогает ориентироваться на поведение блоков);
  • Дизайн (виджеты и текстовое описание изменений при ресайзе);
  • Чек-лист особенностей, которые нужно учитывать.

Говоря об особенностях, я имею в виду такие штуки как:

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

Программирование

Наличие адаптивного сайта почти не влияет на процесс программирования.

Есть несколько случаев, когда программисту нужно будет быть более внимательным:

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

Выводы

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

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

P.S.

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



  • Как самостоятельно настроить учет данных о рекламных расходах в Google Analytics с точностью до копейки

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

    Мы в своих проектах такой учет ведем. И сегодня генеральный директор агентства интернет-маркетинга «Топ Спот», входящего в нашу группу компаний, Дмитрий Губанов написал специально для vc.ru колонку с практическими советами о том, как автоматизировать учет данных о рекламных расходах в Google Analytics.

  • Итоги уходящего года

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

  • Как победить в схватке за кадры с лидерами индустрии?

    Издание Cossa.Ru опубликовало статью Валерия Комягина о том, как противостоять хантингу со стороны IT-гигантов. В издании вышла редакционная версия материала. Мы, в свою очередь, публикуем «режиссерскую версию» текста, не подверженную цензуре.

  • Мы в десятке лучших разработчиков интернет-магазинов Москвы

    Мы в десятке лучших разработчиков интернет-магазинов Москвы

  • Тэглайн 2015: +22 позиции в рейтинге ведущих digital production России

    Тэглайн 2015: +22 позиции в рейтинге ведущих digital production России

    Крупнейшее аналитическое агентство Тэглайн опубликовало рейтинг ведущих разработчиков Рунета. В этому году мы поднялись сразу на 22 позиции и заняли итоговое 71 место.

  • Презентация к докладу «Ключевые показатели digital-производства»

    Все говорят, что в студийном бизнесе важно следить за показателями эффективности. Но никто не говорит, за какими именно. На РИФ+КИБ 2015 мы рассказали о личном опыте внедрения базового управленческого учета. Публикуем презентацию к этом докладу.

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

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

  • Сказ о том, как старый год провожали

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

  • Как это было: новый логотип и фирменный стиль Студии

    Как это было: новый логотип и фирменный стиль Студии

    В этом году Студии исполнилось 15 лет. Всё это время мы прожили с логотипом, придуманным в 2002 году первым арт-директором и совладельцем компании Олегом Нагурским. Настало время его поменять.

  • Третий лишний?

    Третий лишний?

    Рассказ о том, как сделать интеграцию со сторонними сервисами менее болезненной.

  • Срочно... в вёрстку!

    Срочно... в вёрстку!

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

  • Стратегическое партнёрство с Caparol

    2014 год для нашей компании становится знаковым сразу по нескольким причинам. В этом году Студии исполнилось 15 лет. Для веб-разработчика, с учётом молодости самой индустрии, это солидный возраст. Когда мы начинали в 1999 году, Рунету было всего 5 лет, а веб-студий по стране насчитывалось не больше сотни.

  • Интервью SeoPult

    Интервью SeoPult

    25 сентября состоялись съемки интервью Вaлерия Комягина для SeoPult.TV. Публикуем видеозапись передачи.

  • Браузеры в браузере

    Браузеры в браузере

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

  • Еженедельные планерки...

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

  • Как выбрать подрядчика для создания сайта? Часть 2

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

  • «Цель» Элияху Голдратта

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

  • Как выбрать подрядчика для создания сайта? Часть 1

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

  • Первый опыт на Yii

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

  • Мобильное приложение хоккейного клуба «Динамо» доступно в App Store

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

  • V Russian Digital Week, день первый

    В эти дни в Digital October проходит мероприятие под названием «V Russian Digital Week», которое, как написано на сайте мероприятия, «определяет вектор развития российской digital-индустрии на ближайшие годы». Мы почитали темы докладов, подумали и решили съездить в качестве слушателей. Первый день под названием «digital&design» был посвящен, собственно, digital и дизайну.

  • Сайт коллекционного журнала «WinX Club — Волшебная комната»

    Вчера вышел наш новый проект — сайт коллекционного журнала «WinX Club — Волшебная комната». Проект получился маленький, но аккуратный. Примечательно то, что собран он был в рекордные просто сроки даже с учетом необходимости согласования материалов не только с представителями заказчика — наших старых друзей из издательства «Эгмонт-Россия», но и с представителями правообладателя — итальянской компанией Rainbow S.r.I. Собственно, не без удовольствия и гордости, представляем вашему вниманию проект. Будем рады критике, похвалам, восторженным возгласам ... Тухлым помидорам рады, конечно же, не будем, но обещаем воспринять, как это положено настоящим профессионалам... с гневной истерикой :-)

  • Еженедельные планерки...

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