Përmbajtje
- Projektimi për të panjohurën
- Një qasje pragmatike në dizajn
- Duke u bërë faqosje agnostike
- Kodimi në mënyrë progresive
- Zhytja në shënjestër
Duket se të gjithë po flasin për një dizajn të përgjegjshëm të internetit këto ditë, dhe me një arsye të mirë; ndërsa numri i pajisjeve të mundësuara në ueb vazhdon të rritet - secila me aftësi dhe karakteristika të ndryshme - nuk është më e arsyeshme të ndërtohen faqe me gjerësi fikse.
E vërteta është, nuk ka qenë kurrë. Megjithatë, deri më tani konsiderohej praktika më e mirë për të hartuar përvoja që bënë një numër supozimesh, qofshin ato rreth zgjidhjes së ekranit, gjerësisë së bandës ose metodës së hyrjes. Nëse keni krijuar ndonjëherë një faqe në internet me gjerësi 960px, vetëm për ta parë atë në ekranin e vogël të një shoku netbook (dhe po, po shkruaj nga përvoja e dhimbshme këtu), do të kuptoni pse kjo nuk ishte një qasje veçanërisht e zgjuar. Tani, me smartphone dhe tabletë të hedhur në përzierje, është e qartë se metodat tona tradicionale nuk janë më të përshtatshme për qëllime.
Fatmirësisht, ardhja e pyetjeve të medias CSS dhe një pranim në rritje se rrjeti është një medium më vete, do të thotë që ne kemi filluar të përqafojmë natyrën e vërtetë të platformës, duke pranuar që universaliteti i saj është një forcë, jo një dobësi.
Gjatë pesë ditëve të ardhshme, unë do t'ju udhëzoj përmes një teknike që njeh këtë fakt: dizajn i përgjegjshëm i faqes në internet. Krijuar nga Ethan Marcotte, kjo ndërthur faqosje të rrjedhshme, imazhe fleksibël dhe pyetje mediatike për të na ndihmuar të ndërtojmë faqe që përshtaten me hijeshi në çdo ambient që ata hasin.
Unë do ta demonstroj këtë qasje duke ju treguar se si të ndërtoni një galeri të thjeshtë mediatike. Në shembujt e mi, unë do të krijoj një uebfaqe të vogël për të dokumentuar një udhëtim rrugor të fundit që bëra në të gjithë Shtetet e Bashkuara, por mos ngurroni ta personalizoni kodin dhe modelin për t'iu përshtatur nevojave tuaja.
Projektimi për të panjohurën
Pjesa më e madhe e këtij tutoriali do të përqendrohet në aspektin e zhvillimit të dizajnit të përgjegjshëm. Por, para se të gërmojmë në ndonjë kod, le të gjejmë një moment për të menduar se si mund të krijojmë një faqe në internet që mund të ketë skema të pafundme.
Tani, unë jam me fat që mund të hartoj ndërfaqe dhe zhvilloni kodin frontend që i bën ato reale. Kjo sigurisht nuk është një aftësi unike - nëse punon për veten tënde atëherë ndoshta je i njëjti. Por sigurisht që është e dobishme të kuptojmë se si përmbajtja mund të përshtatet dhe të rimbushet kur harton dizajne të lëngjeve.
Unë gjithashtu punoj si pjesë e një ekipi më të madh ku roli im është më i specializuar. Në një ambient të tillë, krijuesi vizual mund të përqendrohet vetëm në përkthimin e kornizave të telit në kompjutera tërheqës, tërheqës (të nënshkruar, të përsosur nga pikseli). Dhe nuk është e pazakontë që zhvilluesit të vendosen veçmas, duke përkthyer këto paraqitje në markim të dobët dhe efikas dhe CSS.
Sidoqoftë, rrjedha të tilla lineare dhe të ndara shpejt prishen sapo të fillojmë të vlerësojmë se si dizajnet do të përshtaten në mjedise të ndryshme. Sa më shumë që çdo mjet ose teknologji e re, ne duhet të marrim në konsideratë mënyra më bashkëpunuese dhe më të shkathëta të punës. Shumë nga problemet më të ndërlikuara të hasura gjatë hartimit të faqeve të internetit të përgjegjshme mund të zgjidhen thjesht përmes bisedave, eksperimentimeve dhe përsëritjeve.
Një qasje pragmatike në dizajn
Kjo nuk do të thotë që nuk ka hapësirë që projektuesit të mendojnë se si një dizajn mund të funksionojë jashtë kufijve të ndonjë pajisjeje të veçantë.
Në Clearleft, ne fillojmë dizajnin vizual nga këndvështrimi i desktopit. Ne fillojmë duke përcaktuar një gjuhë gjithëpërfshirëse të modelit dhe estetikën vizuale, shpesh duke i bazuar eksplorimet fillestare rreth një pjese thelbësore të përmbajtjes. Për shembull, nëse jemi duke hartuar një sit ushqimor, do të fillojmë me një faqe recetash; për një faqe lajmesh, një faqe historish.
Jo vetëm që kjo është një faqe e rëndësishme në sit, por ndoshta përfshin mjaft përmbajtje të strukturuar që ne të krijojmë një gamë tipografike. Ne gjithashtu do të mendojmë se si paraqitja mund të përshtatet - edhe nëse është në pjesën e pasme të mendjes sonë në këtë fazë.
Një mënyrë e dobishme për të testuar stresin e një modeli është që të merrni një faqe të tillë dhe ta përshtatni atë për një ekran më të ngushtë (wide 320px i gjerë). Ju me siguri do të zbuloni se disa aspekte të dizajnit do të duhet të rimendohen që ata të punojnë në këtë gjerësi. Ketu jane disa shembuj:
- Tipografia: Titujt e mëdhenj mund të funksionojnë mirë në faqosjet më të gjera, por në ekranet më të vegjël ato mund të zënë shumë hapësirë vertikale dhe për këtë arsye kërkojnë lëvizje shtesë. Ndërsa gjatësitë e linjës ndryshojnë, duhet të keni parasysh edhe lartësitë e vijave dhe trajtime të tjera tipografike.
- Lidhjet: Si do të funksionojë dizajni juaj në pajisjet me prekje? Ndërsa nuk kemi një mënyrë të thjeshtë për t'i zbuluar këto (domethënë duhet të marrim parasysh në të gjitha aspektet e dizajnit tonë), modelimi për një ekran më të ngushtë mund të na japë një mundësi për të menduar për fushat e synuara për lidhje dhe elementë të tjerë interaktivë . Udhëzimet e iOS rekomandojnë që këto të jenë së paku 44 pikselë / pikë katrore, e cila është një shifër e mirë për t'u synuar.
- Lundrimi: Ky ndoshta do të jetë përbërësi më i vështirë i çdo modeli të përgjegjshëm, veçanërisht nëse faqja juaj ka shumë seksione dhe një hierarki të thellë. Brad Frost ka shkruar një përmbledhje të disa mënyrave të ndryshme të lundrimit që aktualisht po merren parasysh.
- Përmbajtje e tepërt: A nuk kërkohet ndonjë përmbajtje? A duhet që përmbajtja tjetër të shfaqet vetëm në skenarë të caktuar? Unë nuk mbështes fshehjen e përmbajtjes bazuar në atë pajisje që përdor një përdorues, por teknikat si ngarkimi me kusht (të cilat do t'i shohim më vonë këtë javë) mund të na ndihmojnë të shërbejmë në faqe më të vogla që ngarkojnë vetëm përmbajtje plotësuese kur kërkohet.
Dizajnimi i dy paraqitjeve të kundërta përforcon idenë se një dizajn do të përshtatet, ndërsa hekurosni gotat e mundshme që herët. Ndërsa kjo tingëllon si një dyfishim i punës, mbani në mend se ne nuk po dizajnojmë çdo faqe me saktësi të përsosur në piksel. Në vend të kësaj, ne jemi duke u përqëndruar në ndërtimin e një gjuhe të shkallëzuar të dizajnit - një që do të zhvillohet ndërsa fillojmë ta zbatojmë atë në kod, dhe një që bazohet rreth moduleve dhe përbërësve individualë.
Duke u bërë faqosje agnostike
Çuditërisht, për një industri që historikisht e ka trajtuar uebin si shtypje, faqosjet me gjerësi fikse kanë përshkuar shumë prej produkteve të prodhueshme. Ndërsa fillojmë të hartojmë për një medium të adaptueshëm, po konsiderohen qasje të reja që na lejojnë të zgjidhim problemet dhe të komunikojmë ide ndërsa pranojmë natyrën rrjedhëse të mediumit. Këtu janë disa nga të preferuarat e mia:
- Diagramet e përshkrimit të faqes: Ndërsa kornizat me tel shpesh mund të nënkuptojnë paraqitjen (dhe kështu supozojnë një lloj të caktuar të pajisjes), diagramet e përshkrimit të faqes heqin këtë supozim dhe në vend të kësaj përshkruajnë përbërësit individualë, të rregulluar në dokument për sa i përket përparësisë.
- Pllaka stili: Kur komunikojmë ide të dizajnit me klientët, ne mund ta gjejmë veten duke prezantuar ‘piktura të faqeve të internetit’. Nëse nuk jemi të kujdesshëm, klientët me të drejtë do të kërkojnë të shohin koncepte që demonstrojnë se si do të duket një dizajn edhe në pajisjet e tjera. Kjo mund të na detyrojë në një situatë të paqëndrueshme të prodhimit të faqeve të shumta për pajisje të shumta. Samantha Warren ka menduar për këtë problem dhe ka dalë me pllaka stili. Këto qëndrojnë diku midis një bordi disponimi (por më pak të paqartë) dhe kompjuterave të realizuar plotësisht (por më pak të saktë) dhe na ndihmojnë të komunikojmë tipografinë, stilet e butonave dhe trajtimet e kokës. Ata gjithashtu inkurajojnë një nivel më të pjekur të diskutimit me klientët tanë.
- Mobilizoni lojën e dizajnit: Ky ushtrim mund të funksionojë shumë mirë gjatë punëtorive bashkëpunuese të dizajnit. Në këtë ushtrim, të gjithë shkruajnë në shënimet Post-it elementet që mund të shfaqen në një faqe të caktuar. Këto pastaj ngjiten në mur për nga rëndësia, sikur të shfaqeshin në mënyrë lineare në një celular. Diskutimi që rezulton mund të gjenerojë disa përfundime të habitshme. Për shembull, ju mund të kuptoni se navigimi nuk është përbërësi më i rëndësishëm në faqe. Kjo mund të pasojë deri te dizajni, ku një lidhje kalimi në krye të faqes lidhet me navigimin në fund të faqes.
Sigurisht ka ende vend për mjetet që ne tashmë po përdorim, por kur hartojmë një faqe në internet me terma të gjerë, duhet të kemi parasysh që faqosja nuk dihet më e njohur.
Kodimi në mënyrë progresive
Fatmirësisht, nuk kemi nevojë të shqetësohemi për modelin vizual në shembullin që po punojmë pasi puna e vështirë është bërë për ne! Në vend të kësaj, ne mund të përqendrohemi në kodimin e dizajnit tonë në një faqe në internet plotësisht të përgjegjshme.
Edhe një gjë para se të fillojmë. Importantshtë e rëndësishme të mbani mend një parim themelues të mediumit me të cilin po punojmë: universaliteti. Kjo nënkupton jo vetëm ndërtimin e pajisjeve të sotme të mundësuara në internet, por gjithashtu sigurimin e pajtueshmërisë me ato të djeshme dhe të nesërme gjithashtu. John Allsopp përshkroi pse ky parim ka rëndësi në postimin e tij 6 miliardë tjetër:
"Kjo gjashtë miliardë tjetër është fëmijë në Indinë rurale, Afrikë, Kinë, ku aksesi në energji dhe rrjete mund të jetë i përhershëm. Someoneshtë dikush në Sumatra në një kuti Wintel një dekadë të vjetër. Janë njerëzit që flasin qindra gjuhë të ndryshme, me dhjetëra gjuhë sisteme shkrimi. Janë njerëzit që janë të parët në familjen e tyre që kanë mundësi të lexojnë dhe të shkruajnë. It'sshtë 20 përqind e njerëzve në të gjithë botën që nuk dinë të lexojnë ose të shkruajnë.’
Ne mund të gjurmojmë kuptimin tonë të internetit duke parë modelet e ndryshme (për mungesë të një fjale më të mirë) që kanë zënë vend në profesionin tonë: standardet e uebit, mundësia e hyrjes, JavaScript jo modest të gjitha janë variante në të njëjtën temë: përmirësimi progresiv. E njëjta gjë është e vërtetë për dizajnin e përgjegjshëm të faqes në internet. Për të ndërtuar një me të vërtetë uebfaqja e përgjegjshme është të ndërtosh një sit që jo vetëm është i pajtueshëm, por edhe miqësor për të ardhmen.
Zhytja në shënjestër
Mirë, mjaft nga preambula, është koha për të hapur një redaktues teksti.Projektuesi ynë na ka siguruar një dizajn të orientuar drejt desktopit dhe ka qenë mjaft i mirë për të siguruar shembuj se si mund të shfaqet kjo edhe në një pamje më të ngushtë.
Mund të jetë joshëse t'i kodifikoni këto veç e veç, por unë do të sugjeroj një qasje tjetër. Duke vendosur përbërësit e veçantë - ose modelet - që përbëjnë modelin në një faqe të vetme, ne mund të krijojmë një portofol modeli. Kjo na lejon të zhvillojmë përbërës jashtë kufijve të çdo faqosjeje të faqeve dhe do të na japë diçka për t'iu referuar më vonë për çdo test regresioni. Le të shohim shënimin fillestar në disa pajisje të ndryshme:
Shikoni portofolin tonë të modelit të shënuar
Epo, unë do të jem i mallkuar - ne tashmë kemi një faqe në internet të përgjegjshme! Përmbajtja jonë po përshtatet në kufijtë e secilës pajisje, qoftë një iPad i ri i zbukuruar ose një telefon me tipare të hedhura. Ai madje funksionon në një shfletues vetëm për tekst si Lynx.
Falë parimeve themelore të universalitetit, rrjeti është i përgjegjshëm si parazgjedhje. Kjo është e mrekullueshme, por gjithashtu do të thotë që gjithçka që ne t'i bëjmë kodit tani e tutje mund të kompromentojë këtë përshtatshmëri vendase.
Neser: Ne do të shkelim me kujdes dhe do të fillojmë të zbatojmë aspektin e parë të dizajnit të përgjegjshëm: tipografinë dhe rrjetet fluide.
