Дизајн веб страница за мобилне уређаје

click fraud protection

Шансе су да сте видели како иПхоне може да окреће и проширује веб странице. Може вам на први поглед приказати целу веб страницу или увећати текст како бисте учинили текст који вас занима читљивим. У једном смислу, од иПхоне користи Сафари, веб дизајнери не би требало да раде нешто посебно да би креирали веб страницу која ће радити на иПхоне-у. Али да ли заиста желите да ваша страница само ради - или се истиче и блиста?

Када ти направи веб страницу, треба да размислите о томе ко ће га гледати и како ће га гледати. Неке од најбољих веб локација узимају у обзир на ком типу уређаја се страница гледа, укључујући резолуцију, опције боја и доступне функције. Не ослањају се само на уређај да би то схватили.

Опште смернице за изградњу веб локације за мобилне уређаје

  • Тестирајте на што већем броју уређаја. Прво што треба да урадите је да прегледате своју веб локацију на иПхоне-у и на толико различитих мобилни уређаји или емулаторе колико можете. Иако можете да користите емулаторе за сва своја тестирања, они вам заиста не дају исти осећај као да покушавате да се крећете кроз веб страницу на малом малом екрану. Требало би да тестирате на стварним уређајима што је више могуће.
    instagram viewer
  • Нека се ваше странице грациозно деградирају. Можете писати своје странице за Омогућен блиц, широко екрански прегледачи, али уверите се да су кључне информације видљиве чак и на мајушном монитору који не може да обрађује никакве посебне функције (попут колачића, Ајак-а, Фласх-а, ЈаваСцрипт-а итд.). Све осим КСХТМЛ Басиц-а превазићи ће неке мобилне телефоне. Иако већина паметних телефона може да се носи са свим тим стварима, други мобилни уређаји не могу.
  • Направите страницу специфичну за бежичну мрежу - и олакшајте је проналажењу. Ако намеравате да направите одређену страницу за кориснике мобилних телефона и бежичних мрежа - учините је доступном. Одличан начин је да везу до бежичне странице поставите на сам врх документа, а затим сакријете ту везу од ручних уређаја који користе ручни тип медија. Напокон, већина људи долази на вашу почетну страницу, чак и на мобилним телефонима - а ако веза до ваше бежичне странице не постоји, напустиће је ако је страница претешка за употребу.

Изглед веб странице за паметне телефоне

Прва ствар коју бисте требали имати на уму приликом писања страница за тржиште паметних телефона је да не морате да правите никакве промене ако то не желите. Сјајна ствар код већине доступних паметних телефона је што користе Вебкит прегледаче (Сафари на иОС-у и Цхроме на Андроид-у) прикажите веб странице, па ако ваша страница изгледа добро у Сафарију или Цхромеу, изгледаће добро на већини паметних телефона (само пуно мања). Али постоје ствари које можете учинити како бисте доживљај прегледања учинили пријатнијим:

  • Запамтите да је екран мали. Паметни телефони ће сажети све те колоне у сићушни прозор, а то их може учинити веома тешким за читање без зумирања. Већина корисника је навикнута на зумирање, али може постати заморно. Једна дуга колона текста је лакша за читање.
  • Поделите странице на мање делове. Читати дугачке сегменте текста на мобилном телефону може бити тешко, па их стављање на више страница олакшава читање.

Везе и навигација на иПхоне уређајима

  • Што су УРЛ адресе краће, то боље. Ако сте икада покушали да укуцате УРЛ адресу на мобилном телефону, знаћете да то мучи (осим можда за тинејџере који су навикли да шаљу пуно текстуалних порука). Чак је и на иПхонеу досадно куцати дугачке УРЛ адресе. Нека буду кратки.
  • Али лакше је додирнути текст дугачких веза. Када се на страници налазите неколико одвојених речи повезаних са различитим чланцима, у непосредној близини, може бити веома тешко додирнути тачну реч без зумирања. Многи људи ће једноставно одустати и отићи негде другде. Везе са 3 до 5 речи лакше је кликнути на телефону него везе од 1 речи.
  • Не стављајте навигацију на сам врх екрана. Нема ништа досадније од потребе да листате екране и екране веза да бисте пронашли жељене информације. Ако сте погледали веб странице дизајниране за мобилне телефоне, видећете да су прве ствари које се појављују садржај и наслов. Затим, испод тога је навигација.
  • Не бојте се сакрити навигацију.Сакривање веза за навигацију са ЦСС-ом или ЈаваСцрипт-ом и чинећи их да се појављују само када корисник то затражи, начин је који олакшава страницу корисницима паметних телефона.

Савети за слике на паметним телефонима

  • Слике морају бити мале. Да, Андроид и иПхоне могу да увећавају и умањују слике, али што су мање, и у димензијама и у времену преузимања, ваши бежични корисници ће бити сретнији. Оптимизација слика је увек добра идеја, али за странице мобилних телефона је пресудно.
  • Слике се морају брзо преузети. Слике заузимају пуно простора на веб страницама када их гледате са мобилног уређаја. И док су често врло лепе и чине да странице изгледају боље када их гледате у веб прегледачу преко целог екрана, често им то испречи на мобилном уређају. Поред тога, када је корисник паметног телефона на мобилној мрежи, последња ствар коју желе да плате је преузимање гомиле огромних слика или икона за навигацију.
  • Не стављајте велике слике на врх странице. Баш као и код навигације, и на самом врху странице може бити врло досадно чекати да се слика учита 3 до 4 екрана. А ово је изузетно често на веб страницама. Једини изузетак је ако читалац зна да ће добити слику кад кликне, рецимо у фотогалерији.

Шта треба избегавати приликом дизајнирања за мобилне уређаје

Постоји неколико ствари које бисте требали избегавати када правите страницу прилагођену мобилним уређајима. Као што је горе поменуто, ако заиста желите да их имате на својој страници, можете, али побрините се да веб локација ради без њих.

  • Фласх: Већина мобилних телефона не подржава Фласх, па није добра идеја да га укључите на своје бежичне странице.
  • Колачићи: Многи мобилни телефони немају подршку за колачиће. иПхоне уређаји јесу подршка за колачиће.
  • Оквири: Чак и ако их прегледач подржава, размислите о димензијама екрана. Оквири једноставно не функционишу на мобилним уређајима - врло их је тешко или немогуће прочитати.
  • Столови: Не користите табеле за распоред на мобилној страници. И покушајте да избегавате табеле уопште. Нису подржани на свим мобилним телефонима (иако их подржавају иПхоне и други паметни телефони) и на крају можете да добијете чудне резултате.
  • Угњежђене табеле: Ако морате да користите табелу, побрините се да је не угнезди у другој табели. Тешко их подржавају прегледачи за рачунаре и, у најбољем случају, успоравају учитавање странице.
  • Апсолутне мере: Другим речима, не дефинишите димензије предмета у апсолутним величинама (попут пиксела, милиметара или инча). Ако нешто дефинишете као 100 пиксела ширине, на једном мобилном уређају то може бити половина екрана, а на другом двоструко већа ширина. Релативне величине (као што су емс и проценти) најбоље функционишу.
  • Фонтови: Не претпостављајте да је било који од фонтови на који сте навикли да ће приступ бити доступан на мобилним телефонима.
instagram story viewer