I webdesign kan alt hårdt være let igen

Frank Chimero offentliggjorde for nylig “Everything Easy is Hard Again” - der beskriver hans rejse tilbage til webdesign efter en tre-års pause. Han påpeger, at webdesignveteraner og -begyndere stort set er i samme båd i dag:

”Jeg havde femten års erfaring med at designe for webklienter, hun havde et år, og alligevel, hvordan [sic], vi var i samme situation: vi nød arbejdet, men blev fuldstændig forvirrede og overvældede af det hurtigt voksende kompleksitet i det alle. Hvad fanden skete der? ”

Hele essayet er værd at læse, men jeg vil opsummere nogle af de store temaer, som Frank nævnte:

  • Der er kommet mange nye arbejdsgange, værktøjer og metoder til udvikling i de sidste flere år
  • Selv enkle ting som indlæsning af billeder og skrifttyper har komplekse værktøjskæder og bøger skrevet om dem
  • Det er ikke længere muligt at "Vis kilde" for at lære om forskellige teknikker på mange websteder på grund af minificering og tilsløring med forskellige byggeværktøjer
  • Masser af ting, der blev lært for mange år siden, bliver forældede, og teknikker, der engang blev rynket over år siden, bliver bedste praksis

Da jeg læste essayet, nikkede jeg med enighed så aggressivt, at jeg næsten udviklede et knæk i nakken. ”Vi er langt fra CSS Zen Garden” faktisk.

Det er ikke kun Frank - alle er overvældede

Frank hævder, at hans 3-årige fravær fra branchen var den primære kilde til hans forvirring, da han gik ind i branchen igen, men helt ærligt (ha!) Er jeg overbevist om, at dette kun er en lille faktor i en mere kompliceret ligning. Jeg siger dette, fordi Franks kamp deles af mange erhvervsveteraner, hvoraf de fleste ikke har taget nogen længere pauser for at følge det nyeste og største.

For eksempel delte Jen Simmons, en af ​​pionererne og mestrene bag CSS Flexbox og CSS Grid, i afsnit 113 af The Web Ahead-podcast, at mange mennesker, der opfandt vores industri, føler sig helt overvældede.

”Folk, der opfandt vores industri, føler det på den måde… de er fuldstændig færdige eller overvældede.” (Understreger mine.)

Selv Lyza Danger Gardner - en 20-årig veteran på nettet og en dygtig taler og forfatter - delte i et interview, at CSS kunne vokse ud over hendes forståelse.

Og Brad Frost, endnu en brancheveteran, der skrev bogen om Atomic Design, skrev et indsigtsfuldt essay med titlen “Jeg har ingen idé om hvad fanden jeg gør” - hvor han gentager de udfordringer, som Frank Chimero står overfor, på trods af ikke at have taget lang tid hiatus fra branchen.

”Og så når tiden går, er du klar over, at der er et helvede af meget mere, du ikke kender. Så jeg ved ikke noget. Jeg aner ikke hvad fanden jeg laver. ”

Så hvis disse industriledere og mange andre - de mennesker, der er vokset op med nettet fra før CSS endda eksisterede - føler sig overvældede, hvilket håb er der for resten af ​​os bare dødelige? Og hvad med folk, der starter med webdesign 5 år fra nu, hvor der sandsynligvis vil være 10 gange så mange udviklerværktøjer, som der er i dag?

Lad os først reflektere over, hvordan vi kom hertil ...

Webplatformen er vokset dramatisk

Vi bare dødelige har god grund til at være bange - Internettet er eksploderet med kompleksitet, især i de sidste 10 år. Som bevis kan du ikke se længere end listen over funktioner, der nu er tilgængelige i browsere! Denne øgede kapacitet har ført til en eksplosion af udviklerværktøj til at forsøge at gøre brug af det hele. Det er dog vigtigt at overveje, hvorfor disse dev-værktøjer er skåret op, og endnu vigtigere, hvad de gør det muligt.

Lad os for eksempel spole tilbage 20 år, til et tidspunkt, hvor vi kun skulle lære en smag af HTML - en med næsten en håndfuld tags. Styling var inline, og CSS-stilark var ikke en ting endnu. Nu tilbage til nutiden. Vi har en enormt udvidet HTML-spec, hundreder af nye CSS-egenskaber og meget tung brug af JavaScript for at opnå komplekse krav.

Der er også mange forskelle mellem forskellige browserimplementeringer af disse teknologier. Noget så enkelt som at forberede et præfiks til CSS-værdier, for eksempel, kræver temmelig komplicerede build-værktøjer for at spare os masser af manuel indtastning.

Så hvad har al denne kompleksitet produceret? Som Brad Frost udtrykker det, er et almindeligt tilfælde af: "Jeg aner ikke hvad fanden jeg laver," blandt folk, der plejede at vide et helvede om, hvad de gjorde.

Udviklere navigerer i dette nye, komplekse og fremmede landskab med nye værktøjer ... som yderligere tilføjer kompleksiteten. Føler du dig overvældet? Velkommen i klubben. Jeg har f.eks. Været nødt til at lære at bruge følgende værktøjer (blandt andre) bare for at udføre stort set standard webdesignprojekter i de sidste 15 år:

Det bliver sandsynligvis værre, før det bliver bedre

Desværre er der ikke noget, der tyder på, at dette værktøjs-væksttog aftager når som helst snart. Med hundreder af statiske webstedsrammer derude, nye CSS / JS-biblioteker falder næsten dagligt, ser sandsynligheden for en standardiseret måde at opbygge websteder… dyster ud.

Desuden er sandsynligheden for, at færdigheder omkring opbygning af websteder bliver forældede med få år, når nye værktøjer dukker op, stor. Frank taler til denne tendens i sin egen oplevelse:

”Undtagen med webstederne. De adskiller sig fra de andre, fordi jeg ikke føler mig meget bedre til at fremstille dem efter 20 år. Min viden og færdigheder udvikler sig lidt, så ændrer ting sig, og halvdelen af ​​det, jeg ved, bliver dødvægt. Dette sker næppe med noget af det andet arbejde, jeg udfører. ”

️ Det stinker. At bruge mange år på at mestre et håndværk og få det til at skifte under din næse føles overhovedet ikke godt. Kreative evner, stedsegrønne i naturen, bør ikke gøres forældede på grund af skiftende, underliggende teknologier. Så hvordan bevarer vi dem? Lær flere mennesker, hvordan man bliver programmører? På en eller anden måde standardiserer du et mindre antal kodebaserede værktøjer, så det er lettere for begyndere at komme i gang? Tvinge designere at stole på udviklere til at få et webdesign til live?

Først skal vi ændre, hvordan vi tænker på webdesign

Denne udfordring kræver, at vi tænker uden for boksen. Frank opsummerede det meget pænt i slutningen af ​​sit essay:

”Så meget af, hvordan vi bygger websteder og software, kommer ned på, hvordan vi tænker. Klyngen med værktøjer, metoder og abstraktioner betyder også udskiftningen af ​​ideologi. En person skal normalt tænke på en måde, der ligner de mennesker, der skabte værktøjer til at bruge dem med succes. Det er ikke så simpelt som at sætte en skruetrækker ned og hente en skruenøgle. En person skal revidere hele deres tankeramme; de skal skifte mening.
På en måde er det lettere at være uerfaren: Du behøver ikke at lære, hvad der ikke længere er relevant. Erfaringen skaber derimod to forskellige kampe: Den første er at identificere og aflære, hvad der ikke længere er nødvendigt (det er også arbejde). Det andet er at forblive fordomsfri, tålmodig og villig til at engagere sig i det, der er nyt, selvom det ligner en ny overtagelse af noget, du besluttede imod for længe siden. ”

Så hvordan frigør du designere fra den stormende og uundgåelige tidevand af webudviklingsteknologi? Bestemt ikke ved at udnytte dem til det med en årtier gammel antagelse om, at den vigtigste måde at skabe skræddersyede, professionelle, lydhøre, performante websteder er at skrive koden for hånd.

Denne antagelse beder mennesker, der ønsker at få deres kreative ideer direkte på mediet, til at mestre teknisk arbejde, som måske aldrig var i deres styrehus til at begynde med. Vi beder webdesignere om at blive webprogrammører - hvilket er som at bede Pablo Picasso om at mestre de nyeste teknikker inden for lærred, maling eller børsteproduktion. "Der har ingen tid til." - Picasso, sandsynligvis.

Så lad os udfordre denne antagelse!

WYSIWYGs er døde, længe lever WYSIWYGs!

Heldigvis har vi løst dette problem mange gange før i andre kreative brancher. Hvordan? Næsten altid med visuelle direkte manipulationsgrænseflader, der løser komplekse problemer. Ikke-lineære videoredigeringsværktøjer, 3D-modellerings- og animationsværktøjer, værktøjer til grafisk design, CAD - listen fortsætter.

En collage af 12 populære kreative værktøjsgrænseflader efter erhverv. Kan du få øje på outlier?

For et eksempel på den ændring, der skete i en branche, skal du se den korte trailer til Grafiske midler nedenfor - alt imens man overvejer parallellerne til skrivebordsudgivelsesrevolutionen til dagens arbejdsgang mellem designere og webudviklere.

Når man taler om et lignende skift i tænkning - og værktøj - i webdesignbranchen, er indsigelserne normalt hurtige til at stakkes sammen:

  • ”Men værktøjer som Dreamweaver producerer crappy, oppustet kode!”
  • ”Responsivt design er alt for kompliceret til visuelle værktøjer!”
  • "Der er ingen måde at få et højt kontrolniveau uden kode!"
  • "Du kan ikke bygge komplekse designsystemer i visuelle værktøjer!"
  • "Ingen rigtig webdesigner ville bygge uden kode!"

Selvom jeg har en hest i løbet (jeg arbejder på Webflow, hvor vi opretter visuelle webdesignværktøjer), ville jeg satse på, at det er uundgåeligt, at webdesignindustrien bliver transformeret af kraftfulde direkte manipuleringsværktøjer - ligesom alle andre kreative industrien har været i fortiden.

Folk behøver ikke længere at oprette vektorer i hånden og heller ikke forstå, hvordan Bezier-matematik fungerer for at tegne en kurve, så hvorfor skulle webdesignere skulle vide nøjagtigt, hvordan man skriver specifikt HMTL / CSS / JavaScript for hånd for at skabe smukt, funktionelt og professionelt arbejde ?

De skulle ikke. Alle webdesignere har virkelig brug for at vide, at de er de grundlæggende koncepter, der gør dem til webdesignere i første omgang - koncepter som refow, relativ layout, typografi, stilarv og så videre. Beherskelse af mediet på nettet, som ikke er en lille bedrift, kan mobiliseres ved sofistikeret værktøj.

For at bevise mit punkt er her nogle eksempler fra Webflow, hvor direkte manipulation klart giver et meget granuleret niveau af kontrol inden for begrænsningerne af mediet på nettet (kassemodel, medieforespørgsler osv.) - uden behov for en teksteditor.

Her er mig, der justerer en radial gradient, som jeg trods min 15 års kodningserfaring stadig ikke kan huske syntaks for:

Flexbox bliver meget nemmere at resonnere over, uden at skulle beholde et kode-cheatsheet (eller endda et cheatsheet til cheatsheet) åbent ved siden af ​​din teksteditor. Brug af mere kendte visuelle UI-priser giver mulighed for en hurtig arbejdsgang, mens du stadig opretter produktionsklar kode.

Med disse typer værktøjer begynder webdesign primært at dreje sig om designet - ikke om at tilbringe timer og timer i en tekstredigerer eller tilpasse-og-kopiere-indsætte-værdier fra webinspektøren. Hver ændring vedholdes i baggrunden direkte til kildestilarket, og kunstretning af websteder bliver mere af et fokus. I stedet for at gå rundt med form-udvendig syntaks, kan jeg hurtigt specificere, hvordan et billede kan have tekstflydning omkring det og se nøjagtigt, hvordan det vil se ud for seerne på siden.

️ Åh, og billedet af månen, der blev uploadet der, var en meget højere opløsning end nødvendigt og ser meget mindre ud på mobile enheder. Men i baggrunden ændrer Webflow automatisk størrelsen på lærredet i trin på 1 gange og leveres med den bedst mulige kombination af srcset og størrelser for billedet på tværs af alle breakpoints - hvilket betyder, at designeren ikke behøver at bekymre sig om problemer med kompilering og levering. Alligevel genererer det stadig kode, som en udvikler ville forstå.

Responsive designs kan også oprettes ved direkte at manipulere indholdet på tværs af forskellige breakpoints, med den samme arv / kaskadeadfærd, som en koder ville forvente, hvis de skrev medieforespørgsler manuelt:

Og visuel funktionalitet kan gå langt ud over statisk design. Nu kan vi hente data fra en velstruktureret database, eller måske et brugerdefineret GraphQL-endpoint, eller en CSV-fil, eller hvad som helst - og derefter intuitivt "binde" dele af UI'en til disse live data. Statisk design kan komme til live på få minutter og hurtigt omdanne til levende dynamiske applikationer.

Dette koncept kan gå endnu længere og gælde for sofistikerede JavaScript-drevne interaktioner. Her er et eksempel på visuelt at oprette en musebegivenhed udløst animation, uden at behøve at forstå JavaScript-begivenheder, jQuery-begivenhedsbindende semantik, ændring af stilattribut osv.:

Og alt dette kan offentliggøres med et enkelt klik, hvad enten det drejer sig om iscenesættelse eller produktionsmiljøer - der emuleres den samme proces, som udviklerne ville følge. Minificering, gzip, lydhøre billeder, CDN-optimering, HTTP / 2 - stort set alt hvad du skulle lære, hvordan man manuelt tilslutter, tages hånd om gennemsigtigt.

Med denne tilgang er det også muligt at se nøjagtigt, hvordan hvert websted blev bygget ved at åbne kernekildeprojektet - uden byrden ved at prøve at inspicere kompileret og minificeret HTML / CSS i browseren. Dette svarer til at have adgang til en kilde-Photoshop- eller Sketch-fil med alle lag / symboler / osv. I stedet for at inspicere en JPG eller SVG i dens kompilerede form.

Dette er bare en håndfuld eksempler, og der er hundreder af andre. WYSIWYG-værktøjer vil snart indhente kodebaserede arbejdsgange med hensyn til strøm og tilpasning og vil hurtigt overgå dem med hensyn til hastighed.

Fremtiden for webdesign er ikke kode

Internettet har eksisteret i 25 år, men vi sporer stadig. Vi forsøger stadig at finde ud af, hvordan vi bygger til dette nye medium. Det er en ny grænse, og indtil videre er det kun et relativt få, der er gået ud for at begynde at udforske det.

Denne udforskning har primært været begrænset til dem, der kunne lære at skrive kode, som er en kløgt 0,25% af verdens befolkning - kun 1 ud af hver 400 mennesker! Ikke underligt, at Frank Chimero sammen med mange andre har kæmpet med kompleksiteten i det hele.

Hvad hvis vi var i stand til at befri webdesign ud over kravet om at skrive kode, mens vi stadig holder den fantastiske magt til rådighed for designere lige ved hånden? Jeg er overbevist om, at visuelle værktøjer er den mest rimelige måde at gøre det på, fordi det er temmelig klart, at den kodebaserede tilgang ikke skalerer.

Forestil dig, hvor anderledes verden ville være i dag, hvis pc'er manglede intuitive grafiske grænseflader og kun var begrænset til dem, der har mestret kommandolinjen. Det ville virkelig være en anden verden. Hvorfor ønsker vi ikke at demokratisere adgangen til webdesign på en lignende måde? Det kan føre til en søændring af kreativ innovation på nettet.

Så lad os overveje vores antagelse af, at kode er den eneste måde, og lad os følge eksemplet med andre succesrige kreative brancher. Lad os gøre det nemt for de hårde ting i webdesign!

En stor tak til Mariah Driver, Waldo Broodryk og John Moore Williams for at have læst udkast til dette indlæg.