Ունեք « պատասխանատու կայք »: Սա կայք է, որը ձեւավորում է այցելուի սարքի եւ էկրանի չափի հիման վրա : Պատասխանատու վեբ դիզայնը հիմա լավագույն փորձ է: Այն խորհուրդ է տրվում Google- ի կողմից եւ հայտնաբերվել է միլիոնավոր կայքերում: Այնուամենայնիվ, կա մեծ տարբերություն այն կայք ունենալով, որը պարզապես «տեղավորվում է» տարբեր չափերի վրա եւ ունենալով իսկապես պատասխանատու կայք:
Ես կանոնավոր կերպով տեսնում եմ, որ ընկերությունները վերափոխում են իրենց կայքը եւ մղում են մամուլի ազատ արձակման իրենց բջջային նոր դիզայնի արժանիքները: Երբ ես այցելում եմ այն կայքերը, ես հաճախ գտնում եմ այնպիսի դասավորություն, որը իրականում մասշտաբ է եւ փոփոխվում է տարբեր էկրանների վրա, բայց դա այնքանով, որքանով նրանք ընկալում են արձագանքի գաղափարը: Դա բավարար չէ: Ճշմարիտ արձագանքող կայքը ավելի մեծ է, քան փոքր կամ մեծ էկրանին տեղադրելու համար: Այս կայքերում դուք կգտնեք նաեւ հետեւյալ կարեւոր հատկությունները:
1. Օպտիմիզացված կատարում
Ոչ ոք չի սիրում սպասել կայք բեռնելու համար, եւ երբ որեւէ մեկը օգտագործում է բջջային սարքը, որը կարող է լինել իդեալականից պակաս, ավելի կարեւոր է, որ կայքը արագորեն բեռնվի:
Այսպիսով, ինչպես եք օպտիմալացնում ձեր կայքի կատարումը: Եթե դուք սկսում եք նոր կայքէջից որպես վերափոխման մաս, ապա դուք պետք է այն դարձնեք այն կետը, որը կկատարի կատարողական բյուջե, որպես այդ ծրագրի մաս: Եթե դուք աշխատում եք գոյություն ունեցող կայքի հետ եւ սկսում եք զրոյից, առաջին քայլն է ստուգել ձեր կայքի կատարողականը `տեսնելու, թե որտեղ եք այսօր կանգնած:
Երբ դուք ունեք բազային, որտեղ ձեր կայքը կանգնած է կատարողականի իմաստով, դուք կարող եք սկսել կատարել անհրաժեշտ բարելավումներ `մեծացնելու ներբեռնման արագությունը: Սկսելու համար հիանալի վայր է, հավանաբար, ձեր կայքի պատկերներով: Չափազանց մեծ պատկերները # 1 մեղավորներն են, երբ խոսքը վերաբերում է դանդաղ բեռնելու կայքերը, այնպես որ վեբ առաքման համար ձեր պատկերները օպտիմալացնելը իսկապես կարող է օգնել ձեր կայքը կատարողականի տեսանկյունից:
Իրականությունն այն է, որ բարելավված կայքի գործառույթը եւ արագ ներբեռնման արագությունները օգուտ են բերում բոլոր այցելուներին: Ի վերջո, ոչ ոք երբեւէ չի բողոքել, որ «շատ արագ» բեռնված կայքը, բայց եթե կայքը շատ երկար է բեռնելու համար, ապա այն բացարձակապես կվերածվի մարդկանց, եթե դրանք պատշաճ կերպով «տեղավորվեն» իրենց էկրանին, թե ոչ:
2. Սմարթ բովանդակային հիերարխիա
Երբ կայքը ցուցադրվում է մեծ էկրանին, դուք ի վիճակի եք դիմանալ տարբեր ձեւերով, քանի որ հասանելի էկրանի անշարժ գույք: Դուք կարող եք միանգամից տեղավորել կարեւոր հաղորդագրություններ եւ պատկերներ, նորությունների թարմացումները, իրադարձության տեղեկությունները եւ կայքի նավարկությունը միանգամից էկրանին: Սա թույլ է տալիս այցելուին հեշտությամբ եւ արագորեն փնտրել ամբողջ էջի բովանդակությունը եւ որոշել, թե ինչն է նրանց համար կարեւոր:
Այս սցենարը բավականին կտրուկ փոխվում է այն ժամանակ, երբ դուք վերցնում եք այդ կայքի դիզայնը եւ վերափոխում այն փոքր էկրանի սարքերի համար, ինչպես բջջային հեռախոսով: Հանկարծ դուք աշխատում եք էկրանին գտնվող անշարժ գույքի մի մասը: Սա նշանակում է, որ դուք պետք է որոշեք, թե ինչ է առաջին տեղում հայտնվում, ինչ հետեւում է այն եւ այլն: Փոխարենը ամեն ինչ տեսնելու համար միանգամից հնարավոր է միայն մեկ կամ երկու օբյեկտների ցուցադրումը (որոնցից մեկը, հավանաբար, նավարկություն): Սա նշանակում է, որ պետք է կատարվի հիերարխիայի որոշումները: Ցավոք, ինչ հաճախ է որոշվում, թե ինչ է կատարվում էկրանին, ապա երկրորդ, եւ այլն, այն է, որ էջը ինքնին կոդավորված է: Դա ամենահեշտն է, երբ արձագանքող կայքը կառուցելիս ցուցադրեք այն ամենը, ինչ առաջինն է կոդում էկրանին, այնուհետեւ հաջորդում է երկրորդ կետը կոդում եւ այլն: Ցավոք, մեկ սարքի վրա ամենակարեւորը կարող է լինել նույնքան կարեւոր, որքան մյուսը: Ճշմարիտ պատասխանատու կայքը հասկանում է, որ բովանդակության հիերարխիան պետք է փոխվի տարբեր իրավիճակներում, եւ այն պետք է խելացի լինի, թե ինչ է այն ցուցադրում:
CSS- ի դասավորության մեթոդների բարելավում, ներառյալ CSS- ի Grid Layout, Flexbox- ը եւ ավելին, թույլ են տալիս վեբ դիզայներներին եւ ծրագրավորողներին ավելի շատ ընտրանքներ տալ, երբ խոսքը վերաբերում է բովանդակության մտավոր ձեւակերպմանը, այլ ոչ թե HTML կոդի բովանդակության ոլորտների ճշգրիտ կարգի խայթոցին: Օգտվելով այս նոր դասավորության տեխնիկայից, կդառնա ավելի կարեւոր, ինչպես սարքի լանդշաֆտը, եւ մեր կայքի օգտագործողների կարիքները շարունակում են զարգանալ:
3. Փորձառություններ, որոնք հաշվի են առնում սարքի ուժերն ու թուլությունները
Մնալով սարքերի թեման `յուրաքանչյուր սարք, որը ինչ-որ մեկը կարող է օգտագործել ձեր կայքը այցելելու համար ունի այդ ուժեղ կողմերը եւ թույլ կողմերը: Մի մեծ արձագանքող կայք հասկանում է տարբեր սարքերի հնարավորությունները եւ սահմանափակումները եւ դրանք օգտագործում է նրանց հարմարեցված փորձեր ստեղծելը, որոնք լավագույնս համապատասխանում են այն սարքին, որը այցելու կարող է օգտագործվել այդ պահին:
Օրինակ, բջջային հեռախոսը ներառում է մի շարք առանձնահատկություններ, որոնք չեք գտնի ավանդական սեղանադիր համակարգչում: GPS- ը բջջային կենտրոնի առանձնահատկության մեկ օրինակ է (այո, դուք կարող եք ստանալ ընդհանուր տեղադրության տեղեկությունները նաեւ աշխատասեղանների համար, սակայն GPS- ը շատ ավելի ճշգրիտ է): Ձեր կայքը կարող է օգտագործել GPS- ի տեղեկությունները, որպեսզի մարդուն ուղարկում է մանրամասն եւ կոնկրետ քայլ առ քայլ ուղղորդող տեղեկատվություն կամ հատուկ առաջարկներ, որոնք հիմնված են այնտեղ, որտեղ նրանք գտնվում են այդ պահին:
Գործնականում այս սկզբունքների մեկ այլ օրինակ կարող է լինել այն կայքը, որը հասկանում է, թե ինչ տեսակի էկրան եք օգտագործում եւ ուղարկում պատկերներ, որոնք լավագույնս համապատասխանում են այդ ցուցադրմանը: Եթե ունեք բարձր խտության խտությամբ էկրան, ապա կարող եք որոշել, որ ավելի բարձր որակի պատկերներ ուղարկեք այդ էկրանին: Այս նույն պատկերները, սակայն, անիմաստ կլինեն ավելի քիչ ունակ էկրանով, եւ ավելորդ որակը կկորչի, իսկ լրացուցիչ ֆայլի չափը ներբեռնելու համար ոչ մի փաստի պատճառով:
Իրոք, մեծ հուսալի կայքեր համարում են ամբողջ օգտագործողի փորձը եւ աշխատում է հարմարեցնել այն փորձը, որը հիմնված է ոչ միայն իր սարքի տեսակի կամ չափի վրա, այլ նաեւ ապարատի այլ կարեւոր կողմերը:
4. Բովանդակությունը համատեքստում
Սկզբում պատասխանի վեբ դիզայնը ստացել է իր անունը, քանի որ կայքի ձեւավորման գաղափարը տարբեր էկրանի չափսերին արձագանքող, բայց կարող եք արձագանքել շատ ավելի, քան պարզապես էկրանին: Կառուցեք սարքի ուժեղ եւ թույլ կողմերը օգտագործելու նախորդ օրինակով, դուք կարող եք օգտագործել դրանք, ինչպես նաեւ այլ տվյալներ, ինչպես ամսաթիվը եւ ժամը, իսկապես հարմարեցնել կայքի փորձը:
Պատկերացրեք մի մեծ ցուցահանդեսի միջոցառման կայքը: Թեեւ արձագանքող կայքը կարող է փոխել կայքի էջերի դասավորությունը `տարբեր էկրաններով մասշտաբելու համար, կարող եք նաեւ օգտագործել ամսաթվերը, որոշելու համար, թե ինչ բովանդակություն է ամենակարեւորը ցուցադրելու համար: Եթե դա պատահականության ժամանակաշրջանն է, ապա, հավանաբար, ցանկալի է ցուցադրել գրանցման տվյալները: Սակայն, եթե այդ իրադարձությունը իրականում տեղի է ունենում այդ պահին, գրանցումը չի կարող լինել ամենակարեւոր բովանդակությունը: Փոխարենը, դուք կարող եք որոշել, թե ինչ է տեղի ունենում օրակարգի օրակարգը, քանի որ դա ավելի է համապատասխանում տվյալ օգտագործողի անմիջական պահանջներին:
Շարունակելով քայլեր, քայլեր կարող եք ձեռնարկել սարքի GPS- ի մեջ, որոշելու համար, թե որտեղ են դրանք իրականում: Դուք կարող եք նրանց տալ ինտերակտիվ բովանդակություն `հիմնված իրենց գտնվելու վայրի վրա, ցույց տալով դրանք մոտակա խցիկների կամ նստաշրջանների մասին, սկսելու համար:
5. Մատչելիություն
Վերջնական օրինակն ենք նայում, թե ինչպես է կայքը կարող է իսկապես արձագանքել այցելուի կարիքներին, մտածել կայքի հասանելիության մասին : Կայքերը պետք է հնարավորինս շատ մարդկանց, այդ թվում, հաշմանդամություն ունեցող անձանց կողմից: Ձեր կայքը պետք է կարողանա օգտագործվել այն բանի համար, որը կարիք ունի էկրանին ընթերցողին կամ այլ օժանդակ ծրագրային ապահովման: Այսպիսով, ձեր կայքը պատասխանում է նրանց կարիքներին, քանի որ ապահովված եք, որ փորձը, մինչդեռ հաշմանդամ այցելուների համար տարբեր է, դեռեւս տեղին է:
Հաշվի առնելով որքան հնարավոր է շատ տվյալների միավորներ, եւ ոչ միայն էկրանի չափը, կայքը կարող է շատ ավելին լինել, քան պարզապես «բջջային»: Այն կարող է դառնալ իսկապես զգայուն փորձ, արտահայտության յուրաքանչյուր իմաստով: