Innhold
- Fordeler ved å designe med kode
- Data først
- Mobil godhet gratis
- Finne et felles språk
- Lær raskere
- Rask iterasjon
- Raskere tid å starte
- Hvorfor HTML5?
- Den magiske dataattributtet
- CSS3 - det er den nye Photoshop
- Sass + kompass: magisk deilig
- jQuery: å, ja du kan
- Rammeverk
- Siste tanker
Denne artikkelen dukket først opp i nummer 235 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
Jeg har aldri vært en stor fan av å gjøre mer arbeid enn nødvendig. Jeg pleier å evaluere metoder og verktøy basert på deres evne til å gjøre meg, eller teamet mitt, mer effektivt. Hvor raskt får de oss til et fungerende produkt? Hvor effektive er de for å kommunisere? Holder de seg utenfor veien?
Gjennom årene har jeg justert designprosessen og verktøyene mine. Jeg forestiller meg at jeg vil fortsette å gjøre det. Det er arten av å designe for teknologi og nett. Denne industrien er i stadig utvikling; prosessen og verktøyene våre må også utvikle seg.
HTML5 og CSS3 gjør det lettere å overføre mer av designprosessen oppstrøms - vekk fra Photoshop og mer mot et levende, pustende design. Verktøy som Foundation, Bootstrap og jQuery gjør det enklere å flytte mer av designprosessen din for å kode.
Fordeler ved å designe med kode
For det første tar jeg ikke til orde for å slippe Photoshop eller noen annen redaktør for visuell design fra arbeidsflyten din. I stedet vil jeg fokusere på fordelene ved å flytte designet til kode før enn senere.
Data først
Det jeg alltid har likt med å designe med HTML er at det oppmuntrer til å tenke fra et data-first perspektiv. I motsetning til dette, ved å bruke tegneprogrammer som Illustrator, OmniGraffle eller Balsamiq, begynner du med en rute og fyller den med data.
I HTML konstruerer du DOM (dokumentobjektmodell), som å bygge en innholdsfortegnelse. Det er en retur til ekte informasjonsdesign med meningsfulle hierarkier. HTML5 tar det et skritt videre med tillegg av nye semantiske elementer: artikkel, seksjon, topptekst, til side, bunntekst og så videre. Denne data-første tilnærmingen blandes pent med mobil første, responsive design.
Mobil godhet gratis
Hvis du leser dette, designer du sannsynligvis for mobil. Og sjansen er stor for at du må designe et skjema eller to. Med HTML5 har du flaks. Før HTML5 var inndatatypene dine stort sett enten et tekst- eller passordfelt. HTML5 introduserte en rekke ekstra inngangstyper, inkludert:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Det som er utrolig bra med disse ekstra, unike inngangstypene, er at mobile nettlesere på iOS og Android gjenkjenner dem og automatisk bytter ut et kontekstbevisst tastatur - uten spesielle jQuery-plugin-moduler eller hack kreves. Åh, og hvis nettleseren din ikke vet hva en input type = "email"> er, så er det bare standard tekstinntasting.
Finne et felles språk
"Det er utrolig hvordan designerne og utviklerne våre kan jobbe på samme språk" - John Drago, applikasjonsutvikler hos Inflection.
Se om dette høres kjent ut. Jeg er i et konferanserom med et halvt dusin applikasjonsutviklere på serversiden som kan kode sirkler rundt meg i Ruby, Python, Java eller .NET. Jeg er den eneste designeren. Noen av forslagene mine ble opprinnelig avvist som for kompliserte å implementere. Jeg går opp til tavlen og begynner å skrive litt HTML og CSS på tavlen for hvordan designet kan implementeres. Plutselig endres samtaletonen, og en av utviklerne sier motvillig: "Vel, ja - hvis vi gjør det på den måten, kan det fungere."
Å flytte mer av designprosessen min til kode har forbedret samtaler med utviklere. Det er et ekstra respekt du får ved å vite hvordan du lager designene dine i kode. Du trenger ikke å være ekspert for å tjene den respekten. Mens HTML- og CSS-ferdighetene mine er solide, er JavaScript-ferdighetene i beste fall middelmådige. Og jeg er ikke sjenert over å innrømme det. Når vi jobber med frontend eller utviklere på serversiden, er det fortsatt en stor fordel at vi kan snakke på et felles språk eller møtes halvveis.
Lær raskere
Mens wireframes og visuelle kompositter kan hjelpe i planleggingen, er disse statiske gjenstandene teoretiske. Hvor mange ganger har du prøvd å forklare en interaksjon for noen, bare for å få dem til å svare: "Jeg antar at jeg må se det." Jo før du kommer til en prototype, noe folk kan samhandle med, jo raskere kan du oppleve designet og se om ideene fungerer.
Rask iterasjon
Når sist en endelig design som ble levert til produksjon, samsvarte nøyaktig med din Photoshop-komponent? Nesten aldri. Med digital produktdesign skjer endringer kontinuerlig. Videre kan endringer som å øke størrelsen på overskriftene dine fra 22pt til 24pt på et par dusin skjermer ta timer i Photoshop. Smarte objekter gir deg et visst nivå av objektorientert design i Photoshop. Dessverre bruker de fleste visuelle designere jeg kjenner ikke smarte objekter nok. Med CSS, fordi det oppmuntrer til en mer systematisk tilnærming til design, tar typografiske endringer minutter i stedet for timer.
Hva med å endre de lineære gradientene på alle knappene dine? Eller størrelsen på en grense? Hva med å bytte fra kvadratiske hjørner til avrundede hjørner av to punkter I Photoshop kan dette ta flere timer, og du må fortsatt kode det. Evnen til å designe i kode hjelper deg med å unngå tur-retur for å gå tilbake til Photoshop for å gjenta det visuelle designet. Når du flytter disse endringene oppstrøms i kode, ved hjelp av CSS3 og Sass (som jeg vil dekke senere i denne artikkelen), kan de skje i sanntid og bare ta noen få minutter.
Raskere tid å starte
I løpet av årene, da jeg overførte mer av designarbeidsflyten min oppstrøms til kode, opplevde jeg en reell forbedring - omtrent 20-30 prosent reduksjon i tiden til markedet. Jo mer jeg gjør dette, desto mindre tid bruker jeg på å duplisere. Jeg bruker færre sykluser på å gå inn i Photoshop eller Fireworks og deretter gjenta arbeidet med kode.
På et eller annet tidspunkt må designen grensesnitt med en eller annen type backend, enten det er en CMS, Rails-app eller noe annet. Siden det meste av designarbeidet mitt er i kode, skjer integrering raskere enn senere. For et par år siden gikk en av klientene mine, PointRoll, fra prototype til produksjon på fem dager.
Hvorfor HTML5?
HTML5 er enklere enn tidligere versjoner av HTML. Ta for eksempel dokumenttypedeklarasjonen. I tidligere versjoner av HTML, ble DOKTYPE så ut slik:
! DOCTYPE html OFFENTLIG "- // W3C // DTD XHTML 1.1 // NO" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Og det var seks forskjellige versjoner. Heldigvis HTML5 DOKTYPE ser slik ut:
! DOCTYPE HTML>
Alvor. Det er det. Sjokkerende enkelt.
Når du oppretter en standard HTML-side, er det en rekke vanlige elementer, for eksempel en topptekst, hovedinnholdsområde, sidefelt og bunntekst. Jeg er sikker på at du har sett noe sånt før:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Ingenting utenom det vanlige der. Men når den er fylt ut med innhold, blir denne malen til div suppe. I motsetning til dette, med HTML5s nye semantiske elementer, får du noe mye enklere og lettere å skanne, slik:
topptekst> nav> / nav> / topptekst> artikkel> til side> / til side> / artikkel> bunntekst> / bunntekst>
Se på det. Noe som gir mening.
Den magiske dataattributtet
HTML5 kommer med en annen fantastisk krok som gir deg muligheten til å lage din egen semantiske betydning: data-. Tidligere, hvis du ønsket å tilordne noe meningsfylt til et DOM-element, var du begrenset til ID-er, klasser og roller.
Dessverre må ID-er være unike. Klassene er universelle (yippee!), Men bruk av dem kan raskt bli til et rot. Roller er en underutnyttet eiendel som gir betydelig betydning for ARIA. Nylig har jeg brukt data - til en analyseplattform for hendelsessporing vi utvikler på Inflection.Vi er store fans av å teste designene våre. Når vi jobber med applikasjoner eller sider som har mye interaktivitet, vil vi ha mer detaljert innsikt i kundeengasjement på siden.
Skriv inn data-. Med den kan du tilordne, passere og koble til en 'definere din egen' meningsmodell. Så for eksempel kan du gjøre dette:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Vi kan knytte en lytter med JavaScript til siden, og når en kunde holder markøren over eller klikker på denne knappen, kan vi spore aktiviteten. I stedet for bare å kunne spore at noen registrerte seg via OAuth med Twitter, kan vi se at de svevde over Facebook, deretter Twitter, deretter LinkedIn, og bestemte seg til slutt for å velge Twitter for sin OAuth-modell.
Tenk deg å utvide dette til et nettsted som Pinterest, eller det nye Myspace-designet der kundene drar og slipper fliser for å omorganisere dem basert på interesse. Eller muligens skjule fliser de ikke er interessert i data- attributt lar deg feste eller tilordne et ekstra lag med semantisk betydning til ting du kan definere. For nettsteder og apper som stoler sterkt på Ajax, åpner det ubegrensede muligheter.
CSS3 - det er den nye Photoshop
CSS3 brakte et helt nytt nivå av design-look-and-feel som pleide å kreve bakgrunnsbilder, skiver og den beryktede 'skyvedører' -teknikken. Heldigvis hører det fortiden til.
La oss ta en titt på å lage en fancy knapp med en lineær gradient, avrundede hjørner, tekstskygge som gir den en fin bokstavtrykkseffekt og en glød på sveveren. Å lære disse teknikkene vil gå langt. Hver av dem kan brukes uavhengig, eller i forskjellige kombinasjoner for å hente ut omtrent hvilken som helst av den nåværende visuelle heten som trender på nettet i dag.
La oss først gjøre noen justeringer av standardinnstillingen knapp> og input type = "send"> elementer. Forutsatt at du bruker en av standard CSS-tilbakestillingene, legger vi bare til litt størrelse og pusterom.
/ * Knapper som har knappene. ========================================= * * / knapp, input [type = "send"] {høyde: 2.7em; polstring: .4em .7em; linjehøyde: 1,9; }
Protip: Knapper og innganger som sendes inn kan være vanskelig å legge om. Jeg har funnet ut ved å justere linjehøyden til 1,6 eller større, du kan unngå hacket ved å trenge en ekstra div eller spenn i knapp> stikkord.
Nå har vi ‘løst’ knappeproblemet vårt, vi kan opprette en .btn klasse for å gi oss en fin, ren knapp med avrundede hjørner, en lineær gradient, omriss og det boktrykkutseendet.
.btn {display: inline-block; kantlinje: 1 px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; polstring: .4em .7em; bakgrunn: # edeff2; bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#fefefe), fargestopp (0,55, # edeff2), til (# e4e6e9)); bakgrunn: -moz-lineær-gradient (midt øverst, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187,, 7) 0 0, 2em 0; -webkit-box-shadow: rgba (160,172,187,, 7) 0 0, 2em 0; bokseskygge: rgba (160,172,187,, 7) 0 0, 2 em 0; farge: # 6c7786; skriftstørrelse: 1.1em; tekst-skygge: #fefefe 1px 0 1px; linjehøyde: 1.375 em; markør: peker; }
Og så en fin svevereffekt med en subtil glød ved hjelp av bokseskygge metode:
.btn: sveve, .btn: fokus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; bokseskygge: # 129ceb 0 0 2px; bakgrunn: # e6e9eb; bakgrunn: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# f7f7f7), fargestopp (0,55, # f6f6f7), til (# e6e9eb)); bakgrunn: -moz-lineærgradient (midt øverst, # f7f7f7, # f6f6f7 55%, # e6e9eb); farge: # 45484b; tekst-skygge: rgb (255,255,255) 1px 1px 0; kantfarge: # c9c9c0; }
Nå er jeg ikke en stor fan av å skrive den lineære gradientkoden. Det er langt og forvirrende. Som du kan se, har jeg bare tatt med versjonen for -moz, -webkit, og standardmodellen. Hvis du vil inkludere -o og -ms-versjoner, må du doble koden.
Det er to andre alternativer. Den ene er en CSS3-generator; det er flere tilgjengelige på nettet, inkludert ColorZilla. Men hvis du vil øke spillet ditt litt, bør du vurdere å dykke inn i Sass: kombinert med Compass er det en gave.
Sass + kompass: magisk deilig
Du kan slutte å håpe på CSS4 enhjørningsutgave. Den er her, og den heter Sass + Compass. Sass står for Syntactically Awesome Stylesheets: du arver alle de tradisjonelle fordelene med CSS3 med den ekstra gleden ved variabler, mixins, extenders og andre godbiter.
Jeg omformet nylig en CSS-fil på 5000 linjer som hadde mer enn 30 varianter på samme blå nyanse. Med Sass erstattet jeg hver variant med denne koden:
farge: $ blå;
Ved å definere $ blå i min _variables.scss fil, kan jeg lage en standardfarge som hver CSS- eller SCSS-fil kan referere til. Alle som skriver CSS kan bruke $ blå og ikke trenger å bekymre deg for å bruke pipette, finne en heksekode eller RGB-, RGBA- eller HSL-farge.
Husk den lineære gradientkoden? I stedet for å skrive flere kodelinjer, hva med dette:
@ inkluderer bakgrunn (lineær gradient (# b1cfdc, # 7a9cac));
La Sass og Compass gjøre tungt løft og generere riktig syntaks for deg: ferdig. La oss si at du vil ha en mørkere eller lysere versjon av en farge. Du kan flytte pipetten rundt i Photoshop, eller bare bruke kommandoer for lysere / mørkere i Sass:
@ inkluderer bakgrunn (lineær gradient (mørkere ($ litegray, 2%), mørkere ($ off-white, 5%)));
Det vil skape en lineær gradient med en 2% mørkere $ lite-grå og 5% mørkere off-white. Voil! Du trenger ikke engang HEX- eller RGB-kodene.
jQuery: å, ja du kan
Jeg har tilståelse å avgi. JavaScript ble brukt til å skremme meg. Så fant jeg jQuery. Jeg vil ikke påstå at jeg er en JavaScript-guru, men jeg er ganske trygg på at jeg kan ta i bruk omtrent enhver form for overgang eller funksjon jeg trenger for å bruke jQuery.
Ta for eksempel muligheten til å vise et sekundært telefonnummerinngang på skjermen ved å klikke på koblingen Legg til nytt nummer. Ved hjelp av jQuery skriver du ganske enkelt dette:
// - Progressiv avsløring - // $ (’. Nytt nummer’). Klikk (funksjon () {$ (’. Alt-nummer’). FadeIn (’rask’);});
Leter du etter noe mer avansert? Det er sannsynligvis en plugin-modul for det. Grunnleggende atferd er lett, og komplekse er tilgjengelige med jQuery.
Rammeverk
To av de mest robuste rammene i dag er Foundation og Bootstrap. Nå, før du avviser CSS-rammer, la meg spørre deg om noe. Bruker du jQuery? Ruby on Rails? Django? Alle rammer.
Akkurat som jQuery og RoR, ble Foundation og Bootstrap født av å erkjenne at det er ganske mange ting vi gjør om og om igjen (for eksempel tilbakestillinger, typografi, rutenett, skjemaer, knapper, nav og lister). Foundation og Bootstrap tilbyr begge støtte for responsive design gjennom bruk av hjelperklasser. Begge er godt dokumentert og er testet på veien, slik at du kan bruke dem med tillit.
En nøkkelforskjell mellom de to: Bootstrap er basert på LESS-systemet for CSS-forbehandling, mens Foundation er basert på Sass. Jeg foretrekker Sass fremfor MINDRE på grunn av sine ekstra evner, men både Sass og MINDRE squasher tradisjonell CSS i stykker.
En siste tanke på rammer. For de som ikke vil arve den ekstra oppblåsingen av andres rammer, bør du vurdere å plukke en eksisterende og strippe den til bare bein, eller kirsebærplukking fra noen få for å rulle din egen. Uansett er det egentlig ingen grunn til å starte fra bunnen av hver gang.
Siste tanker
Vil du ha større kontroll over hvordan designet ditt endelig blir? Flytt flere prosesser oppstrøms til kode. HTML5 gir DOM endelig mening. God riddance til tull DOKTYPEs og divitt. CSS3 er den nye Photoshop: lineære gradienter, borderradius og FTW-skygger! Og med verktøy som Bootstrap, Foundation, Sass og jQuery har det aldri vært enklere å flytte design oppstrøms til kode.
Oppdag 55 fantastiske eksempler på HTML5 over på Creative Bloq.
