Мобільна версія сайту: як зробити? Адаптивний дизайн

Сьогодні більшість людей Виходять в ятір через мобільні гаджети - планшет, телефони, в зв`язку з ЦІМ оптимізація сайту такоже виходом на новий рівень. Если користувач заходити и бачіть, что веб-сайт не оптімізованій для мобільніх прістроїв: зображення Неможливо переглядаті, кнопки з`їхалі, шрифти маленькі и нечітабельні, дизайн перекошений - 99 з 100%, что ВІН Вийди и Почни шукати Інший більш Зручний. А пошуковий робот поставити галочку, что ресурс нерелевантен, т. е. відповідає пошуково запиту. Тому дизайн Сторінки винен буті обов`язково адаптованості під Різні мобільні Пристрої. Що таке мобільна версія сайту, як сделать ее, и Який спосіб краще застосуваті? Детальніше в Цій статті.

Отже, існують Чотири ключовими способу адаптуваті сайт під мобільну версію.

Способ перший - адаптивний дизайн

Адаптівні Шаблони передбачають зміну картинки сайту в залежності від розміру екрана. Як правило, смороду задаються на Стандартні 1600 1500, 1280, 1100, 1024 и 980 пікселів. Для реализации застосовують CSS3 Media Queries. Сам дизайн сайту при цьом НЕ змінюється.

До Перевага цього способу Варто Віднести:

• Зручне розробка, оскількі структура сама підлаштовується під Параметри екранах, а будь-яке оновлення НЕ потребує розробки дизайну з нуля, й достатньо підправити CSS и HTML;
• один адресою URL - корістувачеві НЕ нужно запам`ятовувати кілька назв, відсутня необходимость редіректу (перенаправлення з однієї адреси на Інший), Який может ускладніті роботу веб-майстра, та й пошуковику легше Сортувати и ранжувати ресурс з Єдиним адресою.

Відео: адаптивні сайт в Adobe Muse CC

Звичайний, адаптівні Шаблони ма ють и свои Недоліки, якіх, до слова Сказати, более, чем перевага. Проти много розробніків дотрімуються самє цієї Концепції, например, корпорація Google, мобільна версія сайту которого має адаптивний дизайн. Отже, недоліки:

• Адаптивний дизайн не підтрімує ті ж завдання на мобільному Пристрої, что и на ПК. Если це, например, мобільна версія сайту банку, де користувач найімовірніше буде важліва інформація про курс валют або найближче банкоматах, то такого дизайну Цілком достаточно. Альо если це складаний структурованій ресурс з великою кількістю розділів и підрозділів, то адаптивна верстка навряд чи припадаючи до душі Відвідувачам.
• Повільне завантаження перетворює улюблений сайт в ненавісній. Особливо це стосується ресурсов, де в достатку Присутні анімація, відеоролікі, спліваючі вікна та інші активні елементи. Через велику Вагу сторінка просто буде &ldquo-гальмуваті&rdquo-, користувач - злитися и йти, а пошукові позіції сайту - падати.
• Неможлівість Відключення мобільної Версії - ще один вагомий недолік. Если Якийсь елемент прихований такий верстка, ви Нічого НЕ зможете сделать, щоб его Відкрити, На Відміну Від сайтів, де ее можна відключіті и перейти на звичайний домен.

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

Способ другий - окрема версія сайту

Цей метод очень Поширення и часто з успіхом Робить сайт на мобільному Пристрої зручніше для сприйняттів. Суть его в тому, щоб создать окрему версію Сторінки, намальовану під Цю програму, а розташовану на окремий URL або піддомені, например, m.vk.com. При цьом Основний функціонал зберігається, просто інакше Виглядає дизайн сайту. Преимущества такого способу очевідні:

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

Альо и тут не обійшлося без недоліків:

• Кілька адреса - десктопних и мобільна версія сайту. Як зробити так, щоб користувач запам`ятав два варіанти? Веб майстра часто пропісують перенаправлення (редирект) з декстопной Версії на мобільний, но при цьом, если цієї Сторінки в мобільній Версії НЕ існує, користувач получит помилки. Тут же вінікає Труднощі з пошуково системами, Яким складно ранжувати 2 однаково ресурсу, а це безпосередно позначається на просуванні.
• Мобільна версія сайту з комп`ютера, если користувач помилковості зайде на неї, буде віглядаті безглуздо, что такоже может позначітіся на відвідуваності.
• Така версія Частіше сильно урізана, десктопних, тому користувач получит вельми ограниченной функціонал. Альо при цьом, если чогось НЕ вістачає, відвідувач может війта на повну версію Сторінки.

В цілому окремий мобільний сайт віправдовує собі и є найпошіренішім способів адаптації ресурсу під мобільні Пристрої. ВІН Популярний среди великих інтернет-магазинів, например, Amazon.

Третій способ - RESS-дизайн

Пошуковик Google активно підтрімує цею напрямок мобільного дизайну. Це найскладнішій, витратності, но дієвій метод адаптуваті сайт під телефон або планшет. Назівається ВІН RESS. Це таргетування ресурсу в мобільний додаток, Пожалуйста можна скачать для шкірного пристрою окремо. Для андроїда - з GooglePlay, а для Apple - з iTunes.

Такі Додатки Швидкі, безкоштовні Вимоги, зручні, ма ють можлівість размещения різніх відів информации, при цьом пам`ять телефону и інтернет-трафік НЕ з`їдає так, як при відвідуванні сайту через браузер. На них легко заходіті, так як ПОСИЛАННЯ всегда буде на екрані під рукою, и немає необхідності вводіті складаний Назву в адресний рядок браузера.

Є, звичайний, тут и свои Недоліки, Такі як складність в розробці, висока ВАРТІСТЬ праці великого числа програмістів, необходимость делать кілька варіантів верстки. Іноді Мобільне Пристрій НЕ розпізнається додатком. Необхідна регулярна технічна підтримка, виправлення недоліків. Проти цею варіант вважається краща з трьох запропонованіх зважаючі на свою продуктівної, безперебійної роботи.

Найдешевше способ сделать мобільний сайт

Всі перераховані вищє Способи пріпускають хай и не всегда трівалу и складаний, но все-таки оплачувану роботу веб-майстра. Если вині Бачите гострої необхідності в подібній розробці, вам підійде проста и безкоштовна мобільна версія сайту. Як зробити ее простіше Всього?

Скачайте СПЕЦІАЛЬНІ шаблонів (плагіні) для адаптивного дизайну. Например, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile и інші. Смороду допоможуть коректніше відображаті сайт в телефоні, при цьом ви отрімаєте кілька підказок, что слід виправити для кращої адаптації Сторінки до мобільної Версії.

Звичайний, Сейчас метод навряд чи підійде для серйозна ресурсов. Швидше, це безкоштовна можлівість прізначається для дрібніх и найпростішіх сайтів, блогів, новина стрічок. Чи не Варто кож забуваті, что пошуковик Google, так само як и "Яндекс", Сьогодні пред`являє серйозні вимоги до мобільніх версіямі, тому є Величезна ймовірність знізіті свои позиции, вікорістовуючі такий метод.

При такому способі, найімовірніше, буде обрізатіся реклама и спліваючі банери, потім на внутрішню сторінка буде завантажуватіся Швидко і без &ldquo-лагов&rdquo-.

Принципи создания мобільніх версій

Неважливо, Створена мобільна версія сайту безкоштовно або за помощью штату веб-майстрів, Зроблено вона на системе RESS або с помощью адаптивного шаблоном. Архів НАЙГОЛОВНІШЕ, что для ефектівної ее роботи нужно Дотримуватись кількох очень важлівіх Принципів. Отже, Якою має буті мобільна версія сайту? Як зробити ее продуктівної, ефектівної и продуктівної?

Прібіраємо все зайве

Мінімалізм - ті, до чого винна прагнуті розробник мобільної Версії сайту. Уявіть, як Важко спрійматі інформацію, яка рясніє квітами, кнопками, банерами, и якові доводитися нескінченно перегортаті в пошуках потрібного матеріалу. Мобільний дизайн повинен буті пробачимо и чистимо. Віберіть 2-3 кольори для поділу простору (например, фірмові). Краще, если один з них буде Білим. Розділіть простір невеликого екранах на зрозумілі и читаються зони. Віртуальні клавіші повінні буті відні, щоб користувач чітко знав, куди натіскаті, и бачив - вісь товар, вісь форма для Заповнення Даних, вісь інформація з доставки та оплати.

Відео: Розробка мобільніх версій сайту в Photoshop

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

вірівнювання

Питання вірівнювання стоит НЕ Менш Гостра, оскількі если сделать его неправильно, користувач получит только Закінчення важлівіх слів. Загальнопрійнятім вважається вірівнювання по лівому краю и вертикально. Уявіть, як ви перегортуєте Новинам стрічку в телефоні. Ві робіте це зверху вниз, но Ніяк не в ліву чи праву сторону.

об`єднання

Коли возможности Довгого ланцюжки переходів немає, пробуйте об`єднувати кілька кроків в один. Например, на сайті потрібне Введення даних до кілька етапів - ім`я, потім адреси, де в Кожній окремій клітінці розташовані окремо будинок, вулиця, квартира и т. П Щоб не змушуваті користувача пробувати потрапіті по безлічі дрібніх осередків, Запропонуйте Йому заповнити Всього 2 - имя та адресою.

І роз`єднання

Іноді, навпаки, нужно роз`єднаті Надто велика Кількість информации. Например, в віпадаючому меню у вас ПЕРЕЛІК прежде 80 міст, куди здійснюється доставка. Згрупуйте їх по регіонах, щоб корістувачеві не довелося перегортаті цею Величезне список. Коли ВІН буде наводити курсор на обласний центр або область, віпадатіме ще один список міст.

перелікі

До речі, з приводу Списків. Їх два - фіксований в алфавітному або ІНШОМУ порядку и з підстановкою. Вибір їх Залежить від того, что буде перераховуватіся.

Фіксований Зручний в тому випадка, если користувач точно знає, что шукає. Например, місто, номер або дату. Другий варіант підійде для Довгих складних назв або для віпадків, коли є безліч варіацій у одного и того ж назви, а КОЖЕН віпадаючій список набліжає користувача на крок до мети. Варіант з автопідстановкі Частіше вікорістовується в тому випадка, коли відвідувачеві потрібна допомога. Например, сайт з в`язання предлагает купити спіці. Користувач вводити пошуковий запит &ldquo-Металеві спіці&rdquo-, а в підказці бачіть &ldquo-Спіці 5 мм&rdquo-, &ldquo-Спіці 4,5 мм&rdquo- и т. д.

Заповнити форму

Цей пункт особливо стосується сайтів, де Щось продають онлайн, и доводитися заповнюваті Стандартні форми оплати, доставки и т. П Если людина віробляє покупку з телефону, то, швідше за все, у него немає часу дістатіся до комп`ютера, а значить, процес покупки нужно сделать максимально Швидко і зручне.

Для цього форми могут містіті Вже заповнені дані, можна вдатися до найпопулярнішіх Відповідей. Например, Вставити сьогоднішню дату, способ оплати готівкою, місто, если ви працюєте в одному РЕГІОНІ. Їх можна міняті, но если ви попали в ціль, годину користувача буде зекономлено.

Все чітається, все проглядається

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

немного статистики

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

Цифри Такі. Сьогодні гаджетами корістуються 87% населення, мабуть, кроме самих маленьких дітей и Деяк людей похилого віку. Економісти прогнозують зростання мобільної комерції в 100 разів на найбліжчі 5 років. При цьом только 21% сайтів адаптованості під роботу з мобільними прилаштувати. Значить, інтернет-трафік и ринок Електронної торгівлі зайнятості лишь на малу 5-у часть.

Вдумайтеся в ЦІ цифр. Чи має сенс адаптуваті свой ресурс? Звісно так. Більш того, поки є так много вільного місця на цьом Сайти Вся, ви можете зайнятості свой власний сегмент на ньом.

Відео: Адаптівність в Adobe Muse. Нові Функції и адаптивна сітка.

Де потрібна мобільна версія

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

Без мобільної Версії НЕ могут існуваті:

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

вместо Висновки

Сьогодні мобільні технології знаходяться в Стадії активного росту и розвитку, тому, прагнучі до лідерства на Сайти Вся, будь-яка компанія винна стежіті за тім, щоб ее інтернет-ресурс відповідав Вимоги. Через Зростаючий Запитів користувача сайти доводитися Постійно модернізуваті и адаптуваті під Різні Пристрої. Зрозуміло, что если людіні незручно перебуваті на тому чи ІНШОМУ ресурсі, ВІН НЕ может там отріматі інформацію про товар або ціною, Оформити замовлення, дізнатіся про доставку, то ВІН знайде тієї сайт, де всі це стане можливий. Тому, щоб перемогті в конкурентній борьбе, важліво мати гнучкий, Зручний, функціональній и цікавий ресурс.

Відео: Як зробити мобільну версію сайту юкоз

Зробити це поможет мобільна версія сайту Android або Ios. Для цього нужно вібрато один з перерахованого вищє способів редизайну - адаптивний шаблон, создание нового сайту на піддомені и Перехід до него Шляхом перенаправлення, использование безкоштовно шаблонів або создания мобільного! Застосування, с помощью которого користувач зможу зручніше заходіті и перебуваті на странице.

Такий підхід поможет НЕ только Зберегти лояльність існуючіх КЛІЄНТІВ, а й дасть можлівість залучіті Нових відвідувачів.