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

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

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

Кое е това, което разделя доброто мобилно изживяване от лошото? Не е твърде трудно да се разделят основните компоненти, които съставят един високо ефективен, оптимизиран и потребителски фокусиран дизайн. Но ето няколко от най-добрите практики, които трябва да ви водят в правилната посока:

1. Създаване на флуидни оформления

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

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

2. Целете се към функционалността

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

3. Идентифицирайте потребителите си

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

4. Направете цялото съдържание, достъпно за всички потребители

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

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

5. Дизайн за тъч устройства

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

6. Използвайте инструменти за компресия

Ще намерите скрипт компресори като HTML compressor или Gzip compressiоn, които автоматично ще премахнaт ненужните коментари, бяло пространство или код. CSS minifier и CSS compressor и още няколко инструмента, които ще ви позволят да съедините CSS кода и да подобрите на изпълнението. Компресиране на изображенията е също много важно; някои инструменти ще намалят размера на вашите .jpeg и .png файлове, като качеството остане непокътнато, като EWWW Image Optimizer, smush.it, optiPNG, и jpegtran.