Рекомендації з оформлення сайту

95% користувачів не читають 80% вашого контенту (до таких висновків прийшли розробники CWsites)

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

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

Шрифт

Використовуйте лише стандартні шрифти (Arial, Verdana, Times New Roman, Georgia, Trebuchet MS). Найкращим з них, на мій погляд є Verdana (яким написано даний текст), бо він без закарлюк, є строгим і читаним.

Розмір шрифту

Рекомендовано встановлювати розмір шрифту 12 або 14 пунктів (як даний текст).

Крім того, необхідно дотримуватися оптимального співвідношення між розміром шрифту (font-size) і висотою рядка (line-height). Оптимальним значенням є співвідношення 1x1,5 (значення висоти рядка в 1,5 рази більше значення розміру шрифту). Наприклад, якщо розмір шрифту 12 пікселів, то висота рядка буде 12х1,5=18 пікселів.

Не зловживайте використанням ЗАГОЛОВНИХ ЛІТЕР. Крім того, що вони менш читабельні, їх використання асоціюється лише з криком.

Заголовки

Використовуйте підзаголовки (теги h1…h6). Це корисно не лише для візуального сприйняття інформації читачем, а й для пошукових серверів.

Пам'ятайте - в заголовках крапка не ставиться.

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

Не "відривайте" заголовок від тексту зайвим відступом.

Виділення тексту

Не використовуйте більше 3-х шрифтів на сторінці. Причому, враховується не тільки шрифт, а й колір та виділення (жирним, курсивом, підкресленням).

Загальний текст має бути написаний звичайним шрифтом (не курсивним, не жирний, не підкресленим).

Дотримуйтесь таких правил при використанні виділення:

• Жирний - для заголовків (хоча, тут є різні погляди, все ж таки, більшість джерел радять використовувати жирний шрифт саме так).
• Курсив – для привернення уваги читача до окремого елементу тексту (хоча, особисто я схильна виділяти важливий текст саме жирним, а не курсивом… Мабуть, доведеться прислухатися до порад).
• Підкреслення – для посилань.

Звісно, ви можете використовувати виділення й не лише за цими правилами. Головне – не виділяти забагато тексту одночасно!

Посилання

Де факто встановився стандарт, згідно з яким посилання повинні використовувати синій колір (# 00f / # 00C або # 369 / # 069), підкреслений текст, який має ставати червоним при натисканні і пурпуровим для відвіданих посилань (визначайте стилі для псевдо класу :visited).

Абзац

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

Вирівнювання тексту

Вирівнюйте абзац по лівому краю (це - найбільший удар по моїй уяві в оформленні контенту)!

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

Обсяг тексту

Розбивайте текст на невеликі параграфи - читач не має прокручувати тест більше ніж на 2,5-3 екрани.

Майте на увазі, що оптимальна довжина рядка тексту - 9-10 слів. Намагайтеся уникати використання дієприслівникових та дієприкметникових зворотів.

Навігація по сайту

Прагніть досягнення такого правила - кожен документ сайту повинен бути доступний з 3-х клацань миші.

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

Розташовуйте стовпці верхнього меню за правилом:

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

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

Складіть для користувачів карту сайту з посиланнями на найбільш важливі його розділи. Якщо на карті сайту занадто багато посилань, можна розбити її на кілька сторінок.

Контент

Подумайте, за якими ключовими словами користувачі будуть шукати ваші сторінки і включіть ці слова в текст на сайті.

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

Використовуйте нижню частину сайту для розміщення:

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

Логотип

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

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

Робиться це тому, що зображення у верхньому правому куті екрану запам'ятовуються людиною несвідомим чином.

Бітрікс24 - початок роботи. Заповнення особистого профілю - інструкція

Інструкція написана для користувачів порталу Дніпропетровської обласної клінічної лікарні ім. І.І. Мечникова

ЗМІСТ:

І. ПОЧАТОК РОБОТИ В “Бітрікс24”

ІІ. ЗАПОВНЕННЯ ПРОФІЛЮ

І. ПОЧАТОК РОБОТИ В “Бітрікс24”

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

1. Увійти в свою поштову скриньку.

2. Знайти і відкрити лист із запрошенням до корпоративного порталу “Бітрікс24”.

3. Пройти за вказаному в листі посиланні (має відкритися вікно авторизації в “Бітрікс24”, як показано на рис. 1).

Рис. 1. Вікно авторизації в “Бітрікс24”

4. Заповнити відповідні поля форми і зняти галочку з пункту “Запомнить меня на этом компьютере” (з метою інформаційної безпеки). Фото можна на даному етапі не завантажувати, а зробити це пізніше. 

Одразу після входу в “Бітрікс24”, відкривається розділ “Жива стрічка” (рис. 2). 

Рис. 2. “Жива стрічка”

Примітка! Радимо зробити закладку на дану сторінку в своєму браузері для того, щоб іншого разу швидко перейти до свого Бітрікс24.

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

ІІ. ЗАПОВНЕННЯ ПРОФІЛЮ

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

Рис. 3. Розділ “Завдання”

Відкрийте своє перше завдання “Заповнити профіль” та натисніть “Почати виконання” (рис. 4).

Рис. 4. Початок виконання завдання

Починаємо виконання даного завдання. Для цього необхідно перейти на сторінку свого профілю “Моя сторінка”, як показано на рис. 5.

Рис. 5. Перехід до свого профілю

Зі списку, що розкриється, необхідно обрати пункт “Моя сторінка”. В результаті відкриється Ваш профіль (рис. 6.).

Рис. 6. Редагування особистого профілю

Для зміни даних свого профілю натисніть кнопку "Редагувати профіль".

---------------------

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

Вимоги до заповнення особистого профілю 

на корпоративному порталі “Бітрікс24”

Увага! Профіль заповнюється виключно УКРАЇНСЬКОЮ мовою. 

Інформація в особистому профілі Бітрікс24 згуртована в 3-х розділах:

A. Інформація про користувача.

B. Додаткова інформація.

C. Соціальні мережі.

А. Інформація про користувача

1. В полях “E-Mail” та “Ім’я” вказуємо відповідно, Вашу електронну адресу, на яку Ви отримали запрошення до Бітрікс24 та Ваше ім'я.  

2. Поле: “Прізвище” за корпоративним стандартом лікарні необхідно вказати ВЕЛИКИМИ літерами.

3. В поле “По батькові” вкажіть ваше по батькові.

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

5. Додайте свої контактні телефони, послідовно обираючи підпункти “Мобільний телефон”, “Робочий телефон”, “Внутрішній телефон” зі списку при натисканні на пункт “Додати телефони”.

При цьому:  

5.1. “Мобільний телефон” і “Робочий телефон” вказується за таким стандартом: +380XXYYYYYYY.

Приклад: +380637365402. Невірно вказувати номер, використовуючи пробіли, риски чи дужки: +38(063) 736-54-02.

5.2. “Внутрішній телефон” вказується за таким форматом: XX*XX (саме знак “*”, а не “-”).

Приклад: вірно - 22*83, невірно - 22-83.

6. В поле “Посада” вкажіть свою посаду. При цьому, всі слова необхідно вказувати маленькими літерами.

В. Додаткова інформація

1. Поле “Автоматично визначати часовий пояс” - обрати зі списку такий пункт: “Ні, вибрати зі списку”.

2. Поле “Часовий пояс” обрати: “UTC+02:00) Europe/Kiev”.

3. В поле “WWW-сторінка” необхідно вказати (якщо є) веб-адресу свого ПЕРСОНАЛЬНОГО Інтернет-ресурсу (блог персональний або посилання на Google+ профіль).

Примітка: для того, щоб без помилки вказати Інтернет-посилання, радимо відкрити в іншому вікні браузеру необхідне посилання, скопіювати його адресу, повернутися до сторінки свого профілю та вставити в необхідне поле. 

4. Поле “Місто” вкажіть “Дніпропетровськ”.

5. Поле “Дата народження” заповнюється за таким стандартом: число, місяць (обрати зі списку), рік (чотири цифри).

6. Якщо Ви зареєстровані в Skype, то в полі “Skype” вкажіть своє Skype-ім’я. 

7. Якщо Ви маєте свою сторінку на Facebook, Linkenid, Xing або екаунт в Twitter, то необхідно “Додати соц. мережі”. Натисніть на цей пункт і оберіть з запропонованих варіантів (по черзі) ті соціальні мережі, в яких Ви зареєстровані (коли Ви обираєте якийсь пункт, то нижче з’являється відповідне поле для вводу Інтернет-посилання). Вставте у відповідне  поле посилання на Ваші ресурси в соціальних мережах. Це необхідно для того, щоб була можливість в подальшому авторизуватися на порталі через дані соцмережі.

8. В поле “Інші сайти” вкажіть посилання на свій особистий сайт, якщо є. В іншому випадку, лишайте поле пустим.

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

10. В поле “Інтереси” вкажіть Вашу особисту схильність до якоїсь діяльності в роботі (наприклад: судинна хірургія, соціальний інтранет, IBM технології, і т.і.).  

С. Соціальні мережі

В даному розділі можна пов'язати свій профіль Бітрікс24 з профілями в соціальних мережах Facebook, Twitter і сервісах Google, LiveID.

Якщо зробити таку прив'язку, то Ваші повідомлення з соціальних мереж (Facebook і Twitter), що написані з хештегом #b24, будуть транслюватися в живу стрічку Бітрікс24.

Пов'язання з сервісами Google і LiveID необхідно для того, щоб Ви мали змогу редагувати документи, які розміщені в Бітрікс24 за допомогою цих хмарових сервісів.

Щоб зробити таку прив'язку, натисніть на відповідну піктограму та здійсніть авторизацію (відкриється нове вікно).

---------------------

Все, профіль заповнено, завдання "ЗАПОВНЕННЯ ПРОФІЛЮ" виконано. Тепер необхідно в Бітрікс24 закінчити виконання завдання, яке ми розпочали на початку розділу ІІ (рис. 4).

Перейдіть в розділ "Завдання" та відкрийте своє завдання “Заповнити профіль” (рис. 3).

Перед тим, як завершити виконання любого завдання, бажано залишати коментарі - що саме було зроблено по завданню. В даному випадку в коментарі напишіть: “Профіль заповнено, завдання виконано” і натисніть на кнопку “Надіслати” (рис. 7).

Рис. 7. Коментування завдання

Тепер необхідно натиснути кнопку “Завершити” (рис. 11).

Рис. 8. Завершення виконання завдання

Бітрікс24 - наш шлях до зручного робочого інструменту у соціальному форматі

2013.10.22 (Вв.) 18:20

Зручний інструмент для колективної роботи ми шукали давно... 

Розпочалося з елементарного - необхідно ставити завдання фахівцям відділу та контролювати їх виконання. Погодьтеся, контролювати СВОЇ задачі не завжди вдається якісно, а тут - організувати роботу відділу... Плюс ще й одна важлива умова - сервіс має бути БЕЗКОШТОВНИМ. 

Шукали і знайшли... Але, не з першого разу. Давайте, все по порядку :)

1) 18.04.2012 (Ср.) Перше, до чого ми прийшли від GTask - сервіс управління задачами WorkFlowy (про плюси і мінуси, з якими ми зіткнулися див. в моєму пості від 2012.04.20).

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

Півроку ми витратили на адаптацію, але пересилити англомовний інтерфейс змогли не всі. Та й не тільки мовний бар'єр став на заваді... Більшість співробітників нарікали на те, що "все там не по нашому", не слов'янський розум створював цей сервіс і все тут! 

Думаю, всі, кому так важко було підкорятися новим правилам та "спілкуватися завданнями" з керівництвом, зітхнули з полегшенням, коли Михайло СУХОМЛИН, який довго і ретельно вивчав ринок сучасних платформ класу Digital Workplace та знайшов інший продукт...

3) 03.01.2013 (Чт.) Майже, новорічним подарунком для всіх став для нас Бітрікс24 - "хмаровий" сервіс для ефективної електронної колективної роботи. Тут є не лише управління завданнями - мобільна версія, чат, CRM та багато іншого...  

Розробники - російська компанія "1С-БІТРІКС". Більше того, нещодавно (04.10.2013) Бітрікс24 заговорив українською! :) 

І ще одна дуже важлива перевага - розробники легко йдуть на контакт і приймають зауваження та пропозиції щодо свого продукту.  

Вважаємо, що 10 місяців нашої роботи з Бітрікс24 стали корисним досвідом не лише для нас - за цей час ми ініціювали близько 20-ти тем на форумі Бітрікс24 і по більшості питань отримали позитивну відповідь і запевнення в тому, що наші зауваження та пропозиції прийняті в роботу. Трохи згодом обов'язково зроблю вибірку та аналіз того, що виправлено, а що - ні :)

Такою була, якщо коротко, історія нашого шляху до зручного робочого інструменту у соціальному форматі. Але історія продовжується! 

Сьогодні знаменна подія - "1С-БІТРІКС" оголосила переможця в конкурсі на краще визначення терміну "Соціальний інтранет". За підсумками голосування, саме визначення Михайло СУХОМЛИНА стало найкращим і нам надано 6 міс. безкоштовного користування тарифного плану "Команда" сервісу Бітрікс24!

До цього ми користувалися безкоштовним варіантом з обмеженням по обсягу даних та на 12 користувачів. В рамках нашого відділу інформаційних технологій лікарні такий варіант нас влаштовував, але запровадити цей інструмент на всю лікарню з кількістю персоналу понад 2 тис. співробітників за 990 грн. в міс. - це для державної лікарні просто фантастика :(

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

Звичайно, маємо більше "проти" ніж "за", але, це були би не ми, якби не пішли цим шляхом. Шляхом, яким не ходила жодна з лікарень СНД (не лише державної форми власності).

QR-коди - що це таке та як їх використовувати?

Qr код from СУХОМЛИН Тетяна

Презентацію було стврено для проведення заняття з медиками ДОКЛ ім. І.І.Мечникова

Автори уроку: СУХОМЛИН Михайло і Тетяна

QR-коди...

Зробила собі ось таку симпатичну візитку:

Чому ми обирали Gmail?

Gmail - преимущества использования from ЧЕШКО Тетяна

Презентація була стврена для проведення заняття з медиками ДОКЛ ім. І.І.Мечникова

Автори уроку: СУХОМЛИН Михайло і Тетяна

WorkFlowy (сервіс управління задачами) - пробуємо впровадити в практичну діяльність

2012.04.20 (Пт.)


WorkFlowy - порівняно новий сервіс для управляння задачами. Являє собою аркуш паперу, на який легко заносити справи. 


Плюси WorkFlowy


1) Перелік задач легко можна робити багаторівневим (деревовидним),  і що приємно - список можна згортати!


2) Вирішальним при виборі цього інструменту було те, що до задач можна давати доступ (на читання або редагування) іншим користувачам WorkFlowy (при чому, реалізовано це досить якісно і зручно)! Таким чином, начальник може ставити задачі собі, підлеглим і бачити процес їх виконання. 


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


В якості хеш-тегів ми використовуємо ключові слова, наприклад #терміново, #позапланом, #сьогодні і т.і.


Мінуси WorkFlowy


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


2) Англомовний інтерфейс. Але, якщо користуватися перекладачем, то цей мінус легко переборним :)


Взагалі, сервіс простий і зручний. З початку цього тижня (18.04.2012) ми розпочали його апробацію на рівні відділу інформаційних технологій лікарні ім. І.І. Мечникова. Сподіваємось на отримання позитивного досвіду, з яким, при бажанні, зможемо поділитися з вами :) 


Замість передмови...


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


Користувалися IBM Lotus Notes/Domino - чудова система, є можливість постановки задач, не тільки собі, а й іншим. Але базових можливостей там замало, прийшлося вносити невеличкі зміни в шаблон - додали перегляд виконаних/не виконаних по фахівцям і т.д.


Google Task і Google Calendar - використовуємо тепер. Як і в Lotus Notes, тут зручно вести календар, бачити календарі співробітників. Але задачі Google Task, на жаль, ніяк не пов'язані з календарем. Зручно, що перелік завдань завжди "на очах" коли переглядаєш календар, але виконання задачі ніяк, окрім копіювання через буфер обміну не можливо перенести в календар (як це реалізовано в Lotus Notes). 


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


Головне, що не влаштовує - це відсутність можливості ділитися (розшарювати) своїми задачами. Так і почали шукати щось інше...