Садржај
- Одзивне слике
- Перформансе
- Условно и лење утовар
- Одзивна типографија
- Упити за медије у ЈаваСцрипт-у
- Прогресивно побољшање
- Изглед
- Распоред ЦСС мреже
- Коначно
Одзивни веб дизајн звучи невероватно једноставно. Одлучите се за флексибилне решетке за распоред, користите флексибилне медије (слике, видео записе, ифраме-ове) и примените медијске упите за ажурирање ових мерења како бисте најбоље распоредили садржај у било ком прозору. У пракси смо научили да то заправо и није тако лако. Ситне потешкоће које се појаве током сваког пројекта чине нас гребањем главе, а повремено чак и резбањем ровова за нокте на радним столовима.
Откако сам почео да уређујем билтен Респонсиве Десигн Веекли, имао сам срећу да разговарам са многим члановима веб заједнице и чујем њихова искуства. Желео сам да сазнам тачно шта је заједница заиста желела да научи, па сам читаоцима послао анкету. Ево најбољих резултата:
- Одзивне слике
- Побољшање перформанси
- Одзивна типографија
- Упити за медије у ЈаваСцрипт-у
- Прогресивно побољшање
- Изглед
Имајући те теме на уму, водио сам низ подкаста питајући неке од наших лидера у индустрији за њихова размишљања. У њиховим одговорима једна тачка је била једногласна: усредсредите се на то да стекнете основе пре него што почнете да бринете о узбудљивим и напредним техникама. Враћајући ствари основним темама, могли смо да изградимо робустан интерфејс за све, наслажујући функције када то дозвољавају контекст уређаја или корисника.
’Па ... шта је са овим напредним техникама?’ Чујем како питате. Мислим да је Степхен Хаи то најбоље сажео када је рекао: ’Крајња техника управљања РВД је да се започне не коришћењем било каквих напредних техника РВД. Започните са структурираним садржајем и напредујте. Тачку прекида додајте само када се дизајн преломи и садржај то налаже и ... то је то. '
У овом чланку ћу започети са основама и додати слојеве сложености како ситуација дозвољава, да бих надоградио те напредне технике. Хајде да почнемо.
Одзивне слике
Флуидни медији су били кључни део РВД-а када га је први пут дефинисао Етхан Марцотте. ширина: 100%; , максимална ширина: 100%; и данас ради, али прилагодљиви пејзаж слике постао је много компликованији. Са све већим бројем величина екрана, густине пиксела и уређаја за подршку, жудимо за већом контролом.
Три главне бриге дефинисала је Респонсиве Имагес Цоммунити Гроуп (РИЦГ):
- Величина слике у килобајту коју шаљемо преко жице
- Физичка величина слике коју шаљемо на уређаје са високим ДПИ
- Обрезивање слике у облику уметничког правца за одређену величину оквира за приказ
Иоав Веисс је уз помоћ Индиегого-а одрадио већи део посла на имплементацији Блинк-а - Гоогле-ове вилице ВебКит-а, а док ово будете читали, биће испоручен у Цхроме-у и Фирефок-у. Сафари 8 ће испоручити срцсет, међутим атрибут величина је само у ноћним верзијама, а слика> још увек није примењена.
Доласком било чега новог у наш процес веб развоја, биће тешко започети. Прођимо кроз пример корак по корак.
имг! - Прогласите резервну слику за све прегледаче који не подржавају слике -> срц = "хорсе-350.јпг"! - У срцсет-у пријавите све величине слика. Укључите ширину слике користећи в дескриптор да обавестите прегледач о ширини сваке слике .--> срцсет = "коњ-350.јпг 350в, коњ-500.јпг 500в, коњ-1024.јпг 1024в, коњ.јпг 2000в "! - Величине обавештавају прегледач о изгледу наше веб странице. Овде говоримо за било који приказ који је већи од 64 ема, користите слику која ће заузимати 70% видног поља -> сизес = "(мин-видтх: 64ем) 70вв,! - Ако је видљиви део то велико, онда за било који приказни прозор који је већи од 37,5 дема користите слику која заузима 95% видног поља -> (минимална ширина: 37,5 ема) 95 вв,! - а ако је видљива површина мања од те, онда користите слика која заузима 100% оквира за приказ -> 100вв "! - увек има алт текст .--> алт =" Коњ "/>
Са становишта перформанси, није битно да ли у атрибуту сизе користите мин-видтх или мак-видтх - али је важан редослед извора. Прегледник ће увек користити прву одговарајућу величину.
Такође, имајте на уму да тешко кодирамо атрибут величине да бисмо га директно дефинисали у односу на наш дизајн. То може довести до проблема са померањем унапред. На пример, ако редизајнирате веб локацију, мораћете поново да посетите све слике имг> или пицтуре> и да поново дефинишете величине. Ако користите ЦМС, ово се може превазићи као део процеса израде.
ВордПресс већ има додатак за помоћ. Он дефинише срцсет на ВП стандардним сортама слика и омогућава вам да пријавите величине на централном месту. Када се страница генерише из базе података, она замењује сва помињања на имг> и замењује их маркирањем слике.
Басиц
- Размислите да ли заиста треба да укључите слику. Да ли је садржај језгре слике или је декоративан? Једна слика мање значи брже време учитавања
- Оптимизујте слике које треба да укључите помоћу програма ИмагеОптим
- Поставите заглавља истека за слике на серверу или .хтаццесс датотеци (погледајте детаље у одељку „Перформансе“)
- ПицтуреФилл пружа подршку за полифил слике
Напредно
- Лази лоад иоур имагес усинг јКуери'с Лази Лоад плугин
- За детекцију карактеристика користите ХТМЛИмагеЕлемент.Сизес и ХТМЛПицтуреЕлемент.
- Напредни додатак ПицтуреФилл ВП, који се налази на Гитхуб-у, омогућиће вам да дефинишете прилагођене вредности ширине и величине слике
Перформансе
Да бисмо постигли најбрже уочене перформансе на нашим страницама, потребни су нам сви ХТМЛ и ЦСС потребни за приказивање горњег дела наше странице у првом одговору сервера. Тај магични број је 14 кб и заснован је на максималној величини прозора загушења током првог повратног времена (РТТ).
Патрицк Хаманн, технички руководилац фронта у Гуардиану, и његов тим успели су да пробију препреку од 1000мс користећи мешавину фронтенд и бацккенд техника. Приступ Гуардиана је да обезбеди да се потребан садржај - чланак - испоручи кориснику што је брже могуће и унутар магичног броја од 14 кб.
Погледајмо процес:
- Корисник кликне на Гоогле везу до вести
- Појединачни захтев за блокирање шаље се у базу података за чланак. Не траже се повезане приче или коментари
- Учитава се ХТМЛ који садржи критични ЦСС
- у главу>
- Подузима се поступак „исеците сенф“ и учитавају се сви условни елементи засновани на карактеристикама уређаја корисника
- Сав садржај који се односи на сам чланак или га подржава (сродне слике чланака, коментари чланака и тако даље) лено се поставља на место
Оваква оптимизација критичне путање приказивања значи да је хеад> дугачак 222 реда. Међутим, критични садржај који је корисник видео да се и даље налази унутар почетног корисног терета од 14 кб када се гзипира. Управо овај процес помаже у пробијању те препреке за приказивање од 1000 мс.
Условно и лење утовар
Условно учитавање побољшава корисничко искуство на основу функције уређаја. Алати попут Модернизр-а омогућавају вам да тестирате ове функције, али имајте на уму да само зато што прегледач каже да нуди подршку, то не значи увек и потпуну подршку.
Једна од техника је задржавање учитавања нечега док корисник не покаже намеру да користи ту функцију. Ово би се сматрало условним. Можете да зауставите учитавање у друштвеним иконама док корисник не задржи показивач миша или не додирне иконе, или можете избећи учитавање ифраме Гоогле мапе у мање оквире приказа у којима ће корисник вероватно више волети повезивање са наменском апликацијом за мапирање. Други приступ је „исеците сенф“ - погледајте оквир горе за детаље о томе.
Лење учитавање је дефинисано као нешто што увек намеравате да учитате на страници - слике које су део чланка, коментари или други сродни чланци - али што не треба да буде ту да би корисник почео да троши садржај.
Басиц
- Омогућите гзиповање датотека и поставите заглавља истека за сав статички садржај (нетм.аг/екпире-260)
- Користите додатак Лази Лоад јКуери. Ово учитава слике када се приближавате видиковцу или након одређеног временског периода
Напредно
- Подесите брзо или ЦлоудФларе. Мреже за испоруку садржаја (ЦДН) испоручују ваш статични садржај корисницима брже од вашег сервера и имају неке бесплатне слојеве
- Омогућите СПДИ за прегледаче са омогућеним хттп2 да искористе хттп2 функције попут паралелних хттп захтева
- Социал Цоунт омогућава условно учитавање ваших друштвених икона
- Коришћење АПИ-ја за статичке мапе омогућиће вам да искључите интерактивне Гоогле мапе за слике. Пример Брада Фроста погледајте на нетм.аг/статиц-260
- Ајак Инцлуде Паттерн учитава исечке садржаја из атрибута пре-података, података-после или замене података
Одзивна типографија
Типографија је циљ да ваш садржај буде лако сварљив. Прилагодљива типографија ово проширује како би се обезбедила читљивост на широком спектру уређаја и прозора за приказ. Јордан Мооре признаје да је тип једна ствар на коју није вољан да се повуче. Ако желите, испустите једну или две слике, али уверите се да имате одличан тип.
Степхен Хаи предлаже да се величина ХТМЛ фонта постави на 100 процената (читајте: само га оставите онаквим какав јесте) јер сваки произвођач прегледача или уређаја даје разумљиво читљив подразумевани приказ за одређену резолуцију или уређај. За већину прегледача на радној површини ово је 16 пиксела.
С друге стране, Мооре користи РЕМ јединицу и ХТМЛ величину фонта да постави минималну величину фонта за одређене елементе садржаја. На пример, ако желите да редослед чланка увек буде 14 пиксела, поставите га као основну величину фонта у ХТМЛ елементу и поставите .билине {фонт-сизе: 1рем;}. Како скалирате тело: фонт-сизе: како би одговарало пољу за приказ, нећете утицати на стил .би-лине.
Важна је и добра дужина линије за читање - циљајте на 45 до 65 знакова. Постоји обележивач којим можете да проверите садржај. Ако својим дизајном подржавате више језика, дужина реда такође може да варира. Мооре предлаже коришћење чланка: ланг (де) артицле {мак-видтх: 30ем} да би се покрили сви проблеми.
Да бисте одржали вертикални ритам, поставите маргин-боттом према блоковима садржаја, ул>, ол>, блоцккуоте>, табле>, блоцккуоте> и тако даље, на исту висину линије. Ако се ритам прекине увођењем слика, можете га поправити додавањем Баселине.јс или БаселинеАлигн.јс.
Басиц
- Темељите свој фонт на 100% телу
- Рад у релативним ем јединицама
- Поставите маргине на висину линије како бисте одржали вертикални ритам у дизајну
Напредно
- Побољшајте перформансе учитавања фонтова помоћу Енханце.јс или одложеног учитавања фонтова
- Користите Сасс @инцлудес за семантичка заглавља.
- Често морамо да користимо стил х5 у виџету бочне траке који захтева ознаку х2. Користите Беардед-ове типографске комбинације за контролу величине и останите семантични са доњим кодом:
.сидебар х2 {@укључи наслов-5}
Упити за медије у ЈаваСцрипт-у
Од када смо путем медијских упита могли да контролишемо распоред у различитим приказима, тражимо начин да то повежемо и са покретањем нашег ЈаваСцрипт-а. Постоји неколико начина за активирање ЈаваСцрипт-а на одређеним ширинама, висинама и оријентацијама приказа, а неки паметни људи написали су неке једноставне ЈС додатке попут Енкуире.јс и Симпле Стате Манагер. Можете чак и сами да направите ово помоћу матцхМедиа. Међутим, имате проблем са којим требате да дуплирате своје медијске упите у ЦСС-у и ЈаваСцрипт-у.
Аарон Густафсон има уредан трик који значи да не морате да управљате медијским упитима у ЦСС-у и ЈС-у и да их подударате. Идеја је првобитно потекла од Јереми Кеитха и у овом примеру Густафсон ју је спровео у потпуности.
Користећи гетАцтивеМК (нетм.аг/медиа-260), убризгајте див # гетАцтивеМК-ватцхер на крај елемента тела и сакријте га. Затим у оквиру ЦСС-а поставите # гетАцтивеМК-ватцхер {фонт-фамили: бреак-0;} на први медијски упит, фонт-фамили: бреак-1; другом, породица фонтова: бреак-2; до трећег и тако даље.
Скрипта користи ватцхРесизе () (нетм.аг/ресизе-260) да провери да ли се величина приказа приказа променила, а затим чита активну породицу фонтова. Сада ово можете да користите за прикључивање ЈС побољшања попут додавања интерфејса са картицама у дл> када то омогућава приказ, мењање понашања лајтбокса или ажурирање изгледа табеле података. Погледајте гетАцтивеМК Цодепен на нетм.аг/ацтиве-260.
Басиц
- Заборавите на ЈаваСцрипт за различите оквире приказа. Пружите корисницима садржај и функције веб страница на начин да им могу приступити у свим оквирима приказа. ЈаваСцрипт нам никада не би требао бити потребан
Напредно
- Проширите Густафсон-ову методу користећи Бреакуп као унапред дефинисану листу медијских упита и аутоматизујући креирање листе породица фонтова за гетАцтивеМК-ватцхер
Прогресивно побољшање
Уобичајена заблуда о прогресивном побољшању је да људи мисле: „Ма, не могу да користим ову нову функцију“, али заиста, управо је супротно. Прогресивно побољшање значи да можете да испоручите функцију ако је подржана само у једном или чак без прегледача, а временом ће људи добијати све бољи доживљај како нове верзије стижу.
Ако погледате основну функцију било ког веб сајта, можете га испоручити у облику ХТМЛ-а и учинити да обрада изврши читаву страну сервера. Уплате, обрасци, свиђања, дељење, имејлови, контролне табле - све се то може учинити. Једном када је основни задатак изграђен, онда на то можемо сложити сјајне технологије, јер имамо заштитну мрежу која ће ухватити оне који пропадну. Већина напредних приступа о којима смо овде говорили засновани су на прогресивном побољшању.
Изглед
Једноставно је рећи флексибилан распоред, али он има много различитих приступа. Направите једноставне распореде мреже са мање ознака помоћу селектора: нтх-цхилд ().
/ * прогласи прву мобилну ширину мреже за мрежу * / .грид-1-4 {флоат: лефт; ширина: 100%; } / * Када је оквир за приказ најмање 37,5ем, онда подеси мрежу на 50% по елементу * / @медиа (мин-ширина: 37,5ем) {.грид-1-4 {видтх: 50%; } / * Очистите флоат сваки други елемент НАКОН првог. Ово циља 3., 5., 7., 9. ... у мрежи. * / .Грид-1-4: нтх-оф-типе (2н + 1) {цлеар: лефт; }} @медиа (мин-ширина: 64ем) {.грид-1-4 {ширина: 25%; } / * Уклони претходни брисак * / .грид-1-4: нтх-оф-типе (2н + 1) {цлеар: ноне; } / * Очистите флоат сваки 4. елемент НАКОН првог. Ово циља 5., 9. ... у мрежи. * / .Грид-1-4: нтх-оф-типе (4н + 1) {цлеар: лефт; }}
Махните збогом коришћењу положаја и лебдења за ваше распореде. Иако су нам до данас добро послужили, њихова употреба за изглед била је неопходан хак. Сада у блоку имамо двоје нове деце која ће помоћи да се поправе све наше невоље у распореду - Флекбок и решетке.
Флекбок је одличан за појединачне модуле, контролишући распоред садржаја унутар сваког од модула. Постоје изгледи које покушавамо да испоручимо, а који се лакше могу постићи коришћењем Флекбок-а, а то је још тачније код респонзивних веб локација. Више о овоме потражите у водичу ЦСС трикова за Флекбок или Флекбок Полифилл.
Распоред ЦСС мреже
Мрежа је више за распоред на макро нивоу. Модул Распоред мреже пружа вам одличан начин да опишете свој распоред у ЦСС-у. Иако је тренутно још увек у фази израде, препоручујем овај чланак о распореду ЦСС мреже Рацхел Андрев.
Коначно
Ово је само неколико савета за проширивање ваше одзивне праксе. Приближавајући се било ком новом одговорном послу, направите корак уназад и уверите се да сте правилно стекли основе. Започните са побољшаним садржајем, ХТМЛ-ом и слојевима и неће бити ограничења у томе где можете да преузмете своје дизајне.
Овај чланак се првобитно појавио у броју 260 од нет магазине.
