Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Как готовить вкусный сайт

Как готовить вкусный сайт

26 Сентября 2018
Вячеслав Нагнибеда
PR Менеджер
Вячеслав Нагнибеда
следующая статья

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

Печем булки

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

К примеру, имея дела со службами доставки, Вы встретитесь с треккинговыми номерами посылок. Большинство из них состоит из 12-20 символов. Но есть сервисы, которые  выдают номера в 2-3 раза длиннее! Таким образом, если не предусмотреть возможность вносить или отображать длинные строчки, у Вас получится или не красиво (разъедутся блоки, поплывут картинки или буквы налезут друг на друга), или не будет работать одна, а то и сразу несколько функций.

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

Для этих случаев существует валидация — установленные правила, которым должен соответствовать контент. Она позволит оградить админа от самодеятельности, четко регламентирует что, сколько и куда “заливать”, чтобы избежать«порвиротства».

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

  • Количество символов при описании чего-либо: если вы рассказываете о товаре, то описание одного из них не должно быть 150 символов, к примеру, а другого - 1000. Причем ограничивать следует не только максимальное количество символов, но и минимальное.

  • Формат загружаемых файлов: скажем, видео должно быть только в AVI а изображения — JPG или PNG. Других форматов админка попросту не примет.

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

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

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

Вкладываем начинку

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


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

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


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

  • Текст-подсказка в поле ввода (атрибут <placeholder>)

  • Tooltip — всплывающая подсказка от самого браузера при наведении курсора на нужную область;

  • Мелкий текст возле поля;

  • Счетчик обратного отсчета количества символов (как в Twitter) и т. д.

   

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

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


К примеру, название  товара в мини-карточке (которая выводится в каталог или список и показывает сокращенную информацию) может быть разным, но ни в коем случае не должно влиять на полноценное восприятие позиции у клиентов. Если символов в описании будет больше, это однозначно отразится на фронтенде, где мини-карточка товара налезет на соседнюю, будет выгладить диспропорционально или, что еще хуже, останется обычной, но не даст просмотреть написанное до конца. В таком случае продуманная может быть два решения. Для фронтенда — отсечение текста, когда после дозволенных символов появляется три точки, “читать дальше” или возникает tooltip при наведении курсора мышки. Для бэкенда — сразу продумать валидацию, чтобы контент-менеджер вложился в нужное количество.

Брызжем соусом

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

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

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


Пробуем укусить

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

Представье Ваш сайт в виде гамбургера. Откусите кусочек… Если рот слегка побаливает — обращайтесь в нашу «кухню».



Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут