Перед тим як випускати розроблений web‐сайт у «вільне плавання» необхідно провести низку
заходів, спрямованих на пошук та виправлення помилок у веб‐дизайні, у верстці та покращення
користувальницького досвіду. Без цього не отримати хороших показників, а значить проекту буде складно
потрапити в топ пошукової видачі.
Тестування сайту дозволяє перевірити працездатність усіх функцій згідно з технічним завданням, швидкість та стабільність роботи, читабельність інформації, зручність переходів по сайту, захищеність від веб‐атак та багато іншого.
Основні види або роботи під час тестування:
• Співвіднесення фактичного дизайну затвердженому у ТЗ;
• Перевірка верстки на валідність;
• Функціональне тестування;
• Тестування навантаження;
• Тестування безпеки сайту;
• Тестування сумісності.
Жодна розробка сайту не обходиться без помилок у дизайні. Точнісінько зіставити макет до готового дизайну не так просто, тому що перевіряти потрібно кожен елемент і вид сторінок. Причому мобільна та планшетна версії вимагають ще більше уваги та моделювання можливих адаптацій під кожен гаджет, браузер.
Щоб фактичний дизайн максимально співвідносився затвердженому в технічному завданні нижче представлений чек‐лист. Вимоги до дизайну варіюються від проекту до проекту в залежності від різновиду сайту та індивідуальних уподобань клієнта, тому список елементів для перевірки включає лише основні:
1. Шрифти.
2. Колір. Перевірте на відповідність плану колірну гаму сайту ‐ шрифтів, іконок, ліній, кнопок, фону різних блоків та навігаційних панелей.
3. Заголовок (h1). Він повинен відрізнятися від тексту щонайменше збільшеним розміром і бути унікальним і єдиним для кожної сторінки. Заголовок h1 служить темою сторінки, наприклад, для блогу таким заголовком буде назва статті. Підзаголовки (h2‐h3). Вони зазвичай відрізняються від абзаців, але можуть повторюватися і бути на сторінці в будь‐якій необхідній кількості. Приклад ‐ підтема статті блогу.
4. Посилання. Перевірте, щоб гіперпосилання на сайті відрізнялися від основного тексту. Найпопулярніший варіант ‐ суцільне або пунктирне підкреслення та контрастний колір шрифту. При наведенні мишкою також має відбуватися зміна кольору (зазвичай меню) або лише декорування тексту посилання. Це обов'язково для покращення поведінкових характеристик ‐ при перегляді сторінки та побачивши посилання, відвідувач визначить можливість переходу по ньому.
5. Списки. Щоб перелік ефектно виглядав на сторінці, виділіть маркери списку кольором, відмінним від текстового (ось як нумерація цього списку перед кожним пунктом).
6.Абзаци та відступи. Відстань між будь‐якими елементами впливає на враження, які отримає користувач при контакті з вашим контентом і сайтом в цілому. Приділіть цьому увагу. Перевірте відстань між абзацами, списком та абзацами, заголовком та абзацом, відступи блокових елементів тощо.
7. Таблиці. Якщо ви збираєтеся подавати інформацію на веб‐сайті у вигляді таблиці, стилізуйте її під загальний дизайн.
8. Цитати. Для блогу актуальна наявність контрастного фону або зміна тільки розміру та кольору тексту цитат з вертикальною межею з лівого боку. Необов'язково виділяти цитату. Наприклад, на початку цієї статті ми акцентували увагу на важливій на нашу думку інформації.
9. Розташування. Може бути так, що один із блоків на сайті не відцентрований або навпаки знаходиться посередині, а на макеті візуалізоване інше положення. Подождіть відстані як по горизонталі, так і вертикалі.
10. Наявність блоків. Перевірте наявність іконок соціальних мереж, кнопок для шарингу, карти розташування, кнопки «вгору» після скролінгу та інших допоміжних елементів.
Щоб розроблений веб‐сайт однаково відображався в різних браузерах, витрачалося менше часу на його
завантаження і пошукові системи краще розуміли контент, обов'язковим пунктом у тестуванні є
перевірка на валідність.
Існує стандарт, що визначає норми та правила сайтобудування ‐ Консорціум Всесвітньої павутини (W3C). На його основі розроблено сервіс W3C Markup Validation. Перевірте свій сайт. Якщо «вилізло» багато помилок, зверніться до веб‐майстра для їх усунення. Частина може залишитися навіть після виправлень, але бути не критичними.
Один із самих часовитратних видів тестування, що вимагає правильних розрахунків функцій. Наприклад, візьмемо інтернет‐магазин, який має не лише акції на товари, а й безліч статусів при купівлі, певну кількість товарів ‐ всі комбінації потрібно перевірити.
Функціонал залежить від типу ресурсу, що перевіряється, але є базові елементи, на що варто звернути увагу:
• Тестування форм користувача (наприклад, залишити заявку, написати у формі зворотного зв'язку, залишити коментар або відгук);
• Перевірка працездатності пошуку та релевантності результатів видачі;
• Тестування навігації ‐ переходи за посиланнями виявлення неробочих;
• Опробування реєстраційної форми та авторизації;
• Перевірка підвантаження файлів на сервер.
Щоб запобігти несподіваному припиненню роботи сайту в годину пік відвідування користувачів, важливо провести навантажувальне тестування. Для цього існують сервіси, які імітують поступове збільшення користувачів, що знаходяться на сайті. Якщо час завантаження сайту залишається незмінним що й на рівні з невеликим трафіком, то проблема не спостерігається. Для інтернет‐магазинів тестувати можна і здійснення одночасних транзакцій, щоб отримати час відгуку всіх найважливіших бізнес‐функцій.
В залежності від виду сайту проводиться перелік робіт, спрямованих на пошук уразливостей, відмінностей. Важливо вчасно усунути їх, щоб хакери не змогли влаштувати колапс вашого каналу залучення нових клієнтів через інтернет. Тестування безпеки діагностує шляхи злому системи, дає оцінку захищеності сайту та аналіз ризиків доступу зловмисників до конфіденційних даних.
Щоб по‐справжньому убезпечити ваш інтернет‐ресурс, потрібно звертатися до професійних програмістів для детального тестування.
Основні об'єкти перевірки на вразливість:
• Криптографія
• Контроль доступу
• Конфігурація сервера
• Валідація вхідних значень
• Механізми обробки помилок
• Діагностика аутентифікації
• Інтеграція зі сторонніми сервісами
• Перевірка стійкості сайту до атак Dos/DDos
1366×768, 1920×1080, 1600×900 ‐ напевно, ви знаєте, що означають усі ці комбінації цифр. Правильно, роздільна здатність моніторів або екранів, на які ми щодня дивимося. Подивіться багато різних форматів. Як веб‐сайт виглядає на кожному з них? На це питання і про рівень кросбраузерності відповість тестування сумісності з такими видами робіт:
1. Перегляд сайту за допомогою різних браузерів та їх версій;
2. Перегляду сайту на моніторах, що мають різну роздільну здатність;
3. Перевірка правильності відображення шрифтів різними браузерами та їх версіями.
Висновок На сайті завжди знайдеться, що перевірити це факт! Наприклад: пошук помилок у контенті та перевірка його на унікальність, тестування швидкості завантаження сайту, юзабіліті, відповідність мета‐тегів та Title гарному тону інтернет‐просування тощо. Щоб провести повне тестування потрібно мати компетентність у технічних питаннях та інтернет‐маркетингу. Однак частину робіт ви можете зробити самі ‐ достатньо витратити трохи часу на вивчення.