Про що потрібно пам'ятати при створенні адаптивної верстки?

1. Що не можна упустити?
2. Де тестувати?

Випусковий редактор SEOnews

Стрімке зростання мобільного ринку в Росії і за кордоном зробив питання «мобільних версій» одним з найбільш обговорюваних в середовищі SEO-фахівців і власників сайтів. І хоча Google і недавно приєднався до мобільного гонці Яндекс не віддають перевагу жодному з мобільних варіантів, серед вебмайстрів поширена думка, що, вибираючи між мобільним сайтом, динамічним контентом і адаптивної версткою, варто зупинитися на останній.

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

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

Основні переваги формату:

• Один URL для всього контенту. Полегшує взаємодію користувачів з контентом, а також його виявлення і індексацію пошуковими роботами.
• Створення однієї адаптивної сторінки займає менше часу, ніж дублювання змісту на різні сайти.
• При адаптивної верстці алгоритми Google точніше індексують параметри сторінки, а не реєструють різні версії однієї сторінки.
• Можна скористатися наявними можливостями конкретного пристрою для взаємодії з користувачем.
• Немає редиректів. А значить, знижується час завантаження, і зростає продуктивність.

Недолік за великим рахунком один - досить трудомісткий і детальний процес розробки. Так як в цьому випадку створюється єдиний код для пристроїв з різним розміром екрану, потрібно врахувати безліч деталей, щоб користувальницький досвід і продуктивність сайту були на максимальному рівні.

Що не можна упустити?

• Ні в якому разі не можна блокувати JavaScript, CSS і файли зображень. Для кращого відображення і індексації завжди залишайте доступ googlebot і googlebot-mobile до цих даних. Якщо ви забороните сканувати цю інформацію у себе в robots.txt, це завдасть безпосередній шкоду відображенню і індексації контенту, що в свою чергу негативно позначиться на ранжируванні.

Перевірити доступність файлів для роботів Google можна в Search Console, в розділі «Подивитися, як Google».

• Розмір даних. Мобільні користувачі не повинні завантажувати повнорозмірні зображення, призначені для великих екранів і високих швидкостей. Спробуйте зменшити HTTP-запити і скоротити CSS і JavaScript. В першу чергу на сторінці повинен завантажуватися контент. Все інше вторинне.
• Використовуйте зображення у форматі JPEG, GIF або PNG-8. Від звичайного PNG краще відмовитися, так як він може ускладнити картинку в 5-10 разів.
• При створенні графічних елементів типу кнопок краще відмовитися від картинок на користь CSS.
• Невідтворювані формати. Flash і деякі непоширені формати відео можуть не відтворюватися на мобільних пристроях. Їх, а також Java-аплети і Silverlight-плагіни необхідно прибрати з сайту, інакше Яндекс не буде вважати сайт адаптіровинним під мобільні пристрої. До слова, з кінця минулого року Яндекс перестав показувати в мобільних Яндекс.Відео ролики, що працюють на flash і не підтримують HTML5.
• Розробка адаптивного дизайну повинна вестися за принципом mobile-first. Тобто спочатку створюється верстка для самих маленьких екранів. Макет для таких пристроїв складається з однієї колонки з базовими елементами: шапкою, меню, основним контентом і підвалом. При збільшенні екрану по ширині елементи шикуються горизонтально, як на десктопах.

http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

• Не використовуйте міжсторінкових оголошення. Замість них варто вибрати банери HTML або зображення, схожі на звичайне оголошення, що не загороджують екран.

• Щоб браузери мобільних пристроїв не стискали сторінку під розмір екрану, а відображали її в потрібному вам вигляді, використовуйте метатег viewport. Можна зустріти, наприклад, таке його вживання:

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

Для пристроїв, у яких при переході на ландшафтний (горизонтальний) екран ширина сторінки не змінюється, просто виконується масштабування контенту, необхідний атрибут initial-scale = 1. Він встановить відповідність 1: 1 для пікселів CSS незалежно від орієнтації пристрою. Детальніше про метатеге viewport читайте в Google Developers.

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

Дозвіл

модель смартфона

320х480, 480х320

1440х2560, 2560х1440 LG G3, Samsung Galaxy S6

Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3

480х800, 800х480 Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500

540х960, 960х540

Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia

640х1136, 1136х640 Apple iPhone 4, Apple iPhone 5

720х1280, 1280х720

Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900 +, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact

750х1334, 1334x750

iPhone 6

1080х1920, 1920х1080

Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8, iPhone 6 Plus

Дозвіл

Розмір планшета

600x800, 800x600

Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A

768х1024, 1024x768

Apple iPad mini, Acer Iconia Tab

768x1366, 1366x768

ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire

800х1280, 1280x800

Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet

1080x1920, 1920x1080

Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700

1536x2048, 2048x1536

Apple iPad

1600x2560, 2560x1600

ASUS Transformer Pad, Samsung Galaxy Tab Pro

Де тестувати?

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

• Microsoft Internet Explorer Developer Toolbar (починаючи з IE 8)
• (Firefox)
• (Safari)
• (Opera)
• (Google Chrome)

Ці інструменти показують розмір всього вікна браузера, а не області перегляду.

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