Мундариҷа
- Тарҳрезии номаълум
- Равиши прагматикӣ ба тарроҳӣ
- Табдил додани тарҳбандӣ
- Рамзгузории тадриҷан
- Ғаввосӣ дар тамға
Чунин ба назар мерасад, ки имрӯзҳо ҳама дар бораи тарроҳии веб ҷавобгӯ ҳастанд ва бо сабабҳои узрнок; азбаски шумораи дастгоҳҳои бо истифодаи веб пайваста меафзояд - ҳар кадоме дорои қобилият ва хусусиятҳои мухталиф - сохтани вебсайтҳои паҳнои собит дигар оқил нест.
Ҳақиқат он аст, ки ҳеҷ гоҳ набуд. Бо вуҷуди ин, то имрӯз таҷрибаи беҳтарини тарроҳии таҷрибаҳо ҳисобида мешуд, ки як қатор пиндоштҳо доштанд, хоҳ атрофи ҳалли экран, паҳнои банд ё усули вуруд. Агар шумо ягон вебсайти васеи 960px тарҳрезӣ карда бошед, танҳо барои дидани он дар нетбуки хурди дӯсти худ (ва ҳа, ман аз таҷрибаи дардовар дар ин ҷо менависам), шумо мефаҳмед, ки чаро ин усули махсусан оқилона набуд. Ҳоло, бо смартфонҳо ва планшетҳое, ки ба омехта партофта шудаанд, маълум аст, ки усулҳои суннатии мо дигар ба мақсад мувофиқат намекунанд.
Хушбахтона, пайдоиши дархостҳои васоити ахбори оммаи CSS ва афзоиши эътирофи торафт афзояндаи он, ки веб худ аз худ маънои онро дорад, маънои онро дорад, ки мо табиати ҳақиқии платформаро қабул карда истодаем ва қабул мекунем, ки универсалии он қувват аст, на сустӣ.
Дар тӯли панҷ рӯзи оянда, ман шуморо бо усули роҳнамоӣ мекунам, ки ин ҳақиқатро эътироф кунад: тарроҳии веб ҷавобгӯ аст. Инро Этан Маркотте таҳия кардааст, ки ин тарҳҳои моеъ, тасвирҳои фасеҳ ва дархостҳои ВАО-ро дар бар мегирад, то ба мо дар сохтани сайтҳое кумак кунанд, ки ба ҳама гуна муҳити рӯ ба рӯ мутобиқат кунанд.
Ман ин равишро бо нишон додани он, ки чӣ гуна як галереяи оддии ВАО-ро нишон медиҳам. Дар мисолҳои худ, ман як вебсайти хурд эҷод мекунам, то сафари ҳунарии ба қарибӣ дар саросари Иёлоти Муттаҳида гузаронидаро сабт кунам, аммо озодона рамз ва тарҳрезиро мутобиқ ба эҳтиёҷоти худ созед.
Тарҳрезии номаълум
Қисми зиёди ин дастур дар атрофи ҷанбаи рушди тарҳи ҷавобгӯ равона хоҳад шуд. Аммо пеш аз он ки ягон рамзро кофта гирем, биёед лаҳзае фикр кунем, ки чӣ гуна вебсайтро тарҳрезӣ кунем, ки тасаввуроти он дорои тарҳҳои бепоён бошад.
Ҳоло, ман хушбахтам, ки ман интерфейсҳоро таҳия карда метавонам ва коди фронтро таҳия кунед, ки онҳоро воқеӣ мекунад. Ин албатта як маҳорати беназир нест - агар шумо барои худ кор кунед пас шумо эҳтимол ҳамонед. Аммо фаҳмидани он ки чӣ гуна мундариҷа метавонад ҳангоми сохтани тарҳҳои моеъ мутобиқ карда шавад ва нав шавад, албатта муфид аст.
Ман инчунин ҳамчун як қисми калонтар кор мекунам, ки нақши ман бештар тахассус дорад. Дар чунин муҳит, ороишгари визуалӣ метавонад танҳо ба тарҷумаи симкорамҳо ба компакҳои ҷолиб, ҷолиб (имзошуда, пиксел комил) диққат диҳад. Ва ғайриоддӣ нест, ки таҳиягарон дар алоҳида ҷойгиранд ва ин форматҳоро ба нишонаҳои лоғар ва муассир ва CSS тарҷума кунанд.
Аммо, чунин ҷараёнҳои хаттӣ ва ҷудошуда зуд вайрон мешаванд, вақте ки мо арзёбӣ мекунем, ки тарҳҳо ба муҳитҳои мухталиф чӣ гуна мутобиқ мешаванд. Дар баробари ҳар як васила ё технологияи нав, мо бояд инчунин роҳҳои ҳамкортар ва чолоктари корро баррасӣ кунем. Бисёр мушкилоти назарфиребе, ки ҳангоми тарроҳии вебсайтҳои ҷавобгӯ дучор меоянд, метавонанд танҳо тавассути гуфтугӯ, озмоиш ва такрор ҳал карда шаванд.
Равиши прагматикӣ ба тарроҳӣ
Ин маънои онро надорад, ки тарроҳон барои андеша дар бораи он, ки чӣ гуна тарҳ метавонад берун аз ҳудуди ягон дастгоҳи мушаххас кор кунад, нест.
Дар Clearleft, мо тарроҳии визуалиро аз нуқтаи назари мизи корӣ оғоз мекунем. Мо аз муайян кардани забони тарроҳии васеъ ва эстетикаи визуалӣ оғоз мекунем, ки аксар вақт таҳқиқоти ибтидоиро дар атрофи як қисми мундариҷа асоснок мекунем. Масалан, агар мо сайти ғизоро тарҳрезӣ кунем, мо аз саҳифаи дорухат оғоз мекунем; барои сайти хабарӣ, сафҳаи ҳикояҳо.
Ин на танҳо як саҳифаи муҳими сайт аст, балки эҳтимолан он дорои мундариҷаи кофии сохторӣ мебошад, ки барои сохтани як палиттаи типографӣ зарур аст. Мо инчунин дар бораи он фикр хоҳем кард, ки тарҳ метавонад чӣ гуна мутобиқ карда шавад - ҳатто агар он дар ақидаи мо дар ин марҳила бошад.
Яке аз роҳҳои муфиди стресс-тестӣ гирифтани ин саҳифа ва мутобиқ кардани он ба экрани тангтар (васеъи 320 пиксел) мебошад. Эҳтимол шумо мефаҳмед, ки баъзе ҷанбаҳои тарҳрезӣ бояд барои дар ин паҳн кор кардани онҳо аз нав дида баромада шаванд. Инҳоянд чанд мисол:
- Типография: Сарлавҳаҳои калон метавонанд дар тарҳҳои васеътар кор кунанд, аммо дар экранҳои хурд онҳо метавонанд фазои амудии зиёдеро ишғол кунанд ва аз ин рӯ ҳаракатҳои иловагиро талаб мекунанд. Азбаски дарозии хат тағир меёбад, шумо бояд баландии хат ва дигар табобатҳои типографиро низ баррасӣ кунед.
- Истинодҳо: Тарроҳии шумо дар дастгоҳҳои сенсорӣ чӣ гуна кор мекунад? Гарчанде ки мо ҳанӯз роҳи осон барои ошкор кардани инҳо надорем (яъне маънои онро дорад, ки мо бояд тамоми ҷанбаҳои тарроҳии худро ба назар гирем), тарҳрезии экрани танг метавонад ба мо имконият диҳад, ки дар бораи самтҳои ҳадаф барои пайвандҳо ва дигар унсурҳои интерактивӣ фикр кунем. . Дастурҳои iOS тавсия медиҳанд, ки инҳо ҳадди аққал 44 пиксел / нуқтаи мураббаъ бошанд, ки ин рақами хубест барои ҳадаф.
- Навигатсия: Ин шояд ҷузъи заҳматталаби ҳама гуна тарҳи ҷавобгӯ бошад, алахусус агар сайти шумо қисматҳои зиёд ва иерархияи амиқ дошта бошад. Брэд Фрост мухтасари баъзе равишҳои мухталифро дар соҳаи киштигардӣ, ки ҳоло баррасӣ мешаванд, навиштааст.
- Мазмуни зиёдатӣ: Оё баъзе мундариҷа талаб карда намешавад? Оё мундариҷаи дигарро танҳо дар сенарияҳои муайян нишон додан лозим аст? Ман пинҳон кардани мундариҷаро дар асоси он, ки корбар бо кадом дастгоҳ истифода мешавад, ҷонибдорӣ намекунам, аммо усулҳое, ба монанди боркунии шартӣ (мо онро охири ҳафта дида мебароем) метавонанд ба мо дар расонидани саҳифаҳои хурдтар кӯмак кунанд, ки танҳо дар ҳолати зарурӣ мундариҷаи иловагиро бор мекунанд.
Тарҳрезии ду тарҳҳои муқоисавӣ ақидаи мутобиқшавии тарҳро тақвият мебахшад, дар ҳоле, ки готчаҳои потенсиалиро барвақт дарзмол мекунанд. Гарчанде ки ин ба монанди дучанд кардани кор ба назар мерасад, дар хотир доред, ки мо ҳар як саҳифаро ба дақиқии комил бо пиксел таҳия намекунем. Ба ҷои ин, мо диққати худро ба сохтани як забони тарроҳии миқёспазир равона карда истодаем - забоне, ки ҳангоми татбиқи он дар рамз рушд хоҳад кард ва яке дар атрофи модулҳо ва ҷузъҳои алоҳида асос ёфтааст.
Табдил додани тарҳбандӣ
Тааҷубовар нест, ки барои соҳае, ки таърихан вебро мисли чоп кор кардааст, тарҳҳои паҳнои васеъ ба бисёр натиҷаҳои истеҳсолкардаи мо ворид шудаанд. Вақте ки мо ба тарҳрезии як воситаи мутобиқшаванда шурӯъ мекунем, равишҳои наве баррасӣ мешаванд, ки ба мо имкон медиҳанд, ки мушкилотро ҳал кунем ва дар бораи эътирофи табиати моеъи иттилоот фикр баён кунем. Инҳоянд чанде аз мунтахабҳои ман:
- Диаграммаҳои тавсифи саҳифа: Дар ҳоле, ки симкраммаҳо аксар вақт метавонанд тарҳбандиро дар назар доранд (ва ба ин васила навъи муайяни дастгоҳро дар назар мегиранд), диаграммаҳои тавсифи саҳифа ин фарзияро бартараф мекунанд ва ба ҷои ҷузъҳои алоҳидаи дар ҳуҷҷат ҷойгиршуда аз рӯи афзалият тавсиф мекунанд.
- Сафолҳои сабк: Ҳангоми муошират бо ғояҳои тарроҳӣ бо мизоҷон, мо метавонем худро "расмҳои вебсайтҳо" пешниҳод кунем. Агар мо эҳтиёткор набошем, муштариён барҳақ хоҳиш мекунанд, ки консепсияҳоеро бубинанд, ки нишон медиҳанд, ки тарроҳӣ дар дастгоҳҳои дигар низ чӣ гуна хоҳад буд. Ин метавонад моро ба вазъияти ноустувори истеҳсоли саҳифаҳои гуногун барои дастгоҳҳои гуногун маҷбур кунад. Саманта Уоррен дар бораи ин мушкилот андеша кардааст ва чӯбҳои сабкро пешкаш кардааст. Инҳо дар ҷое байни тахтаи кайфият (вале камтар норавшан) ва компсҳои пурра даркшуда (вале камтар дақиқ) нишастаанд ва ба мо дар муоширати типография, услубҳои тугмаҳо ва табобати мастӣ кӯмак мерасонанд. Онҳо инчунин сатҳи мукаммали мубоҳисаро бо мизоҷони мо ташвиқ мекунанд.
- Сафарбар кардани бозии тарроҳӣ: Ин машқ метавонад дар ҳақиқат дар давоми семинарҳои тарроҳии муштарак хуб кор кунад. Дар ин машқ, ҳама дар Post-it менависанд, ки унсурҳое, ки метавонанд дар як сафҳаи муайян пайдо шаванд. Пас аз он онҳо ба девор бо назардошти аҳамият часпиданд, гӯё ки дар телефони мобилӣ хаттӣ пайдо шуда бошанд. Муҳокимаи натиҷа метавонад баъзе хулосаҳои ҳайратангез ба вуҷуд орад. Масалан, шумо метавонед дарк кунед, ки новбари ҷузъи муҳимтарини саҳифа нест. Ин метавонад ба тарроҳӣ пайравӣ кунад, ки дар он як пайванди гузариш дар қисми болоии саҳифа ба новбари пойгоҳ пайваст мешавад.
Ҳоло ҳам барои асбобҳое, ки мо аллакай истифода мебарем, вуҷуд дорад, аммо ҳангоми тарроҳии вебсайт ба маънои васеъ, мо бояд дар назар дошта бошем, ки тарҳбандӣ акнун маълум нест.
Рамзгузории тадриҷан
Хушбахтона, ба мо лозим нест, ки дар бораи тарҳи визуалӣ дар мисоле, ки кор карда истодаем, хавотир шавем, зеро кори душвор барои мо анҷом дода шудааст! Ба ҷои ин, мо метавонем диққати худро ба рамзгузории тарроҳии худ дар вебсайти комилан ҷавобгӯ равона кунем.
Як чизи дигар пеш аз оғоз. Дар хотир доштан муҳим аст, ки як принсипи бунёдии воситаеро, ки мо бо он кор карда истодаем: универсалӣ. Ин маънои онро дорад, ки на танҳо барои дастгоҳҳои аз ҷониби веб васлшудаи имрӯза сохтан, балки бо мутобиқат бо дастгоҳҳои дирӯз ва фардо низ таъмин намудани мутобиқат. Ҷон Оллсоп тавзеҳ дод, ки чаро ин принсип дар паёми худ "Миллиардҳои оянда 6" муҳим аст:
"Ин шаш миллиарди дигар кӯдакон дар деҳоти Ҳиндустон, Африқо, Чин ҳастанд, ки дар он ҷо дастрасӣ ба қудрат ва шабакаҳо метавонанд баъзан фарқ кунанд. Ин касе дар Суматра дар қуттии даҳсолаи Wintel аст. Ин одамоне ҳастанд, ки садҳо забонҳои гуногунро медонанд, бо даҳҳо забонҳои гуногун Ин система одамоне ҳастанд, ки аввалин шуда дар оилаашон қобилияти хондан ва навиштанро доранд.Ин 20 фоизи одамоне мебошанд, ки дар саросари ҷаҳон хонда ё навишта наметавонанд.’
Мо метавонем фаҳмиши худро дар бораи веб бо роҳи дидани намудҳои мухталиф (барои хоҳиши калимаи беҳтар), ки дар байни касбҳои мо ҷой гирифтааст, пайгирӣ кунем: стандартҳои веб, дастрасӣ, JavaScript-и бебаҳо ... ҳама вариантҳои як мавзӯъ мебошанд: такмили пешрафта. Худи ҳамин ба тарроҳии веб ҷавобгӯ аст. Барои сохтани дар ҳақиқат вебсайти ҷавобгӯ сохтани сайтест, ки на танҳо ба ақиб мувофиқ аст, балки дар оянда низ дӯстона аст.
Ғаввосӣ дар тамға
Хуб, пешгуфтор кофист, вақти кушодани муҳаррири матн расидааст.Тарроҳи мо ба мо як тарҳи нигаронидашудаи мизи кориро фароҳам овардааст ва ба қадри кофӣ меҳрубонона мисолҳо овард, ки чӣ гуна ин метавонад дар намуди назари танг ҳам пайдо шавад.
Шояд ин васваса дошта бошад, ки инҳоро алоҳида рамзгузорӣ кунад, аммо ман равиши дигареро пешниҳод мекунам. Бо гузоштани ҷузъҳои алоҳида - ё нақшҳо - ки тарроҳиро дар як саҳифа ҷойгир мекунанд, мо метавонем портфели намуна созем. Ин ба мо имкон медиҳад, ки ҷузъҳои берун аз ҳама тарҳбандии саҳифаҳоро таҳия кунем ва ба мо чизе диҳем, ки баъдтар барои ҳама гуна санҷишҳои регрессионӣ муроҷиат кунем. Биёед тамғаи аввалияро дар якчанд дастгоҳҳои гуногун дида бароем:
Портфолиоҳои намунавии моро тамошо кунед
Хуб, ба ман лаънат мехонанд - мо аллакай вебсайти ҷавобгӯ дорем! Мундариҷаи мо ба маҳдудиятҳои ҳар як дастгоҳ мутобиқ карда мешавад, аз он ҷумла iPad -и зебои нав ё телефони хусусияти партофташуда. Он ҳатто дар браузери танҳо матн, ба монанди Lynx кор мекунад.
Бо шарофати принсипҳои аслии универсалӣ, веб бо нобаёнӣ ҷавобгӯ. Ин хеле хуб аст, аммо ин маънои онро дорад, ки ҳар чизе ки мо аз ҳоло бо рамз анҷом медиҳем, метавонад ин мутобиқати ватаниро халалдор кунад.
Фардо: Мо бодиққат қадам мезанем ва ба татбиқи ҷанбаи якуми тарроҳии ҷавобӣ шурӯъ хоҳем кард: типография ва шабакаҳои моеъ.
