Innehåll
- Fördelar med att designa med kod
- Data först
- Mobil godhet gratis
- Hitta ett gemensamt språk
- Lär dig snabbare
- Snabb iteration
- Snabbare tid att starta
- Varför HTML5?
- Det magiska dataattributet
- CSS3 - det är den nya Photoshop
- Sass + Kompass: magiskt utsökt
- jQuery: Åh, ja du kan
- Ramar
- Slutgiltiga tankar
Den här artikeln publicerades först i nummer 235 av tidningen .net - världens bästsäljande tidning för webbdesigners och utvecklare.
Jag har aldrig varit ett stort fan av att göra mer arbete än vad som behövs. Jag brukar utvärdera metoder och verktyg baserat på deras förmåga att göra mig, eller mitt team, mer effektiv. Hur snabbt får de oss till en fungerande produkt? Hur effektiva är de för att kommunicera? Håller de sig ur vägen?
Under åren har jag anpassat min designprocess och mina verktyg. Jag antar att jag kommer att fortsätta göra det. Det är karaktären av att utforma för teknik och webben. Denna industri utvecklas ständigt; vår process och våra verktyg måste också utvecklas.
HTML5 och CSS3 gör det lättare att överföra mer av designprocessen uppströms - bort från Photoshop och mer mot en levande, andad design. Verktyg som Foundation, Bootstrap och jQuery gör att du kan flytta mer av din designprocess till kod mer tillgänglig.
Fördelar med att designa med kod
För det första förespråkar jag inte att Photoshop eller någon annan visuell designredigerare släpps från ditt arbetsflöde. Istället fokuserar jag på fördelarna med att flytta den designen till kod förr än senare.
Data först
Det jag alltid har gillat med att designa med HTML är att det uppmuntrar tänkande ur ett data-first-perspektiv. Däremot, med hjälp av ritprogram som Illustrator, OmniGraffle eller Balsamiq, börjar du med en ruta och fyller den med data.
I HTML konstruerar du DOM (dokumentobjektmodell), som att bygga en innehållsförteckning. Det är en återgång till riktig informationsdesign med meningsfulla hierarkier. HTML5 tar det ett steg längre med tillägget av nya semantiska element: artikel, avsnitt, sidhuvud, åt sidan, sidfot och så vidare. Den här dataförsta metoden smälter fint samman med mobila första, lyhörd design.
Mobil godhet gratis
Om du läser detta designar du förmodligen för mobilen. Och chansen är att du måste utforma en blankett eller två. Med HTML5 har du tur. Före HTML5 var dina inmatningstyper i stort sett antingen ett text- eller lösenordsfält. HTML5 introducerade ett antal ytterligare ingångstyper, inklusive:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Det som verkligen är fantastiskt med dessa ytterligare unika ingångstyper är att mobila webbläsare på iOS och Android känner igen dem och automatiskt byter ut ett kontextuellt medveten tangentbord - utan speciella jQuery-plugin-program eller hack krävs. Åh, och om din webbläsare inte vet vad en input type = "email"> är, då är det som standard bara en textinmatning.
Hitta ett gemensamt språk
"Det är fantastiskt hur våra designers och utvecklare kan arbeta på samma språk" - John Drago, applikationsutvecklare på Inflection.
Se om detta låter bekant. Jag är i ett konferensrum med ett halvt dussin applikationsutvecklare på serversidan som kan koda cirklar runt mig i Ruby, Python, Java eller .NET. Jag är den enda designern. Några av mina förslag avfärdas ursprungligen som alltför komplicerade att genomföra. Jag går upp till whiteboardtavlan och börjar skriva lite HTML och CSS på tavlan för hur designen kan implementeras. Plötsligt ändras konversationstonen och en av utvecklarna säger motvilligt: "Tja, ja - om vi gör det på det sättet kan det fungera."
Att flytta mer av min designprocess till kod har förbättrat samtal med utvecklare. Det finns ett extra respekt som du tjänar genom att veta hur du skapar dina mönster i kod. Du behöver inte vara expert för att förtjäna den respekten. Medan mina HTML- och CSS-färdigheter är solida, är mina JavaScript-färdigheter i bästa fall mediokra. Och jag är inte blyg för att erkänna det. När vi arbetar med frontend eller utvecklare på serversidan är det fortfarande en stor fördel att vi kan prata på ett gemensamt språk eller träffas halvvägs.
Lär dig snabbare
Medan trådramar och visuella kompositer kan hjälpa till vid planering är dessa statiska artefakter teoretiska. Hur många gånger har du försökt förklara en interaktion för någon, bara för att få dem att svara: "Jag antar att jag måste se det." Ju tidigare du kommer till en prototyp, något människor kan interagera med, desto snabbare kan du uppleva designen och se om idéer fungerar.
Snabb iteration
När matchade en slutlig design som levererades till produktion senast din Photoshop-kompakt exakt? Nästan aldrig. Med digital produktdesign sker förändringar ständigt. Dessutom kan förändringar som att öka storleken på dina rubriker från 22pt till 24pt över ett par dussin skärmar ta timmar i Photoshop. Smarta objekt ger dig en viss nivå av objektorienterad design i Photoshop. Tyvärr använder de flesta visuella designers jag känner inte tillräckligt med smarta objekt. Med CSS, eftersom det uppmuntrar ett mer systematiskt tillvägagångssätt för design, tar typografiska förändringar minuter istället för timmar.
Vad sägs om att ändra de linjära lutningarna på alla dina knappar? Eller storleken på en gräns? Vad sägs om att byta från fyrkantiga hörn till två pixlar avrundade? I Photoshop kan det ta timmar och du måste fortfarande koda det. Möjligheten att designa i kod hjälper till att undvika att resa tillbaka till Photoshop för att upprepa den visuella designen. När du flyttar ändringarna uppströms till kod med CSS3 och Sass (som jag kommer att beskriva senare i den här artikeln) kan de hända i realtid och bara ta några minuter.
Snabbare tid att starta
Under årens lopp, när jag överförde mer av mitt designflöde uppströms till kod, upplevde jag en verklig förbättring - cirka 20 till 30 procent minskning av tiden till marknaden. Ju mer jag gör det desto mindre tid spenderar jag på att duplicera. Jag spenderar färre cykler på att gå in i Photoshop eller Fireworks och sedan upprepa arbetet i kod.
Vid något tillfälle måste designen gränssnitt med någon typ av backend, oavsett om det är en CMS, Rails-app eller något annat. Eftersom det mesta av mitt designarbete är i kod, sker integrationen förr än senare. För ett par år sedan gick en av mina kunder, PointRoll, från prototyp till produktion på fem dagar.
Varför HTML5?
HTML5 är enklare än tidigare versioner av HTML. Ta till exempel dokumenttypsdeklarationen. I tidigare versioner av HTML har DOKTYP såg ut så här:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // SV" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Och det fanns sex olika versioner. Lyckligtvis HTML5 DOKTYP ser ut så här:
! DOCTYPE HTML>
Allvarligt. Det är allt. Chockerande enkelt.
När du skapar en standard HTML-sida finns det ett antal vanliga element, till exempel ett sidhuvud, huvudinnehållsområde, sidofält och sidfot. Jag är säker på att du har sett något liknande innan:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Inget ovanligt där. Men när den väl är fylld med innehåll blir denna mall till div soppa. Däremot får du med HTML5: s nya semantiska element något mycket enklare och lättare att skanna, så här:
sidhuvud> nav> / nav> / sidhuvud> artikel> åt sidan> / åt sidan> / artikel> sidfot> / sidfot>
Titta på det där. Något som är vettigt.
Det magiska dataattributet
HTML5 levereras med en annan fantastisk krok som ger dig möjlighet att skapa din egen semantiska betydelse: data-. Tidigare, om du ville tilldela något meningsfullt till ett DOM-element, var du begränsad till ID, klasser och roller.
Tyvärr måste ID: n vara unika. Klasserna är universella (yippee!), Men att använda dem kan snabbt bli en röra. Roller är en underutnyttjad tillgång som ger betydande betydelse för ARIA. Nyligen har jag använt data för en analysplattform för händelsesspårning som vi utvecklar på Inflection.Vi är stora fans av att testa våra mönster. När vi arbetar med applikationer eller sidor som har mycket interaktivitet vill vi ha mer detaljerad inblick i kundengagemang på sidan.
Gå in i data-. Med den kan du tilldela, skicka vidare och ansluta till en 'definiera din egen' meningsmodell. Så till exempel kan du göra detta:
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 bifoga en lyssnare med JavaScript till sidan och närhelst en kund svävar över eller klickar på den här knappen kan vi spåra den aktiviteten. Istället för att bara kunna spåra att någon registrerade sig via OAuth med Twitter kan vi se att de svävade över Facebook, sedan Twitter, sedan LinkedIn, och beslutade äntligen att välja Twitter för sin OAuth-modell.
Tänk dig att utöka detta till en webbplats som Pinterest, eller den nya Myspace-designen där kunderna drar och släpper brickor för att ordna dem baserat på intresse. Eller kanske dölja brickor som de inte är intresserade av data- attribut gör att du kan fästa eller tilldela ytterligare ett lager med semantisk mening till saker som du kan definiera. För webbplatser och appar som är starkt beroende av Ajax öppnar det obegränsade möjligheter.
CSS3 - det är den nya Photoshop
CSS3 kom med en helt ny nivå av design-look-and-feel som brukade kräva bakgrundsbilder, skivor och den ökända "skjutdörrar" -tekniken. Tack och lov, allt hör till det förflutna.
Låt oss ta en titt på att skapa en snygg knapp med en linjär lutning, rundade hörn, textskugga som ger den en fin bokstavseffekt och en glöd på svävaren. Att lära sig dessa tekniker kommer att gå långt. Var och en av dem kan användas oberoende av varandra eller i olika kombinationer för att ta bort nästan vilken som helst av den nuvarande visuella hetheten som trender på nätet idag.
Låt oss först göra några justeringar av standard knapp> och input type = "submit"> element. Förutsatt att du använder en av standard CSS-återställningarna lägger vi bara till lite storlek och andningsrum.
/ * Knappar, vars knappar har. ========================================= * * / knapp, mata in [type = "skicka"] {höjd: 2.7em; stoppning: .4em .7em; linjehöjd: 1,9; }
Proffstips: Knappar och ingångar som skickas kan vara svårt att återforma. Jag har upptäckt att genom att justera linjehöjden till 1,6 eller högre kan du undvika hacket att behöva en extra div eller spänn inuti knapp> märka.
Nu har vi ”fixat” vårt knappproblem, vi kan skapa en .btn klass för att ge oss en fin ren knapp med rundade hörn, en linjär lutning, kontur och det boktrycksutseendet.
.btn {display: inline-block; gräns: 1px fast # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; gränsradie: 4 pixlar; stoppning: .4em .7em; bakgrund: # edeff2; bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (#fefefe), färgstopp (0,55, # edeff2), till (# e4e6e9)); bakgrund: -moz-linjär-gradient (mitt uppe, #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, 2 em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; färg: # 6c7786; teckenstorlek: 1.1em; text-skugga: #fefefe 1px 0 1px; linjehöjd: 1.375 em; markör: pekare; }
Och sedan en fin svävareffekt med en subtil glöd med box-skugga metod:
.btn: sväva, .btn: fokus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; bakgrund: # e6e9eb; bakgrund: -webkit-gradient (linjär, 0% 0%, 0% 100%, från (# f7f7f7), färgstopp (0,55, # f6f6f7), till (# e6e9eb)); bakgrund: -moz-linjärgradient (mitt uppe, # f7f7f7, # f6f6f7 55%, # e6e9eb); färg: # 45484b; text-skugga: rgb (255,255,255) 1px 1px 0; kantfärg: # c9c9c0; }
Nu är jag inte ett stort fan av att skriva linjär gradientkod. Det är långt och förvirrande. Som du kan se har jag bara inkluderat versionen för -moz, -webkitoch standardmodellen. Om du vill inkludera -o- och -ms-versioner måste du fördubbla koden.
Det finns två andra alternativ. Den ena är en CSS3-generator; det finns flera tillgängliga på webben, inklusive ColorZilla. Men om du vill intensifiera ditt spel lite, överväga att dyka in i Sass: i kombination med Compass är det en sken.
Sass + Kompass: magiskt utsökt
Du kan sluta hoppas på CSS4 unicorn edition. Det är här och det heter Sass + Compass. Sass står för Syntactically Awesome Stylesheets: du ärver alla traditionella fördelar med CSS3 med extra glädje av variabler, mixins, extenders och andra godsaker.
Jag omformaterade nyligen en CSS-fil på 5 000 rader som hade mer än 30 variationer på samma blå nyans. Med Sass ersatte jag varje variant med den här koden:
färg: $ blå;
Genom att definiera $ blå i min _variables.scss Jag kan skapa en standardfärg som varje CSS- eller SCSS-fil kan referera till. Alla som skriver CSS kan använda $ blå och behöver inte oroa dig för att använda en pipett, hitta en hex-kod eller RGB-, RGBA- eller HSL-färg.
Kom ihåg den linjära gradientkoden? Istället för att skriva flera kodrader, hur är det här:
@ inkludera bakgrund (linjär gradient (# b1cfdc, # 7a9cac));
Låt Sass och Compass göra tunga lyft och skapa rätt syntax för dig: gjort. Låt oss säga att du vill ha en mörkare eller ljusare version av en färg. Du kan flytta pipetten runt i Photoshop eller bara använda kommandona för ljusare / mörkare i Sass:
@ inkludera bakgrund (linjär gradient (mörkare ($ litegray, 2%), mörkare ($ off-white, 5%)));
Det skapar en linjär gradient med en 2% mörkare $ lite-grå och 5% mörkare off-white. Voil! Du behöver inte ens HEX- eller RGB-koder.
jQuery: Åh, ja du kan
Jag måste bekänna. JavaScript används för att skrämma mig. Sedan hittade jag jQuery. Jag kommer inte att göra anspråk på att jag är en JavaScript-guru, men jag är ganska säker på att jag kan göra nästan vilken som helst övergång eller funktion jag behöver för att använda jQuery.
Ta till exempel möjligheten att visa en sekundär telefonnummerinmatning på skärmen genom att klicka på länken Lägg till nytt nummer. Med hjälp av jQuery skriver du helt enkelt detta:
// - Progressiv avslöjande - // $ ('. Nytt nummer'). Klicka (funktion () {$ ('. Alt-nummer'). FadeIn ('snabb');});
Letar du efter något mer avancerat? Det finns förmodligen ett plugin-program för det. Grundläggande beteenden är enkla och komplexa är tillgängliga med jQuery.
Ramar
Två av de mest robusta ramarna idag är Foundation och Bootstrap. Innan du avfärdar CSS-ramar, låt mig fråga dig något. Använder du jQuery? Ruby on Rails? Django? Alla ramar.
Precis som jQuery och RoR, grundades Foundation och Bootstrap genom att erkänna att det finns en hel del saker vi gör om och om igen (såsom återställningar, typografi, rutnät, formulär, knappar, nav och listor). Foundation och Bootstrap erbjuder båda stöd för lyhörd design genom användning av hjälpklasser. Båda är väldokumenterade och har testats på väg så att du kan använda dem med tillförsikt.
En viktig skillnad mellan de två: Bootstrap bygger på LESS-systemet för CSS-förbehandling, medan Foundation är baserat på Sass. Jag föredrar Sass än MINDRE på grund av dess ytterligare funktioner, men både Sass och MINDRE squashar traditionell CSS i bitar.
En sista tanke på ramar. För dem som inte vill ärva den extra uppblåsningen av någon annans ram, överväga att välja en befintlig och ta bort den till nakna ben, eller körsbärsplockning från några för att rulla din egen. Hur som helst, det finns egentligen ingen anledning att börja om från början varje gång.
Slutgiltiga tankar
Vill du ha större kontroll över hur din design äntligen blir? Flytta fler processer uppströms till kod. HTML5 ger äntligen lite mening i DOM. Bra riddance till nonsens DOKTYPs och divit. CSS3 är den nya Photoshop: linjära lutningar, gränsradie och rutskuggor FTW! Och med verktyg som Bootstrap, Foundation, Sass och jQuery har det aldrig varit enklare att flytta design uppströms till kod.
Upptäck 55 fantastiska exempel på HTML5 över på Creative Bloq.
