1. Chagua jukumu la ukurasa kabla ya kuchagua muundo wake
Anza na kurasa zinazoshikilia kazi za mteja au biashara: kurasa za huduma, kurasa za bidhaa, fomu za waundaji wa mawasiliano (lead forms), uhifadhi (booking), kuingia akaunti, kikapu, na msaada. Andika tamko moja la kukamilisha kwa kila moja, kama: “Mgeni wa mara ya kwanza anaweza kuelewa huduma hii, kuona ushahidi unaofaa, na kuomba simu.” Ikiwa ukurasa una kazi zaidi ya moja, amua ipi itaonekana kwanza.
Orodhesha maudhui yake kama muhimu, yanayounga mkono, au hiari. Muhimu sio sawa na fupi; mtembelea anaweza kuhitaji muktadha wa bei, uhalali, maelezo ya utoaji, au taarifa za kulinganisha. Toa njia wazi kwa nyenzo hizo kwenye mpangilio mwembamba. Google inapendekeza maudhui muhimu ya msingi ya sawa kwenye simu na eneo-kazi, huku ikiruhusu uwasilishaji tofauti kama tabo au madirisha (accordions).
Kwa upana mdogo, mwenzako anapaswa kuweza kusema kile ukurasa unakutoa, anayeusaidia, na hatua inayofaa inayofuata.
2. Fanya msingi wa mpangilio mwembamba ukamilike
Anza na njia inayofanya kazi ya safu moja badala ya kubana muundo wa eneo-kazi. Tumia vyombo vinavyobadilika (flexible containers), ruhusu maandishi yakutwe (wrap), na weka usanidi wa viewport unaomruhusu kivinjari kuweka mpangilio kwa upana wa kifaa. Usizuie kuongezwa kwa ukubwa (zooming). Hakikisha menyu, taarifa, picha, vipachiko (embeds), na makosa ya fomu zinabaki ndani ya viewport; kuzunguka kwa ukurasa kwa usawa bila kukusudi kawaida ni kasoro.
Tumia 320 CSS pixels kama jaribio lenye mahitaji kwa upangaji upya (reflow) wa kusoma kawaida na maudhui ya kazi. WCAG 2.2 inaelezea kuonesha maudhui wima kwa upana huo bila kupoteza taarifa au ufanisi au kuvinjari kwa pande mbili. Ramani, chati, au jedwali la data linaweza kuhitaji eneo lake la kuvinjari, lakini hilo haliiwezi kuwa sababu ya kufanya ukurasa mzima uzunguke upande.
Linganisha picha na kontena lao na toa vipimo ili kivinjari kiweze kuhifadhi nafasi kabla ya kuzipakia.
3. Ongeza maboresho bila kufanya njia ya msingi kuwa tete
Maboresho ya taratibu (progressive enhancement) yanamaanisha kuwa maudhui na ufanisi muhimu vinafanya kazi kama msingi, wakati vivinjari vyenye uwezo na skrini kubwa vinapokea ziada. Anwani, maelezo ya bidhaa, lebo za fomu, ufafanuzi wa bei, na njia ya kutuma hayapaswi kutegemea uhuisho, hover, au script ya kuchelewa. Mpangilio mpana unaweza kuongeza paneli ya kulinganisha, urambazaji unaodumu, au kuchuja tajiri bila kufanya msingi uwe haukamilike.
Muulize mwekelezaji kuongeza breakpoint wakati maudhui yanaposhikana au kupoteza nafasi, sio kwa sababu kifaa kilichotajwa kipo kwenye orodha. Breakpoint ni pale tu sheria ya mpangilio inabadilika. Usitumie mipangilio myembamba kuondoa kimya kimya maandishi ya msaada, masharti ya sera, mapitio, metadata, au maelezo muhimu yaliyojumbiwa.
Onyesha kwanza picha ya nyumba ya kimsingi (basic gallery) na maelezo, kisha ongeza viratibu vya kuongezea kama kuongezea (zoom) au swiping pale script zao zinapopatikana.
4. Buni vidhibiti kwa ajili ya kugusa, uwazi, na urejeshaji
Ergonomics ya kugusa inamaanisha kubuni kwa mikono badala ya pointer ya panya iliyo sahihi. Wape vitufe, vikagua visivyo na tiketi (checkboxes), alama za kufunga, wachujaji wa wingi, na chaguzi za fomu ukubwa na nafasi ya kutosha kupunguza kugusa kwa bahati mbaya. Nyeleza alama za ikoni pale maana yao si dhahiri. Usifanye hover kuwa njia pekee ya kufichua bei, menyu ndogo, ufafanuzi, au kitendo.
WCAG 2.2 inajumuisha kigezo cha kiwango cha Level AA cha ukubwa wa lengo angalau 24 kwa 24 pikseli za CSS kwa lengo la pointer, pamoja na ubaguzi ulioainishwa ikiwa ni pamoja na nafasi na viungo vya mstari. Tumia hii kama kumbukumbu ya chini, si ahadi ya faraja. Vitendo muhimu vinastahili lebo zilizo wazi, nafasi za ukarimu, na hatua ya uthibitisho inayorejesha. Tafuta mapitio ya ufikiaji yaliyo na sifa kwa safari za hatari kubwa au madai rasmi ya uzingatiaji.
Weka lebo zikionekana, onyesha maoni ya uthibitishaji yanayotumika, na hifadhi thamani zilizowekwa baada ya kosa.
5. Tibu vyombo vya vyombo vya habari na vipachiko kama sehemu ya safari ya mtembelea
Amua kama kila picha ni ya taarifa, ya kushawishi, au ya mapambo. Picha ya taarifa inahitaji mbadala wa maandishi unaofaa na kukatwa kwa mpangilio mwembamba kinachoendeleza undani unaohitajika. Chaguo la picha zinazojibadilisha (responsive image options) huliwa kivinjari kuchagua rasilimali inayofaa badala ya kumlazimisha kila mgeni kupakua rasilimali kubwa ya eneo-kazi. Usiruhusu picha ya hero au video kufunika kusudi la ukurasa na kitendo kuu.
Fanya hesabu ya ramani, gumzo, video, malipo, upangaji, idhini, na vidakuzi vya mapitio. Kwenye skrini ndogo, angalia hali yao ya kupakia, ukubwa wa vidhibiti, mpangilio uliobounded, na njia mbadala inayotumika. Kwa malipo, utambulisho, au michakato iliyo chini ya udhibiti, shiriki wachunguzi wenye sifa wa usalama, faragha, na uzingatiaji; upimaji wa kuona si tathmini ya usalama.
Rekodi kila sehemu ya nje, mmiliki wake, kazi yake ya kibiashara, na njia mbadala iliyoidhinishwa ikiwa ni polepole au imevunjika.
6. Jaribu njia za kazi kabla ya uzinduzi na panga urekebishaji
Tumia mode ya kuonyesha kwa kivinjari mapema kuchunguza upana mwembamba, wa kati, na mpana. Chrome Device Mode inaweza kukadiria viewport, kugusa, mwelekeo, mtandao, na hali ya CPU, lakini Chrome inaelezea hiyo kama makadirio badala ya utekelezaji wa kifaa halisi. Kamilisha njia muhimu kwenye simu halisi na vivinjari vinavyofaa unapoweza.
Jaribu kazi, si tu picha: upakiaji baridi (cold load), urambazaji, uwasilishaji wa fomu batili na sahihi, mabadiliko ya mwelekeo, kuongezeka kwa ukubwa (zoom), na kurudi kutoka kwenye skrini ya mtu wa tatu. Rekodi URL, kivinjari au kifaa, kazi, matokeo yaliyotarajiwa, mmiliki, na uamuzi wa kurejesha. Kwa mabadiliko makubwa ya templeti, malipo, CMS, au utegemezi, panga uzinduzi wa awamu na uwe tayari kurejesha njia ya awali badala ya kubuni kwa dharura chini ya msongo.
Kuruhusu tu baada ya kazi muhimu kufanya kazi, vidhibiti vinavyotumika, hakuna kuzunguka kwa ukurasa kwa upande, na utegemezi muhimu una njia mbadala.