Як перетворити виріб возомнившего про себе дизайнера в зручний шаблон сайту
- Текст, який намагається злитися з місцевістю
- рахітична шрифти
- Дбайливо приховані посилання
- зайві елементи
- Проблеми з версткою і SEO
- Низька швидкість завантаження
До чого тут цей котик?
Ну ...
Іноді мені потрібно дизайн для нового сайту. Я вирушаю на wrapbootstrap.com або themeforest.net і починаю підбирати відповідний шаблон. Через якийсь час вимикаю монітор і бездумно дивлюся на своє відображення в ньому. Моє обличчя висловлює в точності те ж, що і морда цього кота.
Приреченість, насилу стримуваний лють і бажання що-небудь розламати.
Я зітхаю, включаю монітор і скачував мінімально прийнятну тему. Починається довга нудна робота по приведенню його в норму. Поділюся тут своїм чек-листом: що потрібно правити в першу чергу, щоб зробити нормальний дизайн.
Само собою, в кожному конкретному випадку - свої проблеми. З іншого боку, є чимало типових, широко поширених проблем.
Текст, який намагається злитися з місцевістю
Чомусь писком моди вважається робити сірий шрифт на сірому тлі. Ну ладно, нехай на білому тлі, але дуже-дуже блідий. Наприклад так (далеко не найгірший приклад, до речі):
Згоден, в навігаційних елементах або в якості підказок, на яких необов'язково акцентувати увагу, сірий може виглядати непогано. Але не в основному тексті, який будуть читати бідні користувачі. У тому числі ті, у кого низький контраст на моніторі. І ті, хто просто не хоче ламати очі.
До слова, я намагаюся читати довгі статті з рідера на електронному чорнилі. Уявляєте, як подібний текст виглядає на e-ink? Огидно, доповім я вам.
рахітична шрифти
Ще одна проблема, яка веде до погано помітного тексту - занадто тонкий шрифт. По ідеї це має виглядати вишукано, але часто виглядає як знущання над читачем. При виявленні найменшого дискомфорту - без сумнівів замінюємо на звичні arial, veranda і т.д.
Багато шрифти коректно працюють тільки з латиницею. При створенні сайту під Рунет на основі шаблону з Америки це може вилізти боком. Так що обов'язково потрібно протестувати читабельність не тільки на «lorem ipsum».
Дбайливо приховані посилання
Ще один писк моди - залишати посилання без підкреслення, лише трохи виділяючи їх кольором. Причому це робиться свідомо і не тільки зарубіжними дизайнерами. Особисто чув пару доповідей, про те, що тепер, мовляв, можна і не підкреслювати.
Убойная аргументація спікерів в обох випадках зводилася до:
- Користувачі тепер досвідчені, розглянуть де посилання, а де ні.
- Подивимося на великий сайт X - ага, посилання без підкреслення! І на сайті Y теж. Все, значить годі й підкреслювати.
По-моєму, тут нічого не змінилося з 2011 року, коли Тема Лебедєв розставив крапки на Е .
Посилання завжди повинні бути підкреслені, навіть якщо це здається комусь негарним.
і
Перевірка дизайну на правильність проста: якщо глядач, не доторкаючись до миші, може вгадати, де посилання, а де ні, - перед нами хороший сайт. Це правило переважує всі інші.
зайві елементи
Опа, який гарний слайдер на півсторінки! А який прелоадер крутий - 10 секунд гіпнотизує користувача! І великі картинки на кожній сторінці - дуже барвисто!
Просто випилюємо все, що не відноситься до прямих завдань користувача на сторінці і йдемо далі.
Проблеми з версткою і SEO
Чомусь дизайнерська релігія забороняє використовувати теги заголовків (h1-h6) за прямим призначенням. Їх пхають в бічну колонку, меню, підвал. Перший заголовок на сторінці далеко не завжди h1, буває що і h3. А іноді на сторінці взагалі немає заголовних тегів, тільки де-небудь внизу сиротливо бовтається h5.
Така ж плутанина з семантичними тегами section, article, nav. Перечитуємо стандарт і розставляємо їх по місцях.
Низька швидкість завантаження
Безліч плагінів до JQuery, коментарі довше, ніж код, жодного разу не оптимізовані іконки і фон ... Вирушаємо в Google Page Speed і ретельно виконуємо рекомендації.
Звичайно, вам можуть зустрітися і більш екзотичні проблеми, але все ж мій перелік закриває 90% проблем.
До дизайну і верстці на замовлення найчастіше все це може бути застосовано ще більшою мірою. Розробники шаблонів все-таки конкурують у відкриту, що спонукає до нормальної роботи і дотримання стандартів. Так що пильнувати потрібно завжди.
ps А монітор я після чергового шаблону поміняв на матовий, щоб не бачити своє відображення. Так, про всяк випадок.
Уявляєте, як подібний текст виглядає на e-ink?