Пре него што потрошите предуго размишљајући о тачним резолуцијама монитора за свој дизајн, требате имати на уму да сав савремени веб дизајн реагује, што значи да је направљен за прилагођавање различитим резолуције екрана. Једним дизајном треба да подржите све, од најмањих мобилних екрана до ултра ХД стоних монитора.
Са прилагодљиви веб дизајн, успостављате општији распоред за мобилне уређаје, таблете и радне површине. Када и како ће се сваки елемент странице поставити на своје место за ове изгледе, одређују се посебне тачке прекида уписане у ваш ЦСС. Те тачке прекида одређене су одређеним уобичајеним резолуцијама екрана.
Иако нећете циљати одређене резолуције или поставити фиксну величину за своје дизајне, размотрићете екран резолуције у успостављању тачака прекида и стварању глатких прелаза, тако да ваша веб локација изгледа добро на свим уређајима и Величина екрана.
Уобичајене резолуције радне површине
- 1280к720 Стандардни ХД - Овог можда знате боље као 720п. Била је то стандардна ХД резолуција када је ХД први пут постајао уобичајен. Вероватно нећете пронаћи много нових монитора који користе ову резолуцију, али има их још увек у дивљини од када су били популарнији.
- 1366к768 - То је нешто необичне резолуције, али је веома популарно код мањих преносних рачунара и неких таблета. Ако имате посла са нижим нивоом Цхромебоок-ови, постоји велика шанса да је ово резолуција коју циљате.
- 1920к1080 Најчешћи - Када размишљате о радним површинама, вероватно имате посла са 1920к1080, познатијим као 1080п. Ова резолуција је апсолутно свуда. Већина монитора за рачунаре је и даље 1080п, а има и пуно преносних рачунара у пуној величини. Такође ћете наћи пристојан удео таблета у 1080п и у пејзажу.
- 2560к1440 - 1440п је још једна необична средина на слици резолуције монитора. Виши је од онога што бисте сматрали 2к, али није баш 4к. Упркос томе, то је уобичајена резолуција на тржишту гаминг монитора и приступачна је алтернатива за пуне 4к. У зависности од ваше веб локације, можда вреди или не мора подржати 1440п.
- 3840к2160 Тхе цлосе футуре - Ово је пуни 4к или Ултра ХД. Иако су 4к обично резервисани за врхунске рачунаре, цене падају, графичка технологија се побољшава, а потражњу за 4к покреће тржиште телевизора, где је то много чешће. Сигурно је претпоставити да ће током следећих неколико година 4к лако престићи 1080п као де-фацто стандард, тако да сада свакако вреди рачунати 4к.
Уобичајене резолуције таблета / пејзажа
Таблети можда нису толико популарни као некада, а чини се да су све веће величине телефона упарене са конвертибилним преносним рачунарима значајно умањене у њиховом тржишном уделу. Чак и даље, рачуноводство резолуција таблета значајно се преклапа са десктопом и преносним рачунарима. Можда ћете моћи да користите тачке прекида за таблете да бисте креирали тачке прекида за одређене узнемирујуће елементе који се не уклапају тачно у одређеним резолуцијама.
- Такође бисте апсолутно требали узети у обзир резолуције таблета за уређаје који се држе у портретном режиму. Неће сви прегледати на таблету који се налази у пејзажу, па бисте требали додати бар једну тачку прекида за уобичајени таблет који се држи у усправном положају.
- 1280к800 Резолуција која је некада била уобичајена - Старије таблете, ниже таблете и мање таблете обично имају неке од Амазон-ових таблета Фире такође и даље користе 1280к800. Ово је једна од последњих заиста мобилних резолуција на таблетима.
- 1920к1200 Уобичајено на таблетама од 7 и 8 инча - У пејзажу се већину времена можете поуздати у исте тачке прекида као 1080п. Међутим, када видите једно од ових у пејзажу, ситуација је много другачија. Ова резолуција је честа међу већином таблета од 7 и 8 инча, укључујући Амазон Фире.
- 2048к1536 Аппле таблете -Ово је Аппле-ова најчешћа резолуција таблета. Довољно је сличан 1440п да направи врло малу разлику, али опет, портрет је необичан. У сваком случају, добра је идеја тестирати своју веб локацију у овој резолуцији како бисте били сигурни да се на иПад-има не догађа ништа чудно.
Таблети веће резолуције почињу да улазе на територију радне површине. У већини случајева не морате ни да их узимате у обзир јер резолуција спада у опсег који сте већ узели у обзир. Увек је добра идеја да тестирате како бисте били потпуно сигурни.
Уобичајене мобилне резолуције
Мобилни уређаји су најкомпликованији за руковање. Постоји тако разноврстан спектар уређаја, укључујући старије који се још увек користе, па их није лако покрити. Због тога је дизајн за мобилне уређаје толико популаран. Филозофија је једноставна. Прво започните с најједноставнијим дизајном за мобилне уређаје и градите на њему за све веће и веће екране. На овај начин раде и најстарији и најмањи уређаји, али са мање садржаја и мање функција. Веб локација није сметња, она једноставно прво приказује само најважније информације којима се најчешће приступа.
Ево занимљивог трика за бављење телефонима; окрените резолуције радне површине на своју страну. Наравно, постоје необични оутлиери, али већина тренутних телефона следи овај образац.
- 720к1280 уобичајено на старијим уређајима - неколико година 720п окренути на бок био је најчешћи стандард за мобилни уређај. У том случају не морате да бринете о режиму пејзажа, јер је исти као и 720п на радној површини. Само покријте резолуцију портрета ширином од 720 пиксела.
- 1080к1920 средина - 1080п је стандард већ дуже време. То је још увек врло често на уређајима средњег опсега. Ако ћете подржати само једну мобилну резолуцију, то је то.
- 1440к2560 тренутни врхунски - Мобилни уређаји постају све већи, а екрани све веће и веће резолуције. 1440п је занимљив стандард јер постоји низ ширина екрана - у овом случају дужина - које спадају у тај опсег. На радној површини и мобилном уређају, најчешћи је 1440к2560. То даје екрану уобичајени однос ширине и висине 16: 9. На мобилним уређајима то је мало мање од стоних рачунара, јер дужина уређаја не утиче много на ваше дизајне.
Пре него што са задовољством подржите само три мобилне резолуције, требало би да схватите и да неки људи користе смешно старе телефоне са сићушним екранима. Увек бисте требали уградити минималну резолуцију како бисте осигурали да ваша веб локација изгледа добро чак и некоме ко користи телефон од пре неколико година.
Једноставни савети које треба имати на уму
Лако је узети гомилу чињеница о резолуцијама екрана, отицању воде и почети се ругати дизајну, а управо тада наиђете на невоље. Постоји неколико кључних идеја које морате имати на уму кад год дизајнирате веб локацију, а оне се држе у већини, ако не и свим ситуацијама.
- Респонзивни дизајн је флуидан - Можда осећате склоност да у свој ЦСС уградите масиван низ тачака прекида како бисте уважили сваку могућу величину екрана и ситуацију. То је сјајан начин да излудиш себе. Прилагодљиви веб дизајн треба да буде довољно флексибилан да попуни празнине и неправилности. Ако утврдите да дефинишете превише статичних бројева, било да се ради о медијским упитима или за саме елементе, вероватно сте кренули погрешним путем.
- Људи не повећавају увек свој претраживач - Ова врста иде паралелно са претходном тачком. Можете дизајн за величине екрана, али када неко не максимизира прозор свог прегледача, све то оде у дим. Ако задржите ствари у својој дизајнерској течности, можете да избегнете проблеме са различитим величинама прозора прегледача.
- Тестирај све - Покушајте да разбијете своју веб локацију. Само тако ћете пронаћи све грешке и недоследности које ће покварити искуство посетиоца. Цхроме има уграђене алате за тестирање резолуција уређаја са комплетном листом популарних уређаја за рад. Увек имате могућност да сами превучете прозор прегледача у различите величине како бисте видели и како веб локација изгледа различитих величина и како се прилагођава и ломи.
- Не очекујте да ће ваши корисници имати најновије и најбоље - Ово се враћа на претходну тачку о старијим телефонима и малим резолуцијама. Не можете очекивати да људи имају нове уређаје. То се односи и на резолуцију екрана и на процесорску снагу. Учитавање странице са превише графике и превише ЈаваСцрипт је добар начин да људи са спорим уређајем оду и никад се не врате.