стрілка вверх

people and smartphones

Досліджуємо оптимізацію веб-сайту для мобільних гаджетів

грудень 2015

Автор: Анатолій

Від автора: Є народна мудрість: "Розумний вчиться на помилках інших, а дурний – на власних". Особисто полюбляю свої навики в програмуванні закріплювати практичним застосуванням на власному сайті,..

- І що ж? Якщо є сайт,- то, звісно, в нього є "дизайн".

- Але ж який дизайнер з новачка?... І ні, щоб відразу переглянути, як правильно проектувати сайт, дати йому "зелене" світло від 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%

monitors

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

mobile

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

З Вікіпедії, Адаптивний веб-дизайн (англ.Responsive web design) — дизайн веб-сторінок, що забезпечує відображення сайту на різних пристроях, підключених до інтернету.

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

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

Прикладом "узгодженого" сайту може бути alistapart.com

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

Сьогодні в мережі інтернет є достатньо шаблонів дизайну веб-сторінки, є безліч дизайн студій, що пропонують свої послуги в даній сфері. Але все ж давайте просто поміркуємо, як можна спроектувати веб-сторінку для досить широкої робочої області монітора ПК, зважуючи, що ширина у нас буває: більше ніж 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%, то варто дещо детальніше зупинитись на розмірі шрифту.

Наразі існуючі рекомендації щодо створення дизайну для мобільних гаджетів:

*. Розмір параграфа рівний 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 приймається розмір шрифту його елемента-батька.

Реалізуємо невеличкий приклад:

<div style="font-size: 16px;">
   <p>Україна</p>
   <p style="font-size: 0.5em">Україна</p>
   <p style="font-size: 1.0em">Україна</p>
   <p style="font-size: 1.5em">Україна</p>
</div>

Україна

Україна

Україна

Україна

Для зручного перегляду інформації веб-сторінки на смартфоні варто окремо задати CSS-стилі та вказати метадані HTML-сторінки.

Приклад CSS-файлу для мобільних гаджетів handheld.css

Рекомендації 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">
що таке viewport

Фіксована область перегляду. Проблема виникає за умови проектування фіксованої ширини веб-сторінки; скажімо, проектують фіксовану ширину в 980px. Вирішенням даної проблеми є розробка адаптивного дизайну.

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

Маленький розмір шрифту. Проблема виникає за умови, що відвідувачу необхідно виконувати дії для збільшення масштабу сторінки.

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

Реклама. Якщо застосовується рекламка, врахуйте, що на мобільних пристроях її досить складно закрити...

Висновок

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

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

- Чи, можливо, насправді легше взяти готовий шаблон?... :) Кожен вибирає сам, яким чином проектувати сайт.

Використані інтернет джерела:

  1. Перевірка оптимізіції веб-сайту для мобільних гаджетів: varvy.com/mobile
  2. Перевірка оптимізіції веб-сайту для мобільних гаджетів: google.com/webmasters/tools/mobile-friendly
  3. Огляд правил щодо оптимізації для різних екранів
  4. Mobile usability
  5. CSS3 Media Queries
  6. Responsive design – harnessing the power of media queries
  7. What makes a good mobile site?
  8. Як зробити сайт легким та зручним у користуванні
  9. Дизайн для портативних пристроїв: ваш веб-сайт на маленькому екрані
  10. Что такое Viewport, как он работает и для чего вообще нужен
  11. Mobile Analysis in PageSpeed Insights