Принципи респонзивног веб дизајна

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

У потрази за поузданим приступом заснованим на будућности, осмишљен је одговарајући или адаптивни дизајн. Фокус је на изградњи једне верзије изгледа која се аутоматски прилагођава различитим прегледачима или уређајима.

У овом чланку ћемо научити о респонзивном веб дизајну и основним принципима који ће вам помоћи да направите сјајну веб локацију.

Састојци за прилагодљив веб дизајн

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

Распореди флуида

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

Респонзивне јединице

Како прелазите на напреднији ЦСС, често ћете видети употребу рем и ем јединице за дужину уместо пк јединице. То је зато што је рем Јединица чини супер лаким скалирање целог изгледа. Подразумевано, 1рем је једнако 16пк јер је пропорционално величина фонта елемента, обично 16 пк. Међутим, можете поставити 1рем на 10 пиксела (или било коју другу вредност) ради лакших прорачуна, прилагођавањем величине фонта на највишем нивоу.

Флексибилне слике

Слике су главна брига при дизајнирању чак и најосновнијег изгледа. Увек морате водити рачуна да их правилно димензионишете тако да одговарају дизајну. Такође, подразумевано се не мењају са променама у приказу. Дакле, требало би да користите % за димензије ваших слика, заједно са мак-видтх својство.

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

Принципи респонзивног веб дизајна

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

Користите тачке прекида засноване на садржају

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

Мудро изаберите Веб фонтове и системске фонтове

Веб фонтови изгледају запањујуће! Имате бројне могућности да измените свој дизајн са згодним веб фонтовима. Али требали бисте знати да ће прегледачи морати да преузму сваки веб фонт. Више веб фонтова, више времена за преузимање. Насупрот томе, системски фонтови су муњевити. Ако корисник нема именовани системски фонт на свом локалном уређају, вратиће се на следећи фонт у гомила фонтова. Зато при избору фонтова узмите у обзир време учитавања и захтеве дизајна.

Оптимизујте битмап слике и векторе

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

Спроведите тестове за први одазив

Први део веб странице је приказ који посетиоци виде при првом учитавању, пре било каквог померања. Често укључује одељак хероја са прилагодљива трака за навигацију, уводна копија и медији, и ЦТА. Одзивност није ограничена само на мобилне уређаје. Такође бисте требали размислити о таблетима, играћим конзолама и другим екранима. Дакле, кључно је спровести честе тестове барем за први приказ веб странице. Можете да користите Цхроме ДевТоолс (Лигхтхоусе) да бисте тестирали квалитет веб странице.

Не скривајте садржај на мањим екранима

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

Управљајте распоредом помоћу угнежђених објеката

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

Респонзиван дизајн: Да ли прво треба да идете са рачунара или мобилног телефона?

Први приступ радној површини значи да ћете писати ЦСС за велике екране, а затим применити медијске упите да бисте смањили дизајн за мање екране. Насупрот томе, први приступ мобилним уређајима укључује писање ЦСС -а за мобилне уређаје, са мањим екранима, а затим примену медијских упита за проширење дизајна за веће екране. Главни фокус је свести веб локацију и апликације на апсолутно основно.

Ако тек почињете са прилагодљивим веб развојем, прво бисте требали да се обратите радној површини приступ, јер ћете на крају дана морати да слажете контејнер један на други на мобилном уређају уређаја. Иако је то потпуно лична одлука, први приступ мобилним уређајима помаже вам у структурирању ХТМЛ на бољи начин, док ће вам приступ на радној површини помоћи при изгледу и размаку техникама.

Топ 6 курсева за учење УКС дизајна

Ако желите да научите УКС дизајн или побољшате своје вештине, ево шест најбољих онлине курсева које можете похађати.

Прочитајте следеће

О аутору