Як зробити сайт адаптивним за допомогою google chrome
Напевно Ви чули такі висловлювання як: Інтернет в усіх напрямках; в наступному році в Інтернет будуть виходити тільки з мобільних пристроїв; стаціонарні комп'ютери йдуть шляхом динозаврів і так далі.
Але ж насправді так і відбувається! Подобається нам це чи ні, якщо ми не будемо дотримуватися поточних тенденцій, то дуже скоро сайт, в який ми вже так багато вклали, може втратити свою аудиторію.
Проблеми виникають коли справа доходить до горизонтальної орієнтації, так як її немає для мобільних пристроїв. Разом з представленими iPhone 6 і 6 Plus, ми отримуємо 46 конкуруючих між собою пристроїв, зі своїм баченням і можливостями. До того ж, мережева швидкість з якою потрібно правильно поводитися.
Якщо працюючи за стаціонарним комп'ютером Вам потрібно думати тільки про швидкість Wifi або DSL, то у випадку з мобільними пристроями інші швидкості, звані GPRS, EDGE, 3G і LTE (4G).
Незважаючи на те, що ми можемо зробити сайт для мобільних пристроїв, чи можемо ми зробити сайт, який буде працювати на такій великій кількості різноманітних девайсів, і ще будуть добре працювати при різній швидкості передачі даних?
Сьогодні ми хочемо показати Вам два простих інструменту. Інструменти, які допоможуть відповідати на запити найбільш поширених девайсів і швидкостей і при цьому залишатися на вершині розвитку Вашого прекрасного сайту. Почнемо з першого інструменту.
Мобільна емуляція в Google Chrome
У новому Chrome 32 є інструмент розробки - мобільна емуляція. Цей інструмент - справжня знахідка для налагодження мобільних і адаптивних проектів.
Якщо Ви його ще не відкрили, то відкрийте за допомогою однієї з наступних опцій:
- Натисніть F12 (або Cmd + Alt + l на Mac)
- Натисніть Developer Tools під View -> Developer
- Клацніть правою кнопкою миші в будь-якій частині сайту і виберіть Inspect Element
Ви можете побачити, що доступні звичайні інструменти розробника, але є ще додаткові опції, і сайт буде імітувати мобільний пристрій, в тому випадку iPhone 6 Plus. Давайте розглянемо його ближче.
У верхній лівій частині знаходиться конфигуратор девайса, який дозволяє вибрати один з 46 різних мобільних пристроїв. Під списком пристроїв Ви можете побачити опції:
- Роздільна здатність екрану;
- вертикальне / горизонтальне положення екрану;
- установка пиксельного співвідношення пристрої;
- можливість регулювання дисплея в межах видимої частини або повнорозмірного режиму.
Синім кольором виділена конфігурація мереж. Там Ви можете встановити швидкість мережі, починаючи з офлайні і закінчуючи необмеженою кількістю запитів. Це допоможе Вам побачити наскільки швидко або повільно вантажиться Ваш сайт, в залежності від швидкості мережі.
Під «мережею» Ви можете вручну налаштувати агент користувача. Це дозволить Вам побачити наскільки сайт адаптивний.
Що на рахунок брейк-поінтів? Цей інструмент буде виявляти все брейк-поінти, які Ви встановили в CSS і забезпечити зв'язок з кожною з них.
Один момент пов'язаний з строковими послідовностями Користувача-агента - якщо Ви не хочете встановлювати їх вручну, цього можна не робити. Клікнувши кнопку escape на клавіатурі, Ви можете відкрити інші опції конфігурації і вибрати зі списку заданих підроблених призначений для користувача агентів.
На додаток до цього Ви можете також імітувати датчики сенсорних пристроїв, включаючи вхід дотиком, геолокацію і акселерометр.
Крім цього, нова версія дозволяє дуже легко створювати дизайн для мобільних пристроїв. Але це ще не кінець нашої історії.
Одна справа бачити, як сайт працює в різних умовах, але інша справа знати, як ділитися результатом з Вашими розробниками і дизайнерами?
Розширення Usersnap Chrome гарно вписується в список інструментів розробника. Використовуючи плагін емуляції Ви можете застосувати Usersnap Widget в дизайні.
Якщо у Вас його ще немає, встановіть його з сайту Chrome Web Store. Після установки, Ви побачите іконку Usersnap в панелі інструментів Chrome. Після першого використання з'явиться вказівка про конфігурацію.
Клацніть "ок» і після реєстрації і логіна в Usersnap, Ви будете перенесені на сторінку конфігурацій. У нижній частині сторінки Ви побачите список Ваших проектів.
Виберіть потрібний Вам проект зі списку і натисніть Select Project. Тепер Ви готові використовувати розширення. Повертаючись до роботи з плагіном емуляції, ми помітили, що коли сторінка досягає 768px, то він перестає працювати правильно.
Сподіваємося незабаром це буде усунуто.
На скріншоті Ви можете побачити, що зроблені нотатки про те, як виглядає сайт, які зміни потрібно внести, щоб він добре працював на мобільному пристрої. Тепер Ви маєте більший контролем і гнучкістю в дизайні, розробці, створенні додатків і сайтів, ніж будь-коли.
Тепер Ви знаєте, що є два прекрасних інструменту, які допоможуть Вам простіше перетворити сайти для великої кількості мобільних пристроїв.
LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу
УВАГА! Ви використовуєте застарілий браузер Internet Explorer
Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.
