І знову ми повертаємось до одвічної дилеми: хто важливіший – дизайн сайту чи його контент?

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

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

2. Відвідувачі запам"ятовують сайт за його змістом, а не за його дизайном. Зокрема, у абсолютній більшості випадків це саме так. Тому як би ви не старались прикрасити свій сайт різними "рюшечками", відвідувачі все рівно йтимуть за контентом, а не за дизайном. Інколи навіть найстрашніші у плані дизайну чи юзабіліті блоги мають немалу популярність.

Виходячи із наведених вище двох правил, можна сформувати наступні пункти, котрі стануть в нагоді власникам сайтів і блогів. Читати продовження >>

Огляд можливостей нової специфікації CSS3 (зараз використовується CSS2.1) від популярного сайту smashingmagazine.com. Автор – Chris Spooner

В хитросплетінні Каскадних Таблиць Стилів (CSS) є чимало хвилюючих особливостей, котрі буквально спричинять вибух креативу в інтернеті. Ці нові деталі включають в себе правила стилів CSS, які будуть реалізовані у майбутній специфікації CSS3. Якщо глянути реалістично, то ви навряд чи зможете використовувати їх на повну силу у найближчі кілька років для своїх проектів, але для дизанерських блогів та сайтів, ці можливості допоможуть вийти за рамки сучасного вебу вже сьогодні, додаючи ту саму "ізюминку" у ваш дизайн та рухаючи дизайн-індустрію вперед.

Наведемо 5 технік, взяті з майбутнього, які ви можете практикувати на своєму сайті прямо тепер. Читати продовження >>

Автор – Christina Laun

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

1. Текст скоріше привертає увагу, ніж графіка. Не дивлячись на те, що ви можете думати інакше, користувач в першу чергу звертає увагу на текст. Більшість користувачів приходять на сайт у пошуках інформації, а не зображень, тому важливий текст має бути найбільш помітним.
2. Спочатку погляд сфокусований в лівому верхньому кутку сторінки. У цьому немає нічого дивного, більшість програм та софту розроблені так, що користувачеві постійно доводиться звертати погляд в цю область. Якщо ви хочете створити успішний сайт, то при розробці дизайну потрібно про це пам’ятати і, прагнучи створити унікальний стиль, не порушувати звичок користувачів.
3. В першу чергу відвідувачі переглядають ліву верхню і верхню частину сторінки і тільки потім дивляться нижче і правіше. Дослідження показують, що зона уваги користувача має вигляд букви F. Найбільш важливі елементи сайту повинні знаходитися в цих ключових областях.
4. Читачі ігнорують банери. Реклама дозволяє власникам сайту заробити на хліб з маслом, але дослідження показують, що в більшості випадків користувачі ігнорують банери, фокусуючись на них лише на долі секунди. Якщо ви хочете заробити на рекламі, підійти до її розміщення, оформлення і типу потрібно творчо.
5. Яскраве форматування і шрифти ігноруються. Чому? Тому що користувачі приймають їх за рекламу, що не містить потрібної їм інформації. Дослідження показують, що великі, кольорові букви ускладнюють пошук інформації, причина полягає у звичці користувача ігнорувати все схоже на рекламу. При розробці дизайну важливо, щоб «блиск» не відволікав увагу від важливої інформації і не робив її схожою на рекламу. Читати продовження >>

Переклад англомовної статті Ендрю Фолкнера.

Юзабіліті/Доступність

1. Використовуйте логотип: покладіть лінк на головну сторінку. Звучить просто, але це добре економить час для ваших читачів.

2. Зробіть посилання явними: простіше простого змінити стиль лінків, виділити їх на фоні сайту.

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

4. Створіть зрозумілу сторінку помилки 404 . Поясніть, що означає ця помилка, дайте лінк на карту сайту, головну сторінку чи пошук.

5. Додайте можливість зв’язатися з вами. Якщо у відвідувачів немає можливості зв’язатися з вами, то вони, очевидно, не зможуть повідомити вам про помилку на сайті.

Читати продовження >>

Дивись схожі статті з цієї серії:

• 10 способів заробити на блогах
• 10 ознак гарного HTML коду
• 10 найкорисніших сервісів для блогера

1. Browsershots – цей сайт стоїть у моєму списку під номером 1. Один з найзручніших засобів для перевірки вашого сайту у різних браузерах. Достатньо ввести адресу, обрати брауери та операційні системи, роздільну здатність монітора, присутність флеш – все це на порядки спрощує роботу при верстанні сайтів різного типу складності. Звичайно, ви можете й самі це зробити, якщо маєте кілька браузерів. Однак для різних екранів треба мати вдома 2 а то й три різні монітори, що, погодьтесь, доволі тупо.

2. Fleck. Web 2.0-сервіс, котрий допомагає сконтактуватись вам і замовнику, навіть якщо ви на великій відстані один від одного. Замовник може у кілька кліків “приліпити” так звані стікери до сайту, що ви робите і написати конкретні побажання до покращення елементів дизайну. Так само ви можете допомогти своїм знайомим, друзям, або ж будь-кому, дуже просто додавши коментарі до будь-якої інтернет-сторінки. Читати продовження >>

Щоб код HTML, який ви пишете на своєму сайті, був хороший, недостатньо однієї тільки його валідності (validation – відповідність стандартам W3C – всесвітнього інтернет-консорціума). Щоб сайт виглядав професійно, код теж має бути гарно написаний і структурований, а не "зліплений, із того що було". Розглянемо головні ознаки, котрі відрізняють хороший HTML код. Читати продовження >>

Дивишся на сайт і думаєш: який він гарний, але все-таки чогось не вистачає! Так, справді, багато чого у вас може не вистачати. А ви про це навіть не здогадуєтесь. Це такі дрібниці, яких одразу не помітиш, але вони вносять суттєве доповнення до загального образу сайту. Згадаємо кілька таких вартісних веб-дрібниць.

1. Тег title . Чомусь про нього всі завжди забувають. А не треба. навіщо придумовувати щось нове, якщо це було відоме ще 10 років тому? Приведіть, якщо це можливо, всі лінки на вашому сайті в порядок за допомогою цього тегу. Це не зашкодить, а навпаки, зблизить вас із читачами. Адже набагато приємніше, коли при наведенні на лінк, ти будеш знати, “куди тебе посилають”. Такі невеличкі підказки та хитрощі справді вартісні. Зокрема, на цьому блозі ви будете зустрічати цей тег дедалі частіше Те ж саме стосується зображень – якщо ви не пишете внизу його опис, то хоча б залиште кілька слів у тезі title. Тепер читач знатиме, шо то за картинка. Приклади:

<a href="http://example.com" title="External link">Link</a>

<img src="/images/map.gif" alt="Paris map" border="0" title="Global Map"/>

2. Favicon. Можливо, ви й чули про таку штуку, як favicon (favourite icon), а можливо й ні. Проте однозначно, ця маленька, розміром всього 16х16 пікселів, дрібниця потужно доповнює сайт, створюючи загальне враження. Favicon – це маленька іконка вашого сайту, що розміщується зазвичай біля адреси сайту, а у Firefox – ще й біля вкладок, а також відображається у ваших закладках після додавання. До прикладу, фавікон Блогорідера виглядає так: . Якщо ви хочете, щоб і у вашого сайту/блогу був фавікон, достатньо помістити ось такий код зверху (header):
<link rel="shortcut icon" href="http://example.com/favicon.ico"
type="image/x-icon">

Розширення такого файлу обов’язково має бути саме .ico оскільки саме воно призначене для ярликів. Це ж саме стосується назви – якщо ви хочете, щоб іконка відображалась у всіх браузерах, то залишіть назву favicon.ico незмінною. В допомогу вам будуть такі сервіси як: Онлайн-генератор іконок з ваших картинок, Favicon Maker – розмальовка пікселів вручну. А також каталоги сайтів, зроблені з фавіконок: Завое.вание.ru, Blogosphera.

Продовження теми чекайте найближчим часом!

Буду радий, якщо ви напишете ще кілька дрібниць, котрі є досить важливими на вашу думку.

Новий Рік та Різдво вже не за горами, тому Блогорідер вирішив трохи прикрасити свій логотип у відповідності до свят. Думаю, вам сподобається така версія логотипу

А які ж свята без подарунків? Тому я підготував невеликі, але приємні сюрпризи.

Читати продовження >>