28 июля 2016, 11:30
7645

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

Вёрстка двух раздельных макетов — явный признак непрофессионализма.

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

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

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

Что любопытно, даже сейчас можно встретить англоязычные сайты, которые выглядят как раздаточная рекламная листовка, но в интернете. Из полиграфии в веб перекочевали раз и навсегда жёстко заданная ширина, общее композиционное решение, напоминающее о лучших традициях печатного дела. Хорошо, если «тело» сайта будет отцентровано на экране, а не прибито к левому краю. Такие сайты создавались как в 1998 году, так и в 2008 и, наверняка, продолжают создаваться и поныне...

Стань digital-аналитиком за 16 недель!

Cossa рекомендует один из лучших российских онлайн-курсов по веб-аналитике и аналитике User eXperience. Прокачай своего внутреннего аналитика по программе от AIС – digital-студии номер один в России.

  1. Введение в специальность. UX-Аналитика в digital.
  2. UX Аналитика. Data-Driven / Data-Informed.
  3. Обзор аналитических инструментов.
  4. Продвинутый разбор Google Analytics
  5. Построение и оптимизация воронок
  6. Очные исследования
  7. Удаленные исследования
  8. Петля улучшений. Поиск гипотез и версионность тестов.
  9. A/B Тесты и другие способы проверки гипотез.
  10. Юнит-Экономика.
  11. Почему не обойтись без базовых знаний JS
  12. Настройка Google Tag Manager.
  13. Зачем нужен SQL и как с ним работать?
  14. Аналитика 360. Ваши персональные большие данные.
  15. AIC.Brain. Аналитическая система своими руками.
  16. Введение в BI. Обзор промышленных систем аналитики.
  17. Разбор кейсов

Записывайтесь на курс! Старт ближайшего потока — уже 15 декабря.

Реклама

При этом в российской традиции разработки сайтов, ввиду большей независимости от полиграфического дизайна, главенствовал другой подход — максимального использования полезного пространства экрана, даже во времена, когда табличная верстка была ещё распространена. Например, в 2003 — 2006 годах многие старались сделать «резиновую» верстку с блоками фиксированной ширины для меню и сайдбаров и контентом, занимающим всю оставшуюся полезную площадь. Это послужило основной предпосылкой, выросшей со временем в существенную разницу в подходе к процессу верстки сайтов: «старая американская модель» — верстается точно по размерам, которые нарисовал дизайнер и «новая русская модель» — растягиваем блоки, подстраиваем дизайн и заполняем всё полезное пространство.

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

Переломным моментом в мировой практике стал выход статьи «Responsive Web Design» в 2010 на ресурсе A List Apart за авторством Ethan Marcotte. С её появлением такой подход получил название Responsive Design и широкое распространение и прочно закрепился в индустрии. Очень важно отметить, как этот инновационный для англоязычной среды подход перекликается с давно принятым у нас «резиновым» подходом к верстке — использование всей полезной площади страницы, отказ от или уменьшение второстепенных блоков при значительном уменьшении ширины экрана.

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

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

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

В современных реалиях не должно даже стоять вопроса о наличии мобильной или адаптивной версии сайта. Так что, если при расчете работ по созданию сайта вам предложат на выбор разделенные варианты: «вёрстка» и «адаптивная вёрстка» (и конечно же второй вариант стоит дороже), знайте — это признак такой же некомпетентности, как если бы вам предлагали сверстать сайт «фреймами» или «таблицами» как стандартное решение, а за современную вёрстку блоками просили отдельных денег. Исключение может составлять, например, случай, если вы создаёте аналог «Вконтакте», но это совсем другая история...

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

Комментарии:

- 0 +
Seryak #
28.07.2016 15:13
Не вижу наличие особо большего профессионализма и квалификации в том, что бы сделать верстку на бутстрапе, чем в том, что бы сделать отдельно две версии сайта (например через Mobile detect). Не увидел в статье причин, по которым две версии сайта = плохо, ну кроме того что это стоит дороже.Какое-то ущемленное мнение.
Ответить
- 0 +
Alexander Pichugin #
01.08.2016 17:32
Михаил, в статье как раз речь идет о том, что "просто взять бутсреп" недостаточно, и нужно к верстке подходить как к части процесса. Делать же две полноценные версии сайта в два раза более затратно, но не будет решать задачи лучше, чем _хорошо_ сделанная верстка.
Ответить
- 0 +
Roman Romanov #
29.07.2016 10:04
Так мы говорим о мобильной версии сайта или адаптивной верстке?
Ответить
- 0 +
Alexander Pichugin #
01.08.2016 17:36
Роман, адаптивная верстка это подмножество решения «мобильная версия сайта». В статье осуждается именно практика отделять оценку "верстки для мобильных устройств" по причине того, что опции "не делать мобильную версию" просто нет в современных реалиях.
Ответить
- 0 +
Vladimir Sonko #
29.07.2016 10:26
Опаньки! Адаптивная верстка и мобильная версия сайта это одно и то же?
Ответить
- 0 +
Alexander Pichugin #
01.08.2016 17:39
Владимир, адаптивная верстка это одно из возможных решения для реализации мобильной версии сайта. В тексте статьи указано, что рассматривая подход к адаптивной верстке как к системному решению, а не только лишь техническому средству непосредственно верстки, мы решаем, в большинстве случаев, потребности мобильной версии. Конечно есть случаи когда действительно отдельная мобильная версия обоснована, и в статье есть оговорка на этот счет, про масштаб «Вконтакте»
Ответить
- +1 +
Анна Леонова #
29.07.2016 18:26
Подождите, я вот тоже не поняла, что хотел сказать автор? Адаптивная верстка - понятно, что не должна стоить дополнительных средств, но встречаются умники, которые начинают накручивать за такую верстку, особенно если еще не поняли, что заказчик разбирается в теме. Но мобильная версия сайта - это не есть адаптивная верстка. Мобильная версия - это уже другой проект, со своими макетами и версткой, с другой совершенно структурой, которая направлена на то, чтобы с мобильного не просто сайт нормально отображался и ничего не съезжало, но чтобы было удобно пользоваться.
Ответить
- 0 +
Alexander Pichugin #
01.08.2016 17:42
Анна, спасибо за развернутый комментарий.
К сожалению «умники» встречаются настолько частно, что я решил, что стоит об этом написать.
По сути вопроса: адаптивная верстка — это одно из возможных решений реализации мобильной версии сайта, и я постарался описать что при правильном структурном подходе к этому решению, при проектировании учитываются все ключевые варианты использования, а в сочетании с квалифицированной реализацией (а не просто "подключить бутстреп", что однако не отменяет наличия его или любой другой системы построения сетки) реально закрыть описанные вами потребности не создавая именно отдельной, независимой версии.
Ответить
- 0 +
Мила Урядникова #
02.08.2016 10:50
Расскажите, пожалуйста, как вы заказчику объясняете, как будет выглядеть страница с адаптивной версткой на экранах разных размеров, если не делаете хотя бы два набора макетов "под каждое из целевых устройств/сценариев", чтобы показать, как страница "позволяет отсеять, скрыть одни элементы и переформировать другие"?
Да и верстальщику не отдашь один макет со словами, что оно там перестроится. Вроде бы так и так два (пусть полтора) набора макетов будет.
Ответить
- 0 +
Alexander Pichugin #
02.08.2016 18:48
Мила, спасибо за вопрос!
Конкретно в нашей методологии работы, мы прорабатываем сценарии и на их основе делаем блочные прототипы ключевых макетов, при этом т.к. эта работа с плотной связке с клиентом, то он не "утверждает картинки", а участвует в процессе и понимает, что получит на выходе.
По поводу работы верстальщика — тоже есть нюансы, т.к. когда верстальщик (профессиональный) работает, как полноправный член проектной команды, то у него представление о том, что и куда "там перестроится" складывается тоже не исходя из "того, что нарисовано" — он работает не с дизайн-макетами, не с пиксель-перфект отображением, а с удобством пользователя, с UX, если угодно.
Ответить
- 0 +
Мила Урядникова #
11.08.2016 11:16
Александр, не убедили. Точнее, так: конечно, для стандартных проектов, например, лендингов, это может работать, особенно если можно клиенту показать кучу примеров. Но если у вас сложный сайт региональной энегретической компании, личный кабинет студента с кучей сервисов да просто корпоративный сайт неравнодушного клиента, тот давать верстальщику, даже супер-профи, решать, что будет выводиться и где, а что и как упрощаться и скрываться? Ну.. как-то нежизненно звучит.
С клиентом в любом случае чем-то надо подстраховываться, чтобы не оказалось, что то, что он "понимает, что получит" и то, что будет на сайте, это разные вещи. Просто на словах вы ведь не оставляете такие договоренности? Так или иначе работа идет на двумя разными реальностями, растущими из одного корня. Поэтому не смущайте клиентов, говоря, что там нечего делать и не за что платить =) А программинг? Сайт и сайт с адаптивом, ну как, допустим, квартира с балконами и без: какие? куда выходят? застекленные ли? Это допработа? Бесспорно.
За готовыми решениями можно и в темплейтмонстр пойти, а если в действительности делается серьезное проектирование, и клиент участвует и понимает это, он не может думать, что это будет бесплатно.
Ответить
- 0 +
Фёдор Лукьянов #
28.07.2017 20:54
Конечно, адаптивная верстка может и не стоить отдельных вложений, если тебе изначально сверстали дизайн сайта приятный глазу обывателей, а если ваш сайт лохматый? И в придачу не конкурентоспособный бизнес (типичный для вашего города, бизнес которому легко найти замену, или купить минуя интернет) можно потерять клиентов.
Ну не сидят сейчас люди за стационарными компьютерами!!! Не удобно клацать пальцами, увеличивая туда-сюда главные аспекты: прайс-меню-контакты.
Я теперь это понимаю, мне это популярно объяснил Сергей из http://www.mobile-version.ru/, показатели посещаемости, времени нахождения на странице возросло в двое, после новой верстки под экран мобильных, улучшилась обратная связь, посыпалось больше заказов (Я представляю не большую  клиническую лабораторию).
Сделали прайс более удобным для просмотра с телефона или планшета, сайт работает как на Iphone, так и на android, без глюков открывается в Opera и Хром.
Самая дешевая верстка css3 которую мне удалось нагуглить. Отзывы не купленные, попадаются не очень хорошие и восторженные. Так что я прямо недоумеваю, что это за вредные советы вы здесь в статье раздаете? Должна быть адаптивная верстка, нельзя ее избегать и заменять, наслушаются такого "молодые бизнесмены" и прогорят на элементарном восприятии сайта.
На этом сайт мне подправили дыру в бюджете за 2 дня, через два дня после рестарта пошла динамика продаж, посещений. Мне понравилось, что сайт довели до ума.
Ответить
- 0 +
Роман Кустов #
26.09.2017 16:29
А что если разработчики предлагают не mobile-first верстку, а дальнейшую адаптацию основной десктопной версии сайта под мобильные устройства? Аргументируют, конечно же, сложностью реализации некоторых UI решений, и более низкой ценой, в случае реализации не mobile-first верстки. Столкнулся с этим в процессе подготовки редизайна для такого проекта http://pokerdom-2017.com/, но вот разработчики со стороны клиента ставят "палки в колеса".
Ответить
- 0 +
Валера Гук #
10.11.2017 13:47
По поводу мобильной верстки и адаптивной, также мы обращались в разные конторы, тоже пытались узнать сколько займет реализация для нашего сайта http://pokerdom777.com/, из всего предложенного не подходили озвученные суммы, нашли ответственного фрилансера, и отказались от канторы.
Ответить
- 0 +
Валера Гук #
10.11.2017 13:48
Ответить?

Самые интересные статьи, обзоры и размышления —
в рассылке!

Email *


Подпишись!


Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой