Godt lydhurtigt webdesign, af sin art, går ubemærket til dem, der indtager indhold online. Så når nogen spørger om en ny hjemmeside, er de ofte helt uvidende om konceptet, på trods af at de oplever det dagligt. Og alligevel er responsivt website design nu anerkendt som standard praksis i hele branchen.
At opbygge lydhøre websites har ændret vores processer, fra at skabe mockups af komplette sider til bygningsbiblioteker af genanvendelige komponenter og layouter.
layout er indholdsdrevet og stilarter er branddrevne
For nylig blev vi henvendt til en eksisterende klient til omhyggeligt at ombygge deres hjemmeside. Vi havde tidligere arbejdet med dem ved hjælp af en stiv vandfaldsproces. Vi var i stand til at omfavne ændringer på et hvilket som helst tidspunkt i projektet.
Gennem hele processen fulgte vi filosofien om, at layout er indholdsdrevet og stilarter er branddrevne.
Specifikationsdokumenter fungerer godt til at notere alle de funktioner, et websted skal have. Men er det virkelig hvad klienten har brug for? Det er meget svært at visualisere disse funktioner på plads. Resultatet er således, at specifikationsdokumenter ofte bliver til opblåste ønskeliste. Dette hjælper ikke kunden, designerne eller den endelige hjemmeside.
I stedet for specifikationsdokumenter valgte vi at bruge ledningsrammer. Det første skridt i projektet var at skabe trådrammer for hver side. Det kan lyde som overkill, men trådrammerne førte til tidlige diskussioner af indholdet og funktionerne for hver side. Vi fandt, at funktioner, som vi aldrig overvejede før, blev tilføjet, mens mange blev fjernet.
Wire-frames gav os en klar og visuel fremstilling af, hvordan indhold og funktionalitet bør prioriteres på hver side. Disse trådrammer blev derefter et referencepunkt, der erstattede et specifikationsdokument.
Nøgle afhentning: Produktion af trådrammer i stedet for specifikationsdokumenter fokuserer alle på kerneegenskaber og vigtigheden af indhold.
Revision af trådrammerne giver os mulighed for at danne en liste over alle de fælles komponenter. På tværs af et enkelt sted vil der være dusinvis af små sektioner på hver side, der er meget ens. Disse komponenter kan samles i en udtømmende liste, der vil blive brugt senere.
Denne fase har tre hovedfordele:
Nøgle afhentning: Planlægning af hvordan man nærmer sig front-end-udvikling af et projekt er vigtigt for at skabe en vedligeholdelig, magert kodebase.
Møntsbiblioteker er en samling af fælles elementer, der bruges på en hjemmeside. Ved at fokusere front-end-udviklingen på bygningskomponenter, der ikke er afhængige af sider, kan vi reducere koden overhead og forbedre konsistensen.
Ved hjælp af listen over komponenter, vi samler i løbet af revisionsfasen, er vi i stand til at strukturere vores Sass i en håndterbar samling af filer.
Vi har brugt mønsterbiblioteker på nogle få projekter, men har altid kæmpet for at navngive konventioner, især mappestrukturen: hvor sætter du dine stilarter til denne musikafspiller, i komponenter eller i partikler?
Tidligere havde vi brugt terminologi som partials og komponenter til at organisere vores Sass-filer. Mens disse ser ud som helt legitime navngivningskonventioner, er de åbne for fortolkning. Når der er flere udviklere, der arbejder på et projekt, fører ordet af kodebase til tolkning til uorganiseret CSS.
BEM (Block, Element, Modifier), giver os en fælles konvention at følge, og skaber en forståelse mellem front-end-udviklere. Den gamle måde blev overladt til de enkelte udviklere at komme op med klassenavne, der var alt for høje niveauer for at hente nogen mening fra. Heldigvis var vi heldige at se Brad Frost tale om hans mønster bibliotek på Upfront Conference i Manchester. Pattern Lab giver terminologi fra kemi for at beskrive de komponenter, der udgør biblioteket. Brug af atomer, molekyler og organismer til at beskrive forskellene mellem komponenter på en side hjælper med at forklare konceptet til udviklere, der er nye til projektet.
Atometisk design er til brugergrænseflader: http://t.co/eEZSYeK5VF Du kan anvende atomdesign til alle brugergrene, som Instagram pic.twitter.com/BrztgtRoGU
- Brad Frost (@brad_frost) 10. juli 2015
I naturen er atomer den mindste betegnelse (medmindre vi dræber i kvarker og elektroner). I webudvikling er atomer de mest grundlæggende elementer i HTML. Til alle formål og formål gør de ikke meget alene. Disse omfatter overskrifter, afsnit, input, knapper, lister ... Du får ideen.
Disse er det næste lag op. I kemi består molekyler af atomer, og det samme gælder strukturen af CSS. Molekyler er komponenter på hjemmesiden, der bruger atomer til at danne dem.
Et godt eksempel på et molekyle er en søgefelt. Dette indeholder 3 atomer: en etiket, input og knap. Molekylaget begynder at danne nogle af de elementer, vi kan bruge på hjemmesiden. Det er vigtigt at gøre alle disse molekyler skalerbare. De skulle være designet med den ide, de kunne bruges overalt på webstedet. Vores ultimative mål at gøre CSS så fleksibel og genanvendelig som muligt.
Som navnet antyder, er organismer grupperinger af molekyler. Nogle eksempler på disse omfatter en header, footer eller en liste over produkter.
Hvis vi tager eksemplet på en overskrift, vil dette indeholde et logo, søgning og navigation. Disse blev alle skabt som molekyler og kombineret til dannelse af en headerorganisme.
Her slutter biokemi analogien. Som Brad siger, "gå ind i sprog, der giver mere mening til klienter og endelig produktion" . Skabeloner er lim på et websted. Disse kombinerer alle de organismer, vi har oprettet, til et layout, som kunne anvendes på en side på hjemmesiden.
Et eksempel kan være en blogliste. Denne skabelon vil indeholde en overskrift, sidefod, en liste over bloggenheder og et sidebjælke. Skabeloner er generelt strukturelle, der kun indeholder layoutet.
Det sidste afsnit er sider. Her kan du teste skabelonerne med rigtige data. Sider er specifikke forekomster af en skabelon. Denne del er vigtig, fordi den giver os mulighed for at se, hvor vellykkede atomer, molekyler, organismer og skabeloner har været.
Det er uundgåeligt, at visse scenarier vil blive savnet, når du bygger hjemmesiden. Det klassiske eksempel er lange titler eller catering til forskellige valutaer og sprog.
Nøgle afhentning: Navngivningskonventioner betyder noget. Layering CSS opretter en ren kodebase for at arbejde fra det, der er så lille som muligt.
Design mønstre er svært. Du kan ikke designe et isoleret mønster som en nyhed, og forvent at den passer sammen med resten af siden. Den måde, hvorpå vi opbygger websites, og hvordan vi designer dem, er forskellige.
Designerne vil sandsynligvis ændre sig, uanset om vi bliver afmeldt. Sign-off blev et irrelevant skridt i processen, der kun sætter pres på begge sider
Vi brugte Photoshop til at skabe mockups af trådrammerne med disse stylede komponenter på plads. Når vi var glade for udseendet og følelsen af de design, vi flyttede til at isolere hver komponent. Dette tillod os at sikre, at hver komponent var fleksibel nok til at arbejde hvor som helst på hjemmesiden.
Vi var meget bevidste om ikke at få sign-off på ethvert designarbejde. Design sign-off skaber en barriere, hvor designeren føler sig presset til at skabe noget, der vil blive sat i sten. Designerne vil sandsynligvis ændre sig, uanset om vi bliver afmeldt eller ej. Generelt er vi glade for at imødekomme eventuelle ændringer på ethvert tidspunkt i projektets tidslinje. Sign-off blev et irrelevant skridt i processen, der kun lægge pres på begge sider til skade for forholdet.
At vide, hvornår man skal flytte fra Photoshop til kode, er vigtig. Dette trin er meget tidligere end vi var vant til af to grunde:
I stedet for at bruge ekstra tid i Photoshop valgte vi at investere tiden i kode. Hvis vi skulle perfektere noget, skal det være koden, den bit, der rent faktisk vil blive brugt og set af alle web-brugere. For os var Photoshop et redskab til at skabe en design stil, der kunne bruges på tværs af hjemmesiden.
Design handler meget mere om samarbejde mellem alle på holdet. Mockups var stadig en meget vigtig del af processen og hjalp klienten til at visualisere, hvordan webstedet ville se ud. Hvis vi var alle tilfredse med den generelle retning af designet, ville vi flytte den til kode. Vi har sjældent brugt tid på at gå baglæns og fremad, hvilket gør det lettere for Photoshop-dokumenter.
Key takeaway: Photoshop er et godt værktøj til at skabe designkoncepter. At flytte til kode hurtigst muligt er vigtigt. Perfekt det i kode, ikke Photoshop.
Skønheden i denne arbejdsgang er, at der er så mange steder at gennemgå og forbedre hjemmesiden.
Det er vigtigt at bemærke, at disse er løse trin i vores projektproces. Hvis vi har brug for noget nyt under projektet, behandler vi det som en selvstændig, modulær komponent, der kan slippes ind på hjemmesiden og vedtager webstedets designtema.
Hvert af disse trin giver et punkt, hvor vi kan se vores arbejde hidtil. Det giver også mulighed for et nyt sæt øjne for at se tingene fra et andet perspektiv.
Under nogle af disse faser kan vi opleve, at nogle dele ikke virker så godt som forventet. Det her er okay. Faktisk er det godt. Catching dårlig brugervenlighed tidligt er nøglen til en vellykket hjemmeside. Går tilbage og wire-indramning disse dele af hjemmesiden vil gøre projektet bedre, når det går live.
Nøgle afhentning: Vær ikke bange for at gå tilbage til begyndelsen, hvis noget skal forbedres. Fange disse tidlige vil gøre projektet bedre, når det går live.
Vi tilbragte dage sammen for at sikre, at alle dele af hjemmesiden var færdige til en høj standard. Vi har testet så mange scenarier som muligt, hvilket sikrer, at browserefarenheden var konsistent.
Når dataene er på hjemmesiden, er vi i stand til at teste hjemmesiden fuldt ud. Det er ofte for nemt at sætte et projekt live uden fuld prøvning. Vi kan kontrollere hastigheden, brugervenligheden og vigtigst af indkøbsstrømmen.
Alle nævner Apple for at være perfectionists, men jeg er sikker på, at deres første forsøg var langt fra perfekt. Det tager tid og dedikation at gøre de endelige forbedringer for at give os de produkter, vi elsker i dag. Ved hjælp af vores enhedslab, der indeholder de fleste af de populære enheder og platforme, kunne vi sikre, at oplevelsen var optimeret på så mange af de nyeste platforme og skærmstørrelser som muligt.
At lære af hvert projekt er vigtigt, så vi løbende kan forbedre processer, der fører til bedre websites.
Dette projekt har født vores eget interne mønsterbibliotek, der fremmer sammenhæng mellem projekter. Når vi arbejder i et agentur, kan vi få snesevis af projekter i øjeblikket under udvikling samtidig. Evnen til enhver til at arbejde på ethvert projekt er vigtigt.
At skabe en base, vi alle kan arbejde på, vil bidrage til at bidrage til dette mål.
Webstedets præstationer blev kun behandlet i slutningen af projektet. En vellykket reagerende hjemmeside skal være slank og hurtig. Det enorme udvalg af enheder og deres evner varierer voldsomt fra helt nye Mac-computere til gamle smartphones. Når man opbygger en medierig hjemmeside, kan det være meget svært at klare præstationen, især når man efterfølgende forsøger at forbedre det.
På Upfront Conference i Manchester så vi Yesenia Perez Cruz Tal om at overveje præstationer i alle faser af et projekt, herunder design. I eftertid er det noget, vi burde have implementeret. Som et team af flere designere, udviklere og front-end-udviklere, der har styret den overordnede størrelse og ydeevne (især den opfattede ydeevne), skulle have været en større prioritet.
Alt på en side har en pris for ydeevne. Prioritering af det vigtige sikrer, at hjemmesiden ikke kun er hurtig, men tilgængelig for flere enheder. På nogle ældre enheder fandt vi ud af, at hjemmesiden styrtede ikke kun browseren, men hele enheden. Forsøg på at fremskynde hjemmesiden med tilbagevirkende kraft betød, at vi ikke kunne gøre hjemmesiden så hurtig, som den kunne have været.
Næste gang vil vi sørge for, at ydeevnen er indblandet i alle faser af processen, så det er ikke en eftertanke.