Вероятно сте виждали как iPhone може да обръща и разширява уеб страници. Той може да ви покаже цялата уеб страница с един поглед или да увеличи, за да направи текста, който ви интересува, да се чете. В един смисъл, тъй като iPhone използва Safari, уеб дизайнерите не трябва да правят нещо специално, за да създадат уеб страница, която да работи на iPhone. Но наистина ли искате страницата ви просто да работи - или да се откроява и да блести?
Когато ти изграждане на уеб страница, трябва да помислите кой ще го гледа и как ще го гледа. Някои от най-добрите сайтове вземат предвид какъв тип устройство се разглежда страницата, включително резолюцията, цветовите опции и наличните функции. Те не разчитат само на устройството, за да го разберат.
Общи насоки за изграждане на сайт за мобилни устройства
- Тествайте на колкото се може повече устройства. Първото нещо, което трябва да направите, е да разгледате сайта си на iPhone и толкова много различни мобилни устройства или емулатори, колкото можете. Въпреки че можете да използвате емулатори за цялото си тестване, те наистина не ви създават същото усещане като опитите да навигирате през уебсайт на малкия малък екран. Трябва да тествате на реални устройства, доколкото е възможно.
- Накарайте вашите страници да се влошат грациозно. Можете да напишете вашите страници за Флаш активиран, широкоекранни браузъри, но се уверете, че критичната информация се вижда дори в малък монитор, който не може да се справи с никакви специални функции (като бисквитки, Ajax, Flash, JavaScript и др.). Всичко извън XHTML Basic ще бъде извън някои мобилни телефони. Докато повечето смартфони могат да се справят с всички тези неща, други мобилни устройства не могат.
- Създайте страница, специфична за безжична връзка - и улеснете намирането. Ако ще създадете конкретна страница за клиентите на вашия мобилен телефон и безжична мрежа - направете я достъпна. Чудесен начин е да поставите връзката към безжичната страница в най-горната част на вашия документ и след това да скриете тази връзка от неръчни устройства, използващи типа преносим носител. В крайна сметка повечето хора идват на началната ви страница, дори и на мобилни телефони - и ако връзката към вашата безжична страница не е там, те ще си тръгнат, ако страницата е твърде трудна за използване.
Оформление на уеб страница за смартфони
Първото нещо, което трябва да запомните, когато пишете страници за пазара на смартфони, е, че не е необходимо да правите промени, ако не искате. Най-хубавото при повечето налични смартфони е, че те използват Webkit браузъри (Safari на iOS и Chrome на Android) покажете уеб страници, така че ако страницата ви изглежда добре в Safari или Chrome, тя ще изглежда добре на повечето смартфони (просто много по-малки). Но има неща, които можете да направите, за да направите преживяването на сърфирането по-приятно:
- Не забравяйте, че екранът е малък. Смартфоните ще кондензират всички тези колони в малкия прозорец и това може да ги направи много трудни за четене без мащабиране. Повечето потребители са свикнали с мащабиране, но това може да стане досадно. Една дълга колона текст е по-лесна за четене.
- Разделете страниците на по-малки парчета. Може да бъде трудно да прочетете дълги сегменти от текст на мобилен телефон, така че поставянето им на множество страници ги прави по-лесни за четене.
Връзки и навигация на iPhone
- Колкото по-кратки са URL адресите, толкова по-добре. Ако някога сте опитвали да въведете URL на мобилен телефон, ще разберете, че това е болка (с изключение може би за тийнейджъри, които са свикнали да изпращат много текстови съобщения). Дори на iPhone е досадно да пишете дълги URL адреси. Дръжте ги кратки.
- Но текстът с дълги връзки е по-лесен за докосване. Когато се намирате на страница, където няколко отделни думи са свързани към различни статии, и то точно една до друга, може да бъде много трудно да докоснете правилната, без мащабиране. Много хора просто ще се откажат и ще отидат някъде другаде. Връзките с 3 до 5 думи в тях са по-лесни за кликване по телефона, отколкото връзки с 1 дума.
- Не поставяйте навигацията си в най-горната част на екрана. Няма нищо по-досадно от това да се налага да прелиствате екрани и екрани с връзки, за да намерите информацията, която искате. Ако сте разглеждали уеб страници, предназначени за мобилни телефони, ще видите, че първите неща, които се показват, са съдържанието и заглавието. След това, под това е навигацията.
- Не се страхувайте да скриете навигацията си.Скриване на навигационните връзки с CSS или JavaScript и да ги покажете само когато потребителят поиска това е начин да улесните страницата за потребителите на смартфони.
Съвети за изображения на смартфони
- Изображенията трябва да са малки. Да, Android и iPhone могат да увеличават и намаляват изображенията, но колкото по-малки са те, както в измеренията, така и във времето за изтегляне, толкова по-щастливи ще бъдат вашите безжични клиенти. Оптимизиране на изображения винаги е добра идея, но за страниците на мобилни телефони е критично.
- Изображенията трябва да се изтеглят бързо. Изображенията заемат много място в уеб страниците, когато ги разглеждате от мобилно устройство. И макар че често са много приятни и правят страниците да изглеждат по-добре, когато се гледат в цял екран уеб браузър, те често пречат на мобилното устройство. Освен това, когато потребителят на смартфон е в клетъчната мрежа, последното нещо, за което искат да платят, е изтеглянето на куп огромни изображения или икони за навигация.
- Не поставяйте големи изображения в горната част на страницата. Точно както при навигацията, може да бъде много досадно да чакате изображение, което отнема 3 до 4 екрана, да се зареди в самия връх на страницата. И това е изключително често в уеб страниците. Единственото изключение от това е, ако читателят знае, че ще получи изображение, когато щракне, да речем във фото галерия.
Какво да избягвате, когато проектирате за мобилни устройства
Има няколко неща, които трябва да избягвате, когато създавате мобилна страница. Както споменахме по-горе, ако наистина искате да имате такива на вашата страница, можете, но се уверете, че сайтът работи без тях.
- Flash: Повечето мобилни телефони не поддържат Flash, така че не е добра идея да го включите на своите безжични страници.
- Бисквитки: Много мобилни телефони нямат поддръжка на бисквитки. iPhone имат поддръжка на бисквитки.
- Рамки: Дори ако браузърът ги поддържа, помислете за размерите на екрана. Кадрите просто не работят на мобилни устройства - те са много трудни или невъзможни за четене.
- Маси: Не използвайте таблици за оформление на мобилна страница. И се опитайте да избягвате таблици като цяло. Те не се поддържат от всеки мобилен телефон (въпреки че iPhone и други смартфони ги поддържат) и в крайна сметка можете да получите странни резултати.
- Вложени таблици: Ако трябва да използвате таблица, уверете се, че не я влагате в друга таблица. Те са трудни за настолни браузъри за поддръжка и в най-добрия случай правят страницата по-бавна.
- Абсолютни мерки: С други думи, не дефинирайте размерите на обектите в абсолютни размери (като пиксели, милиметри или инчове). Ако дефинирате нещо като ширина 100 пиксела, на едно мобилно устройство това може да е половината от екрана, а на друго може да е два пъти по-голяма от широчината. Относителните размери (като ems и проценти) работят най-добре.
- Шрифтове: Не приемайте, че някой от шрифтове сте свикнали да имате достъп, ще бъде на разположение на мобилните телефони.