Въпреки че броят на уебсайтовете без оптимизация за мобилни устройства намалява, има някои, които са предназначени само за настолни компютри. За съжаление предишната уеб услуга на Google „мобилизатор“е прекратена. Духовният наследник на услугата е Google Weblight, създаден около оптимизация за бавни връзки, а не към преразглеждане на сайтове за мобилно гледане. Освен услугата на Google, има редица практики и инструменти, които трябва да се имат предвид при разработването на сайт с мисъл за мобилни устройства.
Стъпки
Част 1 от 2: Експериментиране с Google Weblight
Стъпка 1. Анализирайте как работи Weblight
Weblight е алгоритъм, създаден от Google, за да осигури на потребителите по -бързо и по -леко зареждане на страници при лоши мрежови условия. Това означава, че Weblight няма потребителски интерфейс и работи на задната част. Страниците са лишени от по-сложните си елементи, осигуряващи опростено и леко изживяване, а не изрично оптимизирано за мобилната платформа.
Стъпка 2. Тествайте промените в сайта с Weblight
На мобилното си устройство просто добавете пълния URL адрес на сайта си в края на адреса на weblight (например, ако вашият уебсайт е „mywebsite.com“, тогава въвеждате https://googleweblight.com/?lite_url=https://mywebsite.com). Страницата ще зареди опростена, но функционална версия на себе си. С премахнатите елементи някои сайтове може да изглеждат много по -добре на екраните на мобилни устройства.
Стъпка 3. Разпознайте ограниченията
Имайте предвид, че това не е изричен инструмент за конвертиране, предназначен за взаимодействие с потребителя. Докато ръчното въвеждане на уебсайта може да бъде използвано в крайна сметка, Weblight е проектиран за скорост, а не за използваемост.
Част 2 от 2: Проектиране за мобилна съвместимост
Стъпка 1. Имайте предвид ограниченията на мобилното устройство
Мобилните устройства споделят няколко аспекта, които ги отличават от техните настолни колеги. Тези основни характеристики трябва да бъдат основните съображения при създаването на сайт за мобилна консумация.
- Малки екрани и вертикалност: Въпреки че разделителната способност на екрана на мобилни устройства непрекъснато се подобрява, размерът и форм -факторът остават проблем за дизайна на сайта. Проектирането на сайт в една колона е най -доброто за телефони (таблетите често могат да използват настолни сайтове без прекалено много проблеми).
- Сензорни интерфейси: Елементите на страницата трябва да се поставят с размера на пръста. Елементите, които използват курсора на мишката, трябва да бъдат сведени до минимум или преработени за докосване (например падащи менюта).
- Скорости на данни: Едно от големите предимства на мобилните устройства е използването извън обхвата на wifi, но връзките за данни обикновено са по -бавни и по -малко надеждни. Потребителските интерфейси (UI) трябва да останат прости, а съдържанието да е видимо и достъпно. Твърде много претрупване ще намали времето за зареждане и ще затрудни навигацията.
Стъпка 2. Използвайте услуга за система за управление на съдържанието (CMS)
За тези, които се развиват с по-малко ресурси, използването на CMS услуга като Wordpress или Squarespace е чудесна възможност за евтин, лесен за употреба мобилен дизайн. Темите, които използват отзивчив уеб дизайн, ще осигурят най -лесния шаблон за мобилен сайт.
Отзивчивият уеб дизайн е теория за уеб дизайна, която насърчава използването на флуидни дизайнерски елементи, за да позволи плавен преход на дизайна и използваемостта между платформите
Стъпка 3. Тествайте екраните на мобилните устройства с помощта на настолен софтуер
Има редица безплатни уеб приложения, които ви позволяват да подражавате на мобилни устройства, за да тествате естетиката и функционалността на уебсайта. Използването на тези инструменти е толкова лесно, колкото да изберете желаното тестово устройство, след което да влезете в целевия уебсайт, за да визуализирате. Повечето ще включват инструменти за променливи като ориентация на екрана, плътност на пикселите или дори избор на браузър. Няколко популярни примера са:
- Емулатор на режим на устройство Chrome
- mobilephoneemulator.com
- screenfly (подмножество от quirktools)
- mobiletest.me (платено членство)
