Мобилен уеб дизайн

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

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

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

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

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

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

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

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

Другата имплементация на мобилния дизайн е техническа. Поддръжниците й считат, че мобилният дизайн може да се изгради по няколко начина, използвайки server side user agent или client side responsive дизайн.

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

Защо е толкова важно моят онлайн магазин да има мобилен дизайн?

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

Една от основните причини да използвате такъв дизайн за сайта си е, че той ще зарежда по-бързо. А скоростта на сайтовете е от огромно значение, не само за потребителите, но и за интернет търсачките. На първо място е Google. Tърсачката рядко оповестява алгоритмите, по които класира сайтовете, но още през 2010 даде ясно да се разбере, че скоростта на зареждане е един огромен фактор.

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

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

Знаете ли какво е адаптивен дизайн?

Също като responsive дизайна, адаптивният дизайн е част от мобилния уеб дизайн. Смисълът му е в това, че в структурата на мобилния дизайн на един сайт има определена йерархия и спазването й ще осигури не само добре изглеждаща версия на сайта и на мобилно устройство, но и ще гарантира, че ще работи правилно. Представете си, че отворите един онлайн магазин през телефона си и вместо да видите на видно място основното меню, от къде можете да изберете категория продукти, която ви интересува, вие виждате един голям бутон за контакти, който почти закрива менюто. Ето това не е адаптивност. Но за адаптивния дизайн ще си говорим повече някой друг път. Можете да научите повече за този дизайн от книгата на Арън Густафсън “Адаптивен дизайн”.

Какво е responsive Дизайн?

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

Недостатъкът е, че в повечето случаи, в мобилна версия, сайтът няма нужда, а и няма място за една голяма част от информацията от сайта. Ето защо, въпреки че се използва мобилен дизайн – responsive, търсачката зарежда това съдържание, дори и то да не е видимо в сайта. Въпреки това, responsive дизайнът има ключово значение при изграждане на мобилния дизайн на вашия сайт. Помислете само колко главоболия ще си спестите и до колко клиенти можете да достигнете, ако потребителят може да натисне бутона “купи” и да направи поръчка от вашия онлайн магазин още докато разглежда продуктовия каталог.

В заключение

Няма значение кой подход ще изберете, за да създадете своя фирмен сайт или онлайн магазин. Ако имате мобилен дизайн, ще имате продажби и посещения.
Другият важен въпрос пред вас е дали да обновите или да смените сегашния си уеб сайт с нов. Имайте предвид, че в основата на алгоритъма за класиране на Google, стои не само изискването за скорост на зареждане, но също така и инструментите за SEO оптимизация, с които разполага един сайт.
 
Ето защо преди да вземете решение и да се хвърлите на най-изгодната оферта, си подгответе “домашното” и проучете дали бъдещият ви онлайн магазин, дори и създаден току-що, отговаря на най-новите изисквания и тенденции.