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

Когато първият iPhone беше пуснат на пазара, той взе технологичния свят от буря. Оттогава е минало почти 5 години и пазарът на смартфони се е увеличил в популярността си, като дори Microsoft е влязла в конкуренцията със своите Windows 7 OS и партньори. С толкова много интернет потребители на техния смартфон днес е разумно да се очаква броят на мобилните уебсайтове да се повиши агресивно.

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

В това ръководство ще се стремим да създадем удобен за потребителя сайт за мобилните браузъри на смартфоните. Ще говоря за най-добрите практики и полезен инструмент за разработчици, за да създадете по-добър мобилен уебсайт, така че нека влезем в него след скок!

Планиране на силен потребителски опит

Когато създавате мобилен уебсайт, е важно да непрекъснато имайте предвид вашите потребители, като в крайна сметка вашият сайт се проектира и създава за потребителите да се наслаждават. Със сигурност е обичайно потребителите да очакват мобилен уебсайт да се държи подобно на десктоп средата поддържане на удобството на потребителя трябва да бъде основният ви фокус при изграждането на успешен мобилен сайт.

Има много концепции за използваемост, които да обмисляте за вашите потребители. Тези съображения включват размер на екрана, вградени изображения, хипервръзки, размер на шрифта, и навигация по страница. Ние сме писали за дизайн на мобилността за вас, за да издълбаете уебсайта си за по-добро използване. Освен ръководството, трябва винаги пазете си бдителност за нови идеи да подобрите сайта си.

Планирането на силен потребителски опит също означава, че трябва обмислете как потребителят ще взаимодейства с уебсайта Ви. На работния плот вашият сайт може да бъде взаимодействан с мишка и клавиатура, но на смартфон потребителите ще бъдат почукване, мята, и плъзгането пътя си около сайта ви. Вероятно трябва да проектирате сайта по начина, по който потребителите могат лесно достъп до информацията на сайта с тези физически движения.

Съхранявайте страници с къси и сладки

Месото и картофите на всеки уебсайт са съдържание на страницата. Всяка от Вашите уеб страници съдържа значителна част от полезна информация за потребители, като например текст, снимки или видеоклипове. Също така ще намерите статии за новини и публикации в блогове, които се изпълняват за няколко страници, което може да помогне за разделянето на текст, но не се препоръчва за мобилни устройства, тъй като техниката изисква повече зареждане на страници, което означава повече време за чакане от страна на потребителя.

Освен ако не е абсолютно задължително, препоръчвам ви задържане на съдържанието на страницата ви кратко. Трябва да помислите и за това, че ще изглежда сладко оформяне на шрифта до много по-голям размер и може би движещи се изображения настрана. Със съдържанието ви на пълен дисплей естествено привлича вниманието, да не говорим за оптимизацията, което прави сканирането на страниците много по-лесно. Това е и причината, поради която a оформление на една колона пасва идеално на сметката.

В повечето случаи мобилните браузъри няма да заредят уеб страниците толкова бързо, колкото настолните браузъри и това може да раздразни читателите ви, затова трябва да оптимизиране на съдържанието и уебсайта за високоскоростно зареждане на съдържанието. Можете също така съкратете артикула, като запазите пълното съдържание, или просто премахнете ненужните изображения. Поставете фокуса си върху простотата вместо с красотата.

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

Изграждане на мобилни CSS стилове

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

(Източник на изображението: списание Smashing)

Една област, с която да започнете, е да рестартирайте ширината на обвивката на сайта си в проценти. Често се използват пиксели като единица за позициониране, височина на линията, размер на шрифта и ширина на DIV, но когато се занимавате с мобилни устройства, ще искате страниците ви да бъдат Течност и преход между всяко устройство естествено. Задаването на контейнери на 100% ширина ще позволи на съдържанието да Запълвайте лесно между портретен / пейзажен режим, без да минавате през ръба.

Ако сте един от хората, които искат да преструктурират цялото ви оформление, уверете се, че сте удари всичко с a нулиране. Също всички точки, заглавия и връзки за навигация трябва да бъдат настроени на дисплей: блок; така получавате чувството за линеен стил на печат. Поставете отново полетата и подложката, за да премахнете подуването от оформлението. Избягвайте таблици ако е възможно, тъй като те са склонни да показват бъги резултати между устройствата.

Големите изображения също са проблем между устройствата. Повечето от изображенията на уебсайта ви ще се изобразяват по-големи от 480 пиксела и може да не искате да ги разбият. Първият вариант е да задайте тяхната ширина на 100%, така че изображенията да могат да се променят естествено. Това със сигурност е възможно създайте различни набори от изображения за уебсайта си и да ги направят по различен начин на базата на браузър агенти, но честно казано това просто добавя повече работи на ваша страна, така че се опитайте да използвайте техниката само когато е наистина необходима.

Проектиране на уеб сайтове за iPhone

Пазарният дял на мобилния телефон е доста голям и разделен, но Apple има голям дял от пая с техните iDevices. Както iPhone, така и iPad са мобилни устройства, готови за интернет с вградена функционалност на сензорния екран. Те разполагат със същия уеб браузър по подразбиране, Safari и множество други опции.

За сайтове, специфични за iPhone, трябва да се насочите към размера на екрана. Фиксираният размер на екрана е настроен на 320px с 480px за по-стари модели на iPhone и 640px с 960px за iPhone 4 и iPhone 4S.

iPhone екраните са ограничени до пространство. Трябва да имаш един блок от съдържание, който обхваща толкова дълго, колкото е необходимо. Поддържане на елементи в една колона ще ви спести главоболия и позволяват флуидно оформление “попълнете” както в портретен, така и в пейзажен режим. За това най-вероятно ще трябва да разработите друг шаблон и да намерите начин да проверите дали посетителите ви използват iPhone. Малкият PHP фрагмент по-долу трябва да работи добре:

По принцип логиката дърпа нашето глобално $ _SERVER променлива за HTTP агент и проверява дали думата “iphone” навсякъде. Ако отговорът е да, тогава ние знаем, че нашият посетител използва iPhone и от там можем да поставим малко по-различен HTML или дори изцяло нов шаблон! Това може да се използва и за включва специален стил за iPhone, променете заглавията на страниците си, премахнете изображенията или почти всички динамични ефекти.

Когато става дума за обслужване на нови стилове, има по-лесен начин. Както бе споменато по-рано, максималният размер на екрана за iPhone е 960px широк. Затова с новите медийни запитвания на CSS3 можете да добавяте стилове директно в основния стил на вашия сайт, който ще бъде само на iPhone. По-долу е показан малък примерен код:

@media екран и (max-device-width: 960px) / * iPhone css * / 

Това работи, защото Сега CSS може да открива агенти за сърфиране и техните свойства. Максималната ширина на екрана е едно от свойствата, които също могат да бъдат открити.

All-in-all мобилен уебсайт за устройства с iPhone не е твърде труден за проектиране, има твърде много примери за справка, т.е.. Дръжте се заети с изучаването и не се страхувайте експериментирайте с нови техники в дизайна на потребителския интерфейс.

Скриптове за мобилни jQuery

Повечето от уеб разработчиците на предния край са запознати с библиотеката jQuery. Той предлага някои фантастични стенограми за ефекти на кодиране, анимации, падащи менюта и множество други функционалности в браузъра, и то просто става по-страхотно с обявяването на jQuery Mobile. то е не се препоръчва да скочи в технологията директно и заредете уебсайта си с ефекти навсякъде, но за целите на тестването разширената функционалност може да играе много добре.

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

Малък урок в блога на DevGrow дава някои страхотни примери. Официалният сайт предлага и демонстрации, които можете да изпробвате. Имайте предвид, че използваме атрибута HTML, данни преход да добавите анимационни ефекти с някоя от предварително зададените стойности. Те включват слайд, поп, флип, избледняване и др. Вижте малкия пример на DevGrow, за да получите вкус на тези ефекти.

Ефектите и преходите са доста спретнати, а фактът, че можете да изградите цял мобилен интерфейс строго с jQuery, също е огромна крачка напред за тази платформа, но с платформата само в бета версия не бих препоръчал да изграждате целия си мобилен сайт с тяхната библиотека, особено с факта, че е не се поддържат от всички основни смартфони към момента на писане (особено Windows Phone 7), но със сигурност ще се подобри с времето.

В крайна сметка препоръчвам да се запознаете с тази нова мобилна рамка преди разгръщане на живо по всеки проект.

Полезни инструменти за програмисти

Разработчиците на мобилни устройства не търсят само ресурсите за кодиране и проектиране. Също така има голямо търсене на софтуерни инструменти и IDE, да не говорим за мощни мобилни рамки. Уеб разработката е трудна задача, която изисква доста посвещение, но използването на допълнителни инструменти ще направи работата ви много по-лесна.

Мобилен емулатор на Opera

Търсите начин да проверите как се показва мобилният ви уебсайт? Това може да бъде огромна болка, ако нямате смартфон с достъп до интернет. Или просто не искате да използвате вашия смартфон, за да тествате сайта всеки път, когато актуализацията ви бъде поставена на вашия сървър. Е, Opera Mobile Emulator е фантастичен софтуер за тестване на мобилния ви уебсайт.

Емулаторът поддържа 20 мобилни профила като Samsung Galaxy S, HTC Desire и дори таблетки като Motorola Xoom. Възможно е също да зададете персонализирана резолюция и плътност на пикселите за целите на интензивно тестване. Най-доброто от всичко е, че не е нужно да правите прекалено много конфигурационни дейности, просто направете няколко кликвания и сте добре.

Изтеглянето е напълно безплатно и софтуерът работи както в Mac OS X, така и в Windows средата. Техните разработчици работят усилено, създавайки правилни уеб стандарти и променяйки техния мобилен механизъм за визуализация. Препоръчвам другите им инструменти за разработване, ако търсите допълнителни инструменти, които да ви помогнат по пътя.

PhoneGap

Няма много разработени API за HTML5 за изграждане на солидни мобилни приложения. Особено мобилният пейзаж липсва от тези видове уебсайтове, което е точно причината PhoneGap да запълни нишата толкова добре. Тяхната платформа ви позволява лесно конструират приложения, базирани на HTML5, като оригинални приложения на 6 различни платформи.

Процесът работи, като първо компресирате кода си и го предавате през рамката за приложения на PhoneGap. От там вашите приложения могат да достигнат голяма част от пазара на мобилни устройства, включително Android, iOS, Windows Phone 7 и BlackBerry.

Ако сте малко объркани, не се безпокойте прекалено много. Техните страници за поддръжка спретнато очертават процеса и предлагат връзки към полезни ресурси. Приложенията, които вече са разработени, са компилирани в красиво портфолио в библиотечен стил. Вижте пълната колекция от приложения, която след това можете да сортирате по устройства със снимки на екрани.

Студио Aptana

Уебсайтът на Aptana е най-доброто място за изучаване на техните инструменти за развитие. Последната версия на пакета, Aptana 3.0.3, включва напълно интегрирана IDE за уеб разработки, CSS стилове и вмъкване на HTML тагове, а най-добрата част: Aptana е напълно Безплатно за изтегляне! Те предлагат пакети за всичките 3 основни операционни системи (включително Linux), което е огромно удобство за разработчиците.

Това, което прави Aptana специално, е колко бързо можете да развиете малко уеб приложение и да изпробвате своя дизайн. Студиото Ви дава възможност бързо разработвайте и тествайте уеб приложение, работещо през Ruby on Rails, PHP, Python или просто HTML / CSS, и техните функции за подчертаване на кода наскоро бяха подобрени включват нови библиотеки с тагове HTML5 и CSS3. Той също така идва с интеграция Git, вграден терминал, дебъгер на код и няколко други елегантни функции.

Мобилни GUI комплекти и икони

Каква ще бъде мрежата без да се намират халюци? За уеб дизайнерите значението на потребителския интерфейс се нарежда над всичко останало. Простите GUIs са трудни за постигане и само най-креативните дизайнери са предложили работещи решения.

Въпреки това, има много свободни все още качествени ресурси, достъпни за вас уеб дизайнер, за да тествате. Тези GUI комплекти са предназначени предимно за Adobe Photoshop или Fireworks, където можете да се движите около елементи и да ги експортирате като плоски файлове с изображения.

Иконите са много полезен ресурс. Дизайнерите създават безплатни комплекти и ги предлагат онлайн по-често от всякога. Един такъв сайт Glyphish има витрина както на свободни, така и на професионални икони. Тези дизайни се основават на една тема, която ще се използва в шаблоните за мобилни устройства и дизайните на приложенията.

Нашата колекция от шаблони за прототипиране на мобилни устройства ще бъде от голяма полза за вас по време на пътуването на уебсайта и разработката на приложения. Не трябва да започнете да кодирате, докато не разполагате със силен графичен интерфейс и тези уеб комплекти ще ви помогнат да започнете по правилния път.

iOS 5 GUI Kit

Елементи на UI за iPhone

Комплект икони за iPhone приложения

Касетъчни магнити (комплект "Направи си сам")

GUI за интерфейс на Android