https://blog.superhosting.bg/3-options-for-creating-a-mobile-friendly-website.html

Натиснете ENTER, за да видите резултатите или ESC за изход.

Блог на SuperHosting.BG

Три варианта за мобилна версия на сайта

2016-07-20
За вашия уебсайт
мобилна версия, респонсив дизайн, мобилен сайт, WordPress, Joomla!, Drupal, динамично сервиране на съдържание, Отделни URL адреси

В предходна статия ви разказахме за новите тенденции в дизайна и защо е важно той да е модерен и да се харесва на посетителите на вашия сайт. За да стават вашите посетителите все повече, той трябва да е достъпен навсякъде. Ето защо е важно вашият сайт да има и версия за мобилни устройства. В недалечната 2014-та ви разказахме за важността на мобилната версия. Към днешна дата темата продължава да бъде сред най-горещите, особено при стартиране на уеб проект, затова решихме да се върнем към нея и да ви разкажем по-подробно какви са вариантите сайтът ви да стане мобилен, с техните плюсове и минуси.

Мобилните версии са важни за всеки посетител на вашия сайт. Интересна статистика за използването на мобилни устройства за сърфиране в мрежата, изготвена от StatCounter, показва, че средният дял на интернет сърфирането през мобилни устройства е 33%, като има страни, в които този процент надвишава 70%! През 2015 година 48% от българите споделят, че използват смартфон, а 22% – таблет.* Може би и вие в момента четете тази статия през мобилно устройство! 🙂

Искате и вашият сайт да е лесно достъпен от всякакъв тип устройства? Ето какво трябва да знаете!

Има три варианта, с които можете да направите сайта си мобилен:

Отзивчив (responsive) дизайн

Как изглежда информацията на вашия сайт, когато се зареди в браузъра, се определя от HTML и CSS кода на сайта. При респонсив дизайна, независимо от какво устройство се зарежда вашият сайт, HTML кодът в него остава същия, а CSS кодът указва на браузъра как да се подреди съдържанието на сайта, за да изглежда добре според резолюцията, т.е. при зареждане на вашия сайт от мобилно устройство, дизайнът ще се намества според размерите на екрана. URL адресът на сайта е един и същ при зареждане от мобилно устройство и при зареждане на desktop версия, което прави връзката (линка към сайта) лесна за споделяне през различните устройства.

Респонсив дизайнът има редица предимства. С него няма да се налага да качвате съдържанието повторно, да пренасочвате линкове за мобилна и десктоп версия, да създавате отделен вариант на сайта си, да създавате отделен поддомейн, който да се зарежда само на мобилни устройства.

Ако изберете респонсив дизайна като вариант за мобилна версия на вашия сайт, бъдете внимателни и не допускайте често срещани грешки като:

  • неподходящ шрифт – при оразмеряването на страницата за по-малки дисплеи имайте предвид, че шрифтът трябва да остане лесно четим.
  • недостатъчно разстояние между линкове на сайта – при мобилните версии кликът става чрез допир и прекалено близко разположените един до друг линкове, затрудняват работата със сайта.
  • малки бутони –желателно е бутоните, както и текстовите връзки да са лесни за избиране. Така ще направите времето, прекарано на мобилната версия на сайта, толкова приятно за вашите посетители, колкото и това на декстоп версията.
  • Елементи, които не се зареждат на мобилна версия – например видео. Не е препоръчиелно да се появяват грешки на сайта, макар и обяснени с “това съдържание е не е налично за мобилна версия”.
Забележка: Ако потърсите допълнителна информация за адаптивен и отзивчив дизайн, ще откриете много статии, които ги третират като синоними. Но всъщност между тях има разлика:

  • При отзивчивия (responsive) дизайн елементите на сайта се нагаждат към всяка една ширина на браузъра.
  • При адаптивния (adaptive) дизайн, промените в изгледа стават след преминаване на дадена точка (пиксел) в ширината, т.е. промените съответстват на интервали от различна ширина.

Динамично сервиране на съдържание

За разлика от респонсив дизайна, тук при зареждане на сайта от мобилно устройство и desktop, се зареждат две различни версии на съдържанието. Приложението на сайта разпознава устройството, което изпраща заявка за зареждане на сайта и според това, изпраща различен HTML и CSS код.

Динамичното сервиране на съдържание представлява следното: сайтът предоставя различно съдържание, на един и същ URL адрес, спрямо характеристиките на клиента, който достъпва сайта. Това се осъществява чрез засичане на User-Agent-та на потребителя.

User-Agent е приложението, което потребителят ползва, за да достъпва и ползва определена услуга. Например за достъпване на уеб сайтове се използва уеб браузър, за работа с имейли се ползва имейл клиент/програма.

Уеб сайтът може да идентифицира даден потребител, мобилен или desktop, чрез информацията, подадена в HTTP хедъра “User-Agent”. Когато потребител достъпва уеб сайт, неговият уеб браузър се представя пред уеб сървъра с хедъра User-Agent, съдържащ информация като име на браузъра, версията му, операционната система на потребителя и други.

Например клиент, използващ операционна система Windows и уеб браузър Mozilla Firefox версия 44, при опит да зареди даден сайт, ще изпрати следния хедър в HTTP заявката:

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0

На база тази информация, уеб сайтът ще предостави подходящата версия на съдържанието.

Когато даден сайт сервира динамично съдържание, силно препоръчително е той да осведомява за това клиентите си чрез HTTP хедъра Vary: User-Agent. По този начин търсачките, индексиращи дадена страница от сайта, ще знаят, че това не е единствената версия на съдържанието.

Това е особено важно за Google, тъй като неговите ботове се представят като различни мобилни устройства и браузъри, с цел да достъпят и индексират отделно всяка версия на сайта. Така потребителите, ползващи различни устройства и платформи, ще могат да намерят подходящото за тях съдържание.

Предимство на динамичното сервиране на съдържание е, че както при респонсив дизайна, така и тук, се запазва URL адреса (т.е. домейнът за мобилна и desktop версия остава един и същ). Не се налага и пренасочване на линкове.

Отрицателните черти на този вариант се крият в това, че понякога стават грешки при разпознаване на използваното устройство.

Отделни URL адреси

При този вариант имате два различни сайта, които се зареждат на desktop и мобилна версия. HTML и CSS кодът за тях е различен. Различен е и URL адреса. Например ако за desktop версия използвате домейн superhosting.bg, то мобилната версия най-често се намира на поддомейн m.superhosting.bg. Благодарение на user-agent, уеб сървърът разбира спецификите на устройство и зарежда съответната версия на сайта. Различава се от динамично сервиране на съдържание по това, че ако във вашия мобилен браузър напишете superhosting.bg, ще бъдете пренасочени към нов адрес – m.superhosting.bg. Именно пренасочванията са опасният момент при този вариант за мобилна версия на сайта.

Например: при пренасочване всеки desktop URL, трябва да води към съответния мобилен URL. Пренасочване към друга страница е неправилно (напр. superhosting.bg/uchenici-bg да пренасочва към m.superhosting.bg). Друга грешка е страницата на мобилна версия да зарежда Грешка 404.

Решение: когато някоя от страниците във вашия сайт, няма мобилна версия, не пренасочвайте към друга страница. По-добре я оставете без пренасочване. Така ще се зареди desktop версията й.

Прилагат се различни политики за пренасочване. Някои сайтове пренасочват само мобилните потребители към мобилната страница (“еднопосочно” пренасочване), а други пренасочват и desktop потребители към desktop версия, ако те достъпят сайта от линка за мобилна версия (“двупосочно” пренасочване).

Тук е важно да укажете на търсещите машини, че това са два различни варианта на един сайт. Това става чрез добавяне на таговете rel=”canonical” (в мобилната версия) и rel=”alternate” (в desktop версията) на страниците.

Предимството на този метод е, че можете да публикувате различно съдържание за desktop и мобилна версия (в случай че искате дадено съдържание да е достъпно само за единия вариант). Недостатък са възможните грешки при пренасочването, както и споделянето на линк от мобилна версия и зареждането му на desktop версия, ако се използва еднопосочно пренасочване (тогава на големия екран, ще се зареди кодът (дизайнът) за мобилна версия).

Полезно:

Как да направя новия си сайт мобилен?

Ако използвате готови CMS платформи като WordPress, Joomla! или Drupal, изберете responsive тема или шаблон.

Вече имам сайт, как да разбера дали има мобилна версия и как изглежда тя?

Можете лесно да проверите дали сайтът ви е мобилен, според стандартите на Google. Това става с инструмента Mobile-Friendly Test.

Най-лесният вариант, с който да проверите дали сайтът ви има мобилна версия и как изглежда тя, е да го заредите през вашия мобилен телефон. За да видите как тя би изглеждала на други мобилни устройства, можете да използвате Google Chrome (десен бутон => Inspect => Toggle device mode).

Сайтът ми не е мобилен, как да го направя такъв?

Ако използвате CMS система, можете да разгледате вариантите за преминаване към мобилна версия – със смяна на темата или плъгини.

Ако използвате сайт, изграден специално за вашите нужди, обърнете се към разработчиците, които са го създали.

* Данни на consumerbarometer.com за 2014/2015 година на база общо онлайн и офлайн население в България.

Маркетинг Специалист

Цвет знае колко трудно изглежда създаването на сайт в началото и колко лесно се оказва в последствие. СуперСилата на Цвет е, че знае какви въпроси си задават начинаещите уеб ентусиасти и има отговор за всеки един от тях.

500px270px
SuperHosting.BG

Препоръчани статии

Оставете коментар

2 Коментара към "Три варианта за мобилна версия на сайта"

Уведоми ме при
avatar

Въдици,макари,влакна
Гост
Въдици,макари,влакна
26 април 2016 23:17

Много полезна статия,и аз се чудя какъв вариант да избера за моят сайт,мисля че имаше вариант гугъл автоматично да оптимизира сайта за мобилни устроиства след настройки в профила.

СуперХостинг.БГ
SH
27 април 2016 18:31

Здравейте,

Радваме се, че статията Ви е била полезна.

Относно възможността, която сте описали в коментара, тя вероятно се отнася за уеб страници, създадени с инструментите на Google, и не е приложима за друг тип сайтове.

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

Поздрави,
Цвет

wpDiscuz