Pre P.S. Залишу свої нотатки початківця-дизайнера. Розробляв шаблон звичайної веб-сторінки і Google_Mobile_Friendly дав зелене світло

Від автора: Є народна мудрість: "Розумний вчиться на помилках інших, а дурний – на власних". Особисто полюбляю свої навики в програмуванні закріплювати практичним застосуванням на власному сайті,..
- І що ж? Якщо є сайт,- то, звісно, в нього є "дизайн".
- Але ж який дизайнер з новачка?... І ні, щоб відразу переглянути, як правильно проектувати сайт, дати йому "зелене" світло від Google friendly, але ж, йо-й...
І тепер, після 2-ох років самонавчання, черга дійшла до корекції дизайну власного сайту... Не так вже й багато, переглянути відкоригувати за сотню веб-сторінок
Робіть висновки, але ж, хто там, зазвичай люди наступають на власні граблі....

Ціль дослідження оптимізації веб-сайту

Якщо дещо раніше переважали стаціонарні комп'ютери, то на сьогоднішній день левова частка перегляду інтернет інформації перепадає на мобільні гаджети; смартфони, планшети, айпади... Більше того, відомий пошуковик Google заявив: " Починаючи з 21 квітня 2015 року, зручність сайту для мобільних пристроїв стане одним із критеріїв рейтингу в Пошуку Google. Ця зміна вплине на пошукові запити з мобільних пристроїв усіма мовами та суттєво позначиться на результатах пошуку Google. Ми запроваджуємо її для того, щоб користувачі швидко й легко отримували релевантну та якісну інформацію, оптимізовану під свої пристрої." support.google.com

За достовірними даними інтернету до кінця 2016 року користувачів мобільних гаджетів буде нараховуватись біля 2-х мільярдів...
Звісно, веб-сайти мають відслідковувати напрямок руху сучасних технологій і слідувати за течією.
- А в чому ж виникає питання наслідування веб-сайту сучасних технологій?
Питання ж стоїть в зручному перегляду інформації веб-сторінки, як на стаціонарному комп'ютері, так і на мобільному пристрої.
Варто враховувати зручність перегляду веб-сторінки, якщо брати ресурс w3schools.com, то на січень 2015 року відвідувачі переглядають веб-сайти по моніторам:
Розрішення монітору більше 1920px - 32.7%
1920x1080 - 16%
1366x768 - 33%
1280x1024 - 7%
1280x800 - 5%
1024x768 - 4%
800x600 - 0.3%
Менше - 2%

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

Задля зручного перегляду веб-сайту на різних технічних пристроях створюється, як правило, адаптивний веб-дизайн.
З Вікіпедії, Адаптивний веб-дизайн (англ.Responsive web design) — дизайн веб-сторінок, що забезпечує відображення сайту на різних пристроях, підключених до інтернету.
Метою адаптивного веб-дизайну є універсальність веб-сайту для різних пристроїв. Для того, щоб веб-сайт було зручно переглядати з пристроїв різних роздільних здатностей та форматів, за технологією адаптивного веб-дизайну не потрібно створювати окремі версії веб-сайту для окремих видів пристроїв. Один сайт може працювати на смартфоні, планшеті, ноутбуці та телевізорі з виходом в інтернет, тобто на всьому спектрі пристроїв.
Можна також сказати, що адаптивний дизайн - це конфігурація, в якій сервер відправляє однаковий HTML-код на будь-які пристрої, а розміри елементів сторінки коригуються за допомогою CSS.

Аналіз дизайну веб-сторінки для моніторів ПК

Сьогодні в мережі інтернет є достатньо шаблонів дизайну веб-сторінки, є безліч дизайн студій, що пропонують свої послуги в даній сфері. Але все ж давайте просто поміркуємо, як можна спроектувати веб-сторінку для досить широкої робочої області монітора ПК, зважуючи, що ширина у нас буває: більше ніж 1920px, 1920px, 1366px, 1280px, 1024px та, рідко, проте зустрічається ще менша роздільна здатність монітора.
В переважній більшості робоча область контенту веб-сторінки складає 980px. Мотивується це тим, що, по-перше, зручно переглядати інформацію на більшості моніторів, розташовуючи контент посередині екрану. По-друге, зручно проектувати сітку/макет веб-сторінки.
Більшість Web-програмістів вважає, що оптимальною має бути ширина приблизно в діапазоні 760-780 пікселів. Це пов’язане з тим, що така ширина дає змогу уникнути появи горизонтальної полоси прокрутки (правило поганого тону) навіть для моніторів з розрішенням 800×600.
При достатніх розмірах робочої області, як один із варіантів дизайну сайту може бути як показано нижче на зображенні. Звісно варіантів дизайну може бути безліч, залежить від напрямку сайту, і з іншої сторони досить розумною буде думка використовувати всю доступну площу монітору.

Я ж піду шляхом, - чим простіше, сподіваюсь, тим краще. Залишу лише центральну частину із шириною в 780px.
Спроектую шаблон робочої сторінки веб-сайту слідуючим чином:
1. Монітор користувача з роздільною здатністю більше 780 px -> Робоча область веб-сторінки фіксована та становить 780px;
2. Монітор користувача з роздільною здатністю менше 780 px -> Спроектуємо веб-сторінку на весь екран, ширина становитиме - 100%;

Як реалізувати різні стилі класів можна дізнатись переглянувши статтю webdesignerwall.com. CSS3 Media Queries
Для зразку, якщо екран більше ніж 780px, то стилі можна прописати слідуючим чином:

@media screen and (min-width: 780px) {
    .class_one {
    background: #FFF;
    }
    .class_two {
    background: #CDC;
    }
}

Аналіз дизайну для мобільних гаджетів

Головне обмеження портативних пристроїв – маленький екран, у якого, до того ж, може бути відсутня функція горизонтальної прокрутки.
Навіть якщо дозвіл екрану «надолонників» досить великий, їх фізична ширина все одно буде не більше, ніж ваша кишеня. Звідси найбільш важливий висновок: на сторінку можна помістити лише один стовпець тексту.
І якщо з шириною робочої області для мобільно гаджету все зрозуміло, - використовуємо всю наявну площу 100%, то варто дещо детальніше зупинитись на розмірі шрифту.
Наразі існуючі рекомендації щодо створення дизайну для мобільних гаджетів:
Колонка контексту веб-сторінки повинна бути широка настільки, наскільки це можливо
Текст бажано повинен мати розміри близькі до розміру параграфа.*
Уникайте використовувати розмір в пікселях для всього, що більше 5px (саме так!). Піксельні розміри більше, ніж цей, будуть погано масштабуватися – використовуйте для них відсотки або «em».** Про масштабування контенту веб-сторінки мобільного гаджету дещо нижче по статті.
Зменшіть ширину полів, відступів і кордонів по обмеженням маленького екрану.
Вміщаємо все в один екран. Задаємо максимальну ширину в 100% (max-width: 100%).
Остерігайтеся фіксованого позиціонування. Зафіксований елемент, що вийшов за область перегляду, буде цілком недоступний.
Відмовляємося від динаміки та ефектів.
Утискаємо чи відмовляємось від графіки.
*. Розмір параграфа рівний 16px, хоча явно в специфікації W3C не задається. Варто пам'ятати, що стилі можна вказати в CSS font-size, а також зважити на те, що браузерами різних пристроїв можуть масштабувати текст залежно від ширини контенту та робочої області екрану пристрою.
**. Пригадаємо, одиниці виміру в CSS:
Одиниці виміру в CSS
Позначення    Опис
px    найдрібніша одиниця, видима на екрані.
em    Відносні одиниці. Розмір em залежить від розміру шрифту.
%    Аналог em, але 100% = 12pt;
ex    Це висота малої "x" поточного шрифту.
pt    Пункти. 1pt = 1/72 дюйму.
сm    Розмір в сантиметрах.
mm    Розмір в міліметрах.
in    Дюйми.1in = 2.54см.
pc    Піка. 1pc = 12pt.

Дещо детальніше зупинимось на одиниці виміру em
Одиниця em залежить від розміру шрифту поточного елемента (який встановлюється через CSS-властивість font-size). В кожному браузері запрограмований розмір тексту, що застосовується у випадку, якщо цей розмір не заданий у документі явно. Тому початково 1em дорівнює розміру шрифту, заданого в браузері як стандартний. Відповідно, встановлюючи розмір тексту для всієї сторінки в em, ми маємо до діла саме з цим параметром. В разі, якщо em застосовується до конкретного елемента, за 1em приймається розмір шрифту його елемента-батька.

Рекомендації Google. Зручність мобільних сайтів

За статтею Google Правила щодо оптимізації для різних екранів починаючи з 21 квітня 2015 року, зручність сайту для мобільних пристроїв стане одним із критеріїв рейтингу в Пошуку Google. Ця зміна вплине на пошукові запити з мобільних пристроїв усіма мовами та суттєво позначиться на результатах пошуку Google. Google запровадить її для того, щоб користувачі швидко й легко отримували релевантну та якісну інформацію, оптимізовану під свої пристрої.
Переглянемо деякі рекомендаціїї Google:

Застосування Flash. Більшість мобільних браузерів не відтворює Flash-контент, тому варто подумати за використання інших сучасних технологій. Google developers: Design and UI
Не налаштована область перегляду. Для того, щоб сайт правильно відображався на екрані малих розмірів, необхідно налаштувати атрибут viewport. Він повідомляє браузеру як правильно змінювати розміри екрану. Дещо детальніше про атрибут viewport What is The Viewport?
Але, якщо коротко відповісти на питання: "- Що таке Viewport?", то скажу наступне; дещо раніше більшість веб-сайтів розроблялись для моніторів з великою роздільною здатністю і сторінки веб-сайту могли бути статичними та з фіксованими розмірами. Згодом стали використовувати смартфони та планшети і область перегляду (viewport) була замаленька для перегляду широкої статичної сторінки. Щоб виправити ситуацію мобільні браузери масштабують веб-сторінку, зменшуючи її до розмірів екрану. І все проблема вирішена !
HTML5 презентував <meta> тег, що дозволив дизайнерам контролювати масштабування області перегляду, для цього необхідно на веб-сторінці вказати тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

можливо ще дещо зрозуміліше буде, якщо переглянути малюнок:

як бачимо, не вказавши meta name="viewport" мобільний гаджет маштабує вебсторінку за власним піксельним розрішенням, і як результат текст занадто маленький та нечитабельний.

Фіксована область перегляду. Проблема виникає за умови проектування фіксованої ширини веб-сторінки; скажімо, проектують фіксовану ширину в 980px. Вирішенням даної проблеми є розробка адаптивного дизайну.
Ширина контенту не відповідає області перегляду веб-сторінки. Контент веб-сторінки ширший за область перегляду і відвідувачу необхідно користуватись горизонтальною прокруткою. Зазвичай проблема виникає, якщо розміри в стилях CSS задані в абсолютних одиницях, чи, наприклад, представлений малюнок для конкретної ширини браузера.
Маленький розмір шрифту. Проблема виникає за умови, що відвідувачу необхідно виконувати дії для збільшення масштабу сторінки.
Інтерактивні елементи розташовані занадто близько. Проблема може виникнути, якщо посилання занадто близько розташовані один біля одного. Потрібно враховувати, щоб користувачу було легко активувати посилання та уникнути активації сусіднього лінку. Варто продумати розміри кнопок, посилань та іншого для мобільних пристроїв
Реклама. Якщо застосовується рекламка, врахуйте, що на мобільних пристроях її досить складно закрити...

Висновок

Розпочавши перегляд оптимізації веб-сторінки для мобільних пристроїв, ще раз переконуюсь наскільки проектування дизайну веб-сторінки це не легкий процес; підібрати колірну гамму, спроектувати робочу ширину веб-сторінки для різних моніторів, мобільних, задати стиль, шрифт, прорахувати абсолютні та відносні одиниці малюнків, блоків, посилань, перевірити чи Google friendly насправді друг та ще інше...
- Інше?... Це ще, наприклад, оптимізувати швидкість завантаження веб-сторінки для мобільних пристроїв PageSpeed Insights, зважити на структуру коду html, підключення зовнішніх файлів javascript, CSS, розмір малюнків та можливість зжати їх об'єм...
- Чи, можливо, насправді легше взяти готовий шаблон?... Кожен вибирає сам, яким чином проектувати сайт.