Արձագանքող վեբ ձևավորման մեջ ցանցաթաղանթի պատկերների խորհուրդներ և հնարքներ

Բովանդակություն

• Ֆոնի չափը ՝ 100%;
• Դիզայն տեքստի հետ
• Տառատեսակները ՝ որպես սրբապատկերներ
• Ընդարձակվող վեկտորային գրաֆիկա
• Տարբեր հնարքներ ՝ տարբեր սցենարների համար
• Հաղթահարել ապագան

Ես տեսել եմ կայքերի և հավելվածների ապագան, և դա 300ppi լուծաչափով է: Այս գրության պահից միայն վերջին iPhone- ն ու iPad- ն ունեն այս Retina էկրանները, բայց դրանք գալիս են այնքան արագ, որքան համակարգիչներ արտադրողները կարող են դրանք պատրաստել:

Քանի որ մենք եկել ենք 72ppi կամ 96ppi բանաձևերով շենքեր կառուցելու պատմությունից, շիզոֆրենիկ լուծման այս հարցը այն խնդիրն է, որը կշարունակվի դեռ տարիներ: Լրատվամիջոցների համար եկեք քննարկենք հարմարվողական կամ ճկուն պատկերներ տրամադրելու հարցը `առանց մտահոգվելու նրանց այցելուի լուծման խնդրից:

Ֆոնի չափը ՝ 100%;

Մեկ միջոց է `պատկերները տեղադրել HTML տարրերի ֆոնին և հավաքածու դնել ֆոնի չափը ՝ ավտոմատ;, Երբ տարայի տարրը ընդլայնվում է, ֆոնի վրա պատկերն էլ է ընդլայնվում: Սա ավելի շատ խորքային լուծում է, որը հարմար է էկրանի անշարժ գույքի փոքր տարածքների համար:

Դրա վառ օրինակը fittextjs.com կայքի սլաքի վրա է, որը նույնպես հիանալի գործիք է պատասխանատու դասավորությունների համար տեքստի նախագծման համար:

Այս խնդիրը դեռ առկա է պատկերի ամբողջականության հետ: Եթե ​​պատկերն ընդլայնվում է շատ ավելի մեծ տարածության համար, քան նախատեսված էր, պիքսելացիան և պատկերի այլ արտեֆակտերը հեշտությամբ տեսանելի են դառնում:

Դիզայն տեքստի հետ

Հարմարվողականություն ստեղծելու ձևերից մեկն այն առօրյա տառերն ու թվերն են, որոնք մենք օգտագործում ենք կարդալու և գրելու համար:

Ամբողջ աշխարհում տեղեկատվություն փոխանակելու հնարավորությունը ինտերնետի հաղթահարած մարտահրավերներից մեկն է: Մեկ այլ մարտահրավեր է բազմաթիվ երկրների մարդիկ, որոնք տեքստով միմյանց հետ շփվում են: Տարբեր լեզուներ նշանակում են տարբեր նիշեր և դա նշանակում է շատ ավելին, քան պարզապես ABC- ներ:

Այս հաղորդակցական հանելուկին դիմակայելու համար մեզ անհրաժեշտ է նիշերի ընդհանուր շարք, որոնցից կարող ենք քաղել, որոնք կարող են տարածվել և աջակցվել տարբեր գործառնական համակարգերի և ծրագրերի կողմից:

Հենց այդտեղ է մտնում Unicode- ը: Դա արդյունաբերության չափանիշ է շատ լեզուներով նիշերի տեղադրման և ուղարկման համար: Եվ դա ներառում է սրբապատկերներ.

Լավ պատրաստված սրբապատկերների հիանալի բանն այն է, որ դրանք շատ արդյունավետ են հաղորդակցման մեջ. Նրանց թարգմանության կարիք չկա: Օրինակ, հեռախոսը ներկայացնող փոքր նկարը ճեղքում է լեզվական այնքան խոչընդոտներ:

HTML5- ով Unicode պատկերակները օգտագործելու համար համոզվեք, որ գծի հավաքածուն սահմանեք գլխի տարրում.

meta charset = "utf-8">

Այնուհետև մարմնի տարրում դուք կարող եք պարզապես պատճենել և կպցնել Unicode- ը ուղղակիորեն հղման ինտերնետային էջից, ինչպիսին է en.wikipedia.org/wiki/Unicode_symbols:

Քայլ առաջ գնալու համար օգտագործեք CSS բովանդակության սերունդ ՝ կոդավորված Unicode նիշերով ՝ որպես բովանդակությունն ուժեղացնելու միջոց.

a [href ^ = "mailto:"]: նախքան {բովանդակությունը: " 2709"; }

Թեև Unicode նիշերը մեկնարկի ճանապարհ են, հավանաբար ամենալավն այն է, որ դրանք օգտագործվեն որպես լրացուցիչ տեսողական տարր: Էկրանի ընթերցողները. Զննարկիչները, որոնք ընթերցում են վեբ էջի պարունակությունը հաշմանդամություն ունեցող անձանց համար, հավանաբար չեն կարողանա կարդալ Unicode նիշերը:

Փաստորեն, պարզվել է, որ էկրանի որոշ ընթերցողներ կարդում են նիշը որպես հարցական նշան: Այսպիսով, վեբ դիզայներ տեղյակ լինի:

Տառատեսակները ՝ որպես սրբապատկերներ

Unicode- ի որպես սրբապատկերների օգտագործմամբ մենք կարող ենք նաև CSS- ի միջոցով կարգավորել դրանց տեսքը և զգացումը: Բայց մենք կարող ենք նաև մի քայլ առաջ գնալ և նույն միտքը կիրառել տառատեսակների վրա, որոնք պարունակում են միայն սրբապատկերներ, որոնք երբեմն անվանում են դինգբատի տառատեսակներ:

Քանի որ և Unicode- ի պատկերակները, և dingbats- ը դրվում են տեքստի միջոցով, հնարավոր է, որ այս տեսողական օժանդակ սարքերը ընդլայնվեն և պայմանագրվեն տարբեր սարքերի հետ ՝ տեքստի բարձրությունը դնելով էմ-ների կամ տոկոսների վրա:

Dingbat տառատեսակների օգտագործման հիմնական խնդիրն այն է, որ դրանք դեռ կերպարների ներկայացում են: Չնայած տեսողականորեն, մարդիկ կարող են պատկերակ տեսնել, կայքի այցելուները ՝ էկրանային ընթերցողներով, պատրաստվում են լսել պատահական նիշեր:

Խնդրի շուրջ աշխատելու համար օգտագործեք CSS բովանդակության գեներացում և տվյալների հատկանիշ ՝ նիշը պահելու համար, ինչպես ցույց է տրված pictos.cc/articles/using-icon-fonts/:

style> [data-icon]. նախքան {font-family: "icon-font"; բովանդակություն ՝ attr (data-icon);} / style> a href = "http://example.com/cloud/save/" > span data-icon = "C" aria-hidden = "true"> / span> Save to Cloud / a>

Այս թողարկմամբ սա լրացուցիչ խոչընդոտներ է ստեղծում էկրանների ընթերցողի միջով անցնելու համար: Եթե ​​դրանք կարողանան վերլուծել բովանդակության առաջացումը, գուցե չկարողանան նիշը քաշել դրանցից Attr () արժեք

Այս մթնշաղության շարքը իդեալական տեխնիկա չէ, այլ կարծես թե այժմ աշխատում է: Եթե ​​ինչ որ բան կա, հուսով եմ, որ սա մարտահրավեր է ստեղծում էկրանի ընթերցող ծրագրավորողների համար ՝ ավելի լավ գործիք պատրաստելու համար:

Ընդարձակվող վեկտորային գրաֆիկա

Մեկ այլ միջոց է `Scalable Vector Graphics (SVG) հետ աշխատելը: SVG– ն մեծ թռիչքներ է կատարել զննարկչի աջակցման հարցում: Փաստորեն, բոլոր ժամանակակից զննարկիչներն ինքնաբերաբար աջակցում են inline SVG պատկերներին:

Եթե ​​ցանկանում եք ստեղծել SVG գրաֆիկա, տեղյակ եղեք, որ վեկտորային պատկերների հանրաճանաչ գործիքները, ինչպիսիք են Adobe Illustrator- ը կամ Adobe Fireworks- ն, արդեն թույլ են տալիս արտահանել ձևաչափին:

SVG- ի հետ կապված խնդիրը պատկերի ձևաչափի մեջ չէ. Այն IE- ի հին տարբերակներում է: IE9 տարբերակից Microsoft- ը աջակցում է SVG- ին:

Այս խնդրի լուծման մի քանի տարբերակ կա: Դրանցից մեկն այն է, որ օգտագործվի զննարկչի հոտառություն (տեսակներից): IE- ի հին տարբերակներով մենք կարող ենք ապավինել HTML5- ի կաթսայատանը հայտնաբերված պայմանական մեկնաբանությունների նուրբ բլոկին և օգտագործել պարզ jQuery Plugin, որը կոչվում է SVG Փոխանակում (տե՛ս github.com/teleject/svg-swap): Այսպիսով, երբ հայտնվում է IE- ի ավելի հին տարբերակ, նրա տեղը զբաղեցնում է PNG-8 կամ JPEG կամ GIF փոխարինող պատկերը:

Մեկ այլ լուծում է հատկությունների հայտնաբերումը: Եթե ​​արդեն օգտագործում եք Modernizr- ը ձեր կայքում, նախադրեք Modernizr- ը ՝ ստուգելու համար SVG- ի ներդիրը և պոլիպրոպիլենը փոխանցելու միջոցով:

Տարբեր հնարքներ ՝ տարբեր սցենարների համար

Վերջապես, եկեք չմոռանանք CSS3- ի մասին: Դիմակի պատկերով, տեքստի լրացման գույնով, տեքստի հարվածով գույնով և այլն կտրող ծայրահեղ հատկություններով, մենք անշեղորեն հասնում ենք մի տեղ, որտեղ Photoshop- ը զննարկչում է ՝ սպասելով մեր գրաֆիկայի մատուցմանը էջի մնացած էջերի հետ միասին: դասավորության և նախագծման տարրեր:

Այս ոլորտում ոգեշնչման համար տե՛ս Trent Walton- ի վերնագրերը իր բլոգի հաղորդագրություններում, ինչպիսին է «Հոսքի մեջ» վերնագիրը:

Հաղթահարել ապագան

Սրանք ռաստերային պատկերների կարիքը շրջանցելու մի քանի եղանակներ են, և, հետևաբար, նույն պատկերի բազմակի տարբերակների անհրաժեշտությունը: Owsննարկչի աջակցությունը (չնայած ոմանք դեռ օգտագործում են վաճառող-նախածանցներ) բերում է հիանալի տեսողական ձևավորման և, որ ավելի կարևոր է, գործ ունի բազմաթիվ ֆայլեր խնայելու սարքի բազմաթիվ լուծումներում:

Դա պատասխանատու պատկերի լուծում է մի խնդրի, որը շուտով չի բարելավվի:

Վերնագրի գծապատկերը ՝ Patrick Hoesly