Як приготувати смачний сайт

«Розірвирот» — особливий вид бутерброда, гамбургера або сендвіча, який відрізняється величезними розмірами і кількістю начинки. На жаль, зручно з'їсти такий кулінарний шедевр не виходить: в руках його тримати незручно, вкусити як слід теж і обов'язково щось вивалиться або витече в процесі. Точно ті ж проблеми можуть виникнути у Вашого сайту, якщо під час проектування не будуть враховані основні потреби і необхідні функції. Ці ж труднощі можуть виникнути і при інтеграції вже наявного сайту з CRM, але про це вже в наступних статтях окремо. Спробуймо перетворити «розірвирот» в цілком їстівний бургер на основі досвіду наших розробників

Випікаємо булочки

Почнемо ми саме з бекенду. Клієнти можуть приходити і йти, а ця частина сайту залишиться з Вами на довгий час і наповнення контентом також відноситься до Вашої компетенції. Якщо зараз Ви перебуваєте на стадії планування майбутнього сайту, саме час визначити всі гранично допустимі обсяги інформації, які будуть показуватись як користувачу, так і адміністратору.

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

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

Для цих випадків існує валідація — встановлені правила, яким повинен відповідати контент. Вона дозволить захистити адміна від самодіяльності, чітко регламентує що, скільки і куди «заливати», щоб уникнути «розірвиротства».

Звичайно, передбачити всі повністю не вдасться. Однак ключові обмеження потрібно продумати відразу. До них відносяться:

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

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

• Розмір файлів, від і до. Зрозуміло, що занадто великі файли перевантажують сайт. Але і занадто маленькі картинки роблять йому антирекламу низькою якістю, розмитістю або пікселізацією.

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

Наприклад, при наповненні інтернет-магазинів, бажано не дозволяти в бекенді додавати товар в каталог без завантаження зображення з потрібним розміром і дозволом і певним набором контенту. Якщо замовник виробляє модний одяг, то без правильної подачі моделей сайт не може бути ефективним. Тому, відсікаючи можливість заливати неякісний контент, ми дбали про високий рівень готового сайту.

Вкладаємо начинку

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

Простий приклад з фотографіями користувачів, якщо у Вас передбачений «Особистий кабінет». Ну хто з людей буде думати, що для сайту потрібні оптимізовані за розміром фото? Користувачі беруть найкращі свої фотографії в Full HD, щоб скрізь виглядати блискуче. В результаті: сотня користувачів, готовенький гарячий «розірвирот» на сервері, занепад продуктивності і безліч скарг на повільну роботу сайту.

Якщо своїх контентщиків можна навчити, зв'язки при передачі даних налаштувати, то проти апетитів користувачів існує відмінна зброя масового рівняння — вже згадана раніше валідація. Її потрібно використовувати по максимуму, оскільки тільки так можна бути спокійним за їстівність Вашого бургера.

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

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

• Tooltip - підказка від самого браузера при наведенні курсору на потрібну область;

• Дрібний текст біля поля;

• Лічильник зворотного відліку кількості символів (як в Twitter) і т. д.

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

Варто зауважити, що будь-яка, підкреслюємо ще раз, будь-яка інформація, яка займає місце на сторінці, повинна бути корисна для користувача. Тому не варто перевантажувати дизайн «водою», але і не залишати порожніх місць.

Наприклад, назва товару в міні-картці (яка виводиться в каталог або список і показує скорочену інформацію) може бути різною, але ні в якому разі не повинно впливати на повноцінне сприйняття позиції у клієнтів. Якщо символів в описі буде більше, це однозначно відіб'ється на фронтенді, де міні-картка товару налізатиме на сусідню, буде виглядати диспропорційно або, що ще гірше, залишиться звичайною, але не дасть змогу переглянути написане до кінця. В такому випадку можуть бути продумані два рішення. Для фронтенда — відсікання тексту, коли після дозволених символів з'являється три крапки, «читати далі» або виникає tooltip при наведенні курсору мишки. Для бекенда — відразу продумати валідацію, щоб контент-менеджер вклався в потрібну кількість.

Бризкаємо соусом

Для пікантності смаку, коли всі складові бургера на місці, необхідно додати соус. Якщо не перестаратися, то вийде чудово. Але дати трохи більше, і під час їжі неодмінно щось витече на руки.

Хочеться звернути увагу на ілюстрації до сайту, з якими завжди трапляються непорозуміння. Про те, що зображення повинно бути оптимізованим, ми говорили вище. Але крім «ваги» картинки ще вкрай важливий її розмір. Якщо Ви застосовуєте валідацію для зображень, використовуєте детальне зображення для блогу чи каталогу, і його прев’ю для списку або слайдера — стежте за відповідністю розмірів. Основне завдання візуала — допомогти зрозуміти, про що написано в тексті. Таким чином, якщо зображення прев'юшки обріже деталку неправильно і замість зображення машини буде видно лише її колесо, машину Ви точно не продасте, а окремо продати колесо не буде можливості.

Одвічним головним болем є заливка разом зображень різного розміру, з різним фоном або пропорціями. Найоптимальнішим рішенням для уникнення подібного може бути сувора валідація: наприклад, картинка повинна бути 640х480 рх і кішка не ходи. Але на практиці цього досить складно дотримуватися. Таким чином, потрібно передбачити всі варіанти, коли картинки будуть виводиться в повному вигляді, але при цьому, не ламати структуру сторінок, на яких вони знаходяться.

Пробуємо вкусити

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

Уявімо Ваш сайт у вигляді гамбургера. Відкусите шматочок ... Якщо рот злегка болить, звертайтеся в нашу «кухню».