Днес повечето хора влизат онлайн чрез мобилни джаджи – таблети, телефони, в това отношение оптимизацията на уебсайта също достига ново ниво. Ако потребител влезе и види, че сайтът не е оптимизиран за мобилни устройства: изображението не може да се гледа, бутоните са изместени, шрифтовете са малки и нечетливи, дизайнът е изкривен - 99 от 100% ще излезе и започнете да търсите друг по-удобен. И роботът за търсене ще постави отметка в квадратчето, че ресурсът е ирелевантен, тоест не съответства на заявката за търсене. Следователно дизайнът на страницата трябва да бъде адаптиран към различни мобилни устройства. Какво представлява мобилната версия на сайта, как се прави и кой е най-добрият начин да се приложи? Прочетете повече в тази статия.
Така че има четири основни начина да направите вашия сайт удобен за мобилни устройства.
Метод 1 - Отзивчив дизайн
Адаптивните шаблони променят изображението на сайта в зависимост от размера на екрана. По правило те са настроени на стандартни 1600, 1500, 1280, 1100, 1024 и 980 пиксела. За внедряване се използват CSS3 Media Queries. Самият дизайн на сайта не се променя.
Предимствата на този метод включват:
- удобно развитие,тъй като самата структура се адаптира към параметрите на екрана и всяка актуализация не изисква разработка на дизайн от нулата, достатъчно е да настроите CSS и HTML;
- един URL – потребителят не трябва да помни няколко имена, няма нужда от пренасочване (пренасочване от един адрес към друг), което може да усложни работата на уеб администратора и е по-лесно за търсене машина за сортиране и класиране на ресурс с един адрес.
Разбира се, адаптивните шаблони имат своите недостатъци, които между другото са повече от предимства. Въпреки това много разработчици се придържат към тази концепция, например Google Corporation, чиято мобилна версия на сайта има адаптивен дизайн. И така, недостатъци:
- Отзивчивият дизайн не поддържа същите задачи на мобилни устройства, както на компютъра. Ако това е например мобилна версия на уебсайт на банка, където информацията за обменния курс или най-близките банкомати е по-вероятно да бъде важна за потребителя, тогава този дизайн е напълно достатъчен. Но ако това е сложен структуриран ресурс с много раздели и подраздели, тогава посетителите едва ли ще харесат адаптивно оформление.
- Бавното зареждане превръща любим сайт в омразен. Това е особено вярно за ресурси, където анимации, видеоклипове, изскачащи прозорци и други активни елементи са в изобилие. Поради голямото тегло, страницата просто ще се „забави“, потребителят ще се ядоса и ще напусне, а позициите за търсене на сайта ще паднат.
- Невъзможността за изключване на мобилната версия е друг значителен недостатък. Ако някой елемент е скрит от такова оформление, виене можете да направите нищо, за да го отворите, за разлика от сайтовете, където можете да го изключите и да превключите към обикновен домейн.
Въпреки това, такава мобилна версия на сайта бързо, без специални умения и разходи, ви позволява да адаптирате ресурса към всякакви джаджи. Но с оглед на изброените недостатъци, той ще отговаря на малки, прости ресурси с минимум информация и мултимедия, без сложна навигация и анимация. За сложен сайт са подходящи 2 други метода.
Втори метод - отделна версия на сайта
Този метод е много често срещан и често е успешен при правенето на сайта по-четлив на мобилно устройство. Същността му е да създаде отделна версия на страницата, нарисувана за приложението и разположена на отделен URL адрес или поддомейн, например m.vk.com. В същото време основната функционалност е запазена, дизайнът на сайта просто изглежда различен. Предимствата на този метод са очевидни:
- удобен за потребителя интерфейс;
- лесно се променя и редактира, тъй като версията съществува отделно от основния ресурс;
- поради ниското тегло, отделна версия на сайта работи много по-бързо от адаптивен шаблон;
- най-често е възможно да отидете на основната версия на страницата от мобилния телефон.
Но и тук имаше някои недостатъци:
- Множество адреса - настолна и мобилна версия на сайта. Как да накарам потребителя да запомни две опции? Уеб майсторите често предписват пренасочване (пренасочване) от настолната версия към мобилната версия, но в същото време, ако тази страница е в мобилнатаверсия не съществува, потребителят ще получи грешка. Тук възникват трудности с търсачките, които се затрудняват да класират 2 идентични ресурса и това пряко засяга популяризирането.
- Мобилната версия на сайта от компютър, ако потребителят го посети по погрешка, ще изглежда нелепо, което също може да повлияе на трафика.
- Тази версия често е силно ограничена, десктоп, така че потребителят ще получи много ограничена функционалност. Но в същото време, ако нещо липсва, посетителят може да отиде до пълната версия на страницата.
По принцип отделен мобилен сайт се оправдава и е най-разпространеният начин за адаптиране на ресурс за мобилни устройства. Той е популярен сред големите онлайн магазини като Amazon.
Трети начин - RESS дизайн
Търсачката на Google активно поддържа тази посока на мобилен дизайн. Това е най-сложният, скъп, но ефективен метод за адаптиране на сайта към телефон или таблет. Нарича се RESS. Това е насочване към ресурс в мобилно приложение, което може да бъде изтеглено за всяко устройство поотделно. За android - с GooglePlay, а за Apple - с iTunes.
Такива приложения са бързи, безплатни, удобни, имат възможност да приемат различни видове информация, докато паметта на телефона и интернет трафикът не се изяждат, както при посещение на сайт през браузър. Те са лесни за достъп, тъй като връзката винаги ще бъде на екрана под ръка и няма нужда да въвеждате сложно име в адресната лента на браузъра.
Има, разбира се, тук инеговите недостатъци, като сложност при разработката, високата цена на труда на голям брой програмисти, необходимостта да се направят няколко опции за оформление. Понякога мобилното устройство не се разпознава от приложението. Необходима е редовна техническа поддръжка, коригиране на недостатъци. Независимо от това, тази опция се счита за най-добрата от трите предложени поради своята продуктивна, непрекъсната работа.
Най-евтиният начин да направите мобилен уебсайт
Всички горепосочени методи включват, макар и не винаги дълга и трудна, но все пак платена работа на уебмастър. Ако не виждате спешна нужда от подобно развитие, ще ви подхожда проста и безплатна мобилна версия на сайта. Кой е най-лесният начин да го направите?
Изтеглете специални шаблони (приставки) за отзивчив дизайн. Например WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile и други. Те ще помогнат за по-правилното показване на сайта на телефона, като същевременно ще получите няколко съвета какво трябва да се коригира, за да се адаптира по-добре страницата към мобилната версия.
Разбира се, този метод едва ли е подходящ за сериозни ресурси. По-скоро тази безплатна функция е предназначена за малки и прости сайтове, блогове, новинарски канали. Не забравяйте, че търсачката на Google, както и Yandex, днес поставят сериозни изисквания към мобилните версии, така че има огромен шанс да намалите позициите си с помощта на този метод.
С този метод най-вероятно рекламите и изскачащите прозорци ще бъдат отрязанибанери, но страницата ще се зареди бързо и без „закъснения“.
Принципи за създаване на мобилни версии
Няма значение дали мобилната версия на сайта е създадена безплатно или с помощта на екип от уеб администратори, направена е на системата RESS или с помощта на адаптивен шаблон. Най-важното е, че за ефективната му работа е необходимо да се придържате към няколко изключително важни принципа. И така, каква трябва да бъде мобилната версия на сайта? Как да го направим продуктивно, ефективно и продуктивно?
Отстранете всичко ненужно
Минимализмът е това, към което трябва да се стреми разработчикът на мобилната версия на сайта. Представете си колко е трудно да възприемате информация, пълна с цветове, бутони, банери и която трябва безкрайно да превъртате в търсене на точния материал. Мобилният дизайн трябва да бъде прост и изчистен. Изберете 2-3 цвята, за да разделите пространството (например маркови). По-добре, ако един от тях е бял. Разделете пространството на малък екран на разбираеми и четливи зони. Виртуалните ключове трябва да са видими, така че потребителят да знае ясно къде да натисне и да вижда - ето продукта, ето формата за попълване на данните, тук е информацията за доставка и плащане.
Всички допълнителни опции, които биха били полезни в настолната версия и ще улеснят живота на потребителя, само ще донесат трудности тук. Оставете само най-важните елементи. Анимация, рекламни банери, мултимедия най-вероятно само ще забавят работата на сайта или приложението и ще отклонят вниманието отосновно.
Подравняване
Проблемът с подравняването е не по-малко остър, защото ако се направи неправилно, потребителят ще получи само окончанията на важни думи. Общоприето е ляво и вертикално подравняване. Представете си, че превъртате емисията с новини на телефона си. Правите го отгоре надолу, а не наляво или надясно.
Обединение
Когато няма възможност за дълга верига от преходи, опитайте се да комбинирате няколко стъпки в една. Например сайтът изисква въвеждане на данни на няколко етапа - име, след това адрес, където във всяка отделна клетка има отделна къща, улица, апартамент и т.н. За да не се принуждава потребителят да се опитва да удари много малки клетки, помолете го да попълни само 2 - име и адрес.
И прекъсване на връзката
Понякога, напротив, се изисква отделяне на твърде много информация. Например, в падащото меню имате списък с повече от 80 града, в които се извършва доставка. Групирайте ги по региони, така че потребителят да не трябва да превърта през този огромен списък. Когато задържи курсора на мишката над областния център или региона, ще изпадне друг списък с градове.
Listings
Между другото, относно списъците. Те са две - фиксирани по азбучен или друг ред и със замяна. Техният избор зависи от това какво ще бъде изброено.
Fixed е полезно, ако потребителят знае точно какво търси. Например град, номер или дата. Вторият вариант е подходящ за дълги сложни имена или за случаи, когато има много вариации на едно и същоедно и също име и всеки падащ списък приближава потребителя с една стъпка по-близо до целта. Опцията за автоматично заместване се използва по-често, когато посетител има нужда от помощ. Например сайт за плетене предлага да закупите игли за плетене. Потребителят въвежда заявката за търсене „Метални игли за плетене“, а в подсказката вижда „Игли за плетене 5 mm“, „Игли за плетене 4,5 mm“и т.н.
Автоматично попълване
Този артикул е особено подходящ за сайтове, които продават нещо онлайн и трябва да попълните стандартни формуляри за плащане, доставка и т.н. Ако човек направи покупка от телефон, тогава най-вероятно няма време да стигнете до компютър, което означава, че процесът на покупка трябва да бъде направен възможно най-бързо и удобно.
За това формулярите може да съдържат вече попълнени данни, можете да прибягвате до най-популярните отговори. Например въведете днешна дата, метод на плащане в брой, град, ако работите в същия регион. Те могат да бъдат променени, но ако ударите целта, времето на потребителя ще бъде спестено.
Всичко се чете, всичко се гледа
Когато проектирате мобилната версия на сайта, не забравяйте, че телефоните на всеки са различни, както и зрението им. Може би вашият сайт ще се гледа от малък екран, така че шрифтовете трябва да са прости и четими, бутоните трябва да са достатъчно големи, за да могат да бъдат щраквани, без да се прехвърлят на друга страница, а изображенията трябва да се отварят отделно, големи, особено когато идва в интернет магазин.
Някои статистики
Говорейки за адаптирането на сайта към мобилни устройства, не може да не се прибегне до статистика, за да разбере колко важен е този процес заонлайн промоция.
Цифрите са както следва. Днес джаджите се използват от 87% от населението, очевидно, с изключение на най-малките деца и някои възрастни хора. Икономистите прогнозират, че мобилната търговия ще нарасне 100 пъти през следващите 5 години. В същото време само 21% от сайтовете са адаптирани за работа с мобилни устройства. Това означава, че само една малка 5-та част от интернет трафика и пазара на електронна търговия е заета.
Помислете за тези числа. Има ли смисъл да адаптирате ресурса си? Разбира се, да. Освен това, докато има толкова много място на този пазар, можете да изработите свой собствен сегмент в него.
Където имате нужда от мобилна версия
Използването на мобилната версия има смисъл за всяка платформа, която има за цел да получи висок клас. В крайна сметка това е пряко въздействие върху потребителя, създавайки удобни условия за него да остане на вашия сайт.
Не може да съществува без мобилна версия:
- портали за новини, защото повечето от тях се гледат от телефона по пътя за работа или училище;
- социални мрежи - по същата причина, плюс има фактор за онлайн комуникация, което означава, че за това трябва да се създаде удобен, разбираем чат;
- справка, навигационни сайтове и т.н., където хората отиват, когато търсят нещо;
- онлайн магазини - възможност за привличане на клиенти, които не губят време за пазаруване, а купуват всичко чрез мобилния интернет.
Вместо заключение
Днес мобилните технологии са вактивен растеж и развитие, следователно, стремейки се към лидерство на пазара, всяка компания трябва да гарантира, че нейният интернет ресурс отговаря на изискванията. Поради нарастващите изисквания на потребителя, сайтовете трябва постоянно да се надграждат и адаптират към различни устройства. Ясно е, че ако на човек му е неудобно да бъде на определен ресурс, той не може да получи информация за продукт или цена там, да направи поръчка, да разбере за доставката, тогава той ще намери сайта, където всичко това ще стане възможно. Ето защо, за да спечелите конкуренцията, е важно да имате гъвкав, удобен, функционален и интересен ресурс.
Мобилната версия на уебсайта за Android или Ios ще ви помогне да направите това. За да направите това, трябва да изберете един от горните методи за редизайн - адаптивен шаблон, създаване на нов сайт в поддомейн и пренасочване към него, използване на безплатни шаблони или създаване на мобилно приложение, което ще улесни влизането на потребителя и бъдете на страницата.
Този подход не само ще помогне за поддържане на лоялността на съществуващите клиенти, но също така ще предостави възможност за привличане на нови посетители.
