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

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

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

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

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

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

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

6. Не намагайтесь закрити шикарним дизайном убогий контент. Ваші відвідувачі про це одразу ж довідаються, тому підсовувати їм кольорові фантики нема сенсу.

7. І в той же час не приносьте дизайн в жертву, роблячи вигоду заради сайту – краще зверніться до пункту 5.

Корисні посилання:

• Дизайн VS Контент, чи справді дизайн всьому голова?
• Дизайн или контент? (bizdesign edition)

Спонсори випуску: siam hotel     тренинг коммуникации    аренда яхт в одессе

1. Створення блогу – яку тему обрати?
2. Під мікроскопом 4.0 – Залізо.net.ua
3. Під мікроскопом – Архітектурний Процес

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

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

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

Border radius

Мабуть, це найзагальніша особливість CSS3, яка зараз використовується, – border-radius. Стандартні HTML-блоки мають квадратну форму з кутами у 90 градусів. Правило CSS3 дозволяє використовувати заокруглені кути.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Border-radius також може бути використаний для стилізації будь-якого окремого кута, хоча синтаксис для -moz- i -webkit- дещо відмінний:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Підтримується у браузерах Firefox, Safari i Google Chrome.

Використовується у Твіттері.

Border image

Border-image, як стає зрозуміло із назви, дозволяє файлу зображення бути використаним у якості границі об"єкта. Картинка спочатку створюється відносно кожної сторони об"єкта, де кожна сторона зображення відповідає стороні об"єкта HTML. Після чого воно здійснюється з наступним синтаксисом:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

Атрибут {border: 5px} конкретизує повну ширину границі, і потім правило border-image з цільовим файлом каже браузеру, скільки зображення використовувати, щоб заповнити ті 5px області границі.

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

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Підтримується у Firefox 3.1, Safari, Chrome.

Використовується у Blog.SpoonGraphics.

Тіні для блоків і тексту

Тіні: хіба ви їх лише не любите? Вони можуть легко як створити, так і зруйнувати ваш дизайн. Тепер, за допомогою CSS3 вам навіть не потрібен Photoshop. Використання, яке ви бачите на зображенні (тінь від блоку з датою та тінь від слів Making Modular…), вже чудово використовується на сайті 24 Ways.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

Два перші атрибути визначають відходження (offset) тіні від елементу, в нашому випадку це 10 пікселів по x та y осям. Третій атрибут призначає рівень розмивання (blur) тіні. Ну, і насамкінець, колір.

Атрибут text-shadow використовується для тіні від текстового контенту:

text-shadow: 2px 2px 5px #ccc;

Підтримується у Firefox 3.1, Safari, Chrome (box-shadow лише) та Opera (text-shadow).

Проста прозорість з RGBA та opacity

Використання PNG файлів у веб-дизайні зробило прозорість однією з його ключових властивостей. Зараз показник alpha або правило непрозорості можуть бути вказані безпосередньо у CSS.

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

Перші три числа посилаються на червоний, зелений, синій кольорові канали, а останнє число – на альфа-канал, що викликає ефект прозорості.

В якості альтернативи, разом з правилом непрозорості колір може бути вказаний як зазвичай, а саме правило – як окреме.

color: #000;
opacity: 0.5;

Підтримується у Firefox, Safari, Chrome, Opera (непрозорість), IE7 (непрозорість, з виправленнями).

Використовується у 24 Ways (RGBA).

Власні шрифти з @font-face

Завжди існував набір т.зв. безпечних шрифтів, які могли вільно використовуватись у вебі, як ви знаєте: Arial, Helvetica, Verdana, Georgia, Comic Sans, та інші. CSS3-правило @font-face дозволяє включати шрифт з будь-якого шрифтового файлу, розміщеного у вас на сервері. Це певною мірою приносить проблеми, пов"язані з авторським правом, адже є не так багато шрифтів, котрі можуть бути використані для @font-face включень.

Стилізація на практиці виглядає ось так:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Решта шрифтових опцій викликається як зазвичай:

h1 { font-family: 'Anivers', Helvetica, Sans-Serif;

Підтримується у Firefox 3.1, Safari, Opera 10, IE7 (з силою-силенною виправлень, якщо ви хоробрі, то зможете змусити працювати обраний шрифт у ІЕ7)

Використовується у TapTapTap.

Хоча CSS3 все ще перебуває на стадії розвитку, правила, описані тут, вже зараз підтримуються у деяких браузерах. Safari, зокрема, має обширну підтримку цих нових особливостей. Але на жаль, будучи високоякісним браузером, він має досить малу аудиторію, тому можливо, ці додаткові особливості CSS3 не є важливими для його групи користувачів. Але з комп"ютерами Mac від Apple, котрі впроваджуються у життя, використання Safari також зростатиме.

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

Google Chrome був випущений минулого року. Базований на двигуні WebKit, цей браузер має майже все те саме, що і у Safari. Поки Safari додає численну пропорцію Mac-користувачів, Chrome надає пропорцію прихильників Windows.

Якщо ми глянемо на статистику використання браузерів від W3C за листопад 2008 року, то 44,2% користувачів подорожували в інтернеті з Firefox, 3,1% з Google Chrome, 2,7% – з Safari. Це означає, що близько 50% всіх інтернет-користувачів матимуть можливість побачити ці нові властивості. А в межах веб-дизайнерської спільноти, котра є значно свідоміша щодо вибору браузера, відсоток юзерів з підтримкою CSS3 зросте до рівня 70%.

Зворотній бік медалі

Ваш сайт тепер має широкий діапазон нових можливостей, але є кілька негативних моментів, що завадять цьому:

• Internet Explorer. 46% інтернет-користувачів не зможуть побачити нові можливості. Тому не використовуйте їх як критичну частину вашого дизайну. Впевніться, що має місце і другорядний вибір, наприклад, стандартна границя замість border-image.
• Непрацездатні таблиці стилів. Нові властивості CSS3 не були випущені в якості фінального релізу. Вони зараз виконуюються з ознаками, котрі є різними для різних браузерів. Тому вони можуть зробити недійсною вашу таблицю стилів.
• Додатковий код. Звертаючи увагу на попередній пункт, бачимо, що ми мусимо додавати різні теги для різних браузерів, щоб описати одне правило. Це додає багато рядків до вашого CSS-коду.
• Потенційна небезпека використання. Так само, як це робиться з стандартними фільтрами у Photoshop, використання цих нових стильових властивостей може призвести до появи болісно-страхітливих дизайнів. Тому будь ласка, краще не зловживайте ефектом тіні!

Про автора

Кріс Спунер – фрілансер, графічний та веб-дизайнер з Великобританії. Він живе темою дизайну і насолоджується тим, що йде нога-в-ногу з цією сферою. Кріс також публікує статті по дизайну, різноманітні туторіали на своєму блозі Blog.SpoonGraphics.

Посилання по темі:

• CSS3 Preview
• CSS3 и блочная модель
• Краткий обзор CSS3
• Безпечні шрифти для Всемережжя

Оригінал статті – Push your web design into the future with CSS3

Переклад на українську мову – Блогорідер

Спонсори запису: недорогой хостинг    дать объявления в запорожье    городской сайт одессы   А може вас зацікавлять інформаційні технології?

1. 2 нові сайти від HWC
2. 10 ознак хорошого HTML-коду
3. Світовий рекорд разом з Firefox 3

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

1. Текст скоріше привертає увагу, ніж графіка. Не дивлячись на те, що ви можете думати інакше, користувач в першу чергу звертає увагу на текст. Більшість користувачів приходять на сайт у пошуках інформації, а не зображень, тому важливий текст має бути найбільш помітним.
2. Спочатку погляд сфокусований в лівому верхньому кутку сторінки. У цьому немає нічого дивного, більшість програм та софту розроблені так, що користувачеві постійно доводиться звертати погляд в цю область. Якщо ви хочете створити успішний сайт, то при розробці дизайну потрібно про це пам’ятати і, прагнучи створити унікальний стиль, не порушувати звичок користувачів.
3. В першу чергу відвідувачі переглядають ліву верхню і верхню частину сторінки і тільки потім дивляться нижче і правіше. Дослідження показують, що зона уваги користувача має вигляд букви F. Найбільш важливі елементи сайту повинні знаходитися в цих ключових областях.
4. Читачі ігнорують банери. Реклама дозволяє власникам сайту заробити на хліб з маслом, але дослідження показують, що в більшості випадків користувачі ігнорують банери, фокусуючись на них лише на долі секунди. Якщо ви хочете заробити на рекламі, підійти до її розміщення, оформлення і типу потрібно творчо.
5. Яскраве форматування і шрифти ігноруються. Чому? Тому що користувачі приймають їх за рекламу, що не містить потрібної їм інформації. Дослідження показують, що великі, кольорові букви ускладнюють пошук інформації, причина полягає у звичці користувача ігнорувати все схоже на рекламу. При розробці дизайну важливо, щоб «блиск» не відволікав увагу від важливої інформації і не робив її схожою на рекламу.
6. Показуйте числа цифрами. Цифрова інформація сприймається простіше, ніж та сама інформація, але текстова. Пам’ятайте про те, що ви пишете переважно для читачів, котрі сканують сайт. Прагніть спростити пошук інформації, щоб вони зберігали зацікавленість.
7. Розмір шрифту впливає на спосіб перегляду. Дрібний шрифт сприяє сфокусованому перегляду, тоді як великий спрощує сканування. Використовуйте цю особливість, щоб схилити користувачів до потрібного вам типу перегляду.
8. Користувачі сприймають підзаголовки, лише якщо вони їм цікаві. Вибирайте релевантні і цікаві підзаголовки.
9. Зазвичай люди переглядають сторінку невеликими частинами. Це можна використовувати в своїх цілях, створюйте області, які ловлять увагу користувача, скануючого сайт, наприклад, виділені області або списки.
10. Короткі параграфи (абзаци) краще довгих. Інформація, розміщена на сайті, має бути розрахована на швидке сприйняття, оскільки більшість інтернет-користувачів прагнуть зекономити час. Параграфи і речення мають бути короткими, за винятком випадків, де іншого способу вимагає контекст. Тобто тоді, коли сам текст є важливішим ніж його розмір.
11. Одноколонкові формати краще фіксують погляд, ніж багатоколонкові. Не перевантажуйте користувача інформацією. В деяких випадках «простіше» означає «краще».
12. Реклама у верхній і лівій частинах сторінки краще всього привертає увагу. Якщо ви розміщуєте на сайті рекламу, старайтеся, щоб вона була у верхній лівій частині сторінки, там вона краще всього приверне на себе увагу. Звичайно, те, що користувач бачить рекламу ще не означає, що він на неї клацатиме, тому не варто приносити дизайн у жертву, щоб отримати помітнішу рекламу.
13. Реклама, розміщена біля цікавих областей сайту, помітніша. Щоб збільшити помітність реклами, розміщуйте її біля областей сторінки, що є найбільш бажаними та цікавими. При цьому користувачі не втратять можливості знайти те, що їм потрібно, а ви отримаєте ефективнішу рекламу.
14. Текстова реклама переглядається користувачем уважніше, ніж інші типи реклами. Як було сказано раніше, більшість інтернет-користувачів не витрачають час на перегляд елементів, схожих на рекламу, тому текстова реклама, що добре поєднується з іншими елементами сторінки і яка не є дратівливою, значно ефективніша.
15. Великі зображення краще привертають увагу. Люди віддають перевагу великим, інформативним зображенням, на яких доступні деталі, в той же час зображення мають бути пов’язані з текстом, поряд з яким розміщені, інакше шанс того, що вони будуть проігноровані, зростає.
16. Зрозумілі, прості обличчя на зображеннях краще привертають увагу. Абстрактні і артистичні фотографії можуть добре поєднуватися з дизайном, але не завжди звертають на себе увагу читача. Якщо ви використовуєте фото людей, вони мають бути зрозумілими і простими. Потрібно звернути увагу і на те, що краще працюють фото реальних людей, а не моделей.
17. Заголовки притягують погляд. Перше, що користувач шукає на сторінці, це заголовок. Він не повинен пригнічуватися іншими елементами сторінки, постарайтеся, щоб заголовки були досить помітними.
18. Користувачі витрачають багато часу, дивлячись на кнопки і меню. Тому при розробці дизайну вам варто звернути на них особливу увагу. Крім того, що вони привертають увагу користувача, це ще і одні з найважливіших елементів сайту.
19. Списки добре затримують увагу користувача. Один із способів затримати увагу користувача на сайті – це часте використання списків в статтях. Використовуйте числа або маркери, щоб підкреслити важливу інформацію, це спростить «сканування» сайту.
20. Великі блоки тексту ігноруються. Дослідження показують, що більшість інтернет-користувачів не готова витрачати час на вивчення великих блоків тексту, як би інформативні і добре написані вони не були. Розбиття на невеликі параграфи, виділення важливих областей, підзаголовки і списки дозволяють затримати увагу користувача.
21. Затримати увагу може форматування. Щоб користувач не пропустив найбільш важливу інформацію, використовуйте різні способи її виділення: жирний, курсив, кольоровий, але не перестарайтеся, надлишкове використання цих елементів зробить сторінку нечитабельною і відштовхуватиме відвідувачів.
22. Простір корисний. Не дивлячись на бажання втиснути що-небудь в кожен куточок сторінки, краще залишити трохи простору. Перевантаження сайту призведе лише до того, що користувач ігноруватиме значну частину контента. Тому прагніть зробити сайт простим і залишити досить простору, на якому могли б відпочити очі користувача.
23. Краще місце для навігації – верхня частина сторінки. Ви, звичайно, хочете щоб користувач не лише переглядав першу сторінку, але і продовжував вивчення сайту у пошуках цікавої йому інформації. Утримати користувача допоможе проста у використанні і помітна, завдяки розміщенню у верхній частині сторінки, навігація.

Результати eye-tracking для пошуку Google. Зона у вигляді букви F отримує найбільше уваги.

Оригінал англійською – Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies

Переклад російською – 23 важных вывода из результатов eye-tracking исследований

Переклад на українську мову – hellveen, спеціально для Блогорідера.

Читайте також:

• 10 ознак хорошого HTML коду
• 10 найкорисніших сервісів для вебмайстра
• Як зробити сайт легким та зручним у користуванні (Ігор Виспянський)

1. Правильний підхід до розробки сайту – запорука успіху
2. Як зробити сайт легким та зручним у користуванні
3. 25 шляхів покращити свій сайт

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

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

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

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

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

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

SEO

1. Додайте атрибут title : ця невелика операція з посиланнями збільшить SEO-привабливість сторінки.

2. Створіть карту сайту для пошукових систем. Існує багато генераторів карти сайту, котрі створять її за лічені хвилини. Цим ви зможете збільшити видимість вашого сайту для пошуковиків.

3. Оптимізуйте мета-теги: перевірте, чи співпадають вони з тематикою вашого сайту і виправте помилки.

4. Перевірте заголовки: впевніться, що заголовки всередині тегів Н1, Н2, Н3 використовуються правильно. Вони повинні містити основні ключові слова. До того ж наявність ключових слів дозволяє орієнтуватись відвідувачам на вашому сайті.

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

Дизайн/Веб-розробка

1. Зворотній зв’язок: чудово, якщо у кожного відвідувача вашого сайту буде можливість запропонувати вам свої ідеї для вдосконалення проекту. Найпростішим є закривати очі на власні помилки.

2. Браузери : перевірте функціональність вашого сайту у всіх популярних браузерах, навіть у тих, які ви недолюблюєте. Орієнтуйтесь на статистику використань браузерів.

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

4. Не вирішуйте за користувача: уникайте спливаючих вікон та інших подібних речей. Запам’ятайте – браузер належить користувачу, а не вам.

5. Анімація: я (Andrew Faulkner) не противник використання анімації, але не довзоляйте картинкам постійно змінюватись, поки відвідувач намагається прочитати текст. Це те саме, що намагатися продати машину, набридливо танцюючи навколо покупця в костюмі банану.

Зміст

1. Рерайт: перечитайте основні тексти сайту. Якщо вони вас самого не зацікавили – перепишіть їх негайно.

2. Спрощуйте: старайтесь не використовувати занадто багато спеціальних слів і висловів, заінюйте їх по можливості на більш прості та зрозумілі.

3. RSS : зробіть RSS-підписку максимально простою та зручною.

4. Не перебільшуйте: люди не будуть цілий день висіти на вашому сайті. Старайтесь лаконічно висловити інформацію дял них. Пуста балаканина – не для веб-сайтів.

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

Поза сайтом

1. Видимість: перевірте, як високо ви знаходитесь у пошуковиках за назвою вашої компанії. Якщо невисоко, досить опублікувати кілька посилань з ключовим словом у якості лінку.

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

3. Не залишайтесь осторонь: якщо ви ще не зареєструвались в популярних соцмережах, не тягніть! Люди можуть шукати послуги з вашої сфери на таких сайтах.

4. Будьте в курсі: читайте новинні стрічки, звертайте увагу на все, що стосується вашої діяльності – ви можете дізнатись багато корисного.

5. Завжди на крок попереду: намаайтесь постійно слідкувати за всім новим у веб-технологіях. Можливо, ви зможете використати це на свою користь і зайняти перспективну нішу.

Переклад російською – 25 способов улучшить свой сайт

Оригінал англійською – 25 ways to improve your site in 5 minutes

1. Як захистити і покращити свій WordPress
2. Як зробити сайт легким та зручним у користуванні
3. Організуйте свій RSS-читач

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

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

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

3. Iconfinder. Трапляється, що при розробці сайту вам раптом знадобляться іконки. Часу малювати або ж вміння у вас немає, а на дизайнера теж нема грошей. У цьому випадку можна спробувати знайти необхідні іконки на цьому сервісі. Їх там багато і всі вони безкоштовні. Можливо, на перший час, а можливо й назавжди ви залишите їх у своєму дизайні.

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

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

6. Google Webmaster Tools. В оновлених Інструментах для вебмайстрів ви можете додавати профілі своїх сайтів (звісно, після підтвердження, що ви є власником сайту), додавати файли sitemap.xml котрі є дуже корисними в плані індексації сторінок сайту, бачити останні пошукові запити котрі ведуть на ваш сайт, а також багато іншого, пов”язаного з пошуковими функціями бота Гугля.

7. Таблиця спецсимолів у форматі XHTML. Всі кракозяброві символи можна вручну скопіпастити з Ворду. Але в цій універсальній таблиці для кожного такого символу є код, котрий можна використати для верстки сторінки. Сподіваюсь, що всі знають, що знак © у вихідному коді має бути написаний як © ?

8. Швидка перевірка вільних доменів. На мою думку, найвдалішою ця перевірка є на сайті компанії Imena.UA. Всі головні домени перевіряються за умовчанням, а додаткові можна проставити галочками. Все легко і швидко, не потребує тривалого проставляння галочок напроти потрібних зон, котрі вам треба перевірити.

9. Google Hacks. Малесенька програмка, що довзоляє надзичайно широкі функції пошуку – по файлам, по URL, по типу запиту, та багато іншого, чого б ви самі не набрали. Все це знаходиться у директоріях “Index of” – тобто у місцях безпосереднього скачування.

10. Таблиця шрифтів. Не всі шрифти здатні відображатись на інтернет-сайтах. Приміром, у вас на ПК може бути встановлений Myriad чи Corbel, а ось на інших – не обов”язково. І люди не зможуть побачити те, що ви задумали. Тому для вебу використовують лише певні різновиди шрифтів.

Ось і все

Сподіваюсь, щось із цього списку вам обов’язково згодиться у нелегкій роботі.

hellveen, спеціально для Блогорідера.

1. 10 найкорисніших сервісів для блогера
2. 10 ознак хорошого HTML-коду
3. Важливі дрібниці – title, favicon

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

1. Правильно прописаний <!DOCTYPE html PUBLIC…..>. Хоч ця громіздка конструкція в самому верху сторінки і здається вам дивною, вона дає браузеру завдання – як правильно рендерувати (відображати) вашу сторінку, а також робить код валідним. Тому простим <html> не обмежитись.

2. Цілісна head секція. Тут також не обійтись одним <title>. CSS-стилі та Javascript мають бути в окремих папках, і викликатись у head як звичайне посилання.

<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />

І стилі не просто викликаються, а й задається тип їх відображення – або звичайний стиль, або ж стиль для роздрукування сторінки (media="print"). Favicon необов’язковий, але все ж потрібний елемент сайту, як я нещодавно писав. В блоці head також варто розмістити meta-теги, якщо ви вирішили їх використовувати. І одна з найважливіших деталей – якщо ви ведете статистику RSS за допомогою сервісу Feedburner, то в head обовязково треба прописати адресу вашого RSS, котра вже розміщена на Feedburner’i. Інакше картина ваших читачів буде дуже неповна.
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/feed/" />

3. Унікальні стилі для окремих елементів. Наприклад, якщо ви хочете, щоб теги <h2> мали різні властивості, то можна зробити так: #home h2 {}. Тобто для кожної сторінки буде створено окремий стиль.

Те ж саме стосується лінків – не обов’язково, щоб вони всюди були лише жорстко синіми з підкресленням. Для меню створіть один стиль, для тексту – інший, і так далі, для кожного виду посилань: .menu a {}; .footer a {};

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

<div id=”menu”>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”about.php”>About</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</div>

5. Загальний DIV для всього контенту. Вам буде набагато легше організовувати контент на сторінці, якщо всі блоки поміщені всередину одного загального DIV-тега, його зазвичай називають <div id="wrap">, <div id="container">. Особливо, якщо ширина сайту фіксована.

6. Найважливіший контент – в першу чергу. Якщо ваш сайдбар є лише навігацією або ж ще менш важливим контентом, то краще в коді помістити його нижче. А найважливішу інформацію – таку як новини, статті, події – наверх. Це стане ще одним, хоча й невеликим плюсом до SEO-оптимізації вашого коду.

7. Контент по частинам. Виокреміть контент, що часто повторюється на сторінках (header, footer, різні блоки) в окремі файли, і потім просто включайте їх у вигляді файлів. <?php include_once("menu.html") ?>

Саме за таким принципом працює відома CMS WordPress – сама сторінка index.php складається з набора функцій, що викликають певні розділи, такі як header.php, sidebar.php, footer.php, bottom.php, та інші в один кінцевий файл, котрий ви бачите.

8. Код з відступами. Набагато приємніше читати і редагувати код, котрий розділений ієрархічно – з відступами, так як у пункті № 4. Код. вирівняний align left жахливо читати ч швидко знайти потрібний вам рядок.

9. Ніяких стилів. Ваш HTML-код має створюватись для контенту, для інформації, а не для стилю. о можливості виключайте теги, котрі редагують стиль, з HTML-документу. Всі ваші стилі повинні знаходитись в окремому CSS-файлі та імпортовані в блоці <head>. Забудьте про <font>.

10. Правильний код – шлях до валідності. Насамкінець закривайте всі <img /> <br /> на кінці. Використовуйте © для значка ©, та аналогічні коди для інших символів. Не забувайте позакрвиати всі теги на сторінці, що ви відкрили.

І тоді все буде ОК

Оригінал (англ.): CSS Tricks – What beautiful HTML code looks like

Переклад з доповненнями: hellveen, спеціально для Блогорідера.

1. HTML-верстка і Web-програмування сайту. З чого почати?
2. Як зробити сайт легким та зручним у користуванні

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.

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

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

1. Час роздавати подарунки

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

Спеціально до Нового Року ви спеціально отримуєте набір новорічних іконок, котрі прикрасять ваш сайт за бажанням. Іконки представлені у трьох розмірах – 48х48, 125х125, 256х256.

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

Скачати можна тут (140 Кб)

Хороша традиція, чи не так? Пропоную і вам підготувати для читачів вашого сайту якісь цікаві дрібниці. Гарних свят!

Спонсор запису – Создание сайта

No related posts found