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

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

Общи платформи
След появата на iPhone, разработчиците зад уебсайтове като WordPress, Joomla и Drupal имат интегриран мобилен дизайн. Друпал, например, идва с удобни за мобилни телефони теми в първоначалната си инсталация. Всяка от тези платформи има мобилни теми, които са създадени, за да започнат да действат веднага след като уебсайтът ви открие, че се осъществява от мобилен браузър. Други теми вече са удобни за мобилни устройства и ще реагират на жестове с докосване точно както реагират на кликвания на мишката, без съществено да променят дизайна или оформлението на уебсайта си на различни устройства.

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

Интерактивни функции на сензорния екран
Ако сте конфигурирали уеб страница като интерактивно изживяване за посетителите, използващи JavaScript или HTML5 от жизненоважно значение е да знаете как вашият уебсайт ще реагира на събития с докосване, не само на мобилен браузър, но и на нарастващ брой настолни компютри със сензорен екран. В повечето случаи трябва да помислите за добавяне на събития с докосване и жестове към кода на дизайна. В JQuery например еквивалентът на щракване с мишката върху сензорния екран е събитие, което се задейства, когато потребителят докосне и след това вдигне пръст от екрана. В зависимост от страницата ви може да искате да деактивирате настройките по подразбиране в мобилния браузър, като прищипване, за да увеличите или плъзгате, за да превъртате, като използвате събития „preventDefault“.

Тестване и проверка тествайте новия си мобилен уебсайт, за да използвате собственото си мобилно устройство. Разгледайте стила и оформлението на страницата, навигирайте с докосвания и жестове и погледнете внимателно снимките си, за да сте сигурни, че изглеждат свежи. Можете също да използвате уеб браузъра на компютъра, за да емулирате мобилен дисплей. Например в Google Chrome натиснете "F12", за да отворите конзолата на разработчика. Кликнете върху иконата „Настройки“ и след това върху раздела „Емулация“, за да изберете устройство като Google Nexus или Apple iPad.

URL:https://bg.whycomputer.com/Internet/100201856.html