Технології постійно покращуються, смартфони та планшети стають "крутішими", а користувачі мобільними. На даний момент кількість аудиторії з мобільних пристроїв перевищила користувачів із персональних комп'ютерів. Не дарма це спричинило цілий напрямок сайтів під мобільні пристрої.
Наприклад, якщо відкрити звичайний сайт (без адаптивної верстки та мобільної версії) через смартфон, то, швидше за все, він відкриється у незручному для користувача вигляді. Тобто. контент буде відображено повністю, але буде присутня горизонтальна прокрутка, що погано.
1. Адаптивна верстка сайту – що це такеАдаптивна верстка сайту - це така html верстка, в якій в залежності від розмірів вікна браузера сайт "трансформується" у зручному для користувача вигляд
Відмінності мобільної версії сайту та адаптивноїНе варто плутати мобільну версію сайту та адаптивну верстку сайту. Мобільна версія знаходиться на окремому піддомені та повністю дублює контент сайту. Адаптивний сайт містить ті ж адреси URL сторінок, але в залежності від пристрою підвантажує різні стилі CSS, що дозволяє відображати сайт у зручнішому вигляді.
2. SEO оптимізація та адаптивна версткаПошукові системи на даний момент мають дві різні видачі (вони дуже схожі). Одну для користувачів ПК, іншу мобільну. Якщо сайт не оптимізований під мобільні пристрої, це вважається негативним фактором і позиції сайту будуть знижені на 2-3 (буває і більше). При цьому було б логічно, якби занижувалися позиції лише мобільної версії, проте практика показує ще й погіршення позицій та для основної версії сайту.
Така несправедливість може бути пояснена тим, що пошукові системи, швидше за все, підсумовують поведінкові чинники з ПК та мобільних пристроїв. У результаті природно, якщо сайт не адаптований, його ПФ будуть гірше і це тягне за собою вниз основну версію сайту.
3. Як перевірити сайт на адаптивністьПеревірити сайт на адаптивність можна лише відкриваючи його в різних браузерах та змінюючи ширину екрану. Але робити це з багатьох різних пристроїв з різними дозволами - забере дуже багато часу. Також навряд чи у Вас є десятки смартфонів і планшетів.
В інтернеті є набагато швидше і просте рішення. Наприклад, можна встановити в браузер Google Chrome спеціальний плагін Window Resizer і за допомогою нього відкривати сайт у найпопулярніших дозволах.
Можна просто вручну змінювати розміри вікна браузера за шириною та дивитися результат. Firefox або Google Chrome мають адаптивний дизайн браузера, натиснувши Ctrl+Shift+M.
Найголовніша умова – це домогтися відсутності горизонтального прокручування та відсутності flash-плагінів на сторінці.
Google перший впровадив у пошуковий алгоритм фактор адаптивності. Він має спеціальний безкоштовний сервіс, який аналізує будь-який сайт на оптимізацію під мобільні пристрої. У Яндекса цей функціонал з'явився трохи згодом.
Після перевірки можливо два варіанти. Або сайт оптимізований, чи ні:
Наприклад, перевірка адаптивності в Google:
Перевірка адаптивності в Яндексі:
Зробити адаптивну верстку сайту може тільки людина, яка знається на CSS і html. Ми розглянемо основні моменти, оскільки єдиного рецепту немає.
Щоб створити адаптивну верстку, потрібно створювати таблиці стилів CSS у третій версії. Різниця між 2 та 3 є, але в даному питанні дуже сильне значення має відсутність абсолютних значень у стилях. Коротше кажучи, всі значення розмірів блоків довжина, ширина, розміри - це задається у відсотках.
Синтаксис CSS @ Media
@media тип_пристрою and|not|only (медіа_особливості)( ... Опис стилів... )Наприклад, напишемо умови, при яких стилі будуть працювати для пристроїв з шириною екрана менше 800px.
@media screen and (max-width : 800px ) ( ... стилі ... ) ПриміткаСтилі треба писати послідовно від великого дозволу до маленького, тобто спочатку загальні стилі, а потім для «урізаних» розмірів, наприклад:
@media only screen and (max-width: 1280px) (...) @media only screen and (max-width: 1024px) (...) @media only screen and (max-width: 800px) (...) )У заголовних тегах необхідно обов'язково написати рядок:
Мета тег viewport говорить, що ширина екрана дорівнює ширині браузера, а кожен піксель відповідає одному пікселю на пристрої. Якщо цього не вказати, то адаптивність не вдасться реалізувати.
5. Практичні приклади адаптивної верстки сайту 5.1. Адаптуємо дуже довгі словаНаприклад, на сторінці зустрінеться дуже довге слово і тоді якщо не встановлено властивість overflow, то це може спричинити появу горизонтального прокручування. Щоб цього уникнути, потрібно контенту прописати наступні CSS властивості
.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; Адаптивне меню сайтуСайдбар сайту зазвичай займає ширину в районі 200-300 пікселів, що займає майже всю ширину браузера на мобільних пристроях. Тому найчастіше роблять меню, що випадають, за допомогою стандартної кнопки у вигляді трьох штрихів (це стало вже класикою).
Реалізувати це на сайті можна, але доведеться трохи повозитися зі стилями. Давайте розглянемо все по кроках.
Ситуація, коли у нас є меню і є основний контент (я не став малювати шапку та футер):
Html код такої структури може бути приблизно таким:
body ( margin-left : 10% ; width : 70% ; border : 1px solid #eee ; ) #menu ( width : 20% ; height : auto ; float : left ; ) #content ( width : 70% ; height : ;float : left ; border-left : 1px solid ; Назва сторінкиКонтент сторінки
Контент сторінки
Контент сторінки
Контент сторінки
Перетворюється на сторінку в
Мінусом цього способу є те, що на маленьких дозволах меню займатиме майже всю область по ширині, а значить з'явиться горизонтальна прокрутка або ще гірше – всі блоки можуть попливти.
Модифікуємо наш приклад в такий спосіб. Якщо роздільна здатність екрана менше 800 пікселів, меню зникне і з'явиться спеціальна кнопка відкрити меню.
Наведемо html-код адаптивної верстки з коментарями:
body ( margin-left : 10% ; width : 70% ; border : 1px solid #eee ; ) #menu ( width : 20% ; height : auto ; float : left ; display : block ; ) #content ( width : 7 ; height : auto ; left ; border-left : 1px solid #000 ; none ; ) #mob_menu ( display : block ; ) #content ( clear : both ; ) ) function showmobmenu() ( if ( == "block ") ( document.getElementById("menu").style.display = "none " ) else ( document.getElementById("menu").style.display = "block " ) ) Розкрити меню ↓Меню Назва сторінкиКонтент сторінки
Контент сторінки
Контент сторінки
Контент сторінки
Зменшимо ширину екрана до 700 пікселів (наприклад). Ось як це виглядає на сторінці
Здрастуйте, дорогі читачі блогу. Як уже й не дивно, що адаптивний дизайн стає все популярнішим у російському інтернеті. І, звичайно ж, верстальникам потрібно вивчати його. Так як адаптивний дизайн скоро буде практично на всіх сайтах, тому що все більше люди користуються мобільними пристроями.
І хочеться сказати, що сайти з набагато зручніше читати на таких пристроях ніж без нього.
Сьогодні я хочу представити Вам 5 дуже корисних та класних сервісів, за допомогою яких Ви зможете перевірити сайт на адаптивність.
І так поїхали.
5 сервісів, на яких можна перевірити сайт на адаптивність. www.responsivedesigntest.netХороший сервіс для перевірки веб-сайтів. Є безліч дозволів екранів як планшетів, так і телефонів.
mattkersley.comПростий сервіс для перевірки сайту від Matt Kersley. Також доступні всі популярні дозволи мобільних девайсів.
Дуже класний сервіс, що перевірить будь-який сайт. Дуже сподобалося оформлення, а також функціональність.
Дуже красивий та функціональний сервіс. Можливо навіть перевірити як буде виглядати сайт на телевізорі:-)
Від автора: «Припини міняти розмір цього браузера, він уже скоро зітреться!» Як часто ви це чуєте? Ну, гаразд, може і не так вже й часто, але якщо ви розробляєте адаптивні веб-сайти, то знаєте, про що я говорю: при кожному редагуванні DOM або CSS ви тягаєте туди-сюди край браузера, тестуючи зміни і відшукуючи неточності.
Загалом здебільшого такі зусилля – це спроба імітувати розміри екрана різних пристроїв.
Якщо ви займаєтеся корпоративною розробкою, у вас для тестування, можливо, є безліч пристроїв, наданих компанією. Там, де я працюю, у нас є iPad, iPhone, один-два інші планшети, лептопи та настільні комп'ютери. Якщо у вас такої розкоші немає, доводиться користуватися тим, що є під рукою.
Вдома я маю два різні лептопи, два різні пристрої Android: Kindle і Nexus 7. Ці пристрої я застосовую для тестування своїх фрілансерських розробок, але зрозуміло, що це не вичерпна добірка. Зовсім немає пристроїв iOS, і хоча я вважаюсь раннім послідовником, не планую купувати кожен новий телефон/планшетфон/планшет, як тільки він з'явиться у продажу.
То що робити розробнику? На щастя, зростає кількість інструментів на базі браузерів, що імітують розміри екранів безлічі пристроїв. Різні інструменти, звичайно, йдуть з різними наборами характеристик та різними рівнями ефективності. Деякі ми тут і розглянемо.
Для цілей тестування я взяв перший по-справжньому адаптивний створений мною сайт PajamasOnYourFeet.com . Він заснований на шаблоні Brownie HTML5, дуже прихильно та безкоштовно наданому спільноті розробників на EGrappler.
Am I Responsive?Am I Responsive? – абсолютно легкий, миттєвий перегляд вашого сайту з точки зору того, як він відображатиметься на чотирьох різних пристроях. Усі чотири – з iOS, і розробник на сайті пояснює свій вибір. Він не пропонує жодних елементів керування та варіантів вибору, тільки дуже просте та елегантне відображення. Розміри вікна перегляду:
Десктоп - 1600 x 992px, що зменшуються за шкалою (0.3181)
Лептоп - 1280 x 802px, що зменшуються за шкалою (0.277)
Планшет - 768 x 1024px, що зменшуються за шкалою (0.219)
Мобільний - 320 x 480px, що зменшуються за шкалою (0.219)
Цитуючи розробника: Це не інструмент тестування, дуже важливо робити це на справжніх пристроях. Але він є інструментом швидких скріншотів (для мене) та надання візуальної можливості «втлумачити» на зустрічах із клієнтами, що ви мали на увазі».
deviceponsive аналогічний до сайту Am I Responsive? тим, що просто і акуратно відображає ваш сайт, немає елементів управління або доступних опцій, коли справа стосується пристроїв. Всі вони відображаються одночасно на одній довгій сторінці. Він має цікаву властивість – можна модифікувати верхній колонтитул, відредагувавши його фоновий колір і вставивши власний логотип, а потім «заприскринити». Так можна певною мірою брендувати свій сайт при показі скріншотів клієнту. Імітовані на цьому сайті пристрої та розміри екранів:
Macbook - 1280 x 800
iPad (книжкова орієнтація) – 768 x 1024
iPad (альбомна орієнтація) – 1024 x 768
Kindle (книжкова орієнтація) – 600 x 1024
Kindle(альбомна орієнтація) - 1024 x 600
iPhone (книжкова орієнтація) – 320 x 480
iPhone (альбомна орієнтація) – 480 x 320
Galaxy (книжкова орієнтація) – 240 x 320
Galaxy (альбомна орієнтація) – 320 x 240
Як і в більшості подібних інструментів, смуги прокручування відображаються у маленьких пристроях. У реальному пристрої вони не будуть показуватись, але для отримання можливості прокручування тестового вигляду на несенорному пристрої потрібно піти на деякі поступки.
Як і deviceponsive, responsive test відображає ваш сайт у багатьох пристроях, але замість показу їх усіх відразу на одній сторінці ви вибираєте, який із пристроїв дивитися, у простому меню нагорі сторінки. Переглядаючи цей сайт на лептопі середнього розміру, я виявив, що відмінно працює зменшення сторінки, дозволяючи вам бачити весь сайт усередині вікна пристрою.
Тут пропонуються тринадцять різних вікон перегляду, від великого монітора настільного комп'ютера до так званого «паршивого Android» (Crappy Android) (якщо чесно, у них є і опція з назвою «Android краще» (Nicer Android).
І знову Firefox на цьому сайті трохи спотикається. Зверніть увагу, що на скріншоті між зеленим верхнім колонтитулом і областю контенту з білим фоном знаходиться тільки блакитна смуга там, де має відображатися слайдер зображення.
Він дуже схожий на два попередні, і єдине, що відрізняє від них responsive.is - це плавна анімація дисплея одного пристрою до наступного, а також напівпрозорий оверлей, що показує нерухомість сайту, що випадає з вікна перегляду.
Єдині доступні опції пристрою тут – автоматичні, які заповнюють вікно вашого браузера, показуючи сайт таким, яким ви його побачили, якби перейшли на нього: Десктоп; Планшет (альбомна орієнтація); Планшет (книжкова орієнтація); Смартфон (альбомна орієнтація) та Смартфон (книжкова орієнтація), розміри в пікселях не даються.
І знову кілька властивостей і опцій, що відрізняються, ставлять Screenqueries особняком серед інших сайтів. Тут представлено 14 телефонних та 12 планшетних пристроїв з окремим елементом для перемикання режимів книжкової та альбомної орієнтації. Вони відображаються на пронумерованій піксельній сітці, причому розміри показані внизу праворуч від тестового дисплея. Краї дисплея перетягуються, тому можна тестувати розміри користувача. Проведіть мишею або клацніть область тестування, і фон стане сірим, з менш перевантаженим виглядом.
Цікава особливість цього сайту – для кількох пристроїв є опція «Правильний вигляд» (“True view”), яка показує ваш сайт обернутим у браузер chrome, що наказав цьому пристрою. На жаль, і я вже звик до цього, Firefox'у не вдається відобразити слайдер зображення тестового сайту. Не лайтеся, з браузерів я дійсно віддаю перевагу Firefox, але, на щастя, у нас є опції.
Screenfly реально збільшує коефіцієнт юзабіліті. Він пропонує дев'ять пристроїв більше планшетів, від 10-дюймового ноутбука до 24-дюймового десктопу, п'ять планшетів, дев'ять смартфонів, три телевізійних розміри та опцію розміру користувача екрану. Будь-яку обрану вами опцію можна обертати в книжковій або альбомній орієнтації за допомогою окремого елемента керування меню. Можна вибрати, дозволити прокручування чи ні, і одним клацанням кнопки згенерувати посилання, що розділяється.
Сайт проактивно корисний тим, яким чином він надає інформацію про піксельні розміри. Кожен пристрій у меню показано з назвою та піксельними розмірами, величина вашого власного вікна браузера показана біля верхнього правого кута вікна, а розміри вибраної опції – у нижньому колонтитулі під дисплеєм разом із URL тестованого сайту. Ця невелика характеристика полегшує документування скріншотів та шаринг інформації з клієнтами.
Все сказане вище вже зробило б його ідеальним інструментом, але розробники Screenfly знайшли можливість зробити його просто вищий клас і надали властивість проксі-сервера. Цитую з їхнього сайту: «Screenfly може використовувати проксі-сервер для імітації пристроїв під час перегляду вами свого веб-сайту. Проксі-сервер симулює рядок агента користувача вибраних вами пристроїв, але не поведінку цих пристроїв». Всі інші розкриті інструменти мають справу виключно з CSS. Screenfly – єдиний, що дозволяє тестування на підставі рядка агента користувача.
Протестувавши таким чином один створений мною сайт із наявною мобільною версією, можу сказати, що результати виявилися дуже хорошими. Все відображалося точно так, як я очікував, і тестуванню піддавалися функції. Треба сказати, тестування рядків агента користувача стало традиційним, але цей сайт був зроблений давно, і властивість проксі-сервера виявилася дуже корисним доповненням до нього.
Отже, ви бачите, що для тестування адаптивних сайтів є достатньо ресурсів. Вони відрізняються унікальними властивостями; які сайти ви застосуєте, буде залежати від ваших особистих уподобань та вимог, і я намагаюся підштовхнути вас на дослідження та експерименти з ними. Чим більше у нас, розробників, буде по-справжньому корисних інструментів, тим краще.
Фреймворків, таких як або , які суттєво полегшують та прискорюють верстку сторінок.
має на увазі чудове відображення веб сторінки на всіх пристроях і розширеннях моніторів. Напевно, не кожен верстальник має повний набір девайсів з усіма можливими розширеннями дисплеїв, для тестування своєї верстки. Це й не дивно, адже техніка нині не дешева.
Отже. Купувати гори мобільних телефонів і планшетів, не варіант - розоримося. Що робити? Для цих завдань було розроблено сервіси для тестування адаптивних сайтів. Принцип роботи дуже простий. Найчастіше є кадр певного розміру, де відкривається сторінка. Ефект виходить приблизно такий, як і при перегляді на мобільному пристрої. Хочу зауважити, що сервіс не завжди точно покаже відображення сторінки на телефоні або планшеті. При верстці слід тестувати за допомогою сервісів, але після завершення, наскільки можна, протестувати на найпоширеніших пристроях.
Отже. До вашої уваги найкращі інструменти для тестування адаптивних сайтів.
Інструмент для тестування адаптивних сайтів від компанії Adobe. Для його використання потрібно встановити собі комп'ютер.
Програма дозволяє синхронізувати ваші пристрої WIFI і переглядати сайт так, як він буде відображатися на вашому девайсі. На даний момент підтримуються пристрої із такими ОС: iOS, Android, Kindle Fire.
Ще ніколи не було більш важливого забезпечити, щоб ваш проект був готовий для кожного типу користувача та пристрою перед його запуском. Хоча це може бути важко фізично, перевірити дизайн на кожному пристрої, є деякі інструменти та програми, які допоможуть вам імітувати різні адаптивні сценарії.
З такою кількістю безкоштовних та преміум інструментів немає причин не тестувати адаптивний дизайн перед розміщенням в Інтернеті. Просто не забудьте використати цю інформацію для багатьох необхідних налаштувань дизайну! Сьогодні ми пропонуємо набір інструментів для тестування адаптивного дизайну.
1. Google Mobile-Friendly TestGoogle Mobile-Friendly Test - один з тих інструментів, які чомусь упускаються з уваги. Вам потрібно, щоб дизайн вашого сайту відповідав стандартам Google, щоб допомогти з видимістю в пошуку, і це так просто.
Інструмент легко використовувати, просто введіть URL-адресу та подивіться, як оцінюються ваші сторінки на мобільних пристроях. Найкраща частина цього інструменту полягає в тому, що він визначає, де ваш сайт може "гальмувати" або погано відображатись на мобільних пристроях, щоб ви могли виправити помилки.