Уеб страниците, които са оптимизирани за използване на мобилни устройства, се различават от тези, които се показват на настолни и преносими компютри. Последните са предназначени за големи екрани и прецизно щракване с мишката, докато мобилните уеб страници са оразмерени за по-малки екрани и непрецизно докосване с пръсти.
- Проектиран за по-малки екрани и непрецизно докосване с пръст.
- Проектиран за големи екрани с прецизно щракване с мишката.
Като се има предвид, че по-голямата част от посещенията на уебсайтове идват от мобилни устройства, дизайнерите на сайтове имат задачата да предоставят версии, които работят както с мобилни устройства, така и с настолни компютри. Най-често срещаният подход е да се използва адаптивен уеб дизайн, който автоматично предоставя правилната версия въз основа на устройството на потребителя и размера на екрана, както се разпознава от браузъра.
Във всеки случай удобните за мобилни устройства уеб страници се различават от версиите за настолни компютри по много начини.
Дизайн на страница: Мобилните екрани имат по-малко пространство
- Дисплеите на смартфони и таблети са с размер от 4 до 10 инча по диагонал.
-
Приспособленията за сгъваемо или разгъващо се меню обикновено заместват страничните ленти и обемистите заглавни менюта.
- Графики в цяла ширина със законно използване на интервал между текста.
- Повечето настолни монитори са с размери от 19 до 24 инча по диагонал.
- Спонсорираните връзки и големите рекламни банери са по-често срещани.
- По-плътен текст с повече свобода на действие за графики.
Най-очевидната разлика между настолни и мобилни уеб страници е площта на екрана. Докато повечето настолни монитори са с размери най-малко 19 инча до 24 инча по диагонал, таблетите обикновено са около 10 инча. Смартфоните са около 4 инча по диагонал. Простото намаляване на мащаба не конвертира успешно уеб страница във версия, удобна за мобилни устройства, защото прави текста нечетлив и изисква допълнителна стъпка от посетителя на сайта. Също така точното докосване на малки елементи става невъзможно.
За да коригират проблема, дизайнерите могат да премахнат странични ленти и графики, които не са абсолютно необходими. Вместо това те използват по-малки графики, увеличават размера на шрифта и свиват съдържание в разширяеми джаджи. Това ограничение на недвижимите имоти доведе до съвсем различно мислене сред уеб дизайнерите.
Освен това, сгъваеми или разширяеми приспособления за менюта обикновено заместват страничните ленти и обемистите заглавни менюта. В стремежа си да зачитат всеки милиметър екранно пространство, дизайнерите премахват излишното бяло пространство, като същевременно следят внимателно за четливостта.
Тълпа от спонсорирани връзки и големи рекламни банери просто не работят на телефон или малък таблет. Вместо това малките изскачащи реклами са по-често срещани на мобилни уеб страници.
Оформления, които включват текст, обвит около графика, не се възпроизвеждат добре на мобилни устройства. Вместо това дизайнерите често дават на тези графики цялата ширина на екрана и пускат текста под или над. По същия начин добрият уеб дизайн разделя текста на части за четливост; никой не иска да чете плътни стени от текст. Това става още по-важно на малките екрани. Разумното използване на бялото пространство е от решаващо значение.
Контрол на страницата: Прецизност на работния плот срещу мобилни петна
-
Големи зони за докосване или горещи точки за по-точна навигация.
- Различен URL: добавя буквата "m." Често опция за преглед на десктоп версията на даден сайт.
- Идентификационните данни за влизане често имат специално място, понякога с достъп с пръстов отпечатък.
- По-точни базирани на курсора връзки и бутон.
За разлика от прецизния показалец на мишката на вашия работен плот, човешкият пръст е петно и докосването изисква големи цели на екрана за хипервръзки. Удобните за мобилни устройства сайтове предлагат големи зони за докосване (или горещи точки) за улесняване на точната навигация.
Удобните за мобилни устройства уеб страници също често включват буквата m в своите адреси; например мобилният адрес на Facebook е m.facebook.com. Мобилният URL обикновено се избира автоматично за вас, когато сърфирате с мобилен таблет или смартфон. В някои случаи ще видите връзка с възможност за докосване, която ви позволява да превключите към обикновената настолна версия на страницата.
Полетата за вход и парола, предназначени за настолни компютри и лаптопи, стават малки и неизползваеми на телефона, така че уеб издателите ги правят по-големи, като понякога им дават свои собствени страници за по-лесно използване. Влизането с пръстов отпечатък или друг акаунт, като Google или Facebook, става все по-често срещано с развитието на възможностите на устройството и услугите.
Защо има значение?
Мобилните уеб страници са предназначени за преносими устройства и са доста различни от страниците, създадени за четене от компютър. Въпреки че обикновено можете да видите настолната версия на уеб страница на мобилно устройство и обратно, те са проектирани по различен начин, за да направят съдържанието по-лесно за гледане, четене и навигиране.
