Сергей Лукошкин

26.03.2015 | | 0 коментара

Интернет драматично промени потребителското поведение. Дълго време не ходят в магазина, за да си изберат продукт. Точно обратното: първо „сърфират“ в интернет, намират продукт, сравняват го с конкурентите, след това намират магазин, сравняват го с други и едва тогава решават къде да направят покупка.

Едва след това те ще отидат до избрания магазин или просто ще поръчат стоки през интернет. Днес повече от 60% от купувачите правят точно това.
Изглежда, че за успех е необходимо вашата компания да има уебсайт или онлайн магазин и това е всичко. Това обаче вече не е достатъчно.

Защо мобилната версия на уебсайт или адаптивният дизайн са важни за бизнеса?

Факт е, че с навлизането на смартфоните и таблетите все повече купувачи търсят стоки и услуги в интернет с помощта на тези устройства, а не с настолни компютриили лаптопи. И всичко това, защото е много удобно. Където и да се намира купувачът може да търси директно от мобилния си телефон, като не е необходимо да включва компютъра.
Това е страхотно, но физическият размер на екрана на носимата джаджа, независимо дали е таблет или смартфон, е доста малък и следователно сайт, който изглежда страхотно на компютър или лаптоп, е много неудобен за гледане на мобилен екран.
Ето защо сега повече от всякога е важно дали вашият сайт е подходящ за използване на смартфони, таблети или фаблети (фаблетът е нещо средно между смартфон и таблет).

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

Има два подхода за решаване на този проблем:

1. Създайте отделна версия на сайта, която се отваря на мобилно устройство
2. Създайте уебсайт с адаптивен дизайн, който се адаптира към всеки размер на екрана

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

А ето как изглежда на екрана на смартфон


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

Топ 5 причини да направите отзивчив бизнес уебсайт

Мобилно търсене.Според статистиката (към момента на писане) повече от 50% от купувачите търсят стоки и услуги в интернет от мобилни устройства. И този брой расте много бързо. Съвсем наскоро Google съобщи, че сайтове, които нямат мобилна версия, ще се класират много ниско в резултатите от мобилно търсене. Ето защо, ако нямате мобилна версия на сайта, не се изненадвайте, че ще бъде трудно да ви намерите в търсенето от смартфон.
Удобство за потребителите.Отново, според същата статистика, повече от 40% от потребителите са заявили, че биха напуснали друг сайт, ако настоящият няма мобилна версия. И отново делът им непрекъснато расте. За бизнеса това означава, че вниманието на купувача ще бъде привлечено от доставчика, чийто уебсайт е удобен на всяко устройство.
Директен контакт.Смартфонът позволява на потребителя незабавно да се обади на телефонния номер, посочен на сайта (ако сайтът има функция click-to-call). Така ставате много по-близо до потенциален купувач.
Нови възможности за промоция.Днес мобилната реклама става широко разпространена, но ако нямате мобилен сайт, тогава нейната ефективност ще бъде катастрофално ниска. Напротив, удобните за мобилни устройства сайтове получават още един мощен канал за промоция.
Конкурентно предимство.И последното. Проверете дали вашите конкуренти имат мобилни версии на своите сайтове. Ако не, тогава имате чудесна възможност да създадете мощен конкурентно предимствои да получите онези клиенти, които напускат остарелите сайтове на вашите опоненти.

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

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

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

Първи метод – Адаптивен дизайн

Адаптивните шаблони променят изображението на сайта в зависимост от размера на екрана. По правило те са настроени на стандартни 1600, 1500, 1280, 1100, 1024 и 980 пиксела. За реализация се използват заявки. То не се променя само по себе си.

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

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

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

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

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

Метод втори - отделна версия на сайта

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

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

Но дори и тук не беше без недостатъци:

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

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

Третият начин - ВЕИ-проектиране

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Асоциация

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

И прекъсване на връзката

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

Списъци

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

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

Автоматично довършване

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

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

Всичко се чете, всичко се гледа

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

Малко статистики

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

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

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

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

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

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

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

Вместо заключение

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

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

Издадохме нова книга „Маркетинг на съдържание в социалните медии: Как да влезете в главата на абонатите и да ги накарате да се влюбят във вашата марка.“

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

Още видеоклипове в нашия канал - научете интернет маркетинг със SEMANTICA

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

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

Защо ви е необходима мобилна версия на сайта

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

Максимално покритие целева аудиторияи създаване на комфортни условия за нея - за това е мобилната версия на сайта.

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

Как работи

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

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

Има определени принципи и тяхното прилагане ще изисква умения за програмиране и оформление.

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

Мобилна версия срещу адаптивно оформление

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

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

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

Но разработването на адаптивна версия е по-отнемащ време процес; съответно скъпата част от събитието също ще бъде по-голяма.

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

Плюсове и минуси на мобилната версия

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

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

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

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

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

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

Лесни начини за проверка на мобилната версия на сайта

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

Този метод обаче не работи, ако мобилната версия на сайта е направена с отделен дизайн. В този случай сървърът, който хоства сайта, трябва изрично да посочи, че посетителят е дошъл от мобилно устройство. Сървърът получава тези данни от низа Потребителски агент, изисквани задължително от вашия браузър от всеки посетен сайт. Следователно, за да видите как изглежда сайтът на мобилни устройства, трябва да "излъжете" сървъра и да му предоставите низа на User Agent от телефона, а не от компютъра.

Втората най-трудна опция, която ви позволява да проверите мобилната версия на сайта през компютър, е да инсталирате специален браузър. Например Opera Mobile Classic Emulator. Съществуват негови версии за Windows, Mac и Linux. За съжаление, тази разработка е базирана на стария двигател Presto, използван преди версия 12 на браузъра Opera, и няма да покаже наистина как сайтът се показва в модерен мобилен браузър. От 2013г Браузър Operaработи на софтуерния двигател на Blink, така че е по-добре да проверите мобилния сайт модерен браузър. Може да бъде Opera или Chromeкоито работят на същия базиран на WebKit Blink двигател, използван в Apple Safari.

Трябва да се включи в определени браузъриспециален режим за разработчици (F12 в Chrome или Ctrl+Shift+i в Opera) и превключване към режим на мобилно устройство:

След това можете лесно да видите как изглежда сайтът на мобилно устройство.

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

С настъпването на бума на мобилните устройства разработчиците бяха изправени пред избор: трябва ли да оставят мобилни версии на своите сайтове заедно с „пълноценни“ такива, или сайтовете трябва да станат отзивчиви и да се адаптират към различни размери на екрана?

В момента при изграждането на мобилни версии на сайтове има 3 основни начина за изграждането им:

• Адаптивен дизайн;
• Отделна мобилна версия на сайта;
• RESS (Отзивчив дизайн + страна на сървъра).

Всеки от методите има своите плюсове и минуси, които ще се опитам да опиша подробно.

Адаптивен дизайн

CSS3 Media Queries обикновено се използват за внедряване на отзивчив дизайн. В зависимост от размера на екрана, потребителят ще види различна картина:

@media screen и (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen and (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media екран и (макс. ширина: 1024px) ( div.for-example (width: 980px;) )

Предимства на адаптивния дизайн

• Лекота на развитие -с адаптивно оформление, цялата структура на сайта автоматично се настройва към различните ширини на екрана. За да получите работещ продукт, не е нужно да пишете всичко от нулата - просто настройте CSS и HTML ... Като се има предвид наличието на рамки като Bootstrap, подобно развитие не е много трудно със стандартна реализация. Освен това поддържането на такъв продукт би било сравнително проста задача.
• Един URL адрес -ни спасява от ненужни пренасочвания и необходимостта потребителят да помни адреса на мобилната версия (дори и да е само префикса m.). Също така наличието на един адрес ще повлияе положително на популяризирането на сайта, тъй като ще бъде „по-удобно“ за работа на търсачките.

Недостатъци на адаптивния дизайн

• Разни задачи -типичните задачи на "мобилните" потребители на големи сайтове обикновено се различават от тези на потребителите на компютри. Ако сте клиент на банка, тогава най-вероятно в мобилната версия на сайта ще се интересувате от много ограничен набор от информация - адреси на най-близките клонове, банкомати и др.
  Като цяло, с адаптивното оформление, най-често срещаният подход е да се направи копие на обикновен сайт, да се внедрят нуждите на всички групи от целевата аудитория в оформлението за телефони. Но тогава можете да забравите за използваемостта. Второстепенните секции, необходими за пет процента от посетителите, ще създадат неудобство за по-голямата част от клиентите.
„Тежестта“ на сайтовете остава сериозна пречка за потребителите на мобилни телефони. Това означава, че някои от активните елементи, типични за сайтовете за настолни компютри, включително вградени карти, видеоклипове, кредитни калкулатори и анимирани менюта на мобилни сайтове, трябва да бъдат заменени с по-леки алтернативи. Може ли адаптивният дизайн да ни даде тази възможност? При популярно изпълнение потребител с малък екран трябва да зареди цялата страница, за да види само част от нея. Например, ако настолната версия на основното оформление тежи 200 Kb, а мобилната версия тежи още 50 Kb, ще трябва да изтеглите 250 Kb, за да я видите. Разбира се, можете да използвате компресиране на кода на страницата, но допълнителни заявкипак ще отиде на сървъра.
• Безнадеждност -Едно от безспорните предимства на мобилната версия е, че ако не ви харесва, можете да я изключите и да преминете към обикновен домейн. Уебсайтовете с адаптивен дизайн не предоставят този прост, но важен избор. Ако персонализираното оформление е неудобно, има грешки или ако скрива важен елемент за навигация, оставете го на мира: не можете да направите нищо, за да го видите отново. Ще трябва да тичате, за да търсите настолен компютър или уебсайт на конкурент. Можете да измислите "патерици", за да заобиколите това ограничение (използвайте бисквитки и включете различни стилови таблици). Но този подход усложнява развитието.

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

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

За да направят сайта удобен за мобилни потребители, те често създават и отделни версии на сайтове - специално ориентирани към потребителя със смартфон / таблет. Най-честата практика е мобилните потребители да се пренасочват към специален поддомейн (m.example.com, mobile.example.com и т.н.). Вероятно в 99% от случаите мобилната версия е съкратена основна версия - само с функционалността, която според разработчиците ще бъде необходима и полезна за потребителите на мобилни устройства и таблети.

Предимства на мобилната версия

• Лесна промянатъй като сайтът съществува де факто отделно от основната версия, много по-лесно е да правите промени в него, свързани само с мобилната версия, тъй като мобилната версия най-често не предоставя излишна, ненужна функционалност.
• Удобство за потребителя -мобилната версия обикновено е значително опростена в сравнение с настолната версия, така че потребителят няма да трябва да ходи далеч за информацията, от която се нуждае.
• скорост -поради същото опростяване на сайта, мобилната версия се зарежда по-бързо. Това е от съществено значение за потребители, които все още използват GPRS или слаб 3G.
• Избор-най-често в мобилната версия е възможно да преминете към основната версия на сайта.

Недостатъци на мобилната версия

• Множество адреси -
• Неудобство за потребителя -различни адреси за десктоп и мобилни версии. За някои това може да се окаже плюс, за други може да бъде изключително досаден фактор, когато за да видите удобно сайта, трябва да запомните още един адрес. Има и проблеми с търсачките: за да избегнат дублиращо се съдържание, SEO специалистите трябва да използват мета таговете rel="alternative" и rel="canonical". Освен това, когато мобилен потребител Търсене в Googleщракне върху връзката в резултатите, той ще бъде отведен до настолната версия или пренасочен към мобилната версия. Но ако мобилната версия на тази страница не съществува, тя ще получи грешка.
• Ограничение -създаването на отделен мобилен сайт означава да се отървете от част от съдържанието и функционалността. Освен това може да имате два различни набора от съдържание, което може да повлияе негативно на цялостната информационна картина.

Като цяло създаването на мобилни версии на сайтове се оправдава доста добре, особено за големи проекти. Като пример Amazon използва специална, мобилна версия на сайта.

RES

Самият Google, въпреки че поддържа използването на адаптивен дизайн от уеб администратори, използва различна система в своите продукти. Ако посетите напр. начална страницапод различни потребителски агенти можете да видите различен HTML за различни устройства. RESS - Адаптивен дизайн + сървърна страна. Пример за изпълнение, скициран "на коляно":

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "библиотеки" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "template .php"; ) include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Предимства на ВЕИ

Всъщност методът може да включва предимствата както на отделна мобилна, така и на адаптивна версия на сайтове, в зависимост от внедряването. От какво ще бъде новото:

• Минимизиране на трафика -Ненужният JavaScript може да бъде премахнат от HTML, което освобождава процесора, паметта и кеша на мобилното устройство. Може също да бъде специално оптимизиран html и css.
• Възможно е да се използва насочване -например за устройства с Android предлагайте да изтеглите приложението от GooglePlay, а за Apple - от iTunes. За всяко устройство можете да направите свое оформление.

минуси

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

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

Резюме

Според мен лично няма идеален вариант, който всеки да използва. Най-добрият вариант за мен е RESS. Това обаче е един от редките варианти, защото изисква много усилия за изпълнение. Като цяло и 3-те варианта имат своите плюсове и минуси, в зависимост от същността и посоката на сайта.