Перш ніж приступити до роботи потрібно обрати один із способів верстки (гумовий дизайн, дизайн з фіксованою шириною). Розглянемо трохи детальніше ці дві можливості.

Т. з. “гумові” сайти не мають сталої ширини. Цей вид верстки є найбільш популярним. Перевагою таких сайтів є 100%-ве використання робочої області браузера. До недоліку гумової верстки відносять те, що рядки (на моніторах з великим розрішенням екрану або великою діагоналлю) занадто довгі і очі втомлюються по ним бігати. З цією ж проблемою зіштовхуються редактори газет і щоб уникнути її розбивають всі рядки на колонки. З Web-сайтами ситуація дещо простіша. Адже, ширину браузера при потребі можна зменшити і тим самим полегшити процес читання. Але чи всі користувачі захочуть це робити? Тому намагайтесь продумати такого роду ситуації.

Сайти з фіксованою шириною. Чи будь-яка ширина підходить? Ні. Поясню чому. Більшість Web-програмістів вважає, що оптимальною має бути ширина приблизно в діапазоні 760-780 пікселів. Це  пов’язане з тим, що така ширина дає змогу уникнути появи горизонтальної полоси прокрутки (правило поганого тону) навіть для моніторів з розрішенням 800x600. Недолік сайту з фіксованою шириною макету, як Ви уже напевне здогадались, – недостатньо ефективне використання вільної площі.

З цим розібрались. Рухаємося далі.

Перед створенням сайту Ви повинні також продумати:

• що буде знаходитися на сайті;
• яким буде стиль дизайну;
• як різні блоки інформації будуть пов’язані між собою.

Велику увагу слід приділити наповненню головної сторінки (home page), бо саме на ній опиняється відвідувач, ввівши в браузері адресу Вашого Web-ресурсу. Це не означає, що її дизайн мусить якось відрізнятися від дизайну решти сторінок. Відмінність полягає в інформації, яку містить головна сторінка.

На цій сторінці рекомендується розмістити:

• стислу інформацію про сайт;
• стислий зміст (посилання на головні розділи ресурсу);
• якщо сайт змінюється досить часто, то також там має бути список оновлених сторінок (хоча при можливості під цей список найкраще виділити окреме місце на сайті для того, щоб з будь-якого місця сайту до нього (списку) був доступ).

В процесі проектування структури сайту важливим є вибір зручної навігації по Web-ресурсі.

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

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

Якщо при проектуванні сайту Ви очікуєте, що сторінка міститиме багато інформації, то найкраще в такому випадку зробити додаткове нижнє меню. Найчастіше нижнє меню дублює верхнє або ж є скороченим варіантом верхнього. Таке меню при потребі дозволяє, перебуваючи внизу сторінки, швидко перейти на інший розділ. Тут же, внизу, можна розмістити посилання “Наверх” (“Return To Top”), яке б переводило відвідувача до верхнього головного меню. Це посилання можна реалізувати, як за допомогою HTML, так і за допомогою JavaScript.

Звичайно, якщо Ваш сайт не передбачає великого обсягу контенту, то і нижнє меню і посилання “Наверх” будуть зайвими.

Якщо навігація по сайті – заплутана, то ситуацію може покращити верхнє меню, що випадає. Найчастіше таке меню візуально нагадує стандартне верхнє меню більшості програм ОС Windows. При складній навігації часто неподалік від головного меню розміщують ланцюжок з гіперпосилань, які дозволяють зорієнтуватися про місце перебування і швидко повернутися в ту точку, в якій Ви вже були. Цей ланцюжок може виглядати якось так:

Програмування / Web-програмування / PHP / Робота з файлами і каталогами

Де кожен підпункт ланцюжка – це посилання на окрему сторінку.

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

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

Ідеальним для Вашого сайту буде ситуація, коли до будь-якого місця на сайті відвідувач зможе потрапити максимум за три кліки миші (при умові, якщо сайт не надто великий).

Оскільки текстове наповнення для більшості сайтів відіграє важливу роль, то оформленню тексту слід приділяти належну увагу. Тому наведу деякі поради.

• Не забувайте, колір тексту не повинен бути близьким з кольором фону. Він має контрастувати з тлом сторінки. Чим простіше читати ваше повідомлення, тим більша ймовірність, що його прочитають до кінця. Класичним вважається варіант: чорний текст, білий задній фон.
• Не забувайте розділяти тексти на абзаци. При цьому доцільно було б робити невеликий відступ між сусідніми абзацами. Так зване “Правило пустого простору”. Саме на цих ділянках очі читача відпочивають.
• Ніщо так не прикрашає текст, як грамотність його автора. Я маю на увазі не лише по темі матеріалу, але й грамотності його мови (коментар автора: написав цю фразу і стало страшно, а я грамотно пишу?). Мало кому приємно читати текст в якому що не слово, то помилка. Після прочитання першого абзацу такого творіння відпадає бажання читати далі. Тому, ретельно перевіряйте текст на наявність граматичних помилок. Текст повинен містити більш-менш закінчену думку і якимось чином поєднуватися з наступним абзацом.
• Розмір шрифту не повинен бути надто малим. Особливо, якщо Ви зафіксуєте його і відвідувачі не зможуть змінювати розмір за допомогою браузера. Хоча, заради справедливості, слід зауважити, що такі браузери, як Firefox (так, наприклад, збільшити розмір шрифту можна за допомогою комбінації <Ctrl>+<+>) і Opera, навіть в цьому випадку дозволяють підібрати потрібний розмір.
• Не забувайте про заголовки, про їх виділення на фоні загального тексту. Як показує статистика користувачі звертають увагу перш за все на заголовки і вже в off-line режимі читають сам текст. Тому не буде зайвим, якщо заголовком Вам вдасться зацікавити потенційного читача.
• Одноманітний текст – це, як на мене, недолік. Що я маю на увазі? Ви коли-небудь читали звичайний текстовий файл (наприклад, для користувачів ОС Windows – це файли з розширенням txt)? Ніяких тобі виділень, виокремлень важливих слів, виділення тексту кольором. Але ж HTML має стільки можливостей! Гарно оформлений текст покращує сприйняття і розуміння суті викладено матеріалу. Каскадні таблиці стилів (CSS), наприклад, дозволяють виділити першу букву кожного  абзацу. Цим можна скористатись для візуального оформлення сайту. А, якщо обмежитися засобами HTML, то слід виокремлювати важливі фрагменти тексту жирним шрифтом, іншими кольорами, тощо.

Звичними для нас вже стали статті, поряд із якими є: надпис, що засвідчує авторство,  дата публікації, лічильник переглядів, …. Так, відвідувач може відмовитися читати статтю через недовіру до автора, або ж “несвіжість” матеріалу, чи не стане читати її, бо індикатор кількості переглядів стоїть на низькому рівні. Але цим можна не обмежуватися.

Не завадили б також: можливість переглянути версію для друку, можливість проголосувати за статтю (оцінити матеріал).

Стаття розміщена на сервері і автор забуває про неї. А між тим в ній можуть бути неточності, грубі помилки, логічні діри, … Якось змінити ситуацію на краще можна дозволивши відвідувачам залишати коментарі до статті. Боятись негативних відгуків не варто. Знаючи про помилки в тексті Ви завжди зможете їх при бажанні виправити. Але пам’ятайте, якщо Ви гадаєте, що стаття негідна бути підписана Вашим ім’ям, то краще не публікувати її на сайті.

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

Успіхів Вам у всіх Ваших починаннях!

Сподобалось? Тоді читайте також мій персональний блоґ.