Ръководство за отзивчив уеб дизайн и най-добри практики

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


Проектиране за отзивчив уеб дизайн

Сега повече хора сърфират в интернет с мобилни устройства, отколкото с настолни компютри или лаптопи. Приблизително 51% от трафика на уебсайтове сега идва от някой на мобилно устройство. При толкова голям брой мобилни потребители е изключително важно онлайн бизнеса да гарантира, че уебсайтът им използва отзивчив уеб дизайн (RWD) и е в крак с най-новите най-добри практики за RWD.

Какво е отзивчив уеб дизайн?

Най-просто казано, RWD се състои в проектирането един уебсайт който плавно се адаптира към всеки размер на екрана – било то най-новият 272 пиксела Apple Watch или плазмен телевизор, с редовни компютри, таблети и мобилни устройства между тях.

Примерен пример за уеб дизайн

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

RWD сравнение на екрана за десктоп и смартфон

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

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

Използване на отзивчив уеб дизайн до пълния му потенциал

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

  • Не предлагайте на мобилни потребители опроменена версия на уебсайта на вашия десктоп, където те имат ограничена употреба. Съвет: продължавайте да следите действията на мобилните потребители на вашия уебсайт. Ако забележите, че потребителите кацат на вашия сайт, но почти не консумират съдържанието ви или не прекарват време за него, има вероятност да се натъкнат на някакъв пътен преглед.
  • Не се погрижете за мобилния потребител по абсолютно същия начин като потребителя на десктопа. Възползвайте се изцяло от потенциала на мобилното устройство. Например, ако притежавате ресторант, направете супер лесно мобилните клиенти да намерят вашия бизнес или да направят резервация, като използвате силата на технологии като HTML5 Геолокация и входове за телефонни номера във вашия уебсайт.
  • Имайте предвид скорост на страницата. Според изследвания на Nielsen Norman Group, водещи консултанти за потребителско изживяване, 47% от посетителите очакват уебсайтът да се зареди за по-малко от 2 секунди, а 40% от посетителите ще напуснат уебсайта, ако процесът на зареждане отнеме повече от 3 секунди. Това е още повече, когато става въпрос за мобилни потребители, които са в движение и често имат ограничения на честотната лента.
  • Внимавай с съдържание за възпроизвеждане. Някои технологии като Flash плейърите не се ползват с широка поддръжка на мобилни устройства. Ето защо е препоръчително да не ги използвате на уебсайта си и да избягвате връзки към тях от вашите страници. HTML5 видео и аудио със сигурност са много по-добра опция пред защитените технологии. Също така е добра идея да добавите препис на вашето видео съдържание. Всъщност редица потребители могат да предпочитат писмено съдържание пред видео или аудио, някои помощни технологии могат да работят само върху писмени материали и Google може по-добре да придобие данни за това, за какво се отнася вашето видео или аудио съдържание.
  • Избягвайте използването диалози и изскачащи прозорци които не позволяват на потребителите да виждат или взаимодействат с вашето съдържание. Понякога те също са трудни за затваряне на мобилни устройства, при които недвижимите имоти на екрана са ограничени, което води до неудовлетвореност на вашите клиенти.
  • Pay внимание на допир! Ако вашият уебсайт разчита на събития на курсора на мишката, за да разкрие скрито съдържание, тази функционалност няма да работи на мобилни устройства. Мобилните устройства не работят с мишка. Вместо това потребителите взаимодействат със съдържание, използвайки жестове за докосване като докосване и прекарване на пръст. Затова изберете да разкриете скрито съдържание, като кликнете, а не задръжте курсора на мишката. Освен това, уверете се, че дизайнът на уебсайта Ви отчита факта, че върховете на пръстите са по-големи от показалеца на мишката, като осигурите достатъчно място за удобно и гладко взаимодействие с връзки на вашата страница..

Предимства на RWD сайт

За едно нещо, Google изрично препоръчва RWD подхода към уебсайт, подходящ за мобилни устройства. Други предимства на RWD са:

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

Вашият уебсайт реагира ли? Тествайте го!

Използвай Тест на Google за мобилни устройства за бързо тестване дали уебсайтът ви е отзивчив. Просто копирайте & поставете URL адреса на уебсайта си в текстовото поле и проверете резултата.

заключение

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me