За что вы платите или как происходит процесс разработки внешнего интерфейса

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

Еще больше запутывает заказчиков ситуации когда обращаются сразу к нескольким разработчикам, те в свою очередь за один и тот же объем работы могут назвать цену и сроки которые существенно отличаются. Для примера возьмем одностраничный сайт или landing page средней сложности.
- Один называет 20$ (~510 грн. или ~1000 руб. ) и 2 дня работы;
- Второй 90$ (~2500 грн. или ~5000 руб.) и 3 дня работы.

Да как такое может быть и в чем разница? Это первый вопрос который задает себе заказчик. Отнеситесь к этому с юмором, но я сразу вспоминаю это видео, 49 секунд, а сколько смысла:)

Для просмотра, кликните “show embed” и после на знакомую кнопку play.
Ссылка, если видео не доступно
https://youtu.be/EDeLfhq4UQs

Дело конечно же в качестве и подходе к работе, но что из себя представляет “качество” о котором так твердят? Все это поясню, но обо всем по порядку.

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

Из личного опыта

Сейчас фиксированный размер сайта потерял свою актуальность, всех интересует адаптивный. Адаптивность — это корректное отображение сайта на десктопах, планшетах и мобильных телефонах. В большинстве случаев, заказчики обращаются с просьбой разработать адаптивный сайт, предоставляя лишь макет под десктоп, ширина которого является классической, это 1920px. А как сайт должен выглядеть на расширениях 768px и 320px, называется “придумай сам” .
Я не буду учитывать случаи когда дизайн на столько не подготовлен, и проигнорированы все стандарты для адаптивных сайтов, что дальше некуда. В теории прототип, а позже и макет сайта должен строиться именно так, по сетке и блокам.

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

Что такое качество верстки сайта и по каким критериям его оценивают?

Требования к современным сайтам просты, но не так просты в выполнении. Рассмотрим лишь технические требования без учета UI/UX дизайна, маркетинга, SEO и т.д.

  1. Адаптивность. Сайт должен корректно отображаться на всех расширениях и устройствах, если быть точнее, от 320px до 1920px. Поддержку ретина дисплеев в данном случае рассматривать не будем.
  2. Скорость загрузки. Тут совсем все просто, чем быстрее грузится, тем лучше. Хорошим показателем является скорость загрузки до 3.5 секунд.
    2 секунды — вообще замечательно.
    Только вот когда заказчик хочет на одной странице анимацию, видео, 30 широкоформатных фотографий, виджеты всех возможных соц.сетей, всплывающие окна через каждые 10 секунд, карты, подключение всех возможных аналитик, чаты консультации и т.д. желая выделиться среди конкурентов, то добиться таких результатов становится просто нереально.
    Хотя, в таких случаях скорость загрузки уже не имеет значения, потому что чем быстрее пользователь увидит “такое”, тем быстрее покинет сайт в ужасе:)
  3. Валидность. Соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке сайта — один из основных показателей качества вёрстки.
    Простыми словами, это своего рода как грамматика в письме. Код написанный не по стандартам не самая большая проблема, сайт работать будет и так, но правила есть правила, и лучше их придерживаться где это возможно.
  4. Кроссбраузерность — близкое к исходному дизайнерскому и функциональному виду отображение параметров сайта при использовании разных браузеров, их различных версий и модификаций.

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

Разработка, этапы, пояснения

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

Источник http://uxgu.ru

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

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

Хорошо когда дизайнер использует одну палитру цветов, а не добавляет цвет “на глаз”, где цвета не имеют визуального отличия, а код цвета бл*дь везде разный.

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

После написания кода, сайт проходит несколько этапов до момента релиза.

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

2. Оптимизация изображений. В первоначальном виде вес сайта довольно большой и грузится он будет дольше. Это связанно с тем, что только одного фонового изображения или картинки может достигать нескольких мегабайт, а вес страницы более 20 мб, уже вызывает зависания у слабых телефонов. В таком случае, о скорости загрузки сайта быстрее чем за 10 секунд, можно и не мечтать, и это при условии быстрого интернета. Вся графика сжимается без потери качества в десятки раз. Тем самым, мы оптимизируем “вес” сайта и скорость его загрузки.

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

Тестирование адаптивной верстки

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

4. Оптимизация и сжатие кода. Чем меньше код, тем быстрее он загружается. После того как код написан и протестрован, его нужно сжать. Убираются лишние пробелы, переносы строк и кавычки. Местами, в коде можно использовать одинарную кавычку ‘ вместо двойной “ . Казалось бы совсем мелочь, но в разработке мелочей не бывает.
Когда код перевалит за 10 000 строк, это уже не будет такой мелочью. Радует одно, вся работа выполняется автоматически.

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

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

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

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


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

Только, это законченна работа лишь Front-End разработчика.
Далее, если требуется cms, “админка” в народе, внешний интерфейс нужно интегрировать и подключить требуемый функционал, тогда в работу вступает Back-End разработчик, где все происходит куда сложнее и стоит естественно дороже:)

Как вы догадались, ни за 20$ и даже ни за 40$ большую часть выше перечисленных пунктов никто делать естественно не будет. Ведь, за счет чего тогда можно уменьшить стоимость более чем в 4 раза?

https://miroslav-tsarev.top/