Які фактори враховувати
Оптимізація повинна враховувати такі фактори, що впливають на зручність взаємодії з сайтом:
- тип клавіатури (фізична, тачскрін)
- дозвіл і співвідношення сторін екрану
- підтримка зміни орієнтації екрану
- швидкість передачі даних (2G, 3G, 4G)
- операційна система
- можливості браузера (масштабування, підтримка Flash і AJAX)
- простота навігації (перейти на сторінку всього в три натискання, скролінг повинен бути вертикальним, а не горизонтальним, непогано додати кнопки переходів в самий верх сторінки і на головну сторінку сайту - це значно підвищить рівень зручності використання, обов'язкова наявність пошуку по сайту.
Дозволи екранів мобільних пристроїв
- Nokia 6300, Nokia N92, Nokia N95, Nokia N95 8GB, Nokia N96
- Sony Ericsson W850i W890i, Sony Ericsson W880i
- Apple iPod Nano 3rd 4th generation
- HTC Wizard, HTC Tattoo, HTC Touch2
- Blackberry: Curve 8530, Pearl Flip
- Android: Motorola Charm, Sony Ericsson Xperia X10 Mini і інші
- Symbian OS: Nokia E63 і інші
- Apple OS: iPhone, iPod
- Android: HTC Dream, HTC Hero, HTC Magic, HTC Wildfire S, Droid Pro, i7500 Galaxy, Samsung Galaxy Ace (S5830), Samsung Moment, Samsung Galaxy Gio GT-S5660, Sony Ericsson Live With Walkman і інші ...
Blackberry: Torch, Storm, Bold
Symbian OS: Nokia N8, Nokia C6-01 і інші
- Android: Liquid A1, HTC Desire, Nexus One, i9000 Galaxy S і інші
- Maemo (Linux): Nokia 900 і інші
- Windows Mobile 6: Sharp S01SH
- Windows 7 Phone Venue Pro, Samsung Omnia 7, HTC 7 Pro і інші
Рекомендуємо прочитати Як підключити Яндекс.Спеллер до WordPress
- Android: Motorola Xoom, Samsung Galaxy Tab 10.1
- Windows OS: Asus Eee Pad EP121
- Apple OS: Axiotron Modbook
У iPad 3 дисплей Retina при щільності 264 пікселя на дюйм (це навіть більше, ніж в 15-дюймових MacBook Pro).
У iPhone 4S - 326 ppi.
З огляду на велику кількість дозволів, правильним рішенням було б реалізація проекту «One Web». One Web - означає створення, наскільки це можливо, однакових умов для використання і відображення інформації на всіх пристроях. Але це не означає, що одна і та ж інформація буде виглядати абсолютно однаково на різних пристроях.
Як визначити дозвіл за допомогою CSS
Визначити ширину екрану, положення і співвідношення сторін за допомогою media-запитів, які з'явилися в CSS3.
Мінус даного способу, в тому, що код ініціює три окремих http-запиту. Подібних запитів повинно бути якомога менше, інакше це відіб'ється на швидкості завантаження сторінки.
Щоб скоротити кількість запитів, можна використовувати один файлу таблиць стилів.
Сервіси для перевірки адаптивності
Шановний, не вводьте людей в оману.
Взагалі-то, в інтернеті дозволу екранів мобільників відрізняється від заявленого виробником, наприклад, для верстки під iPhone4 потрібно прописувати в медіаквері 320х480, а для більшості Андройд на 5 '- 360х640.
Дуже дивно вчити людей адаптивної верстці під мобілки, з огляду на те, що прямо ця сторінка на Андройде 5 'відкривається з глюками. Лінь було робити горизонтальний скролінг в таблицях - так хоч би шрифт зменшили, чи що.
Дякую за зворотній зв'язок. Верстку поправимо.
Я так розумію, що це просто скрипт якийсь. Маю великі сумніви, що він підійде кожному сайту. Ви уявляєте собі інструмент, який як чарівна паличка перетворює десктопну версію в мобільний варіант? Скрізь адже різний дизайн. Ви не замислювалися, чому при створенні дизайну робиться кілька макетів під різний дозвіл? Причому ця отрисовка коштує додаткових грошей.
Срібної кулі немає і не може бути. Тільки професійний дизайн з продуманим розміщенням кожного елемента за принципом mobile first і якісна верстка забезпечить зручність користування інтернет-магазином.