Verkkosuunnittelussa kaikki vaikea voi olla taas helppoa

Frank Chimero julkaisi äskettäin ”Kaikki helppo on taas vaikeaa” - kuvaa matkansa takaisin verkkosuunnitteluun kolmen vuoden tauon jälkeen. Hän huomauttaa, että web-suunnittelun veteraanit ja aloittelijat ovat nykyään melkein samassa veneessä:

”Minulla oli viidentoista vuoden kokemus web-asiakkaiden suunnittelusta, hänellä oli vuosi ja silti jonkin verran, olimme samassa tilanteessa: nautimme työstä, mutta olimme täysin hämmentyneitä ja hämmästyneitä sen nopeasti kasvavasta monimutkaisuudesta. kaikki. Mitä helvettiä tapahtui?"

Koko essee on lukemisen arvoinen, mutta teen yhteenvedon joistakin Frank mainitsemista suurista teemoista:

  • Viime vuosien aikana on syntynyt paljon uusia kehitystyönkulkuja, työkaluja ja menetelmiä
  • Jopa yksinkertaisissa asioissa, kuten kuvien ja fonttien lataamisessa, on monimutkaisia ​​työkaluketjuja ja niistä kirjoitettuja kirjoja
  • Ei ole enää mahdollista tarkastella lähdettä monien verkkosivustojen eri tekniikoista eri lähteiden pienentämisen ja hämärtämisen takia.
  • Monet vuotta sitten opitut asiat vanhentuvat, ja tekniikat, jotka kerran paheksutetaan vuosia sitten, ovat parhaita käytäntöjä

Kun luin esseitä, nyökkäsin yhteisymmärryksessä niin aggressiivisesti, että minulla oli melkein kehrä kaulani. "Olemme todellakin kaukana CSS Zen Gardenista".

Se ei ole vain Frank - kaikki ovat hukkuvia

Frank väittää, että hänen 3 vuoden poissaolonsa teollisuudessa oli ensisijainen hämmennyksen aiheuttaja, kun hän palasi toimialaan, mutta rehellisesti (ha!), Olen vakuuttunut, että tämä on vain pieni tekijä monimutkaisemmassa yhtälössä. Sanon tämän, koska Frankin kamppailu on jaettu monien teollisuusveteraanien joukosta, joista suurin osa ei ole pitänyt pidempiä taukoja seuratakseen uusinta ja parhainta.

Esimerkiksi Jen Simmons, yksi CSS Flexboxin ja CSS Gridin pioneereista ja mestarista, kertoi The Web Ahead-Podcastin jaksossa 113, että monet teollisuudemme keksineet ihmiset tuntevat olevansa täysin hukassa.

”Ihmiset, jotka keksivät teollisuutemme, tuntevat tuon tavalla… he ovat täysin valmiita tai uupuneita.” (Painotus minun.)

Jopa Lyza Danger Gardner - 20-vuotias verkkoveteraani, taitava puhuja ja kirjoittaja - kertoi haastattelussa, että CSS voisi kasvaa hänen ymmärryksensä ulkopuolella.

Ja Brad Frost, jälleen yksi alan veteraani, joka kirjoitti kirjan atomisuunnittelusta, kirjoitti ymmärrettävän esseen nimeltä "Minulla ei ole aavistustakaan, mitä helvettiä teen" - jossa hän toistaa Frank Chimeron kohtaamia haasteita huolimatta siitä, että se ei ottanut kauan aikaa tauot teollisuudesta.

”Ja sitten ajan myötä huomaat, että on helvetti paljon muuta, mitä et tiedä. Joten en tiedä mitään. Minulla ei ole aavistustakaan, mitä helvettiä teen.

Joten jos nämä alan johtajat ja monet muut - ihmiset, jotka ovat kasvaneet verkon kautta jo ennen CSS: n olemassaoloa - tuntevat uupumusta, mitä toivoa meille muille pelkästään kuolevaisille on? Entä ihmiset, jotka aloittavat verkkosuunnittelun viiden vuoden kuluttua, kun kehittäjätyökaluja on todennäköisesti 10 kertaa enemmän kuin nykyään?

Ensinnäkin pohditaan, kuinka pääsemme tänne ...

Verkkoalusta on kasvanut dramaattisesti

Meillä vain kuolevaisilla on hyvä syy pelätä - verkko on räjähtänyt monimutkaisesti, etenkin viimeisen 10 vuoden aikana. Todisteeksi etsi vain selainten ominaisuusluettelo! Tämä lisääntynyt kyky on johtanut räjähdyskehittäjien kehittämiseen työkaluilla yrittää hyödyntää sitä kaikkea. On kuitenkin tärkeää pohtia, miksi nämä dev-työkalut ovat rajautuneet, ja mikä tärkeintä, mitä ne tekevät mahdolliseksi.

Esimerkiksi, kelaamme taaksepäin 20 vuotta aikaan, jolloin jouduimme oppimaan vain yhden HTML-aromin - yhden tuskin kourallisella tunnisteella. Tyyli oli sisäinen, ja CSS-tyylitaulukot eivät vielä olleet asioita. Nyt takaisin nykyhetkeen. Meillä on huomattavasti laajennettu HTML-eritelmä, satoja uusia CSS-ominaisuuksia ja JavaScriptin erittäin raskas käyttö monimutkaisten vaatimusten saavuttamiseksi.

Näiden tekniikoiden selaimen eri toteutustekijöiden välillä on myös paljon eroja. Jotain niin yksinkertaista kuin esimerkiksi CSS-arvojen etuliitteen tekeminen edellyttää melko monimutkaisia ​​rakennustyökaluja, jotta voisimme säästää meille manuaalisen kirjoittamisen.

Joten mitä kaikki tämä monimutkaisuus on tuottanut? No, kuten Brad Frost toteaa, yleinen tapaus: "Minulla ei ole aavistustakaan mitä helvettiä teen" ihmisten keskuudessa, jotka tienivät paljon helvettiä tekemästään.

Kehittäjät suunnistavat tätä uutta, monimutkaista ja ulkomaista maisemaa uusilla työkaluilla…, jotka lisäävät edelleen monimutkaisuutta. Tuntuuko sinusta? Tervetuloa kerhoon. Minun on esimerkiksi joutunut oppimaan käyttämään (muun muassa) seuraavia työkaluja tekemään lähinnä tavallisia web-suunnitteluprojekteja viimeisen 15 vuoden aikana:

Se todennäköisesti pahenee ennen kuin paranee

Valitettavasti ei ole mitään viitteitä siitä, että tämä työkalujen kasvujuna hidastuisi milloin tahansa pian. Kun siellä on satoja staattisia sivustokehyksiä, uudet CSS / JS-kirjastot putoavat melkein päivittäin, todennäköisyys standardisoidulle verkkosivustojen rakentamiselle näyttää olevan synkkä.

Lisäksi on todennäköistä, että verkkosivustojen rakentamiseen liittyvät taidot vanhenevat muutaman vuoden välein, kun uusia työkaluja ilmestyy. Frank puhuu tähän suuntaukseen omassa kokemuksessaan:

”Paitsi verkkosivustoilla. He eroavat toisistaan, koska en tunnu kovin paremmalta tehdä heitä 20 vuoden jälkeen. Tietoni ja taitoni kehittyvät hiukan, sitten asiat muuttuvat, ja puolet siitä, mitä tiedän, tulee painoon. Tätä tuskin tapahtuu minkä tahansa muun tekemäni työn kanssa. "

️ Se imee. Vietämällä useita vuosia käsityötaiteen hallitsemisen ja sen muuttamisen nenän alla ei tunne ollenkaan hienoa. Luovia taitoja, ikivihreitä, ei pidä vanhentua siirtyvän taustalla olevan tekniikan takia. Joten miten me säilytämme ne? Opeta lisää ihmisiä siitä, miten tulla ohjelmoijiksi? Jotenkin standardisoidaan pienempi määrä koodipohjaisia ​​työkaluja, jotta aloittelijoille on helpompi aloittaa? Pakota suunnittelijat luottamaan kehittäjiin saadakseen web-suunnittelun elämään?

Ensinnäkin meidän on muutettava sitä, miten ajattelemme web-suunnittelua

Tämä haaste vaatii meitä ajattelemaan laatikon ulkopuolella. Frank tiivisti sen erittäin hienosti esseensä loppupuolella:

”Niin suuri osa siitä, kuinka rakennamme verkkosivustoja ja ohjelmistoja, on ajattelutapanamme. Työkalujen, menetelmien ja abstraktioiden kaataminen merkitsee myös ideologian korvaamista. Ihmisen on yleensä ajateltava samalla tavalla kuin työkalun luoneet ihmiset, jotta niitä voidaan käyttää menestyksekkäästi. Se ei ole niin helppoa kuin ruuvitaltan laskeminen ja jakoavaimen ottaminen. Henkilön on tarkistettava koko ajattelutapaansa; heidän on muutettava mieltään.
Yhdessä tavalla on helpompaa olla kokematon: sinun ei tarvitse oppia sitä, mikä ei ole enää merkityksellistä. Toisaalta kokemus luo kaksi erillistä taistelua: ensimmäinen on tunnistaa ja vapauttaa se, mitä ei enää tarvita (se on myös työtä). Toinen on pysyä ennakkoluulottomana, kärsivällisenä ja halukkaana harjoittamaan uutta, vaikka se muistuttaisi uutta ottamista jotain, jonka päätitte jo kauan sitten. "

Joten miten vapautat suunnittelijat web-kehitystyön hätkähdyttävästä ja väistämättömästä noususta? Varmasti ei hyödyntämällä heitä siihen vuosikymmeniä vanhalla oletuksella, jonka mukaan tärkein tapa luoda räätälöityjä, ammattitaitoisia, reagoivia, suorittavia verkkosivustoja on kirjoittaa koodi käsin.

Tämä oletus pyytää ihmisiä, jotka haluavat saada luovia ideoitaan suoraan välineelle, hallitsemaan teknisen työn, jota ehkä ei koskaan ollut heidän ohjaustalossaan. Pyydämme verkkosivujen suunnittelijoita tulemaan verkko-ohjelmoijiksi - mikä on kuin kysyisimme Pablo Picassoa hallitsemaan viimeisimmät tekniikat kankaalle, maalille tai siveltimelle. ”Eikä kukaan ole saanut aikaa siihen.” - Luultavasti Picasso.

Joten haastakaamme tämä oletus!

WYSIWYG: t ovat kuolleita, elää WYSIWYG: t!

Onneksi olemme ratkaisseet tämän ongelman monta kertaa aiemmin muilla luovilla aloilla. Miten? Lähes aina visuaalisten suorien manipulointirajapintojen avulla, jotka ratkaisevat monimutkaisia ​​ongelmia. Epälineaariset videonmuokkaustyökalut, 3D-mallinnus- ja animaatiotyökalut, graafisen suunnittelun työkalut, CAD - luettelo jatkuu.

Kollaasi 12 suositusta luovasta työkaluliittymästä ammatin mukaan. Voitko havaita poikkeavuuden?

Katso esimerkki yhdessä teollisuudessa tapahtuneesta muutoksesta alla olevasta graafisten välineiden lyhyestä esittelystä - ottaen samalla huomioon työpöytäjulkaisuvallankumouksen samansuuntaisuus nykypäivän työnkulkuun suunnittelijoiden ja web-kehittäjien välillä.

Kun puhutaan samanlaisesta ajattelun ja työkalujen muutoksesta web-suunnitteluteollisuudessa, väitteet on yleensä nopea kerätä:

  • "Mutta Dreamweaverin kaltaiset työkalut tuottavat väärä, paisunut koodi!"
  • "Responsiivinen suunnittelu on aivan liian monimutkaista visuaalisille työkaluille!"
  • "Ei ole mitään tapaa saavuttaa korkeaa hallintaa ilman koodia!"
  • "Et voi rakentaa monimutkaisia ​​suunnittelujärjestelmiä visuaalisiin työkaluihin!"
  • "Kukaan todellinen web-suunnittelija ei rakentaisi ilman koodia!"

Vaikka minulla on hevonen kilpailussa (työskentelen Webflowssa, jossa luomme visuaalisia web-suunnittelutyökaluja), panen vetoamaan, että on väistämätöntä, että verkkosuunnitteluteollisuus muuttuu voimakkaiden suorien manipulaatiotyökalujen tapaan - aivan kuten kaikki muutkin luovat teollisuus on ollut aiemmin.

Ihmisten ei enää tarvitse luoda vektoreita käsin eikä ymmärtää kuinka Bezier-matematiikka toimii käyrän piirtämisessä. Miksi web-suunnittelijoiden on tiedettävä tarkalleen kuinka kirjoittaa erityinen HMTL / CSS / JavaScripti käsin luoda kaunis, toimiva ja ammattimainen työ ?

Heidän ei pitäisi. Kaikkien web-suunnittelijoiden on todella tiedettävä, ovat peruskonseptit, jotka tekevät heistä ensisijaisesti web-suunnittelijoita - käsitteet, kuten reflow, suhteellinen asettelu, typografia, tyylin perintö ja niin edelleen. Verkon välineen hallitseminen, joka ei ole pieni tehtävä, voidaan mobilisoida hienostuneilla työkaluilla.

Osoitukseni todistamiseksi tässä on joitain esimerkkejä Webflowista, joissa suora manipulointi tarjoaa selkeästi erittäin rakeisen hallinnan tason web-välineen rajoissa (laatikkomalli, mediakyselyt jne.) - ilman tekstieditoria.

Tässä mukautan säteittäistä gradienttia, joka 15 vuoden koodauskokemuksesta huolimatta en edelleenkään muista seuraavien syntaksia:

Flexboxista on paljon helpompi perustella, joutumatta pitämään koodikiristearkkua (tai edes cheatsheet cheatsheet) avoinna tekstieditorin vieressä. Tunnetuimpien visuaalisten käyttöliittymien käyttö mahdollistaa nopean työnkulun, samalla kun luodaan tuotantoon valmis koodi.

Tämän tyyppisillä työkaluilla web-suunnittelusta alkaa tulla lähinnä suunnittelua - ei tuntien viettämistä tekstieditorissa tai arvojen säätämistä ja kopioimista-liittämistä web-tarkastajalta. Jokainen muutos jatkuu taustalla suoraan lähdetyylitaulukossa, ja verkkosivustojen taiteen suunnasta tulee enemmän painopistettä. Sen sijaan, että kulkisin muodon ulkopuolen syntaksin kanssa, voin nopeasti määritellä, kuinka kuvan teksti voi virtata sen ympärille, ja nähdä tarkalleen kuinka se näyttää sivun katsojille.

️ Voi, ja siellä ladattu kuun kuva oli huomattavasti tarkempaa, ja se näyttää mobiililaitteissa paljon pienemmältä. Mutta taustalla Webflow muuttaa automaattisesti kankaan koon yhden pikselin välein ja tuottaa parhaan mahdollisen srcset- ja kokoominaisuusyhdistelmän kuvalle kaikissa rajapisteissä - tarkoittaen, että suunnittelijan ei tarvitse huolehtia kokoamis- ja toimitusongelmista. Silti se luo koodin, jonka kehittäjä ymmärtää.

Responsiivisia malleja voidaan luoda myös manipuloimalla sisältöä suoraan eri väliaikojen välillä samalla perintö- / kaskadikäyttäytymisellä, jota kooderi odottaa, jos he kirjoittavat mediakyselyjä käsin:

Ja visuaalinen toiminnallisuus voi ylittää staattisen suunnittelun. Nyt voimme vetää tietoja hyvin jäsennellystä tietokannasta tai mahdollisesti mukautetusta GraphQL-päätepisteestä, CSV-tiedostosta tai muusta - ja sitten "sitoa" käyttöliittymän osat intuitiivisesti siihen elävään tietoon. Staattiset mallit voivat elää muutamassa minuutissa ja muuttua nopeasti eläviksi dynaamisiksi sovelluksiksi.

Tämä konsepti voi mennä vielä pidemmälle ja soveltaa kehittyneisiin JavaScript-pohjaisiin vuorovaikutuksiin. Tässä on esimerkki hiiren tapahtuman laukaiseman animaation visuaalisesta luomisesta ilman, että sinun on ymmärrettävä JavaScriptin tapahtumia, jQuery-tapahtuman sitovaa semantiikkaa, tyyliominaisuuksien muutoksia ja niin edelleen:

Ja kaikki nämä jutut voidaan julkaista yhdellä napsautuksella, olipa kyse sitten lavastus- tai tuotantoympäristöistä - jäljittelemällä samaa prosessia, jota kehittäjät noudattaisivat. Pienennys, gzip, reagoivat kuvat, CDN-optimointi, HTTP / 2 - melkein kaikki mitä tarvitset oppiaksesi muodostamaan manuaalisesti, hoidetaan avoimesti.

Tämän lähestymistavan avulla on myös mahdollista nähdä tarkalleen kuinka jokainen sivusto rakennettiin avaamalla ytimen lähdeprojekti - ilman taakkaa yrittää tarkistaa koottuja ja pienennettyjä HTML / CSS-tiedostoja selaimessa. Tämä on samanlainen kuin pääsy Photoshop- tai Sketch-lähdetiedostoon, jossa on kaikki tasot / symbolit / jne., Sen sijaan, että tarkistettaisiin JPG- tai SVG-muotoa kootussa muodossa.

Nämä ovat vain kourallinen esimerkkejä, ja niitä on satoja. WYSIWYG-työkalut saavuttavat pian koodipohjaiset työnkulut tehon ja räätälöinnin suhteen ja ylittävät ne nopeuden suhteen nopeasti.

Verkkosuunnittelun tulevaisuus ei ole koodi

Verkko on ollut olemassa jo 25 vuotta, mutta olemme edelleen tiellä. Yritämme edelleen selvittää, miten me rakennamme tätä uutta tietovälinettä. Se on uusi raja, ja toistaiseksi vain suhteellisen harvat ovat lähteneet tutkimaan sitä.

Tutkimus on rajoitettu ensisijaisesti niihin, jotka voivat oppia kirjoittamaan koodia, mikä on vähäinen 0,25% maailman väestöstä - vain yksi jokaisesta 400 ihmistä! Ei ihme, että Frank Chimero, kuten monet muutkin, ovat kamppailleet kaiken monimutkaisuuden suhteen.

Entä jos pystyisimme vapauttamaan verkkosivujen suunnittelun koodin kirjoittamista koskevan vaatimuksen ulkopuolella pitäen samalla suunnittelijoiden hämmästyttävää voimaa käden ulottuvilla? Uskon vakaasti, että visuaaliset työkalut ovat järkevin tapa tehdä se, koska on melko selvää, että koodipohjainen lähestymistapa ei ole skaalaus.

Kuvittele, kuinka erilainen maailma olisi nykyään, jos tietokoneista puuttuisi intuitiivisia graafisia käyttöliittymiä, ja ne rajoittuisivat vain komentorivin hallitseviin. Se olisi todellakin erilainen maailma. Miksi emme haluaisi demokratisoida pääsyä web-suunnitteluun samalla tavalla? Se voi johtaa luovan innovoinnin merimuutokseen verkossa.

Joten ajatellaanpa uudelleen olettamustamme, että koodi on ainoa tapa, ja seuraakaamme muiden menestyvien luovien alojen esimerkkiä. Tehdään taas web-suunnittelun kovat asiat helpoksi!

Suuri kiitos Mariah Driverille, Waldo Broodrykille ja John Moore Williamsille lukemasta tämän viestin luonnoksia.