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

Днес повечето хора отиват онлайн чрез мобилни джаджи - таблети, телефони и във връзка с това оптимизирането на сайта също достига ново ниво. Ако потребителят влезе и види, че сайтът не е оптимизиран за мобилни устройства: изображението не може да се види, бутоните се преместват, шрифтовете са малки и нечетливи, дизайнът е изкривен - 99 от 100%, че ще излезе и ще започне да търси друг по-удобен. Роботът за търсене ще отбележи, че ресурсът е ирелевантен, т.е. не съответства на заявката за търсене. Следователно, дизайнът на страницата трябва да бъде адаптиран за различни мобилни устройства. Какво представлява мобилната версия на сайта, как да го направите и какъв е най-добрият начин да го приложите? Прочетете повече в тази статия.

Така че има четири основни начина за адаптиране на сайта към мобилна версия.

Първият начин - адаптивен дизайн

Адаптивните шаблони включват промяна на изображението на сайта в зависимост от размера на екрана. Като правило, те са зададени на стандартни 1600, 1500, 1280, 1100, 1024 и 980 пиксела. За внедряване приложете CSS3 Media Queries. Дизайнът на сайта не се променя.

Предимствата на този метод включват:

• Удобен дизайн, тъй като самата структура се адаптира към параметрите на екрана и всяка актуализация не изисква разработването на дизайн от самото начало, а само правилните CSS и HTML;
• Един URL адрес - потребителят не трябва да помни няколко имена, няма нужда от пренасочване (пренасочване от един адрес към друг), което може да усложни работата на уеб администратора и за търсещия е по-лесно да сортира и класира ресурса с един адрес.

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

• Адаптивният дизайн не поддържа същите задачи на мобилно устройство, както на компютър. Ако това е например мобилна версия на уебсайта на банката, където потребителят има по-голяма вероятност да разполага с информация за валутния курс или най-близките банкомати, тогава този проект е достатъчно. Но ако това е сложен структуриран ресурс с много секции и подраздели, тогава адаптивното оформление е малко вероятно да се хареса на посетителите.
• Бавното зареждане превръща любимия ви сайт в омразен. Това важи особено за ресурсите, където изобилието е анимация, видеоклипове, изскачащи прозорци и други активни елементи. Поради тежкото тегло, страницата просто ще "забави", потребителят - се ядосва и изчезва, а позициите за търсене на сайта - падат.
• Невъзможността за деактивиране на мобилната версия е друг значителен недостатък. Ако някой елемент е скрит от подобно оформление, не можете да направите нищо, за да го отворите, за разлика от сайтове, на които може да бъде деактивиран и да отидете до обикновен домейн.

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

Вторият метод е отделна версия на сайта

Този метод е много често и често успешно прави сайта на мобилно устройство по-удобен за възприятие. Същността му е да създаде отделна версия на страницата, изготвена за приложението и разположена на отделен URL адрес или поддомейн, например m.vk.com. В същото време основният функционален се запазва, дизайнът на сайта просто изглежда различен. Предимствата на този метод са очевидни:

• Лесен за ползване интерфейс;
• Лесно е да се променят и правят редакции, тъй като версията съществува отделно от основния ресурс;
• Поради ниското тегло на отделната версия на сайта е много по-бързо от адаптивния шаблон;
• Най-често има възможност да отидете до основната версия на страницата с мобилен телефон.

Но и тук имаше недостатъци:

• Няколко адреса - настолна и мобилна версия на сайта. Как да накарам потребителя да си спомни две опции? Уеб-майсторите често предписват пренасочване (пренасочване) от версията dextup към мобилни, но в същото време, ако тази страница не съществува в мобилната версия, потребителят ще получи грешка. Тук има затруднения с търсачките, за които е трудно да се класират 2 идентични ресурси и това пряко засяга напредъка.
• Мобилната версия на сайта от компютъра, ако потребителят погрешно отиде в него, ще изглежда абсурдно, което може да повлияе и на присъствието.
• Тази версия често е силно ограничена, десктоп, така че потребителят ще получи много ограничена функционалност. Но в същото време, ако нещо липсва, посетителят може да отиде до пълната версия на страницата.

По принцип отделен мобилен сайт се оправдава и е най-честият начин за адаптиране на ресурс за мобилни устройства. Той е популярен с големи онлайн магазини, например Amazon.

Третият начин е RESS-дизайнът

Google търсачката активно поддържа тази посока на мобилния дизайн. Това е най-трудният, скъп, но ефективен метод за адаптиране на сайта към телефон или таблет. Нарича се RESS. Това е насочване на ресурсите в мобилно приложение, което може да бъде изтеглено отделно за всяко устройство. За Android - с GooglePlay, а за Apple - с iTunes.

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

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

Най-евтиният начин да направите мобилен сайт

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

Изтеглете специални шаблони (приставки) за адаптивен дизайн. Например WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile и др. Те ще помогнат за правилното показване на сайта в телефона, като в същото време ще получите няколко съвета, които трябва да бъдат коригирани за по-добро адаптиране на страницата към мобилната версия.

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

С този метод рекламите и изскачащите банери най-вероятно ще бъдат отрязани, но страницата ще се зареди бързо и без "забавяне".

Принципи за създаване на мобилни версии

Без значение, мобилната версия на сайта е създадена безплатно или с помощта на персонала на уеб администраторите, тя се прави на RESS система или чрез адаптивен шаблон. Най-важното е, че за ефективната му работа е необходимо да се придържаме към няколко много важни принципа. И така, каква трябва да бъде мобилната версия на сайта? Как да го направим продуктивен, ефективен и продуктивен?

Ние премахваме всички ненужни

Минимализмът е нещо, което разработчикът на мобилната версия на сайта трябва да се стреми. Представете си колко трудно е да възприемате информация, пълна с цветове, бутони, банери и която трябва да преглеждате безкрайно в търсене на точния материал. Мобилният дизайн трябва да бъде прост и чист. Изберете 2-3 цвята, за да отделите пространството (например маркови). По-добре е един от тях да е бял. Разделете пространството на малък екран в ясни и четими зони. Виртуалните клавиши трябва да са видими, така че потребителят да знае ясно къде да кликне и видя - тук е продуктът, тук е формулярът за попълване на данните, тук е информацията за доставката и плащането.

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

подравняване

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

съюз

Когато възможностите на дългата верига от преходи не са там, опитайте се да комбинирате няколко стъпки в една. Например, сайтът изисква въвеждане на данни на няколко етапа - име, след това адрес, където всяка къща съдържа отделна къща, улица, апартамент и т.н. За да не принуди потребителя да се опита да влезе в много малки клетки, помолете го да попълните само 2 - Име и адрес.

И изключване

Понякога, напротив, трябва да отделите твърде много информация. Например в падащото меню има списък с над 80 града, където се извършва доставката. Групирайте ги по регион, така че потребителят да не трябва да преглежда този огромен списък. Когато посочи регионалния център или район, друг списък с градове ще отпадне.

списъци

Между другото, за списъците. Двата са фиксирани в азбучен или друг ред и със заместване. Изборът им зависи от това, което ще бъде изброено.

Фиксираната е удобна, ако потребителят знае точно какво търси. Например град, номер или дата. Втората опция е подходяща за дълги сложни имена или за случаи, при които има много варианти с едно и също име и всеки падащ списък приближава потребителя до целта. Вариант с автоматично заместване се използва по-често, когато посетителят се нуждае от помощ. Например, сайт за плетене предлага да купите игли за плетене. Потребителят въвежда заявката за търсене "Метални игли за плетене", а в подсказката се виждат "Голчета 5 мм", "Мечове 4,5 мм" и др.

AutoComplete

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

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

Всичко се чете, всичко е видимо

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

Някои статистически данни

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

Цифрите са както следва. Днес джаджите се използват от 87% от населението, очевидно, с изключение на най-малките деца и някои възрастни хора. Икономистите прогнозират растежа на мобилната търговия 100 пъти за следващите 5 години. Същевременно само 21% от сайтовете са адаптирани за работа с мобилни устройства. Така че интернет трафикът и пазарът на електронната търговия се занимават само с малка 5-та част.

Помислете за тези цифри. Има ли смисъл да се адаптира вашият ресурс? Разбира се, да. Освен това, докато има толкова много свободно пространство на този пазар, можете да вземете своя сегмент върху него.

Къде е необходимата мобилна версия?

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

Без мобилна версия не може да съществува:

• Портал новини, тъй като повечето от тях гледат по телефона по пътя към работа или обучение;
• Социални мрежи - по същата причина, плюс фактор за комуникация онлайн, което означава, че за това трябва да се създаде удобен и разбираем чат;
• Референтни сайтове, сайтове с навигация и т.н., където хората се обръщат, когато търсят нещо;
• Онлайн магазини - възможност за привличане на купувачи, които не прекарват време на пазаруване, но купуват всичко чрез мобилен интернет.

Вместо да приключи

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

Може да ви помогне мобилната версия на уеб сайта Android или Ios. За да направите това, трябва да изберете един от горните методи за редизайн - адаптивен шаблон, да създадете нов сайт в поддомейн и да отидете при него чрез пренасочване, да използвате безплатни шаблони или да създадете мобилно приложение, чрез което потребителят може по-удобно да отиде и да остане на страницата.

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