Praktiski apsvērumi reaģējošām vietnēm

Atsaucīgs dizains ir mūsu pašreizējais labākais risinājums visuresošā tīmekļa fenomenam. Cilvēki visur piekļūst internetam, izmantojot neskaitāmas neticami dažādas ierīces, un adaptīvās lapas nodrošina ērtu un funkcionālu veidu, kā ņemt vērā šīs atšķirības.

Šodien mēs atkāpsimies no diskusijām par plašsaziņas līdzekļu jautājumiem un tehnisko žargonu un pievērsīsimies galvenajiem aspektiem, kā atsaucīgas tehnikas ietekmē jūsu projektēšanas procesu. Kādi galvenie punkti jums jāpatur prātā, tuvojoties adaptīvam tīmekļa dizaina projektam? Lasiet tālāk, lai uzzinātu.

Izpētiet dizaina resursus

Dizains ir kas vairāk nekā CSS

Pēdējā laikā ir daudz diskutēts par metodēm, kas saistītas ar adaptīvu dizainu no tehniskā viedokļa: multivides vaicājumi, platums procentos utt. Tomēr, tiklīdz esat apguvis CSS trikus reaģējoša dizaina ieviešanai, jūs saskaras ar daudz ko. lielāks šķērslis: faktiskais dizains.

"Tas ir pietiekami grūti, lai aizvērtu profesionālu dizainu, ja jūs uztraucaties par vienu formātu. Cik daudz grūtāk tas būs adaptīvam dizainam?"

Tas izklausās kā biedējošs uzdevums, vai ne? Jūs plānojat izveidot vienu saliedētu, konsekventu pieredzi, kas izskatās nevainojami gandrīz visos ekrāna izmēros. Tas ir pietiekami grūti, lai aizvērtu profesionālu dizainu, ja jūs uztraucaties par vienu formātu. Cik daudz grūtāk būs adaptīvam dizainam?

Tas ir galvenais iemesls, kāpēc daudzi dizaineri vilcinās pieņemt adaptīvu dizainu kā noklusējuma praksi. Biežākais iebildums, ko dzirdu gan no dizaineriem, gan viņu klientiem, ir tāds, ka atsaucīgs dizains izklausās kā diezgan laikietilpīgs pasākums. Dizaineri ir spiesti mēģināt vai nu attaisnot cenu kāpumu, vai arī ēst stundas, lai ražotu kvalitatīvu darbu.

Par laimi, no CSS viedokļa, tādi projekti kā Skeleton tiešām samazina kodēšanas laika saistības. Tomēr tas nenozīmē, ka esat nonācis aiz muguras, jo kā dizaineram jums joprojām būs jākoncentrējas uz drošas pieredzes radīšanu katram lietotājam, un tas nozīmē, ka nopietni jāpārdomā, kā mainās projektēšanas process, ņemot vērā šo jauno metodoloģiju. . Apskatīsim dažus galvenos apsvērumus, kas jums jāpatur prātā.

Photoshop to neizgriezīs

Izmantojot adaptīvu dizainu, dizains pārlūkā vairs nav iedoma, tā ir nepieciešamība. Noteikti var izcelt dažas idejas Photoshop, kā vietnei vajadzētu izskatīties dažādos platumos, un, to darot, iespējams, tiek iegūti vēl bagātīgāki gala rezultāti, taču vienkārša patiesība ir tāda, ka Photoshop nevar atkārtot tāda veida dinamisko efektu, kas norāda uz atsaucīgu dizains.

"Projektēšana pārlūkprogrammā vairs nav iedoma, tā ir nepieciešamība."

Kad jūs runājat par vienu dizainu, kas mainās līdz ar pārlūka loga izmēru, labākais veids, kā to plānot, ir riepu sitiens un pārlūka darbības sākšana.

Neuzskatu to par Photoshop bashing skaņu, jums nav un nevajadzētu pamest, izmantojot attēlus, faktūras utt., Kas ir iebūvēti Photoshop, Fireworks vai citā grafikas programmatūrā. Tomēr, saliekot tos ātrā maketā, visticamāk, to varēs sasniegt, izmantojot tiešas pārlūkprogrammas ieviešanu, nevis statiskus sīktēlus.

Ņemiet vērā, ka jūsu maketi joprojām var būt zemas precizitātes produkti neatkarīgi no tā, vai vēlaties sākt ar pamata stiepļu ietvaru vai diezgan gaišs izskata dizains ir pilnībā atkarīgs no jums. Šeit galvenais ir tas, ka jums ir kaut kas dzīvs, kas ļauj pārbaudīt dažādas attīstības, lai jūs varētu atrisināt problēmas, kad tās rodas, nevis tērēt vērtīgās stundas pēc principiāli kļūdainas idejas.

Dramatiski atšķirīgs

Dažreiz dizaina samazināšana ir tikpat vienkārša kā vienumu pārpludināšana no vairākām kolonnām vienā sakrautā kolonnā. Ja jūsu dizains ir sadalīts jaukos mazos gabaliņos, tas varētu būt veids, kā iet.

Tomēr atcerieties, ka dramatiski atšķirīgas ierīces var pieprasīt dramatiski atšķirīgus dizainus. Bieži gadās, ka patiesi labāku risinājumu var sasniegt, ievērojami mainot lapas darbību. Lai redzētu, ko es domāju, apsveriet zemāk redzamo El Sendero del Cacao dizainu.

Kā redzat, lielās un mazās dizaina versijas diezgan nedaudz atšķiras. Šeit galvenais ir tas, ka tie joprojām izskatās kā vienas un tās pašas vietnes divas versijas, kas nozīmē, ka zīmola konsekvence ir palikusi precīza. Dizainers tikai nolēma, ka mobilā versija funkcionē labāk ar ievērojami mazāk vizuālu nojautu nekā pilna versija.

Paturiet prātā, ka “atšķirīgs” ne vienmēr nozīmē pilnīgu un pilnīgu atkāpšanos. Jūsu mobilajai versijai nav jābūt garlaicīgai un paredzamai. Šeit nav runa par visu atdalīšanu, bet kritiski jāapsver visi dažādie galveno izmēru lielumi, uz kuriem jūs mērķējat, un tas, kā jūs varētu uzlabot katra pieredzi, pārdomājot dizaina pamatus.

Kas ir absolūti būtisks?

Viens no galvenajiem komponentiem, pārejot no jūsu dizaina dažādās fāzēs, ir mērķēt uz absolūti vitālajiem dizaina komponentiem un piešķirt tiem visaugstāko prioritāti.

Kā mēs redzējām iepriekšējā piemērā, tas noteikti ne vienmēr būs gadījums, kad mobilajām ierīcēm draudzīgajā versijā būs viss, kas būs jūsu pilna izmēra darbvirsmas noformējumā. Tad triks ir apsvērt visu, ko plānojat iekļaut jūs un jūsu klients, un izveidot svarīgu hierarhiju, lai jūs varētu sagriezt nevajadzīgo mazākām versijām.

Mēs redzam šo principu darbā Stefana Karvera vietnē zemāk.

Ievērojiet, kā mobilajai versijai dizains ir ne tikai mainīts, bet arī reāli samazināts. Daļa satura tika uzskatīta par būtisku, savukārt cits saturs drīzāk uzskatāms par “patīkamu būt”, ja ekrānam ir pietiekami daudz vietas.

Acīmredzamākais piemērs tam ir navigācijas apgabals. Ievērojiet, kā lielākajā dizaina versijā katram navigācijas elementam ir maz apakšvirsrakstu. Tie lietotājam palīdz labāk izprast navigācijas shēmu. Tomēr mazajā versijā tie tika noņemti, lai ietaupītu vietu.

Analizējot būtisko elementu dizainu, galvenais ir eksperimentēšana. Mēģiniet noņemt dažādas sastāvdaļas, lai novērtētu, vai cieš lietojamība. Ņemiet vērā, ka šie lēmumi jāpieņem katrā intervālā, ne tikai mazākajos un lielākajos.

Pieskarieties ≠ Noklikšķiniet

Vēl viens nozīmīgs punkts, kas jāatceras, ņemot vērā dizaina mērogu, ir tas, ka pašreizējais skaitļošanas stāvoklis ir sadalīts divās dažādās kategorijās: ar skārienu balstītas ievades ierīces un tās, kurās tiek izmantots kursors. Drošs pieņēmums, protams (pagaidām), ir tas, ka lielāki pārlūka logu izmēri parasti atbilst galddatoriem vai piezīmjdatoriem, savukārt mazāki pārlūka logu izmēri parasti norāda uz skārienjutīgu interfeisu.

Tie ir ievērojami atšķirīgi zvēri, un jums būs labi atcerēties, ka, strukturējot savu dizainu, jo virziens, uz kuru šīs zināšanas ved jūs, varētu būt nedaudz pretintuitīvs.

Piemēram, kaut arī mums ir tendence domāt par vietni mobilajām ierīcēm kā darbvirsmas vietnes samazinātu versiju, bieži vien elementu izmērs palielinās atšķirības starp pieskaršanos un noklikšķināšanu dēļ. Navigācijas elements, kas, šķiet, ir lieliski pieejams ar peli un kursoru, varētu būt gandrīz neiespējami precīzi mērķēt ar lielo, neapstrādāto ievades ierīci, kas ir cilvēka rādītājpirksts.

Svarīgi šeit atcerēties - pārbaudīt kā traku. Tas ir pārāk viegli noformēt uz darbvirsmas un pēc tam mainīt pārlūka loga izmērus, lai varētu palūkoties uz šo mobilo versiju. Tas vienkārši nepasaka visu stāstu. Pirms saucat to par labu, jums ir jāuzsver dizains uz mazāku izmēru.

Tas viss ir starp

Viena ārkārtīgi svarīga lieta, kas jāieņem, ņemot vērā atsaucīgo dizainu, ir tāda, ka tas ir vairāk nekā ekrāna izmēri: tas ir saistīts ar pārlūka loga izmēriem. Tas, ka kādam ir 13 collu MacBook, nenozīmē, ka viņa pārlūkprogrammas logs ir tik liels. Bieži gadās, ka lietotāji pārlūka logus atver un izmanto daudz mazāk nekā pilnekrāna režīmā.

Līdzņemšana šeit ir tāda, ka, pārbaudot dažus iepriekš iestatītus loga izmērus, jūs neesat pie āķa. Mainiet pārlūka loga izmēru un skatieties, kā dizains reaģē uz katra mazā soļa. Standarta arguments ir tāds, ka lietotāji, kas nav dizaineri, nekad neveic šo darbību, un tā ir pareiza, taču viņi pārlūka logus izmantos bezgalīgā neparedzamu izmēru klāstā, un atsaucīga dizaina skaistums ir tāds, ka jūs varat diezgan viegli nodrošināt, ka jūsu dizains izskatīsies perfekta visās tajās.

Apsveriet iespēju doties pirmajā mobilajā maršrutā

Visbeidzot, atkarīgs no tā, kā jūs plānojat savus adaptīvos dizainus. Tomēr ir daudz spēcīgu argumentu, lai pievienotos mobilajam telefonam.

Sākot ar mobilo versiju, tiek nodrošināts, ka jūs saviem mobilajiem lietotājiem vienkārši neveicat sava oriģinālā dizaina šausmīgās versijas pasniegšanu. Tas arī nodrošina, ka jūs patiešām pārdomājat katra mazā satura gabala specifiku.

Iepriekš mēs teicām, ka jums ir jāaplūko savs dizains un jākoncentrējas uz absolūti būtiskajiem elementiem. Tas ir daudz vienkāršāks process, ja jūs faktiski sākat tikai ar kailām lietām. Izmantojot šo paņēmienu, jūs varat aktīvi pievienot savu dizainu, jo palielinās lapas izmērs, nevis izgriešana, jo lapas izmērs samazinās. Tas seko progresīvas uzlabošanas koncepcijai, kas sākas ar stabilu funkcionālo bāzi un, kur iespējams, piedāvā uzlabojumus.

Vēl viens mobilā tālruņa ieguvums ir tas, ka jūs bieži varat izvairīties no nevajadzīgu elementu ielādēšanas mazākās ierīcēs, kuras tos neizmanto. Projektu, piemēram, 320 un Up, mērķis ir palīdzēt jums samazināt resursus, kurus ielādē mazā dizaina versija.

Secinājums

Šī raksta mērķis bija likt jums pārtraukt domāt par atsaucīga dizaina aizmugures daļu pietiekami ilgi, lai apsvērtu šīs tehnikas sekas tam, ko redz lietotājs. Daudz svarīgāks par multivides vaicājumu sintakse ir gala rezultāts tam, kā jūsu dizains attīstās no vizuālā un funkcionālā viedokļa, lai apmierinātu lietotāja vajadzības.

Atcerieties, ka jums ir aktīvi jāattīsta dizains pārlūkprogrammā, nevis tikai statiskā dizaina lietojumprogrammā. Jums arī jāizveido konkrēta svarīgāko elementu hierarhija, lai pārliecinātos, ka šie mīkla gabali atrodas un darbojas lieliski katram loga izmēram. Visbeidzot, atcerieties, ka mobilā tīmekļa dizains ir daudz vairāk nekā darbvirsmas Web lapu samazināšana. Apsveriet iespēju izvēlēties pirmo mobilo tālruni, lai nodrošinātu, ka visi lietotāji gūst pārliecinošu pieredzi.

Attēlu kredīti: Klaudija Regīna