Вземете телефона и отворете собствения си сайт, сякаш го виждате за първи път. Четете ли текста, без да увеличавате? Уцелвате ли бутоните с палеца от първия път? Намирате ли телефонния номер и попълвате ли формата, без да ругаете? Много сайтове, които изглеждат добре на лаптоп, се провалят поне на един от тези въпроси.
Две причини версията за телефон да е първа
Google чете мобилната версия. Документацията на Google е категорична: Google използва мобилната версия на съдържанието на сайта, обходена със смартфон агента, за индексиране и класиране (Google Search Central). За индексиране се използва само съдържанието, показано в мобилния сайт. Ако мобилното ви оформление крие текст, изпуска раздели или метаданни, които настолната версия има, Google работи с по-бедната версия. Адаптивният дизайн, при който една страница се приспособява към всеки екран, избягва този проблем и е това, което Google препоръчва.
Клиентите ви може никога да не видят друга версия освен тази за телефон. Не разчитайте на общи статистики за това. В Google Analytics отворете обзорния отчет за технологиите (Tech) и вижте категорията на устройството. Това е вашето реално разпределение и числото, около което да проектирате.
Какво означава mobile-first на практика
Mobile-first е ред на проектиране. Първо проектирате малкия екран, а това налага решения: какво е задължително, кое е единственото главно действие, колко кратък може да е текстът. После добавяте оформление за по-големите екрани. Когато започнете от компютъра и го смачкате надолу, обикновено се получават познатите проблеми: миниатюрни линкове, колони една до друга, смачкани в нечетими ивици, менюта, които искат три докосвания, изскачащи прозорци на цял екран с бутон за затваряне, който никой не може да уцели.
Списък за проверка на телефон
Минете през него на истински телефон, по възможност от средния клас, на мобилни данни, а не на Wi-Fi.
Четене
- Основният текст се чете без увеличаване, а редовете не са толкова дълги, че да се губите.
- Страницата не се плъзга настрани. Ако се плъзга, нещо е по-широко от екрана.
- Първият екран показва какво правите, а не само голяма снимка.
Докосване
- Бутоните и линковете са достатъчно големи, за да се уцелват лесно. web.dev препоръчва зони за докосване от около 48 пиксела с около 8 пиксела разстояние между тях. Стандартът за достъпност WCAG 2.2 поставя минимум от 24 на 24 пиксела на ниво AA.
- Телефонният ви номер е линк, който се набира с едно докосване.
- Главното действие е лесно достъпно, без да трябва да се връщате най-горе.
Форми
- Полетата използват правилния тип, така че телефонът показва цифрова клавиатура за телефонен номер и клавиш @ за имейл (MDN за типовете полета).
- Полетата имат зададено автоматично попълване, така че телефонът може да попълни име, имейл и адрес.
- Грешките се показват до съответното поле и нищо не се изтрива, когато сбъркате.
- Само полетата, които ви трябват преди първия разговор.
Скорост и стабилност
- Основното съдържание се появява бързо на мобилни данни.
- Нищо не подскача, докато страницата се зарежда.
- Пуснете страницата през PageSpeed Insights и първо вижте резултатите за мобилни. Защо скоростта на сайта има значение обяснява как да ги четете.
Прекъсвания
- Няма изскачащ прозорец, който покрива съдържанието веднага щом страницата се отвори. Банерите за бисквитки са нужни в ЕС, но не трябва да скриват цялата страница или да правят затварянето трудно за намиране.
- Чат прозорците не стоят върху главния бутон.
Какво да поправите първо
Започнете с всичко, което блокира главното действие: форма, която е мъчение на телефон, бутон, който не може да се натисне, телефонен номер, който не е линк. После четимостта, после скоростта. Визуалната шлифовка е последна.
Ако искате второ мнение за това как се държи сайтът ви на телефон, изпратете ни линка и ще ви кажем къде губи хора. На страницата за уеб услугите ни обясняваме как пазим ключовите задачи ясни от телефона до компютъра. А ако проверката на телефон открие проблеми из целия сайт, статията нов сайт или редизайн ще ви помогне да решите докъде да стигнете.