Casestudie: opdatering af lynnandtonic.com 2017

I løbet af de sidste ti år har jeg lavet ti forskellige versioner af mit websted. Jeg kalder det min årlige portefølje "opdatering", da indholdet normalt forbliver det samme. Jeg starter altid med en tom CSS-fil.

nogle tidligere iterationer af lynnandtonic.com

Det gør jeg hvert år af et par grunde:

  • for at sikre, at jeg afslutter mindst et ikke-arbejdsprojekt
  • at eksperimentere med og lære nye teknikker (et par standout opdateringer var mine første forsøg på responsivt design, flexbox og i år CSS-net)
  • et år handler om den rigtige mængde tid for en version at eksistere, hvor jeg ikke føler mig trist, når jeg sidder ned for at ændre den

En virkelig god ting ved at gøre om mit eget sted er også, at det er helt mit, og jeg kan gøre, hvad det pokker, jeg vil.

En meget lille procentdel af min porteføljes besøgende er lufthavnsentusiaster, Top Chef-seere og familie (hej, mor). Men det primære publikum er overvældende webdesignere, udviklere og tech-rekrutterere. Dette er mennesker, der ved, hvordan websteder er bygget, og det kan tage et ekstra minut at inspicere tingene. Jeg ville designe omkring det.

Koncept og inspiration

I årevis har vi fortalt verden, at et websted ikke behøver at se nøjagtigt det samme i enhver browser for enhver bruger. Med lydhør design og progressiv forbedring vil brugerne se tingene anderledes. Ikke alle har brug for at opleve hele webstedet.

Men kunne jeg få folk til at ønske at opleve det hele? Kunne jeg overraske dem ved at tage disse begreber til en absurd ekstrem?

Jeg elsker at ændre størrelsen på min browser og se, hvordan layoutet reagerer, og hvordan designeren besluttede, når ting ændres, og hvad der bliver tabt eller tilføjet. Jeg ved, at mange andre også gør dette. Jeg troede oprindeligt, at jeg kunne undergrave forventningerne ved at få de allestedsnærværende breakpoints for telefon, tablet og desktop udløse helt forskellige layouts med unikke stilarter, farver og typebehandlinger. Tre steder i én.

Ændringerne, så dramatiske, som de måtte have været, føltes stadig for konventionelle. Du forventer allerede, at der sker noget i tabletstørrelse og derefter igen for telefoner.

Jeg havde for nylig set en YouTube-video om Kuleshov-effekten, et udtryk i filmredigering, der beskriver "et fænomen, hvor seerne får mere mening fra samspillet mellem to sekvensielle skud end fra et enkelt skud isoleret." En metaforisk klokke chimeret ind mit hoved.

Der er en eksisterende betydning for et websted med tre (eller et par flere) forskellige layout: understøttelse af fælles enheder. Men hvad ville det betyde, at der er 10, 15 eller i sidste ende 21 forskellige design, der "sidder" side om side for dig at opdage den ene ad gangen, den ene efter den anden. Hver af dem kan være unremarkable alene, men det er forholdene (og forskellene) med dem til venstre / højre og til de 18 andre, der gør hver værd at se på.

Et eksempel på lynnandtonic.com

Udfører idéen

Jeg vidste allerede, at det var muligt at bruge CSS til at omdanne grundlæggende markup til noget ekstraordinært. CSS Zen Garden viste os dette gentagne gange i årevis. Et andet sideprojekt af mig, a.singlediv.com, tager dette koncept til latterlige ekstremer (jeg fornemmer et mønster her).

Så udførelsen af ​​denne redesign startede med grundlæggende HTML. Én ting, jeg har lært gennem årene med at eksperimentere med CSS, er, at du kan opnå meget uden at skulle ofre ren markup. Her er hvad jeg landede på. s inden i

og

ville give mig mulighed for at style hver linje forskelligt, hvis jeg havde brug for, og -elementet ville give mulighed for et responsivt billede plus give yderligere: før og: efter pseudo-elementer (som ikke tillader).


  

Jeg gætter også på, at jeg skal tilføje en ansvarsfraskrivelse her. Jeg er den eneste, der berører denne kode, så jeg sætter tingene op, som det fungerede for mig. Der er selvfølgelig forskellige og sikkert bedre måder at gøre alt dette på.

Jeg bruger Stylus til CSS-forarbejdning (og vil i de følgende eksempler). Jeg oprettede først en home.styl, hvor en nulstilling og variabler ville blive importeret, basale sidestilarter ville blive erklæret, og hvor medieforespørgsler ville blive oprettet. Det plus de andre sider ville importere til et main.styl, der bliver samlet og minimeret. Strukturen ser sådan ud:

 _styl
   komponenter
   globaler
   sider
     om.styl
     hjem.styl
     tanker.styl
     arbejde.styl
   main.styl

Jeg planlagde at bruge CSS-gitter til denne redesign, så jeg oprettede et super basic fallback-layout, der som standard vises (adskilt i sin egen fil i et hjemmekatalog), og jeg placerede alt andet inden for en @supports-erklæring.

 _styl
   sider
     hjem
       fallback.styl
     hjem.styl
   main.styl
/ * home.styl * /
@import 'hjem / fallback'
@supports (display: gitter)
  body.home
    [basestilarter her]

Hvis en browser ikke understøtter skærm: gitter, vil den gengive fallback, der ser sådan ud:

Med et tilbagefald på plads kunne jeg nu fokusere på de mange forskellige layout. For at holde tingene håndterbare delte jeg hvert layout op i sin egen fil sammen med fallback.styl i hjemmekataloget (har ikke noget imod min latterlige navngivning).

 _styl
   sider
     hjem
       b-og-w-og-guld-all-over.styl
       big-nav.style
       big.styl
       blokhoved.styl
       bolt.style
       udskæring.styl
       diagonal.styl
       forklædning.styl
       fallback.styl
       fifty-fifty.styl
       halv.styl
       L-Y-N-N. styl
       landskab.styl
       film.styl
       pop-out.styl
       roter.styl
       fremmed.styl
       tredje.styl
       trekant.styl
       hvidstænger
       hvidboks.styl
       x.styl
     hjem.styl
   main.styl

Derefter var jeg i stand til at importere hvert layout til sin egen medieforespørgsel:

/ * home.styl * /
@supports (display: gitter)
  body.home
    [basestilarter her]
  @media-skærm og (maks. bredde: 400px)
    @import 'hjem / diagonal'
  @media-skærm og (min. bredde: 401 px) og (maks. bredde: 500 px)
    @import 'hjem / L-Y-N-N'
  @media-skærm og (min. bredde: 501 px) og (maks. bredde: 600 px)
    @import 'hjem / blokhoved'
  + 18 mere (2300px er den bredeste medieforespørgsel)

Dette fjerner enhver kollision, der måtte ske, og eliminerer behovet for at gøre massive overstyringer. Der er nogle gentagne stylinger på tværs af forskellige layouts, men jeg fandt det acceptabelt at holde tingene klare og organiserede. Hvert breakpoint bruger kun det CSS, det har brug for, til dets specifikke layout.

Yderligere læring

Hvis du er interesseret i at grave dig ind i CSS lidt mere eller at inspicere individuelle layouts, offentliggjorde jeg min repo på GitHub.

Jeg vil ikke gå ind på, hvordan man bruger gitter her, da Rachel Andrew og Jen Simmons har skrevet og talt omfattende om emnet. Se Rachels gitter efter eksempel og Jen's eksperimentelle layoutlaboratorium som gode steder at starte.

Patrick Brosset fra Mozilla oprettede en video, der nedbryder brugen af ​​gitter til et af mine websteds layouts, som er ret cool:

Jeg planlagde at uddybe nogle af mine foretrukne dele af redesignet her, men jeg tror, ​​jeg vil have folk til at blive overrasket, når de udforsker. Så hvis du ikke har tjekket det ud endnu, skal du gøre det på lynnandtonic.com.

Respons

Jeg håber altid, at mit arbejde vil inspirere folk til at tænke på deres medium og værktøjer forskelligt og tilskynde dem til at eksperimentere med, hvad der er muligt.

Responsen har været overvældende, og det er virkelig vidunderligt at se folk opdage og nyde stedet. Jeg er så taknemmelig for alles venlige og opmuntrende ord.

Ét stykke feedback, jeg har modtaget, er, at mange mennesker overhovedet ikke ændrer størrelse på deres browsere. Det er rigtigt! Og det er helt okay. Webstedet er stadig funktionelt, selvom du ikke ved, at der findes andre layout. For at være retfærdig, er der et layout, der giver en super forvirrende oplevelse (Stranger Things-fans ved måske, hvilken jeg taler om). Men med mit publikum i tankerne regnede jeg med, at risikoen var lav.

Med det meste af mit arbejde er der folk, der spørger ”Hvorfor gør dette?” Jeg har et andet indlæg i værkerne, der dækker af de mange grunde, men indtil videre: undertiden er det sjovt at gøre ting, der er underlige.

Tak, fordi du tjekker webstedet. Det betyder verden.

Indtil næste redesign,
❤ Lynn

Oprindeligt offentliggjort på blog.andyet.com den 9. januar 2018.