Одговарајући веб-изгледи за мобилне екране Увод, савети и примери

Овај чланак је део нашег "Серија веб дизајна" - који се састоји од алата, ресурса и туторијала који ће вам помоћи да креирате веб странице за кориснике свих платформи. Кликните овде да бисте видели више чланака из исте серије.

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

Са таквом шемом дизајна течности постоје очигледне предности и недостаци. Размотрите моје примере у наставку о томе како прилагодљив веб дизајн може учинити прелазак на мобилне уређаје једноставнијим.

Како одговара Респонсиве Десигн

Када користим реч “респонсиве” у смислу веб дизајна, мислим да цео изглед одговара на основу резолуције корисника. Замислите овај сценарио: читате веб сајт на једном таблету, а затим прелазите на други уређај из неког разлога. Прозор прегледача је сада промењен. Одговарајући изглед веб дизајна ће имати шеме и распоред који ће се грациозно распасти и поново изумити. Из перспективе употребљивости ово је сјајна техника.

Одговарајући дизајн је све о стварању хомогеног искуства без обзира на величину екрана претраживача или уређаја. Нашао сам савршен пример из 'А Лист Апарт' да бих илустровао своју тачку, која такође укључује динамичке слике. Ширина се поставља у ЦСС-у користећи проценте за већину свих интерних елемената контејнера. Већа веб-мјеста такођер добро реагирају на уклањање динамичког садржаја као што је ЈаваСцрипт када није подржан.

Зашто дизајн за мобилне уређаје?

Постало је очигледно да се више корисника креће мобилним, а не само за он-тхе-го претраживање интернета. Таблет рачунари су почели да се мењају у контексту када су корисници онлине у учионици. Дизајн за мобилне уређаје је свакако захтјев у модерним веб стандардима. Једини проблем је да одаберете начин развоја и да адекватно циљате своју публику.

Када почнете са кодирањем за одређене резолуције екрана, завршавате са превише стилова за обраду. Медијски упити у ЦСС3 се могу користити за израду иПхоне-специфичних изгледа за портрет и пејзаж. Пошто можете одредити густину пиксела, лако је преобликовати било који ХТМЛ предложак за мобилне уређаје.

(Извор слике: брадфроствеб)

Али када кодирате изглед за одговарајући дизајн, мобилни аспекти се подразумевају. И десктоп и мобилним корисницима ће бити понуђено слично искуство и нећете морати да бринете о спољним ЦСС својствима. Једино истраживање које је потребно извршити је планирање за најмањи могући екран. Подаци о саобраћају услуге Гоогле Аналитицс могу бити веома корисни за то.

Вероватно нећете успети да ваш сајт функционише 100% на сваком уређају који покреће сваки претраживач. Али можете циљати већину на основу просјечне ширине екрана. Старији иПхоне модели користе 320 × 480 резолуцију екрана која није тако невероватна. Пуцао бих за минималну ширину од 240 пиксела, или чак и мању ако је можете прилагодити.

Уклањање подразумеваног зумирања

Ако сте провели било које вријеме прегледавајући Веб на паметном телефону, примијетит ћете како су веб-локације скалиране како би се у потпуности приказале унутар заслона. Ово је за корисникову погодност јер већина веб сајтова нема мобилну копију, тако да је потпуни изглед најбезбеднија опклада.

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

То је познато као виевпорт мета таг која поставља неке прилагођене варијабле унутар садржаја. Аппле има страницу са документацијом која се односи на неколико других мета ознака које треба да погледате, мада су оне посебно усмерене ка веб локацијама на иОС-у. Тхе почетна скала Вредност је важна јер то подразумијева вашу веб локацију до 100% зумирања.

Последња вредност за прилагодљив кориснику уклања ову функцију зумирања тако да корисник не може да промени величину изгледа. Ово ће закључати дизајн у једну величину на основу ширине пуног уређаја. Имајте на уму да чак и ако онемогућите функцију зумирања добар дизајн ће се прилагодити при преласку са портрета на пејзаж на било ком уређају! Али има смисла закључати одговарајући дизајн и уклонити опште опције скалирања.

Динамичко скалирање слике

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

имг мак-видтх: 100%;

Стандардно правило за ЦСС је да примени својство мак-видтх на све слике. Пошто ће они увек бити постављени на 100%, никада нећете приметити дисторзије. Када корисник промени величину прозора свог претраживача мању него што се слика може обрадити, аутоматски ће се поново подесити на 100% ширину. Проблем је у томе што Интернет Екплорер не може да разуме ову особину, тако да ћете морати да саставите ИЕ-специфични стилски стил помоћу ширина: 100%;.

Флексибилне слике су такође могуће ако користите ЈаваСцрипт или јКуери додатке. Постоје неки заиста паметни развојни инжењери који су уложили време да изграде невероватно одговарајући сликовни садржај. Ова нит је само једна од многих у Стацк Оверфлов-у која има необичан али практичан приступ решавању ИЕ6 / 7 бугова.

Лично бих препоручио да се придржавам природне промене величине ЦСС-а. Ако се ваш веб сајт покреће у мобилном претраживачу са омогућеним ЈаваСцриптом, вероватно ће подржавати и ЦСС. Ако заиста желите да дубље копате, погледајте овај чланак са 24 начина за адаптивне дизајне ...

Тоуцхинг Десигнс

Веб програмери могу заборавити да мобилни корисници више нису на телефонима са тастатуром као што је БлацкБеррис. Већина паметних телефона данас користи интерфејсе са екраном осетљивим на додир, који приказују сценарио различит од поставки миша и тастатуре.

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

Такође је добра пракса да се повећа величина ових веза за навигацију. Мобилни корисници немају луксуз великог екрана који се нуди на десктопу или чак на лаптоп рачунарима. Потребно је да текст буде велик, унапред, да буде доступан и читљив по сваку цену. Можда чак желите да промените величину ако корисник пребацује између портретног и пејзажног приказа - прилично уобичајено понављање приликом прегледавања мобилног веба.

Цустом ЦСС Лаиоутс

Уопштено, најбоље је прилагодити свој изглед и омогућити природну деградацију вашег садржаја. Ако имате бочну траку и област са садржајем, требало би да их поставите у ширину процента или емс, све што ће се променити у прозору претраживача. Ако примените а мин-видтх ово ће на крају прекинути део распореда; тако да сад садр¾ај сидебара приказује изнад садр¾аја странице.

(Извор слике: Пепперсон)

Када размотрите како то утиче на укупан дизајн, много је лакше развити екстерне стилске листове. Међутим, вероватно ћете наићи на резолуције екрана које су сувише мале за приказивање. Ово је савршен сценарио за додавање прилагођених ЦСС својстава да би се уклонили делови странице или да се садржај поново реформатише.

Укључи / искључи додатни садржај

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

Ова алтернатива је савршена за одржавање ваше почетне странице динамичном и пуном богатих веб медија. Умјесто потпуног уклањања падајуће навигације или прерасподјеле структуре странице, можете је сакрити унутар садржаја див. Ако корисник жели да прикаже ваше везе, они додирују дугме да би отворили / затворили мени.

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

Коришћење упита за медије

Ако би екран са мобилним уређајем прекинуо приказ 2 или 3 колоне, завршићете тако да свака од области садржаја буде једна изнад друге. Чини се да ће читава локација прокрварити и може бити врло збуњујућа без истакнутих блок подручја. Боља идеја је да додате доњу границу на сваку колону, само за мобилне уређаје, користећи екстерни стилски стил мобиле.цсс.

Са овим новим стиловима ваш садржај је подељен у дељиве делове. Горенаведени атрибут медија посебно је дизајниран за циљање старијих иПхоне уређаја у пејзажном приказу. Али то ће се такође применити на уређаје са екранима мањим од 480 пиксела. Користите ово у своју корист тако да можете одредити у којој тачки изгледа “разбија”.

Постоји још неколико опција које можете користити за откривање оријентације уређаја. Овај фантастичан водич за ЦСС медије може вам дати неколико идеја. Поред тога, нови мобилни пројекат 320 и горе нуди предложак за мобилни ЦСС @медиа стилес. Они се могу директно укључити у исти мобиле.цсс фајл и применити правила за многе различите уређаје.

 / * Смартпхонес (портрет и пејзаж) ----------- * / @медиа само екран и (мин-девице-видтх: 320пк) и (мак-девице-видтх: 480пк) / * Стилес * / / * Смартпхоне (пејзаж) ----------- * / @медиа само екран и (мин-видтх: 321пк) / * Стилес * / / * Смартпхоне (портрет) ---- ------- * / @медиа само екран и (мак-видтх: 320пк) / * Стилови * / / * иПадс (портрет и пејзаж) ----------- * / @ екран само за медије и (мин-девице-видтх: 768пк) и (мак-девице-видтх: 1024пк) / * Стилес * /

(Извор: Хардбоилед ЦСС3 Медиа Куериес)

Хелпфул Тоолс

Скелетон - Беаутифул Боилерплате фор Респонсиве Мобиле Десигн
Прелазак из адаптивног у потпуно одговарајући

Сховцасе: Беаутифул Респонсиве Десигнс

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

виси на месецу