Погледајте дизајн за мобилне уређаје
Када је први иПхоне пуштен на тржиште, олуја је узела технолошки свет. Од тада је прошло скоро 5 година и тржиште паметних телефона је постало све популарније, чак је и Мицрософт ушао у конкуренцију са својим Виндовс 7 ОС и партнерима. Са толиким бројем корисника Интернета на њиховом паметном телефону данас, разумно је очекивати да ће се број мобилних веб страница повећати агресивно.
Међутим, дизајнирање за мобилни веб је потпуно другачија операција са заједничким веб дизајном. Наши сајтови су дизајнирани за велики екран, али величина екрана паметног телефона је премала у поређењу са тим, што доводи до неугодних проблема у употребљивости. Нови стандарди и праксе дизајна веома су потребни за бољи дизајн мобилног сајта уз глатко корисничко искуство.
У овом водичу настојат ћемо дизајнирати усер-фриендли сите за мобилне прегледнике паметних телефона. Причаћу о најбољим праксама и корисним алатима за развојне програмере за вас да дизајнирате бољи мобилни сајт, па хајде да уђемо у њега после скока!
Планирање снажног корисничког искуства
Када правите мобилни сајт, важно је стално имајте на уму своје кориснике, као крајњи циљ ваше веб странице је дизајниран и креиран за кориснике да уживају. Свакако је уобичајено да корисници очекују да ће се мобилни веб сајт понашати слично десктоп окружењу одржавање корисничког искуства пријатељским треба да буде ваш главни фокус приликом изградње успешног мобилног сајта.
Постоји много концепата употребљивости које треба узети у обзир за ваше кориснике. Ова разматрања укључују Величина екрана, инлине имагес, хипервезе, величина фонта, и паге навигатион. Ми смо писали о дизајну мобилности за мобилне уређаје да бисте направили вашу веб локацију за бољу употребљивост. Поред водича, морате увек будите опрезни за нове идеје да побољшате свој сајт.
Планирање снажног корисничког искуства такође значи да бисте требали размислите о томе како ће корисник бити у интеракцији са вашим веб сајтом. На радној површини ваш сајт може бити у интеракцији са мишем и тастатуром, али на паметном телефону корисници ће бити тапкање, флицкинг, и свипинг свој пут око вашег сајта. Вероватно ћете морати да дизајнирате сајт на начин који корисници могу лако приступити информацијама о локацији помоћу ових физичких покрета.
Кееп Пагес Схорт & Свеет
Месо и кромпир на било ком сајту је садржај странице. Свака од ваших веб страница садржи значајне количине корисних информација за кориснике, као што су текст, фотографије или видео записи. Такође ћете наћи новинске чланке и постове на блогу који се покрећу на неколико страница, што може помоћи да се разбије текст, али се не препоручује за мобилне уређаје као технику захтева више учитавања страница што значи више времена чекања на страни корисника.
Осим ако је то апсолутно потребно, препоручујем одржавање садржаја Ваше странице кратким. Требало би да размислите о томе да изгледа слатко стилизовање фонта на много већу величину и можда на страну покретне слике. Својим садржајем на пуном екрану природно привлачи пажњу, а да не спомињемо оптимизацију, што чини скенирање страница много једноставнијим. То је и разлог зашто а распоред једне колоне савршено се уклапа.
У већини случајева мобилни претраживачи неће учитати веб странице што је брже могуће од прегледника на радној површини и то би могло нервирати ваше читатеље, зато морате оптимизирати садржај и веб страницу за брзо учитавање садржаја. Можете и ви скратите чланак док задржавате комплетан садржај, или једноставно уклоните непотребне слике. Усредсредите се на једноставност уместо на лепоту.
Ваша основна навигација је спасилац живота за ваше посетиоце који желе да се крећу између страница. На мобилном уређају, линкови екрана ће се појавити много мањи по природи, тако да је много теже додирнути. Битан подесак да се реши ово питање је максимизирајте фонт и простор за навигацијске везе, можда заузима цело подручје блока. Алтернативно можете дизајнирајте навигацијску траку да буде слична траци картице стварне иПхоне апликације, попут оне приказане изнад.
Израда мобилних ЦСС стилова
Сада када знамо како да оптимизујемо мобилни сајт за бољу читљивост и употребљивост, добро би било да говоримо о ЦСС стиловима. Свака листа стилова ЦСС-а садржи многе селекторе са својствима која се односе на фонтове, величине, поставке позиције и поставке приказа. Када је у питању мобилни телефон, требало би да обратите пажњу како блокови падају на своје место.
(Извор слике: Смасхинг Магазине)
Једна област за почетак је Вратите ширину омотача на ваш сајт у процент. Уобичајена је употреба пиксела као јединице за позиционирање, висину линије, величину фонта и ширину ДИВ-а, али када се ради о мобилним уређајима, жељет ћете да се ваше странице природни прелаз између сваког уређаја. Постављање див-а спремника на 100% ширине ће омогућити да садржај буде лако се пуни између режима портрета / пејзажа без преливања преко ивице.
Ако сте један од људи који желе да преуреде цео распоред, уверите се да јесте удари све са ресетовање. Такође све ставке, наслове и везе за навигацију дисплеј блок; тако да добијете тај линеарни осећај стила штампања. Поновно позиционирајте маргине и паддинг да бисте уклонили надимак са вашег распореда. Избегавајте табеле ако је могуће, јер они имају тенденцију да дају резултате између уређаја.
Велике слике су и гњаважа између уређаја. Већина слика на веб-сајту ће бити приказане веће од 480 пиксела и можда нећете желети да им се разбије контејнер. Прва опција је да поставите ширину на 100% тако да слике могу природно да се мењају. Свакако је могуће креирајте различите скупове слика за вашу веб локацију и учинити их другачије на основу агента претраживача, али искрено ово само додаје више радова на вашу страну, па покушајте користите технику само када је заиста потребна.
Дизајнирање сајтова за иПхоне
Удио мобилног тржишта је прилично велик и подијељен, али Аппле има велики дио колача са својим иДевицес. И иПхоне и иПад су мобилни уређаји који су спремни за Интернет са уграђеном функцијом екрана осетљивог на додир. Они имају исти подразумевани Веб прегледач, Сафари и читав низ других опција.
За сајтове специфичне за иПхоне потребно је да циљате величину екрана. Фиксна величина екрана је постављена на 320пк са 480пк за старије иПхоне моделе и 640пк по 960пк за иПхоне 4 и иПхоне 4С.
иПхоне екрани су ограничени на простор. Требало би да имате један блок садржаја који се протеже онолико дуго колико је потребно. Чување елемената у једној колони ће вам спасити главобоље и омогућавају распоред флуида “испунити” и портретни и пејзажни. За то ћете вероватно морати да развијете други предложак и пронађете начин да проверите да ли ваш посетилац користи иПхоне. Мали ПХП исечак испод треба да ради добро:
У основи, логика привлачи нашу глобалну $ _СЕРВЕР променљива за ХТТП агент и проверава да ли је реч “ипхоне” појављује се било где. Ако да, онда знамо да наш посетилац користи иПхоне и одатле можемо да ставимо нешто другачији ХТМЛ или чак потпуно нови изглед шаблона! То се такође може користити укључују стилски стил за иПхоне, промените наслове страница, уклоните слике или скоро било које динамичке ефекте.
Када се ради о послуживању нових стилова постоји лакши начин. Као што је раније поменуто, максимална величина екрана за иПхоне је широка 960пк. Зато са новим ЦСС3 медијским упитима можете додати стилове директно у главни стилски лист вашег сајта који ће само приказати на иПхонеу. Испод је мали пример кода:
@медиа екран и (мак-девице-видтх: 960пк) / * иПхоне цсс * /
Ово ради јер ЦСС сада може да открије агенте за прегледање и њихова својства. Максимална ширина екрана је једна од особина која се такође може детектовати.
Све-у-све мобилне веб-локације за иПхоне уређаје нису превише тешке за дизајнирање, постоје само превише примјера за упућивање, нпр., ЦСС иПхоне. Држите се заузетог проучавања и не бојте се експериментишите са новим техникама дизајна корисничког интерфејса.
Мобиле јКуери Сцриптинг
Већина фронт енд веб програмера је упозната са јКуери библиотеком. Нуди неке фантастичне скраћенице за ефекте кодирања, анимације, падајуће меније и мноштво других функционалности у прегледачу, и само постаје све сјајније са најавом јКуери Мобиле. То је не препоручује се директно скакање у технологију и учитајте вашу веб локацију са ефектима свуда, али за потребе тестирања, напредна функционалност може добро играти.
јКуери Мобиле је мало другачији од обичног јКуери-а јер вам даје пуну околину за надоградњу. Када радите са њиховим датотекама, они нису само ЈаваСцрипт, већ и ЦСС стилови за дугмад, везе и ефекте транзиције. И даље пишете веб странице у ХТМЛ коду, али јКуери Мобиле тим има испоручује много опција за дизајн корисничког интерфејса. Постоји много тога што можемо да урадимо са овим оквиром, али од тада оквир је још увијек у бета фази, држимо се једноставних ефеката.
Мали водич на ДевГров блогу пружа неке одличне примере. Званични сајт такође нуди демо верзије за вас. Имајте на уму да користимо ХТМЛ атрибут, дата-транситион да бисте додали ефекте анимације са било којом од унапред дефинисаних вредности. То укључује слајд, поп, флип, фаде, итд. Погледајте мали ДевГров пример да бисте добили укус ових ефеката.
Ефекти и прелази су прилично уредни, а чињеница да можете да направите цео мобилни интерфејс стриктно са јКуери-ом је такође велики корак напред за ову платформу, али са платформом само у бета верзији не бих препоручио да изградите ваш мобилни сајт са њиховој библиотеци, посебно са чињеницом да је то нису подржани од стране свих главних паметних телефона у вријеме писања (посебно Виндовс Пхоне 7), али са временом ће сигурно бити боље.
На крају препоручујем да се упознате са овим новим мобилним оквиром пре него што распоређивање уживо на било којем пројекту.
Корисни развојни алати
Мобилни програмери не траже само ресурсе за кодирање и дизајн. Такође постоји велика потражња за софтверским алатима и ИДЕ-овима, да не спомињемо моћне мобилне оквире. Веб развој је тежак задатак који захтева доста посвећености, али коришћење додатних алата ће учинити ваш посао много лакшим.
Опера Мобиле Емулатор
Тражите начин да провјерите како се ваш мобилни веб сајт приказује? Ово може бити велики проблем ако немате паметни телефон са приступом Интернету. Или не желите да користите свој паметни телефон да бисте тестирали сајт сваки пут када се ажурирање стави на ваш сервер. Па, Опера Мобиле Емулатор је фантастичан софтвер за тестирање вашег мобилног веб сајта.
Емулатор ради око 20 мобилних профила као што су Самсунг Галаки С, ХТЦ Десире, па чак и таблет као што је Моторола Ксоом. Такође је могуће подесити цустом ресолутион и густина пиксела за потребе интензивног тестирања. Најбоље од свега, не морате да радите превише конфигурационог посла, само направите неколико кликова и добро сте ишли.
Преузимање је потпуно бесплатно и софтвер ради у Мац ОС Кс и Виндовс окружењу. Њихови развојни инжењери тешко раде на креирању одговарајућих веб стандарда и прилагођавају свој мобилни рендеринг. Препоручујем њихове друге дев алате ако тражите додатне алате који ће вам помоћи на том путу.
ПхонеГап
Није било много АПИ-ја развијених преко ХТМЛ5 за изградњу чврстих мобилних апликација. Наиме, мобилном пејзажу недостају ове врсте сајтова, због чега ПхонеГап тако добро попуњава нишу. Њихова платформа вам омогућава лако конструисати апликације засноване на ХТМЛ5 као изворне апликације на 6 различитих платформи.
Процес функционише тако што прво компримује код и прослеђује га кроз апликациони оквир ПхонеГап. Одатле ваше апликације могу да допру до великог дела мобилног тржишта, укључујући Андроид, иОС, Виндовс Пхоне 7 и БлацкБерри.
Ако сте мало збуњени, не узрујавајте се превише. Њихове странице подршке уредно описују процес и нуде линкове на корисне ресурсе. Апликације које су већ развијене су састављене у прелепом портфолију у стилу библиотеке. Погледајте њихову комплетну колекцију апликација коју затим можете сортирати по уређајима са снимцима екрана.
Аптана Студио
Веб сајт Аптана је главна локација за учење о њиховим развојним алатима. Најновије издање пакета, Аптана 3.0.3, садржи потпуно интегрисани ИДЕ за веб развој, ЦСС стилове и ХТМЛ тагове, а најбољи део: Аптана је потпуно бесплатно за преузимање! Они нуде пакете за сва три главна оперативна система (укључујући Линук), што је велика погодност за програмере.
Оно што Аптану чини посебним је како брзо можете развити малу веб апликацију и тестирати свој дизајн. Студио апартман вам омогућава брзо развијати и тестирати веб апликацију која се покреће преко Руби он Раилс, ПХП, Питхон или једноставно ХТМЛ / ЦСС, и њихове карактеристике означавања кода су недавно побољшане укључују нове ХТМЛ5 и ЦСС3 библиотеке ознака. Такође долази са интеграцијом Гит-а, уграђеним терминалом, програмом за отклањање грешака у коду и прегршт других карактеристика.
Мобилни ГУИ сетови и иконе
Каква би била мрежа без лежаљки? За веб дизајнере важност корисничког интерфејса је изнад свих осталих. Једноставни ГУИ-и су тешки и само су најкреативнији дизајнери дошли до радних рјешења.
Међутим, постоје многи бесплатни, али квалитетни ресурси доступни за вас веб дизајнера да тестирате. Ови ГУИ сетови су углавном дизајнирани за Адобе Пхотосхоп или Фиреворкс гдје се можете кретати по елементима и извозити их као равне сликовне датотеке.
Иконе су веома згодан ресурс. Дизајнери креирају бесплатне сетове и нуде их онлине чешће него икада раније. Једна таква веб страница Глифисх има излог и бесплатних и професионалних икона. Ови дизајни су засновани на једној теми која се користи на мобилним предлошцима и дизајну апликација.
Наша колекција шаблона за израду прототипова мобилних уређаја ће вам бити од велике помоћи на путу развоја веб сајта и апликација. Не би требало да почнете са кодирањем док не добијете снажан графички интерфејс и ови веб пакети ће вас покренути на правом путу.
иОС 5 ГУИ Кит
иПхоне УИ Вецтор Елементс
иПхоне Апп Ицон Кит
Жичани магнет (ДИИ Кит)
ГУИ за Андроид Интерфаце
