Головна    Статті    Карта    Зв'язок   


monitors

Адаптивна ширина сайту під сайт відвідувача

вересень 2014 року

  1. Для чого потрібно робити адаптивну ширину сайту?
  2. Найбільш використовуваний дозвіл екрану відвідувачів за статистикою LiveInternet.
  3. Скільки шаблонів та якої ширини вибрати під різний дозвіл екранів.
  4. Приклади використання шаблонів - Тест


Адаптивна ширина сайту під сайт відвідувача

1. Для чого потрібно робити адаптивну ширину сайту?

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

Роздільна здатність монітора сягає від 320рх до 2560рх.

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

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

2. Найбільш використовуваний дозвіл екрану відвідувачів за статистикою LiveInternet.

- Яку ж роздільну здатність моніторів зараз використовують? Якщо брати сьогоднішні (червень 2014року) дані LiveInternet

1.- 1366*768 - 20% глядачів
2.- 1280*1024 - 6,7%
3.- 1920*1080 - 6,6%
4.- 1024*768 - 5%
ну інші варіанти, що менше використовують.

3. Скільки шаблонів та якої ширини вибрати під різний дозвіл екранів?

Аналізуючи ці цифри можна спланувати собі дизайн сайту під різну ширину моніторів. Так для великих моніторів можна сторінку зробити фіксованою з шириною 1200рх, щоб текст не розпливався по всій ширині екрану, для менших же моніторів та гаджетів, можна зробити "резинову" сторінку використовуючи CSS3 Media Queries. Для перших трьох варіантів зі статистики може бути такий зразок

шаблон 1200 рх

Для моніторів з роздільною здатністю 1024рх і менше ширина шаблону сторінки може бути 980рх і бути "резиновою" до розміру в 650рх. Як зразок мати такий вигляд

шаблон 980 рх

Для маленьких гаджетів можна застосувати одноколонний шаблон сторінки з розміром сторінки від 480рх.

шаблон 480 рх

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