Имате ли " отговорен уебсайт "? Това е сайт с оформление, което се променя на базата на устройството на посетителя и размера на екрана. Отзивчивият уеб дизайн е най-добрата практика в бранша. Препоръчва се от Google и се намира на милиони сайтове в мрежата. Има обаче голяма разлика между това, че имате уеб сайт, който просто "се вписва" в различни размери на екрана и има сайт, който наистина отговаря.
Аз рутинно виждам компаниите да преработят уебсайта си и да изтласкат прессъобщение, възхваляващо добродетелите на новия си мобилен дизайн. Когато посещавам тези сайтове, това, което често намирам, е оформление, което наистина се мащабира и се променя, за да се побере на различни екрани, но това е доколкото те приемат идеята за отзивчивост. Това не е достатъчно. Един наистина отзивчив сайт прави повече от просто скала, за да се побере на по-малък или по-голям екран. На тези сайтове ще намерите и следните важни черти.
1. Оптимизирано представяне
Никой не обича да чака да се зареди уебсайт, а когато някой използва мобилно устройство с връзка, която може да е по-малко от идеална, необходимостта от бързо зареждане на сайт е още по-важна.
И така, как оптимизирате ефективността на сайта си? Ако започвате с нов сайт като част от редизайн, тогава трябва да го направите като точка за създаване на бюджет за изпълнение като част от този проект. Ако работите със съществуващ сайт и не започвате отначало, първата стъпка е да тествате ефективността на сайта си, за да видите къде се намирате днес.
След като изведете базовата линия на мястото, където сайтът Ви е в състояние на ефективност, можете да започнете да правите необходимите подобрения, за да увеличите скоростта на изтегляне. Страхотно място, което може да започнете, вероятно е с изображенията на сайта Ви. Твърде големите изображения са # 1 виновник, когато става дума за бавно зареждане на сайтове, така че оптимизирането на вашите изображения за уеб доставка наистина може да помогне на вашия сайт от гледна точка на изпълнението.
Реалността е, че подобрената производителност на уебсайта и бързите скорости на изтегляне са предимство, която всички посетители ще оценят. В края на краищата никой не се е оплаквал, че даден сайт е зареден "прекалено бързо", но ако даден сайт отнема много време, това ще отклони хората, независимо дали отговарят на екрана си или не.
2. Йерархия на интелигентното съдържание
Когато даден уебсайт се показва на голям екран, вие сте в състояние да изнасяте съдържание по различни начини, поради наличието на значителни екранни имоти. Често можете да поставяте важни послания и изображения, актуализации на новини, информация за събития и навигация в сайта наведнъж на екрана. Това позволява на посетителя лесно и бързо да сканира съдържанието на цялата страница и да реши кое е важно за него.
Този сценарий се променя доста драматично, когато взимате дизайна на сайта и го трансформирате за устройства с малък екран, като мобилен телефон. Изведнъж работите с част от екрана на имота, който сте имали преди. Това означава, че трябва да решите какво ще се появи първо на сайта, какво ще последва и т.н. Вместо всичко, което се вижда веднага, вероятно имате само пространството да показвате едно или две неща (една от които е вероятно навигация). Това означава, че трябва да се вземат решения на йерархията. За съжаление, това, което често определя кое е първото на екрана, а след това второто и т.н. е начинът, по който се кодира самата страница. Най-лесно е, когато се създава отзивчив сайт, да се показва кое е първото в кода първо на екрана, последвано от втория елемент в кода и т.н. За съжаление, това, което може да е най-важно на едно устройство, може да не е толкова критично по отношение на друго. Един наистина отзивчив сайт разбира, че йерархията на съдържанието трябва да се променя в зависимост от различните ситуации и трябва да е умен за това, което показва къде.
Подобренията в техниките за оформление на CSS, включително CSS Grid Layout, Flexbox и др., Позволяват на уеб дизайнерите и разработчиците да избират повече опции, когато става въпрос за интелигентно оформяне на съдържание, вместо да бъдат ограничени от точния ред на съдържанието в HTML кода. Възползването от тези нови техники за оформление ще стане още по-важно, тъй като ландшафтът на устройството и нуждите на потребителите на сайта ни продължават да се развиват.
3. Опитът, който отчита силните и слабите страни на устройството
Оставайки на темата за устройствата - всяко устройство, което някой може да използва, за да посети сайта Ви, има както силни и слаби страни, които са присъщи на тази платформа. Големият отзивчив сайт разбира възможностите и ограниченията на различните устройства и ги използва, за да създаде персонализиран опит, който е най-подходящ за всяко устройство, което посетителят може да използва в момента.
Например, мобилен телефон включва редица функции, които не бихте намерили в традиционния настолен компютър. GPS е един пример за мобилна ориентация (да, можете да получите обща информация за местоположението и на настолни компютри, но устройството GPS е много по-точна). Сайтът Ви може да използва GPS информация, за да изпрати интелигентно на човек много подробна и конкретна информация за посоката на поетапни стъпки или специални оферти, основани точно на това къде са в момента.
Друг пример за този принцип в практиката би бил сайтът, който разбира какъв вид дисплей използвате и изпраща изображения, които са най-подходящи за този дисплей. Ако имате екран с висока плътност на пикселите, може да решите да изпратите изображения с по-високо качество на този екран. Същите тези изображения биха били безсмислени на екрана с по-малко възможности, а допълнителното качество ще бъде загубено, докато допълнителният размер на файла ще бъде изтеглен без действителна причина.
Наистина страхотно отзивчивите сайтове разглеждат целия опит на потребителите и работят, за да приспособят този опит, базиран не само на тип устройство или размер на екрана, но и на други важни аспекти на хардуера.
4. Съдържание с контекст
Първоначално отзивчивият уеб дизайн получи името си, защото идеята за оформлението на даден сайт отговаря на различни размери на екрана, но можете да отговорите на много повече от размера на екрана. Като се основава на предишния пример за използване на силните и слабите страни на устройството, можете да използвате тези, както и други данни, като дата и час, за да персонализирате действително уебсайт.
Представете си уебсайт за голямо събитие на търговското изложение. Докато отзивчивият уеб сайт ще промени оформлението на страниците на сайта, за да се мащабира с различни екрани, бихте могли да използвате и датата, за да определите кое съдържание е най-важно да се показва. Ако това е периодът преди събитието, най-вероятно искате да изведете на видно място регистрационната информация. Ако обаче събитието действително се случва в този момент, регистрацията може да не е най-важното съдържание. Вместо това можете да решите, че дневният график на събитията е по-критичен, тъй като е по-подходящ за непосредствените нужди на този потребител.
Като предприемете стъпки по-нататък, можете да включите GPS устройството, за да определите къде всъщност се намират в търговското изложение. Можете да им дадете интерактивно съдържание въз основа на местоположението им, показвайки им наблизо кабини или сесии, за да започнете.
5. Достъпност
Крайният пример, който ще разгледаме как един сайт наистина може да отговори на нуждите на посетителя, е да обмисли достъпността на уебсайта . Уебсайтовете трябва да могат да се използват от възможно най-голям брой хора, включително тези с увреждания. Вашият уеб сайт трябва да може да бъде използван от някой, който се нуждае от четец на екрана или друг помощен софтуер за достъп до неговото съдържание. По този начин сайтът ви отговаря на техните нужди, защото сте гарантирали, че опитът, който е различен за посетителите с увреждания, все още е подходящ.
Като отговаря на възможно най-много точки, а не само на екрана, уебсайтът може да бъде много повече от "приятелски настроен към мобилни устройства". Той може да се превърне в наистина отзивчив опит във всеки смисъл на фразата.