Как да оптимизирате уебсайт за мобилни браузъри

Мобилните устройства – смартфони и таблети – генерират над половината от целия интернет трафик. Въпреки това проучване на BrightEdge от 2014 показва, че повече от 25 % от посещаваните уебсайтове не са оптимизирани за тези устройства, което води до загуба на средно 68 % от трафика. За да адаптирате сайта си към мобилни браузъри, е необходима планировка и тестване, но самият код обикновено не е труден, особено ако вече познавате CSS. При платформи като WordPress дори не е нужно да пишете код.

Чести платформи

От появата на iPhone разработчиците на популярни CMS‑ове – WordPress, Joomla и Drupal – включват вградено мобилно оформление. Например, Drupal доставя мобилно‑приятелски теми още при инсталацията. Тези теми се активират автоматично, когато сайтът открие мобилен браузър. Други теми са създадени да реагират на докосвания по същия начин, по който реагират на клик с мишка, без да променят съществено дизайна.

Използване на CSS и HTML

За статични HTML сайтове създайте един CSS файл, който съдържа стилове за различни размери екрана. Вместо да се опитвате да откривате конкретни устройства, задайте медийни заявки (media queries) според ширината в пиксели – например за големи екрани, таблети и смартфони. Предимството е, че кодът се пише само веднъж в CSS‑а, а всяка страница се свързва с него с една единствена редица код.

Интерактивни функции за сензорен екран

Ако вашият сайт използва JavaScript или HTML5 за интерактивност, трябва да предвидите как ще реагира на докосвания – както на мобилни браузъри, така и на сензорни настолни компютри. В jQuery, например, събитието tap заменя клик с мишка. При нужда можете да блокирате стандартни действия като щипка за увеличение или плъзгане за скрол, като използвате event.preventDefault().

Тестване и проверка

Най‑добрата практика е да тествате сайта на реално мобилно устройство – проверете оформлението, докосванията, а също и качеството на изображенията. Алтернативно, можете да използвате емулатор в браузъра. В Google Chrome натиснете F12, отворете панела за разработчици, изберете иконата „Настройки“ → таб „Емулация“ и изберете устройство като Google Nexus или iPad.