Від вашого сайту болять очі

Зростає кількість людей, які проводять в інтернеті за кілька годин на день. Це пов’язано, напевно, з тим, що спочатку робочі місця комп’ютеризували, а тепер всіх поголовно стали підключати до інтернету. Пошта, сайти інших фірм, а також корпоративні сайти для службового користування підштовхують роботодавців на цей крок. Знижуються витрати на поїздки, папір, телефонні розмови. Знижуються втрати робочого часу на ходіння з кабінету в кабінет і з офісу в офіс. Це вигідно, а отже, стійка тенденція.
Нещодавно мені пощастило поповнити ряди в’язнів за моніторами. Працюю фрілансером, роблю переклади з німецької по комп’ютерній тематиці. Вісім годин і більше без перерви проводжу за комп’ютером. В інтернеті, в основному, шукаю довідкову інформацію та варіанти перекладу слів. Незабаром відчув, що очі стали втомлюватися. Проявлялося це в тому, що вони починали слезится, моргати, з’являлася біль у скронях. Мені було не зрозуміло, чому скрізь такий дрібний шрифт. Якщо читати такий дрібний текст, то і зору недовго втратити.
Господа веб-дизайнери працюють над серйозними проектами. За серйозні проекти вони отримують серйозні гонорари. Ну як вони можуть допустити на створюваному сайті смішну стилістику дитячих книг? Адже тільки в дитячих книжках прийнято набирати тексти “великими літерами”. В результаті переважна кількість сайтів постають нашому погляду або з дрібним шрифтом, або з дуже дрібним.
Мені добре зрозумілі прагнення дизайнерів. Більші поля між текстовими блоками виглядають здалеку дуже навіть нічого. Верхню частину сторінки, яка видна відразу і не вимагає прокручування вниз, можна наситити масою інформації. Чим менше шрифт, тим більше інформації. Відвідувач, який за день переглядає десяток сайтів буде задоволений. Без сумніву. У тих же, хто проходить по сотні сайтів, починають боліти очі.
З частиною, сучасні браузери дозволяють змінювати розміри тексту на сторінці. Щоб збільшити текст, достатньо утримувати клавішу Ctrl і натиснути на плюс. Щоб зменшити текст, потрібно натиснути на “Ctrl” і “мінус”. Тепер, коли мені стало відомо про цей “трюк”, я користуюся ним безперервно. Кидаю погляд на екран. Текст дрібний – руки тиснуть Ctrl+”. “Плюс” і “мінус” зручніше знаходити на додатковому блоці клавіш, який розташований на клавіатурі праворуч. Потрібні кнопки там скраю, і рука їх швидко знаходить наосліп.
Все було б чудово, якби не одне але… При збільшенні тексту дизайн сайту перетворюється на смітник. Заголовки меню вилазять назовні і закривають один одного. Зображення обрізаються. Загалом сторінка пливе криво і навскіс. Невже з цим нічого не можна вдіяти? Виявляється, можна. Є в бурхливому потоці веб-дизайну такий напрямок, як еластичний дизайн. Приклад еластичного сайту можна побачити, якщо перейти по ссылке www.knigi.tutaga.ru (Подарункові книги). При збільшенні і зменшенні масштабу всі пропорції зберігаються. Можна навіть збільшувати зображення, щоб краще їх розглянути. Якщо ви замовляєте у дизайнерів сайт, вимагайте, щоб вони робили його еластичним. Не дайте нації осліпнути!
Як добитися еластичності? Про це написано чимало статей. Насамперед потрібно вказувати всі розміри в пікселях (px), а в відносних одиницях (em). Єдиний виняток робиться для товщини рамок. Припустимо, на сайті є блок новин, укладений між тегом
і тегом
. У файлі css-стилів для блоку новин прописана ширина #novosti{width:150px}. Це нееластичний підхід. При збільшенні тексту він вийде за межі блоку, в якому знаходиться. Еластичним рішенням буде таке визначення ширини блоку новин: #novosti{width:10em}. Зростання розміру тексту викличе у цьому випадку пропорційне зростання ширини блоку, що набагато естетичніше.
Може бути, не все так просто. Потрібно враховувати, наприклад, спадкування відносних розмірів у вкладеному елементі.Однак даний підхід цілком можна реалізувати на практиці при наявності деякого навику. Кількість еластичних сайтів росте. Людям вигідно мати здорові очі, а значить ця тенденція стійка.
Stoneage