Дестилираната практика за изграждане на уебсайт за мобилни устройства

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


През 2015 г. Google изведе алгоритъма „Mobilegeddon“, който наказваше уебсайтове, които не бяха приятелски настроени за мобилни устройства. В съответствие с този алгоритъм класирането на уебсайтовете, които не бяха удобни за мобилни устройства, ще намалее.

Както можете да видите, че мобилните устройства са изпреварили настолни компютри и лаптопи и са най-широко използваното устройство за сърфиране в интернет. Google насърчи бизнеса да помисли първо за мобилните устройства.

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

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

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

какво е мобилен уебсайт

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

Ако текстът ви е твърде малък или изображенията не се зареждат, потребителите ще се раздразнят и ще си тръгнат. Следователно е изключително важно съдържанието да бъде подходящо оразмерено. За съжаление е трудно да се приложи, защото смартфоните, таблетите се предлагат в различни размери и разделителни способности; следователно няма фиксиран формат, който да показва идеално съдържанието на „всяко“ устройство.

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

Избягвайте да правите отделен уебсайт, подходящ за мобилни устройства:

избягвайте да правите отделен мобилен уебсайт

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

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

Използвайте отзивчиви дизайни:

използвайте отзивчиви шаблони за дизайн

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

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

Използвайте медийни заявки:

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

примерни заявки за медиен екран

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

Използвайте рамки като Bootstrap:

За предния край можете да използвате свободно достъпните рамки като Фондация 3, скелет и т.н. Най-добрата безплатна рамка е Twitter Bootstrap.

използвайте bootstrap frame

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

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

Винаги използвайте виртуален мета маркер:

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

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

Нула в по-простия дизайн:

използвайте прост отзивчив дизайн

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

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

Никога не игнорирайте размера на шрифта и размера на бутона:

Размерът на шрифта и размерът на бутона на вашата уеб страница имат голямо значение за мобилните устройства. Размерът на шрифта трябва да бъде най-малко 14px. Това може да изглежда голямо, но е по-добре, отколкото да накарате потребителя да увеличава, за да чете вашето съдържание; улеснявайте ги, като коригирате шрифта до максимална яснота. Единственият път, когато трябва да използвате по-малък шрифт (до минимум 12 пиксела), е на етикет или формуляри.

не пренебрегвайте размера на шрифта

Сега стигайки до бутоните, колкото по-голям е бутонът, толкова по-добре – това ще намали шанса на потребителите да натиснат грешен бутон или да пропуснат да натиснат бутона. Подобно на насоките на Apple препоръчват размер на бутона да бъде поне 44px до 44px. С помощта на тези указания ще подобрите потребителското си изживяване и ще увеличите процента на конверсия за електронна търговия.

Увеличете размера на изображението:

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

Следователно, ако ще накарате зрителите да изтеглят 1MB файл само за да видите миниатюрно изображение, те ще бъдат раздразнени и ще напуснат уебсайта.

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

Отървете се от увеличението по подразбиране:

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

Опитайте да използвате стандартните шрифтове:

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

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

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

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

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

За вкъщи:

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

Earleen Brown работи с реномирана компания за SEO услуги, водеща SEO компания Индия. Компанията е основно ИТ фирма, предоставяща SEO услуги Индия и много ѝ е помогнала за усъвършенстване на уменията си за писане.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map