Архив FAQ - Crazy Studio

Оставить сообщение

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных.

Доверяй, но проверяй!

Домен и хостинг
Какой выбрать?

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

Crazy.studio рекомендует BEGET, так как сами остановили свой выбор именно на нем.  Если вам подходит Beget и вы доверяете нашему совету, то будем признательны, если вы зарегистрируетесь по реферальной ссылке — https://beget.com/p843186

Дизайн
Масштаб макета (!)

Стандартные просмотрщики Windows и OS X показывают макет целиком на экране, уменьшая её пропорционально, иногда масштаб уменьшается до 90–80% и не каждый человек может это сразу заметить. Во избежании курьезных случаев, просим вас обязательно проверить, чтобы в вашем программном обеспечении, которым вы открываете макет был установлен точный масштаб 100%.

 

Макеты для всех необходимых страниц

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

Фавикон

Если в ТЗ дизайнеру было оговорено создание favicon — проверьте его наличие.

Иконки в SVG

SVG — это векторная графика для веба, такие иконки одинаково хорошо смотрятся как на десктопах, так и на мобильных (обычные растровые иконки в форматах jpg/png будут «размыты» на мобильных).

Шрифты

Если в макете используются нестандартные шрифты (читай «которых нет в Google Fonts»), то здесь должна быть папка с файлами этих шрифтов в форматах ttf, eot, woff. Также здесь может храниться шрифт с используемыми на сайте иконками (например, с IcoMoon).

Макеты в формате JPG (или PNG)

Если у вас нет фотошопа, то посмотреть PSD-макеты на компьютере будет затруднительно (на помощь придут онлайн-редакторы, но это не всегда удобно). Поэтому попросите дизайнера сохранить макеты как обычные картинки. К тому же, картинки в jpg/png весят гораздо меньше полноценного PSD-файла — ими легче обмениваться в процессе согласования дизайна.

Вёрстка
Адаптивность

Для проверки адаптивности верстки: откройте сайт в браузере и «сожмите» окно браузера до минимально возможной ширины. При изменении ширины окна браузера не должен появиться горизонтальный скролл, а сайт должен «адаптироваться» к новой ширине. Например должно скрываться меню, уменьшаться шрифты.

Соответствие макету
  • Страница визуально соответствует макету и требованиям ТЗ, все элементы находятся на своих местах.
  • Размеры элементов и блоков на странице соответствуют указанным в макете. Проверка с помощью расширений для Google Chrome PerfectPixel или 1px.
  • Элементы одного типа (например, абзацы или иконки) имеют корректное вертикальное и, где необходимо, горизонтальное выравнивание по линиям сетки. Простая проверка — сделать скриншот страницы и наложить в любом графическом редакторе линии сетки.
  • Отступы между элементами одного и того же типа (например, между карточками товаров в каталоге) одинаковые.
Валидация

Официальный валидатор W3C для поверки верстки находится на сайте validator.w3.org. Это бесплатный ресурс, предлагающий несколько способов проверки HTML-кода онлайн: по ссылке на сайт, фрагменту кода или загруженному с компьютера файлу. Обратите внимание, что W3C validator проверяет не весь сайт в целом, а только указанную страницу.

Часто в результате сервисы валидации разметки, как и компиляторы в разработке, выдают список, разделённый на предупреждения и ошибки. Разница в критичности. Ошибки с максимальной вероятностью могут создать проблемы в работе кода. Это опечатки (да, техника любит точность), лишние или недостающие знаки. А вот к предупреждениям относятся неточности, которые с минимальной вероятностью навредят работе страницы, но не соответствуют стандартам. Это избыточный код, бессмысленные элементы и другие «помарки».

 

Памятка

  • Не стоит путать валидность с абсолютной правильностью.
  • Важна каждая запятая и закрывающая скобка, закрытый тег. Глазами это сложно усмотреть всё, поэтому валидатор и придумали.
  • Валидаторы проверяют синтаксис. Термин из филологии.
  • Алгоритмы любят порядки. Чем лучше написан код страниц на сайте, тем выше сайт продвигается в релевантной выдаче.
Кроссбраузерность

Кроссбраузерность — одна из важнейших характеристик любого сайта, подразумевающая одинаково корректное отображение и работу ресурса в разных браузерах, а также их версиях. Для того, чтобы сайт правильно функционировал в Google Chrome, Яндекс.Браузере, Safari, Opera, Firefox как на стационарных, так и на мобильных устройствах, необходимо решить вопрос кроссбраузерности еще на этапе верстки.

 

Проверить кроссбраузерность можно двумя способами:

 

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

PageSpeed Insights от Google оценивает эффективность страниц для мобайла и десктопа, дает рекомендации по оптимизации сайта.

Важно: оценка от 1 до 100 зависит не только от скорости загрузки. Это внутренняя метрика сервиса, основанная на ряде правил. Рекомендации PageSpeed Insights не стоит воспринимать как призывы к действию, о чем предупреждают и сами разработчики.

В общем, тут как с «Главредом» – нельзя слепо подгонять под максимальное количество баллов, надо думать головой.

Программирование
Глоссарий
Фавикон 

От англ. Favicon (FAVorites ICON), в переводе с английского — «значок для избранного». Это небольшое изображение отображается во вкладке браузера, в которой открыт сайт, рядом с title открытой страницы.

Яндекс.Метрика

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

Хостинг

Предоставление ресурсов для размещения информации (сайта) на сервере в сети интернет.

Юзабилити

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

Модальное окно

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

Копирайтер

Составитель рекламных текстов.

Инфографика

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

Верстка

Создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

Домен

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

Дизайн-концепция

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

Landing Page

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

HTML

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

CMS

Аббревиатура английского словосочетания content management system, что в переводе означает «система управления контентом». Представляет собой набор инструментов для размещения и изменения текстовой и аудиовизуальной информации на сайте без знаний программирования.