Բովանդակություն
- Նախագծում անհայտի համար
- Ձևավորման պրագմատիկ մոտեցում
- Դառնալով դասավորության ագնոստիկ
- Աստիճանաբար կոդավորումը
- Սուզվելով նշագրման մեջ
Թվում է, որ բոլորն էլ խոսում են արձագանքող վեբ ձևավորման մասին, և դա հիմնավոր պատճառներով: երբ վեբ հնարավորություն ունեցող սարքերի քանակը շարունակում է աճել, որոնցից յուրաքանչյուրն ունի տարբեր հնարավորություններ և առանձնահատկություններ, ֆիքսված լայնությամբ կայքեր կառուցելն այլևս խելամիտ չէ:
Uthշմարտությունն այն է, որ դա երբեք չի եղել: Սակայն մինչ այժմ համարվում էր լավագույն փորձը նախագծել փորձեր, որոնք կատարել են մի շարք ենթադրություններ ՝ լինեն դրանք էկրանի լուծման, թողունակության կամ ներածման եղանակի շուրջ: Եթե դուք երբևէ 960px լայնությամբ կայք եք նախագծել, այն միայն ընկերոջ փոքր էկրանին նեթբուքում դիտելու համար (և այո, ես այստեղ ցավոտ փորձից եմ գրում), ապա կհասկանաք, թե ինչու դա հատկապես խելացի մոտեցում չէր: Այժմ, սմարթֆոնների և պլանշետների խառնուրդը գցելով, պարզ է, որ մեր ավանդական մեթոդներն այլևս պիտանի չեն նպատակների համար:
Բարեբախտաբար, CSS լրատվամիջոցների հարցումների ի հայտ գալը և աճող ճանաչումը, որ ոստայնը ինքնին միջոց է, նշանակում է, որ մենք սկսում ենք ընդունել պլատֆորմի իրական բնույթը ՝ ընդունելով, որ դրա համընդհանուրությունը ուժեղ է և ոչ թե թուլություն:
Հաջորդ հինգ օրվա ընթացքում ես ձեզ կառաջնորդեմ այս փաստը ճանաչող տեխնիկայի միջոցով. արձագանքող վեբ դիզայն, Իթան Մարկոտի կողմից մշակված ՝ սա միավորում է հեղուկի դասավորությունը, ճկուն պատկերները և մեդիա հարցումները ՝ մեզ օգնելու համար կայքեր կառուցել, որոնք նրբագեղ կերպով հարմարվում են իրենց հանդիպած միջավայրին:
Ես ցույց կտամ այս մոտեցումը ՝ ցույց տալով, թե ինչպես կարելի է կառուցել պարզ մեդիա պատկերասրահ: Իմ օրինակներում ես կստեղծեմ մի փոքրիկ կայք ՝ փաստաթղթավորելու վերջին ճանապարհորդական ուղևորությունը, որը ես անցել եմ Միացյալ Նահանգներ, բայց ազատ զգալ հարմարեցրեք ծածկագիրը և ձևավորումը ՝ համապատասխանելու ձեր սեփական կարիքներին:
Նախագծում անհայտի համար
Այս ձեռնարկի մեծ մասը կենտրոնանալու է պատասխանատու դիզայնի զարգացման ասպեկտի վրա: Բայց նախքան որևէ կոդ փորփրենք, եկեք մի պահ մտածենք, թե ինչպես կարող ենք այնպիսի կայք մշակել, որը կարող է ունենալ անսահման դասավորություն:
Հիմա ես բախտավոր եմ, որ կարող եմ ինտերֆեյսեր նախագծել և զարգացնել առջևի ծածկագիրը, որը նրանց իրական է դարձնում: Իհարկե, դա եզակի հմտություն չէ. Եթե աշխատում եք ինքներդ ձեզ համար, ապա հավանաբար նույնն եք: Բայց անշուշտ ձեռնտու է հասկանալ, թե ինչպես կարող է պարունակությունը հարմարվել և բոցավառվել հեղուկի նախագծերը մշակելիս:
Ես նաև աշխատում եմ որպես ավելի մեծ թիմի մաս, որտեղ իմ դերն ավելի մասնագիտացված է: Նման միջավայրում տեսողական դիզայները կարող է կենտրոնանալ բացառապես մետաղալարերի շրջանակները վերածելու գրավիչ, գրավիչ (անջատված, պիքսելային կատարյալ) համակարգիչների: Եվ սովորական չէ, որ մշակողները տեղակայվեն առանձին ՝ այս դասավորությունները թարգմանելով նիհար և արդյունավետ նշագրման և CSS:
Այնուամենայնիվ, այդպիսի գծային և առանձնացված աշխատանքային հոսքերը արագորեն փչանում են, երբ մենք սկսում ենք գնահատել, թե ինչպես են դիզայնը հարմարվելու տարբեր միջավայրերին: Ինչքան որևէ նոր գործիք կամ տեխնոլոգիա, մենք պետք է նաև հաշվի առնենք ավելի համագործակցային և ճկուն աշխատաոճեր: Արձագանքող կայքեր մշակելիս առաջացած բարդագույն բարդություններից շատերը կարող են լուծվել պարզապես զրույցի, փորձերի և կրկնության միջոցով:
Ձևավորման պրագմատիկ մոտեցում
Դա չի նշանակում, որ դիզայներները հնարավորություն չունեն մտածելու, թե ինչպես կարող է դիզայնը գործել որևէ որոշակի սարքի սահմաններից դուրս:
Clearleft- ում մենք սկսում ենք տեսողական ձևավորում աշխատասեղանի տեսանկյունից: Մենք սկսում ենք հիմնական դիզայնի լեզուն և տեսողական գեղագիտությունը սահմանելով `հիմք ընդունելով սկզբնական հետազոտությունները հիմնական բովանդակության շուրջ: Օրինակ, եթե մենք սննդի կայք ենք նախագծում, ապա մենք կսկսենք բաղադրատոմսերի էջից. նորությունների կայքի, պատմությունների էջի համար:
Սա ոչ միայն կարևոր էջ է կայքում, այլ, հավանաբար, ներառում է բավականաչափ կառուցվածքային բովանդակություն, որպեսզի տպագրական պալիտրա ստեղծենք: Մենք կմտածենք նաև այն մասին, թե ինչպես կարող է դասավորությունը հարմարվել, նույնիսկ եթե այս փուլում դա մեր մտքի հետնամասում է:
Դիզայնի սթրես-թեստի օգտակար եղանակներից մեկը `վերցնել նման էջ և հարմարեցնել այն ավելի նեղ (~ 320 px լայնությամբ) էկրանին: Դուք, հավանաբար, կբացահայտեք, որ նախագծման որոշ ասպեկտներ պետք է վերանայել, որպեսզի նրանք աշխատեն այս լայնությամբ: Ահա մի քանի օրինակներ.
- Տպագրություն: Խոշոր վերնագրերը կարող են լավ աշխատել ավելի լայն դասավորության վրա, բայց ավելի փոքր էկրաններին նրանք կարող են շատ ուղղահայաց տարածք զբաղեցնել, ուստի պահանջում են լրացուցիչ ոլորում: Քանի որ գծերի երկարությունները փոխվում են, պետք է հաշվի առնել նաև գծի բարձրությունները և այլ տպագրական բուժումները:
- Հղումներ: Ինչպե՞ս կաշխատի ձեր դիզայնը սենսորային էկրանների սարքերում: Չնայած դրանք հայտնաբերելու հեշտ միջոց դեռ չունենք (նկատի ունի, որ պետք է հաշվի առնել մեր դիզայնի բոլոր ասպեկտներում), ավելի նեղ էկրանին ձևավորումը կարող է մեզ հնարավորություն տալ մտածելու հղումների և այլ ինտերակտիվ տարրերի նպատակային տարածքների մասին: , IOS ուղեցույցները խորհուրդ են տալիս, որ դրանք լինեն առնվազն 44 պիքսել / միավոր քառակուսի, ինչը լավ ցուցանիշ է նպատակադրվելու համար:
- Նավարկում: Սա, հավանաբար, կլինի ցանկացած պատասխանատու դիզայնի ամենաանհարմար բաղադրիչը, հատկապես, եթե ձեր կայքը ունի շատ բաժիններ և խոր հիերարխիա: Բրեդ Ֆրոստը գրել է ներկայումս դիտարկվող նավիգացիայի մի քանի տարբեր մոտեցումների ամփոփագիր:
- Ավելորդ բովանդակություն. Որոշ բովանդակություն չի՞ պահանջվում: Այլ բովանդակությունը միայն սցենարներով պետք է ցուցադրվի՞: Ես չեմ պաշտպանում բովանդակություն թաքցնելը ՝ հիմնվելով այն բանի վրա, թե ինչ է պատահում օգտագործողի կողմից օգտագործելու համար, բայց պայմանական բեռնման նման մեթոդները (որոնք մենք կանդրադառնանք այս շաբաթվա վերջին) կարող են օգնել մեզ սպասարկել ավելի փոքր էջեր, որոնք միայն անհրաժեշտության դեպքում բեռնում են լրացուցիչ բովանդակություն:
Երկու հակապատկեր դասավորությունների ձևավորումը ամրապնդում է այն գաղափարը, որ դիզայնը կհամապատասխանի, մինչդեռ վաղ արդուկումը հնարավոր պոտենցիալների վրա: Չնայած սա հնչում է որպես աշխատանքի կրկնապատկում, բայց հիշեք, որ մենք յուրաքանչյուր էջ չենք նախագծում պիքսելային կատարյալ ճշգրտությամբ: Փոխարենը, մենք կենտրոնացած ենք նախագծման մասշտաբային լեզու կառուցելու վրա. Մեկը, որը կզարգանա, երբ մենք սկսենք այն կիրառել կոդով, և մեկը, որը հիմնված է առանձին մոդուլների և բաղադրիչների վրա:
Դառնալով դասավորության ագնոստիկ
Sարմանալի չէ, որ արդյունաբերության համար, որը պատմականորեն համացանցին վերաբերվել է տպագրությանը, ֆիքսված լայնությամբ դասավորությունները ներթափանցել են մեր արտադրած շատ ապրանքների: Երբ սկսում ենք նախագծել հարմարվող միջավայր, դիտարկվում են նոր մոտեցումներ, որոնք մեզ թույլ են տալիս խնդիրներ լուծել և գաղափարներ հաղորդել ՝ միաժամանակ ընդունելով միջավայրի հեղուկ բնույթը: Ահա իմ նախընտրածներից մի քանիսը.
- Էջի նկարագրության գծապատկերներ. Չնայած մետաղալարերը հաճախ կարող են ենթադրել դասավորություն (և այդպիսով ենթադրել որոշակի տեսակի սարք), էջի նկարագրության գծապատկերները հանում են այս ենթադրությունը և փոխարենը նկարագրում փաստաթղթում առաջնահերթության տեսքով դասավորված անհատական բաղադրիչները:
- Ոճի սալիկներ: Դիզայնի գաղափարները հաճախորդների հետ շփվելիս մենք կարող ենք ինքներս մեզ ներկայացնել «կայքերի նկարներ»: Եթե մենք ուշադիր չլինենք, հաճախորդները ճիշտ կխնդրեն տեսնել հասկացություններ, որոնք ցույց են տալիս, թե ինչպես է դիզայնը նայելու այլ սարքերի վրա: Սա կարող է ստիպել մեզ անկայուն իրավիճակում `բազմաթիվ սարքերի համար բազմաթիվ էջեր արտադրելու հարցում: Samantha Warren- ը մտածել է այս խնդրի մասին և եկել ոճային սալիկներով: Դրանք նստում են ինչ-որ տեղ տրամադրության տախտակի (բայց պակաս անորոշ) և լիովին իրագործված համակարգիչների (բայց պակաս ճշգրիտ) միջև և օգնում են մեզ հաղորդակցվել տպագրության, կոճակների ոճերի և գլխիկների բուժման հետ: Դրանք նաև խրախուսում են մեր հաճախորդների հետ քննարկման ավելի հասուն մակարդակը:
- Մոբիլիզացնել դիզայնի խաղը. Այս վարժությունը կարող է իսկապես լավ աշխատել համագործակցային դիզայնի սեմինարների ընթացքում: Այս վարժության մեջ բոլորը գրում են Post-it նշումները այն տարրերի վրա, որոնք կարող են հայտնվել որոշակի էջում: Դրանք այնուհետև կարված են պատին ՝ ըստ կարևորության, կարծես դրանք գծային տեսքով հայտնվում էին բջջային հեռախոսում: Արդյունքում քննարկումը կարող է զարմանալի եզրակացություններ առաջացնել: Օրինակ, կարող եք գիտակցել, որ նավիգացիան էջի ամենակարևոր բաղադրիչը չէ: Սա կարող է հետևվել ձևավորմանը, երբ էջի վերևում բաց թողնել հղումը հղում է դեպի ներքևում գտնվող նավիգացիան:
Իհարկե, դեռ տեղ կա այն գործիքների համար, որոնք մենք արդեն օգտագործում ենք, բայց ընդհանուր առմամբ կայք մշակելիս պետք է հիշել, որ դասավորությունն այլևս հայտնի չէ:
Աստիճանաբար կոդավորումը
Բարեբախտաբար, մեզ հարկավոր չէ անհանգստանալ տեսողական ձևավորման մասին այն օրինակում, որի վրա մենք աշխատում ենք, քանի որ քրտնաջան աշխատանքը կատարվել է մեզ համար: Փոխարենը, մենք կարող ենք կենտրոնանալ մեր ձևավորումը լիովին արձագանքող կայքում կոդավորելու վրա:
Մի բան էլ դեռ չսկսենք: Կարևոր է հիշել այն միջավայրի հիմնարար սկզբունքը, որի հետ մենք աշխատում ենք. Համընդհանուրությունը: Դա նշանակում է ոչ միայն կառուցել այսօրվա վեբ հնարավորություն ունեցող սարքերի համար, այլև ապահովել համատեղելիություն երեկվա և վաղվա սարքերի հետ: Allոն Ալսոփը նկարագրեց, թե ինչու է այս սկզբունքը կարևոր իր Հաջորդ 6 միլիարդը գրառման մեջ.
«Այս հաջորդ վեց միլիարդը երեխաներ են գյուղական Հնդկաստանում, Աֆրիկայում, Չինաստանում, որտեղ էլեկտրաէներգիայի և ցանցերի հասանելիությունը կարող է ընդհատվել: Դա Սումատրայում գտնվող ինչ-որ մեկն է ՝ Wintel- ի մեկ տասնամյա տուփով: Մարդիկ խոսում են հարյուրավոր տարբեր լեզուներով, տասնյակ տարբեր գրելու համակարգեր. մարդիկ են, ովքեր առաջինն են իրենց ընտանիքում, ովքեր կարողանում են կարդալ և գրել: Դա մարդկանց 20 տոկոսն է, ովքեր չեն կարող կարդալ և գրել:’
Մենք կարող ենք հետևել համացանցի վերաբերյալ մեր ընկալմանը ՝ նայելով տարբեր նորաձեւություններին (ավելի լավ բառի ցանկության համար), որոնք մեր մասնագիտության մեջ գրավել են. Վեբ ստանդարտներ, մատչելիություն, աննկատելի JavaScript… բոլորը միևնույն թեմայի տարբերակներ են. Առաջադեմ բարելավում: Նույնը վերաբերում է պատասխանատու վեբ դիզայնին: Կառուցել ա իսկապես արձագանքող կայքէջը պետք է կառուցել կայք, որը ոչ միայն հետընթաց է, բայց նաև ապագա:
Սուզվելով նշագրման մեջ
Լավ, բավական է նախաբանում, ժամանակն է բացել տեքստի խմբագիր:Մեր դիզայները մեզ տրամադրել է աշխատասեղանին ուղղված դիզայն և բավական բարի է եղել օրինակներ բերել, թե ինչպես դա կարող է հայտնվել նաև ավելի նեղ տեսադաշտում:
Գուցե գայթակղիչ է դրանք առանձին ծածկագրել, բայց ես այլ մոտեցում եմ առաջարկելու: Տեղադրելով առանձին բաղադրիչները կամ օրինաչափությունները, որոնք կազմում են ձևավորումը մեկ էջի վրա, մենք կարող ենք ստեղծել նմուշի պորտֆոլիո: Սա մեզ թույլ է տալիս մշակել բաղադրիչներ ՝ էջի ցանկացած դասավորության սահմաններից դուրս, և մեզ կտա մի բան, որի հետագայում մենք կանդրադառնանք հետընթացի ցանկացած փորձարկման: Եկեք դիտենք նախնական նշումը մի քանի տարբեր սարքերում.
Դիտեք մեր նշված նախշերով պորտֆելը
Դե, ես կդատապարտվեմ. Մենք արդեն ունենք պատասխանատու կայք: Մեր բովանդակությունը հարմարվում է յուրաքանչյուր սարքի սահմաններին, լինի դա նոր շքեղ iPad- ը կամ մերժված հեռախոսը: Այն նույնիսկ աշխատում է միայն տեքստի զննարկչում, ինչպիսին է Lynx- ը:
Համընդհանուր հիմքում ընկած սկզբունքների շնորհիվ ոստայնը արձագանքող լռելյայն, Դա հոյակապ է, բայց դա նաև նշանակում է, որ ցանկացած բան, ինչ մենք այսուհետ անում ենք ծածկագրին, կարող է վտանգել այս հայրենի հարմարվողականությունը:
Վաղը Մենք ուշադիր կքայլենք և կսկսենք կիրառել պատասխանատու ձևավորման առաջին ասպեկտը ՝ տպագրություն և հեղուկ ցանցեր:
