Indhold
- Fordele ved at designe med kode
- Data først
- Mobil godhed gratis
- At finde et fælles sprog
- Lær hurtigere
- Hurtig iteration
- Hurtigere tid til at starte
- Hvorfor HTML5?
- Den magiske datatribut
- CSS3 - det er den nye Photoshop
- Sass + Kompas: magisk lækker
- jQuery: åh, ja det kan du
- Rammer
- Afsluttende tanker
Denne artikel optrådte først i nummer 235 af .net magazine - verdens bedst sælgende magasin til webdesignere og udviklere.
Jeg har aldrig været en stor fan af at udføre mere arbejde end nødvendigt. Jeg har tendens til at evaluere metoder og værktøjer baseret på deres evne til at gøre mig eller mit team mere effektiv. Hvor hurtigt får de os til et fungerende produkt? Hvor effektive er de til at kommunikere? Holder de sig væk fra vores måde?
I årenes løb har jeg justeret min designproces og værktøjer. Jeg forestiller mig, at jeg vil fortsætte med at gøre det. Det er karakteren af at designe til teknologi og internettet. Denne industri udvikler sig konstant; vores proces og værktøjer skal også udvikle sig.
HTML5 og CSS3 gør det lettere at overføre mere af designprocessen opstrøms - væk fra Photoshop og mere mod et levende, åndende design. Værktøjer som Foundation, Bootstrap og jQuery gør det lettere at flytte mere af din designproces til kode.
Fordele ved at designe med kode
For det første går jeg ikke ind for at droppe Photoshop eller nogen anden visuel designredaktør fra din arbejdsgang. I stedet vil jeg fokusere på fordelene ved at flytte dette design til kode hurtigere end senere.
Data først
Det, jeg altid har ønsket at designe med HTML, er at det tilskynder til tænkning fra et data-first perspektiv. I modsætning hertil starter du med et felt og fylder det med data ved hjælp af tegneprogrammer som Illustrator, OmniGraffle eller Balsamiq.
I HTML konstruerer du DOM (dokumentobjektmodel), som om du bygger en indholdsfortegnelse. Det er en tilbagevenden til ægte informationsdesign med meningsfulde hierarkier. HTML5 tager det et skridt videre med tilføjelsen af nye semantiske elementer: artikel, sektion, overskrift, side, sidefod og så videre. Denne data-første tilgang blander sig pænt med mobil første, lydhøre design.
Mobil godhed gratis
Hvis du læser dette, designer du sandsynligvis til mobil. Og chancerne er, at du bliver nødt til at designe en formular eller to. Med HTML5 har du held og lykke. Før HTML5 var dine inputtyper stort set enten et tekst- eller adgangskodefelt. HTML5 introducerede et antal yderligere inputtyper, herunder:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Hvad der virkelig er fantastisk ved disse ekstra unikke inputtyper er, at mobilbrowsere på iOS og Android genkender dem og automatisk bytter ud et kontekstbevidst tastatur - uden specielle jQuery-plugins eller hacks krævet. Åh, og hvis din browser ikke ved, hvad en input type = "email"> er, så er det som standard bare en tekstindtastning.
At finde et fælles sprog
"Det er fantastisk, hvordan vores designere og udviklere kan arbejde på samme sprog" - John Drago, applikationsudvikler hos Inflection.
Se om dette lyder velkendt. Jeg er i et konferencelokale med et halvt dusin applikationsudviklere på serversiden, der kan kode cirkler omkring mig i Ruby, Python, Java eller .NET. Jeg er den eneste designer. Et par af mine forslag bliver oprindeligt afvist som værende for komplicerede til at gennemføre. Jeg går op til tavlen og begynder at skrive nogle HTML og CSS på tavlen for, hvordan designet kan implementeres. Pludselig ændres samtaletonen, og en af udviklerne siger modvilligt: "Nå ja - hvis vi gør det på den måde, kan det fungere."
At flytte mere af min designproces til kode har forbedret samtaler med udviklere. Der er et ekstra lag af respekt optjent ved at vide, hvordan man laver dine designs i kode. Du behøver ikke at være ekspert for at tjene den respekt. Mens mine HTML- og CSS-færdigheder er solide, er mine JavaScript-færdigheder i bedste fald middelmådige. Og jeg er ikke genert over at indrømme det. Når vi arbejder med frontend eller server-side-udviklere, er det stadig en kæmpe fordel, at vi kan tale på et fælles sprog eller mødes halvvejs.
Lær hurtigere
Mens wireframes og visuelle kompositter kan hjælpe med planlægningen, er disse statiske artefakter teoretiske. Hvor mange gange har du prøvet at forklare en interaktion for nogen, kun for at få dem til at svare: "Jeg tror jeg bliver nødt til at se det." Jo hurtigere du kommer til en prototype, noget folk kan interagere med, jo hurtigere kan du opleve designet og se om ideer fungerer.
Hurtig iteration
Hvornår matchede et sidste design, der blev leveret til produktion, sidst nøjagtigt med din Photoshop-komp? Næsten aldrig. Med digitalt produktdesign sker ændringer konstant. Desuden kan ændringer som at øge størrelsen på dine overskrifter fra 22pt til 24pt på tværs af et par dusin skærme tage timer i Photoshop. Smart Objects giver dig et niveau af objektorienteret design i Photoshop. Desværre bruger de fleste visuelle designere, jeg kender, ikke smarte objekter nok. Med CSS, fordi det tilskynder til en mere systematisk tilgang til design, tager typografiske ændringer minutter i stedet for timer.
Hvad med at ændre de lineære gradienter på alle dine knapper? Eller størrelsen på en grænse? Hvad med at skifte fra firkantede hjørner til afrundede hjørner på 2 pixel? I Photoshop kan dette tage timer, og du skal stadig kode det. Evnen til at designe i kode hjælper med at undgå rundtur i at gå tilbage til Photoshop for at gentage det visuelle design. Når du flytter disse ændringer opstrøms til kode ved hjælp af CSS3 og Sass (som jeg vil dække senere i denne artikel), kan de ske i realtid og kun tage et par minutter.
Hurtigere tid til at starte
I årenes løb, da jeg overgik mere af min designworkflow opstrøms til kode, oplevede jeg en reel forbedring - omkring en reduktion på 20 til 30 procent i tid til marked. Jo mere jeg gør dette, jo mindre tid bruger jeg på at duplikere indsatsen. Jeg bruger færre cyklusser på at gå ind i Photoshop eller Fireworks og derefter gentage arbejdet i kode.
På et eller andet tidspunkt skal designet interface med en eller anden type backend, hvad enten det er en CMS, Rails-app eller noget andet. Da det meste af mit designarbejde er i kode, sker integration hurtigere end senere. For et par år siden gik en af mine klienter, PointRoll, fra prototype til produktion på fem dage.
Hvorfor HTML5?
HTML5 er nemmere end tidligere versioner af HTML. Tag f.eks. Dokumenttypedeklarationen. I tidligere versioner af HTML blev DOCTYPE så sådan ud:
! DOCTYPE html OFFENTLIG "- // W3C // DTD XHTML 1.1 // DA" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Og der var seks forskellige versioner. Heldigvis HTML5 DOCTYPE ser sådan ud:
! DOCTYPE HTML>
Helt seriøst. Det er det. Chokerende simpelt.
Når du opretter en standard HTML-side, er der et antal almindelige elementer, såsom et overskrift, hovedindholdsområde, sidebjælke og sidefod. Jeg er sikker på, at du har set noget lignende før:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Intet usædvanligt der. Men når den først er udfyldt med indhold, bliver denne skabelon til div suppe. I modsætning hertil får du med HTML5s nye semantiske elementer noget meget enklere og lettere at scanne, som dette:
header> nav> / nav> / header> artikel> til side> / til side> / artikel> sidefod> / sidefod>
Se på det. Noget der giver mening.
Den magiske datatribut
HTML5 leveres med en anden fantastisk krog, der giver dig mulighed for at skabe din egen semantiske betydning: data-. Tidligere, hvis du ønskede at tildele noget meningsfuldt til et DOM-element, var du begrænset til id'er, klasser og roller.
Desværre skal id'er være unikke. Klasser er universelle (yippee!), Men brug af dem kan hurtigt blive til et rod. Roller er et underudnyttet aktiv, der giver ARIA en betydelig betydning. For nylig har jeg brugt data til en platform til analyse af begivenhedssporing, som vi udvikler i Inflection.Vi er store fans af at teste vores designs. Når vi arbejder på applikationer eller sider, der har stor interaktivitet, vil vi gerne have mere detaljeret indsigt i kundeengagement på siden.
Gå ind i data-. Med den kan du tildele, videregive og tilslutte sig en 'definer din egen' meningsmodel. Så for eksempel kan du gøre dette:
input type = "knap" 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 vedhæfte en lytter med JavaScript til siden, og når som helst en kunde holder markøren over eller klikker på denne knap, kan vi spore den aktivitet. I stedet for kun at kunne spore, at nogen er registreret via OAuth med Twitter, kan vi se, at de svævede over Facebook, derefter Twitter, derefter LinkedIn, og derefter endelig besluttede at vælge Twitter til deres OAuth-model.
Forestil dig at udvide dette til et websted som Pinterest eller det nye Myspace-design, hvor kunderne trækker og slipper fliser for at omarrangere dem baseret på interesse. Eller muligvis skjule fliser, de ikke er interesseret i data- attribut giver dig mulighed for at vedhæfte eller tildele et ekstra lag af semantisk betydning til ting, du kan definere. For websteder og apps, der er stærkt afhængige af Ajax, åbner det ubegrænsede muligheder.
CSS3 - det er den nye Photoshop
CSS3 bragte et helt nyt niveau af design af look-and-feel, der plejede at kræve baggrundsbilleder, skiver og den berygtede 'skydedøre'-teknik. Heldigvis hører det hele fortiden til.
Lad os se på at lave en fancy knap med en lineær gradient, afrundede hjørner, tekstskygge, der giver den en flot bogstavtrykseffekt og en glød på svævningen. At lære disse teknikker vil gå langt. Hver af dem kan bruges uafhængigt af hinanden eller i forskellige kombinationer til at trække næsten enhver af den aktuelle visuelle hotthed ud, der er på nettet i dag.
Lad os først foretage et par justeringer af standard knap> og input type = "send"> elementer. Forudsat at du bruger en af standard CSS-nulstillinger, tilføjer vi bare et lille størrelses- og åndedrætsrum.
/ * Knapper, hvis knapper har fået. ========================================== * * / knap, indtast [type = "send"] {højde: 2,7 em; polstring: .4em .7em; linjehøjde: 1,9; }
Protip: Knapper og input, der indsendes, kan være vanskelige at genstille. Jeg har fundet ved at justere liniehøjden til 1,6 eller derover, kan du undgå hacket ved at have brug for en ekstra div eller spænd inde i knap> tag.
Nu har vi 'rettet' vores knapproblem, vi kan oprette en .btn klasse for at give os en dejlig ren knap med afrundede hjørner, en lineær gradient, omrids og det bogtryksudseende.
.btn {display: inline-block; kant: 1 px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; polstring: .4em .7em; baggrund: # edeff2; baggrund: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (#fefefe), farve-stop (0,55, # edeff2), til (# e4e6e9)); baggrund: -moz-lineær-gradient (center top, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187,, 7) 0 0, 2 em 0; -webkit-box-shadow: rgba (160,172,187,, 7) 0 0, 2 em 0; box-shadow: rgba (160,172,187,, 7) 0 0, 2 em 0; farve: # 6c7786; skriftstørrelse: 1.1em; tekst-skygge: #fefefe 1px 0 1px; linjehøjde: 1.375 em; markør: markør; }
Og så en dejlig svæveeffekt med en subtil glød ved hjælp af box-shadow metode:
.btn: svæver, .btn: fokus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; baggrund: # e6e9eb; baggrund: -webkit-gradient (lineær, 0% 0%, 0% 100%, fra (# f7f7f7), farve-stop (0,55, # f6f6f7), til (# e6e9eb)); baggrund: -moz-lineærgradient (center top, # f7f7f7, # f6f6f7 55%, # e6e9eb); farve: # 45484b; tekst-skygge: rgb (255,255,255) 1px 1px 0; kantfarve: # c9c9c0; }
Nu er jeg ikke en stor fan af at skrive den lineære gradientkode. Det er langt og forvirrende. Som du kan se, har jeg kun inkluderet versionen til -moz, -webkitog standardmodellen. Hvis du vil medtage -o og -ms versioner, skal du fordoble koden.
Der er to andre muligheder. Den ene er en CSS3-generator; der er flere tilgængelige på nettet, herunder ColorZilla. Men hvis du vil intensivere dit spil lidt, kan du overveje at dykke ned i Sass: kombineret med Compass er det en gave.
Sass + Kompas: magisk lækker
Du kan stoppe med at håbe på CSS4 enhjørningsudgave. Det er her, og det hedder Sass + Compass. Sass står for Syntactically Awesome Stylesheets: du arver alle de traditionelle fordele ved CSS3 med den ekstra glæde af variabler, mixins, extenders og andre godbidder.
Jeg har for nylig ombygget en CSS-fil på 5.000 linjer, der havde mere end 30 variationer i samme blå nuance. Med Sass erstattede jeg alle variationer med denne kode:
farve: $ blå;
Ved at definere $ blå i min _variables.scss fil, kan jeg oprette en standardfarve, som hver CSS- eller SCSS-fil kan henvise til. Enhver, der skriver CSS, kan bruge $ blå og ikke behøver at bekymre sig om at bruge en pipette, finde en hex-kode eller RGB-, RGBA- eller HSL-farve.
Husk den lineære gradientkode? I stedet for at skrive flere linjer med kode, hvad med dette:
@ inkluderer baggrund (lineær gradient (# b1cfdc, # 7a9cac));
Lad Sass og Compass gøre det tunge løft og generere den korrekte syntaks for dig: færdig. Lad os sige, at du vil have en mørkere eller lysere version af en farve. Du kan flytte pipetten rundt i Photoshop eller bare bruge kommandoer til lysere / mørkere i Sass:
@ inkluderer baggrund (lineær gradient (mørkere ($ litegray, 2%), mørkere ($ off-white, 5%)));
Det vil skabe en lineær gradient med en 2% mørkere $ lite-grå og 5% mørkt off-white. Voil! Du har ikke engang brug for HEX- eller RGB-koder.
jQuery: åh, ja det kan du
Jeg skal tilstå. JavaScript bruges til at skræmme mig. Så fandt jeg jQuery. Jeg hævder ikke at være en JavaScript-guru, men jeg er ret sikker på, at jeg kan trække næsten enhver form for overgang eller funktion, jeg har brug for, til at bruge jQuery.
Tag for eksempel muligheden for at vise et sekundært telefonnummerindgang på skærmen ved at klikke på et link Tilføj nyt nummer. Brug jQuery til at skrive dette:
// - Progressiv afsløring - // $ ('. Nyt nummer'). Klik (funktion () {$ ('. Alt-nummer'). FadeIn ('hurtig');});
Leder du efter noget mere avanceret? Der er sandsynligvis et plug-in til det. Grundlæggende adfærd er let, og komplekse er tilgængelige med jQuery.
Rammer
To af de mest robuste rammer i dag er Foundation og Bootstrap. Inden du afviser CSS-rammer, lad mig spørge dig om noget. Bruger du jQuery? Ruby on Rails? Django? Alle rammer.
Ligesom jQuery og RoR blev Foundation og Bootstrap født ud af at erkende, at der er et ret antal ting, vi gør igen og igen (såsom nulstillinger, typografi, gitre, formularer, knapper, nav og lister). Foundation og Bootstrap tilbyder begge support til lydhør design ved hjælp af hjælperklasser. Begge er veldokumenterede og er vejtestet, så du kan bruge dem med tillid.
En nøgleforskel mellem de to: Bootstrap er baseret på LESS-systemet til forbehandling af CSS, mens Foundation er baseret på Sass. Jeg foretrækker Sass frem for MINDRE på grund af dens ekstra kapaciteter, men både Sass og MINDRE squasher traditionel CSS i stykker.
En sidste tanke på rammer. For dem, der ikke ønsker at arve en andens ekstra ramme, skal du overveje at vælge en eksisterende og fjerne den til de bare knogler eller kirsebærpluk fra nogle få for at rulle din egen. Uanset hvad er der virkelig ingen grund til at starte fra bunden hver gang.
Afsluttende tanker
Vil du have større kontrol over, hvordan dit design endelig bliver? Flyt flere processer opstrøms til kode. HTML5 giver DOM endelig mening. God riddance til nonsens DOCTYPEs og divitis. CSS3 er den nye Photoshop: lineære gradienter, borderradius og FTW-skygger! Og med værktøjer som Bootstrap, Foundation, Sass og jQuery har det aldrig været nemmere at flytte design opstrøms til kode.
Oplev 55 fantastiske eksempler på HTML5 over på Creative Bloq.
