Наскільки важливий чуйний веб-дизайн?


29

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

Деякі питання, які я маю щодо цього, включають:

  1. Чи краще використовувати адаптивний веб-дизайн на відміну від використання окремого коду для різних розмірів / пристроїв?

  2. Чи може він потенційно впливати на SEO (позитивно чи негативно)?

  3. З якими основними проблемами я можу зіткнутися під час оптимізації веб-сайту для бізнесу за допомогою цього методу дизайну?


Ви тільки що зробили радикальні зміни в ваш заголовок питання без фактичної зміни змісту. Ви справді впевнені в цьому? (Підказка: відповідь зараз "ні".)
Су

@ Su 'Вибачте з цього приводу, що я просто зрозумів, що це повністю змінить відповіді, які я отримаю, тому я зробив "відкат"
життя

1
Наскільки важливо? Для більшості сайтів нульове значення мало. Для додатка чи інструменту більше (1) Чуйний проти Адаптивний? Залежить від людини до людини і від проекту до проекту. Коротше кажучи, жоден метод не є кращим, а використання також залежить від аудиторії сайту. (2) Впливає на SEO? № (3) Основні питання? Вам доведеться перевірити більше, виправити більше помилок і кодувати більше, деякі речі не працюватимуть при зменшеній ширині, а деякі речі порушуватимуть TOS (adsense), якщо ви їх видалите або зміните. Ось 10 важливих функцій для веб-додатків у цьому відео, які IMHO застосовують у більшості сайтів у будь-якому випадку vimeo.com/10510576
Ентоні Хацопулос

Відповіді:


21

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

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

Станом на травень 2012 року, адаптивний дизайн - це рекомендована найкраща практика компанії Google при розробці для смартфонів. Однією з головних переваг є те, що ви працюєте на одному веб-сайті: це один сайт для проектування, побудови, підтримки та просування. Це ефективно.

З точки зору SEO, розміщення окремого мобільного сайту, наприклад, memexample.com, означає, що вам потрібно оптимізувати два окремі сайти та розділити цінність вашого бізнесу (PageRank, повноваження тощо) на два місця. Хоча ви можете уникнути того, що розміщуючи вміст на одних і тих же URL-адресах через виявлення агента користувача, це не стосується дублювання зусиль (це все-таки два окремі сайти), а також вводить більше технічних проблем, наприклад забезпечення вашого користувача-агента виявлення працює і оновлюється, що пошукові системи індексують потрібний вміст у потрібному індексі тощо.

Загалом, чуйний дизайн - це елегантне рішення.

Щоб відповісти на ваші інші запитання:

  1. Торкнулося вище, але також врахуйте, як швидко розвивається ринок мобільних телефонів. Чим гнучкіше ваше мобільне рішення, тим менше потрібно буде робити, щоб не відставати.

  2. Залежить від того, з чим ви порівнюєте, але, як було сказано вище, будь-який з двох інших основних варіантів має до них значні проблеми SEO.

    Існує певна стурбованість питанням "приховування", тобто приховування вмісту від пошукових систем, що властиво чуйному дизайну в більшості реалізацій. Однак, хоча, наскільки мені відомо, жоден з основних пошукових систем чітко не відповів, що Google розглядає це як "найкращу практику", це може розглядатися як ознака того, що Google здатний розрізняти законне приховування вмісту для причини оптимізації пристроїв та інші, менш законні приховування, з причин маніпуляцій.

  3. Я думаю, що головним завданням є визначення того, який контент показати мобільним користувачам. Залежно від вашого сайту, це може не бути проблемою, але у багатьох випадках це є. Ключовим питанням є розуміння того, що намагаються зробити ваші відвідувачі мобільних пристроїв. Наприклад, хтось із iPhone, ймовірно, хоче швидку, просту інформацію або транзакції. Ця ж людина на iPad, швидше за все, зацікавиться більш спокійним переглядом.

Це запитання та відповідь читають надзвичайно кумедно чотири роки в майбутньому.
dwjohnston

12

Ідея полягає в тому, щоб забезпечити оптимальний досвід перегляду відвідувачам незалежно від пристрою. Оскільки кількість відвідувачів, які користуються мобільним пристроєм, майже ймовірно збільшиться, а не зменшиться, має цілком сенс пройти цей маршрут.

Існує ряд доступних (не кажучи про дешевих) тем для блогів та CMS, ви можете негайно спробувати і побачити, чи подобається вам те, що ви отримуєте (перевірити на всіх своїх чи деяких пристроях клієнтів).

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

  2. SEO: ні. Настільки ж хороший і поганий, як невідповідний макет.

  3. Ви повинні зробити трохи більше планування на початку. Який вміст повинен відображатися на найменшому пристрої, яким має бути порядок вмісту? Такі речі. Або: Чи добре виглядає мій вміст у кожному з моїх підтримуваних вимірів? Ви також можете оптимізувати розміри ваших зображень для кожного з параметрів, щоб отримувати не лише масштабовані зображення, але й зображення в реальному розмірі. Якщо ваша CMS не підтримує, це ще якась робота.

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

Редагувати:

Додам, що якщо у вас є історичні дані веб-аналітики (скажімо, Google Analytics), ви можете легко шукати кількість користувачів мобільних пристроїв порівняно з немобільними, ідентифікувати використовувані пристрої (до фактичного обладнання) та переглянути роздільну здатність екрана. ("Чи насправді вони бачать мої сторінки чи лише її частину і повинні прокручуватися?").

Друга редакція:

Відповідно до цього повідомлення "Мобільні веб-сайти проти чуйного дизайну: яке правильне рішення для вашого бізнесу?" "у блозі Google Analytics на веб-сайті, розробленому з чуйним дизайном, є такі плюси:

  • Простота оновлення
  • Оптимізований для пошукових систем
  • Додавання кодів перетворення та переадресації

Плюси окремого мобільного сайту:

  • Проектування для потреб мобільних користувачів
  • Створення сайту Quicke
  • Прекрасні варіанти роботи

Стаття "Чуйний дизайн - використання можливостей медіа-запитів" на офіційному блозі Google для веб-майстрів Google дає приємне вступ у те, як насправді реалізується "Чуйний дизайн".

"Створення веб-сайтів, оптимізованих для мобільних пристроїв" на розробниках Google зазначає:

"Google рекомендує веб-майстрам дотримуватися кращих галузевих практик використання чуйного веб-дизайну, а саме обслуговування однакового HTML для всіх пристроїв [...]"


2
Google насправді зробить ваш сайт нижчим, якщо завантаження займе більше часу.
Steffan Donal

2
@Ruirize Так, але ... Він запитав, чи чутливий дизайн негативно впливає на SEO. І чуйний дизайн не робить сторінку довшою для завантаження. Отже "ні". Тільки якщо ви хочете це робити ;-)
initall

@initall - Чуйний дизайн може тривати завантаження вашого веб-сайту на мобільний пристрій залежно від того, як ви створили б свій веб-сайт, призначений лише для мобільних пристроїв. Якби він мав менший розмір сторінки (менше попереднього вмісту, менше бібліотек тощо), можливо, ваш сайт займе довше, ніж це могло б мати на мобільному пристрої. Тим не менш, напевно, добре оптимізувати один веб-сайт для мереж з низькою пропускною здатністю, але слід пам’ятати про це.
Нік

1
@ Nick Звичайно, якщо порівнювати сайт, оптимізований для мобільних пристроїв, з більш загальним (чуйним), переможець ... не дивується. У цьому перелічено деякі зі статей: blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold
initall

3

Я думаю, що важливо спершу усвідомити, що "чуйний дизайн" (RD) - це термін "buzz" (якщо я покладу Width: 100% на елемент, я маю RD саме там, щоб перебільшувати), і для цього його важливість здається важливішою, ніж це насправді це так, як врешті-решт це умовно, як і все інше.

Чи потрібно впроваджувати РД?

Щоб відповісти, що вам потрібно буде вказати деякі визначення:

  1. Хто ваша цільова аудиторія
  2. Яка аудиторія - ваша ціль
  3. Яка мета вашого веб-сайту
  4. Звідки буде доступ до вашого веб-сайту (у більшості випадків)
  5. тощо.

Це дуже схоже на маркетинговий аналіз. Йдеться про те, щоб мати підходящий носій для потрібної аудиторії (можливо, ваша аудиторія сидить перед комп’ютером більшу частину дня, або вони в дорозі з останнім iPhone та інше). Вони роблять і те, і інше, тоді, звичайно, RD - це головне.

Чи краще використовувати адаптивний веб-дизайн на відміну від використання окремого коду для різних розмірів / пристроїв?

Залежить від складності інтерфейсу користувача і того, як ви будете ним користуватися. Типову сторінку в більшості випадків можна візуалізувати, використовуючи різні набори CSS для різних дисплеїв. Однак більш складні або складні інтерфейси можуть вимагати різних підходів, тому може бути розумним представити різну структуру сторінки та стратегію залежно від того, який пристрій використовується (наприклад, карти Google, багатоконтактний інтерфейс ..).

Чи може це вплинути на SEO (позитивно чи негативно)?

SEO більше стосується контенту, ніж дизайну. Тільки Google знає, чи вони важать дизайн, але дизайн / макет, але загалом, якщо ваш вміст високої якості, це буде набирати більше, ніж фактичний дизайн.

З якими основними проблемами я можу зіткнутися під час оптимізації веб-сайту для бізнесу за допомогою цього методу дизайну?

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

Нова технологія завжди ризикована, посилання. проблема HTML5 для Facebook. На даний момент він не повністю зрілий і пропонує різні проблеми, подібні до IE6 порівняно зі стандартами.

Зберігайте це максимально просто. Фантастичні веб-сторінки цінні лише дуже короткий час, поки користувачеві фактично не доведеться користуватися вашою сторінкою. Якщо йому доведеться зачекати 1/2 секунди, коли закінчиться зникнення за кожен натискання, користувач буде втрачено досить швидко. Такі речі.


1
Чітка НЕ до деяких частин вашої відповіді: Не змішувати «адаптивний дизайн» з «гнучкими» або «рідиною» поняттями. Відповідно до розміру екрана, чуйний дизайн може виглядати "виправленим", оскільки це залежить від медіа-запитів щодо доставки різних CSS на основі ширини браузера. Це не "ширина: 100%". Я б не назвав це "гучним терміном", оскільки це розумна концепція, приємна відповідь на поточну проблему, а не просто ажіотаж. Щодо SEO: По крайней мере, Google доклав певних зусиль для виявлення індивідуальних макетів у порівнянні з просто іншими темами; знову ж таки: RD само по собі не є поганою або хорошою, залежить від вашого вмісту.
initall

1
На 100% відстає від "зафіксованого" коментаря, хоча це каламутна вода. Мої чуйні сайти на роботі були зафіксовані внутрішніми елементами рідини. Я б стверджував, що на даний момент це трохи галас-слова, але я думаю, що дуже скоро це буде називатися веб-дизайном / розробкою. Я думаю, що вплив SEO може наступити, якщо компанії мають мобільний сайт, а не реагують на реалізацію ... але, я не маю уявлення про вплив цього SEO.
ДБУК

2

Я прокинув інші відповіді, вибачте мене, якщо я зайвий ... У цей момент я займаюся чуйним дизайном щодня протягом 8 годин на день ... Мої клієнти хочуть цього, тому що хочуть, щоб мобільні користувачі мали "унікальну" досвід, мої роботодавці хочуть цього, тому що Google хвалиться як кращий метод і добре впорядковує. (і якщо Google похваляється як спосіб зробити щось, швидше за все, найкраще працює для SEO)

Чи краще використовувати адаптивний веб-дизайн на відміну від використання окремого коду для різних розмірів / пристроїв?

Я б сказав, що краще, так. Більшість вашого коду - той самий код, що призводить до менше роботи, ніж написання програми для iPhone, дроїда, додатка для iPad, додатка для розпалу .... Ви отримаєте бал.

Чи може він потенційно впливати на SEO (позитивно чи негативно)?

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

З якими основними проблемами я можу зіткнутися під час оптимізації веб-сайту для бізнесу за допомогою цього методу дизайну?

Спочатку це трохи складно ... вам потрібно провести деякі дослідження медіа-запитів і бажано мати кілька мобільних пристроїв для перевірки. Майте на увазі, розмір вікна на робочому столі близький, але те, як мобільні пристрої надають Інтернет, іноді відрізняється, ніж ви очікували. Наприклад, я створив чуйний сайт, де я використовував bg-повторення для заголовка, а на робочому столі він охоплює всю область видимості; однак на iOS чомусь він скорочується ...

Я рекомендую вивчити та спробувати деякий чуйний дизайн. Перевірте цей сайт на початок стрибка: http://html5boilerplate.com

Щоб відповісти на запитання в заголовку: важливо, і вам було б доцільно знати про це і як його розробити, і якщо ви вирішите не використовувати його, ви повинні бути готові захищати цю позицію, оскільки ваш клієнт може бути встановлений. з такою конструкцією. З мого досвіду, клієнти і клієнти люблять чуйний дизайн. Щасливі клієнти та щасливі клієнти - це достатня причина для мене, щоб продовжувати це :)


1

Чуйний веб-дизайн має вирішальне значення - якщо ви створюєте новий сайт, ОБОВ'ЯЗКОВО зробити ваш сайт чуйним. Вже 50% трафіку відбувається з мобільних пристроїв і планшетів, і це не тільки зростатиме, але це стане чітко домінуючою формою використання Інтернету.

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

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

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

Що стосується чуйного або окремого коду: Основний недолік чуйного дизайну полягає в тому, що він не такий швидкий, як окремі кодові бази. Ця втрата швидкості буде незначною, звичайно, якщо це стосується малого місцевого бізнесу, коли інші фактори можуть потрапити до уваги користувачів, чому сайт на 0,2 секунди повільніше, ніж інші.

Великою перевагою чуйного дизайну є те, що ви зберігаєте ту саму базу коду. Це зменшує витрати на обслуговування, витрати на тестування та витрати на розробку.

Найбільше в SEO в наші дні - «Якість сайту» - якість сайту важко виміряти, але загалом кажучи, Google використовує показник відмов і час на сайті для вимірювання цього. Якщо ваш сайт засипає мобільний телефон, 50% вашого трафіку буде мати високий показник відмов та велику кількість відвідувачів із низькою заангажованістю (менше 10 секунд на сторінці).

Це ставить вас під загрозу штрафних санкцій Google - подивіться на Google Panda та нові (минулого тижня) штрафи за домен Exact Match , обидва з яких карають сайти за те, що вони мають низьку якість.

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

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

Ось основи того, що вам потрібно зробити:

  1. Відрегулюйте накладки та запаси кузова
  2. Перемістіть меню ліворуч або праворуч у спадні місця, можливо, схойте їх під кнопкою параметрів у верхній частині.
  3. Змініть розміри контейнерів, використовуйте ширину на 100%, де можна
  4. Змініть всі свої зображення на ширину 100%
  5. Вирішіть, які речі не потрібні в телефоні (реклама?) Та видаліть їх (відображення: немає)

Ось приклад коду:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

Для цього потрібно видалити що-небудь із класу "adbox" із смартфонів (з максимальною шириною 480 пікселів) та зменшує запас корпусу.

Якщо ви створюєте новий сайт, це ще простіше створити, оскільки ви можете переконатися, що ви створили чистий дизайн із приємними чистими класами та гарною стилізацією, щоб відповідати всім пристроям.

Я сподіваюся, що це допомагає!


1

Я просто хотів би прислухатись до іншої точки зору:

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

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

Поки немає обґрунтування витрат, щоб змінити це, у нас просто немає фінансового стимулу для цього. Скажімо, що, наприклад, 50% користувачів перебувають на мобільному телефоні, або щось застосовно лише у тому випадку, якщо всі користувачі - ваша цільова аудиторія. Інакше слід керуватись абсолютно нерелевантною та поганою логікою.

Потрібно лише переглянути% користувачів мобільних пристроїв, на які ви орієнтовані. Особливо для програм B2B більшість людей не збираються дивитись на свої телефони у вільний час. Ви отримаєте трафік з понеділка по п’ятницю на настільних комп’ютерах.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.