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

Днес повечето хора отиват онлайн чрез мобилни джаджи - таблети, телефони, в това отношение оптимизирането на сайта също достига ново ниво. Ако даден потребител идва и вижда, че сайтът не е оптимизирана за мобилни устройства: Не можете да прегледате изображението, свали един бутон, малки и нечетливи шрифтове, дизайн изкривена - 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 ще ви помогне да направите това. За да направите това, изберете една от посочените по-горе начини за редизайн - адаптивна шаблона, създаване на нов сайт на поддомейн и прехода към него чрез пренасочване на използването на безплатни шаблони или създаване на мобилно приложение, чрез която потребителят може удобно да влезе и да остане на страницата.

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