Efni.
- Ávinningur af því að hanna með kóða
- Gögn fyrst
- Hreyfanlegur gæska ókeypis
- Að finna sameiginlegt tungumál
- Lærðu hraðar
- Hröð endurtekning
- Hraðari tími til að ráðast
- Af hverju HTML5?
- Töfrandi gagnaeiginleikinn
- CSS3 - það er nýja Photoshop
- Sass + Kompás: töfrandi ljúffengur
- jQuery: ó, já þú getur það
- Rammar
- Lokahugsanir
Þessi grein birtist fyrst í tölublaði 235 í .net tímaritinu - mest selda tímarit heimsins fyrir hönnuði og forritara.
Ég hef aldrei verið mikill aðdáandi þess að vinna meira en þörf er á. Ég hef tilhneigingu til að meta aðferðir og verkfæri út frá getu þeirra til að gera mig, eða teymið mitt, árangursríkara. Hversu fljótt koma þeir okkur að vinnandi vöru? Hversu árangursrík eru þau í samskiptum? Halda þeir sig ekki úr vegi okkar?
Í gegnum árin hef ég breytt hönnunarferli mínu og verkfærum. Ég ímynda mér að ég haldi áfram að gera það. Það er eðli hönnunar fyrir tækni og vef. Þessi iðnaður er í stöðugri þróun; ferli okkar og verkfæri þurfa að þróast líka.
HTML5 og CSS3 auðvelda flutning meira af hönnunarferlinu uppstreymis - fjarri Photoshop og fleira í átt að lifandi, andardráttarhönnun. Verkfæri eins og Foundation, Bootstrap og jQuery gera það að verkum að þú færir meira af hönnunarferlinu þínu yfir í kóða.
Ávinningur af því að hanna með kóða
Í fyrsta lagi er ég ekki talsmaður þess að fella Photoshop eða neinn annan ritstjóra fyrir sjónræna hönnun úr vinnuflæðinu þínu. Í staðinn mun ég einbeita mér að ávinningnum af því að færa þá hönnun í kóða fyrr en síðar.
Gögn fyrst
Það sem mér hefur alltaf líkað við að hanna með HTML er að það hvetur til hugsunar frá gagnasýn. Hins vegar, með því að nota teikniforrit eins og Illustrator, OmniGraffle eða Balsamiq, byrjarðu með kassa og fyllir hann með gögnum.
Í HTML smíðarðu DOM (skjalhlutamódelið), eins og að byggja upp efnisyfirlit. Það er afturhvarf til sannrar upplýsingahönnunar með þroskandi stigveldi. HTML5 tekur það skrefi lengra með því að bæta við nýjum merkingarþáttum: grein, kafla, haus, til hliðar, fót og svo framvegis. Þessi gögn-fyrsta nálgun blandast fallega við farsíma fyrst, móttækileg hönnun.
Hreyfanlegur gæska ókeypis
Ef þú ert að lesa þetta ertu líklega að hanna fyrir farsíma. Og líkurnar eru á að þú verðir að hanna eyðublað eða tvö. Með HTML5 hefurðu heppni. Fyrir HTML5 voru innsláttargerðir þínar nokkurn veginn annað hvort texta- eða lykilorðareitur. HTML5 kynnti fjölda viðbótartegunda, þar á meðal:
input type = "email"> input input = "tel"> input type = "url"> input type = "date"> input input = "date-time">
Það sem er virkilega æðislegt við þessar viðbótar, einstöku tegundir inntaks er að farsímavafrar í iOS og Android þekkja þá og skipta sjálfkrafa út samhengisvituðu lyklaborði - án sérstakra jQuery viðbóta eða járnsmíðar. Ó, og ef vafrinn þinn veit ekki hvað input type = "email"> er, þá er það sjálfgefið textaskil.
Að finna sameiginlegt tungumál
„Það er æðislegt hvernig hönnuðir okkar og forritarar geta unnið á sama tungumáli“ - John Drago, umsóknarhönnuður hjá Inflection.
Athugaðu hvort þetta hljómar kunnuglega. Ég er í ráðstefnusal með hálfan tólf forritara á netþjónaforritinu sem geta kóða hringi í kringum mig í Ruby, Python, Java eða .NET. Ég er eini hönnuðurinn. Nokkrum tillögum mínum er upphaflega vísað frá sem of flókið í framkvæmd. Ég geng upp að töfluborðinu og byrja að skrifa HTML og CSS á töfluna fyrir hvernig hægt væri að útfæra hönnunina. Skyndilega breytist samræðutónninn og einn verktaki segir treglega: „Jæja, já - ef við gerum það þannig gæti það gengið.“
Að færa meira af hönnunarferlinu mínu yfir í kóða hefur bætt samtöl við forritara. Það er aukið lag af virðingu sem þú færð með því að vita hvernig á að búa til hönnunina þína í kóða. Þú þarft ekki að vera sérfræðingur til að öðlast þá virðingu. Þó að HTML og CSS hæfileikar mínir séu rótgrónir, þá eru JavaScript færni mín í besta fall miðlungs. Og ég er ekki feimin við að viðurkenna það. Samt, þegar unnið er með framhlið eða netþjónahönnuðum er sú staðreynd að við getum talað á sameiginlegu tungumáli, eða hittumst á miðri leið, mikill kostur.
Lærðu hraðar
Þó að vírrammar og sjónrænir samsetningar geti hjálpað til við skipulagningu, þá eru þessir truflanir gripir fræðilegir. Hversu oft hefur þú reynt að útskýra samskipti við einhvern, aðeins til að láta hann svara: „Ég held ég verði að sjá það.“ Því fyrr sem þú færð frumgerð, eitthvað sem fólk getur haft samskipti við, því fyrr geturðu upplifað hönnunina og séð hvort hugmyndir virka.
Hröð endurtekning
Hvenær passaði síðast hönnunin sem send var til framleiðslu nákvæmlega í Photoshop tölvunni þinni? Næstum aldrei. Með stafrænni vöruhönnun gerast breytingar stöðugt. Ennfremur geta breytingar eins og að auka stærð fyrirsagna þinna úr 22pt í 24pt yfir nokkra tugi skjáa tekið nokkrar klukkustundir í Photoshop. Snjallir hlutir veita þér nokkurt stig hlutbundinnar hönnunar í Photoshop. Því miður nota flestir myndhönnuðir sem ég þekki ekki snjalla hluti nógu mikið. Með CSS, vegna þess að það hvetur til skipulegri nálgunar við hönnun, taka prentbreytingar nokkrar mínútur í stað klukkustunda.
Hvað með að breyta línulegum stigum á öllum hnappunum þínum? Eða stærð landamæra? Hvernig væri að skipta úr fermetra hornum í 2px ávalar? Í Photoshop getur þetta tekið klukkustundir og þú verður enn að kóða það. Hæfileikinn til að hanna í kóða hjálpar til við að koma í veg fyrir hringferðina í að fara aftur í Photoshop til að endurskoða sjónræna hönnun. Þegar þú færir þessar breytingar uppstreymis í kóða með CSS3 og Sass (sem ég mun fjalla um síðar í þessari grein) geta þær gerst í rauntíma og aðeins tekið nokkrar mínútur.
Hraðari tími til að ráðast
Í gegnum árin, þegar ég færði meira af hönnunarvinnuflæði mínu uppstreymis í kóða, upplifði ég raunverulega framför - um það bil 20 til 30 prósent fækkun á tíma til markaðs. Því meira sem ég geri þetta, því minni tíma eyði ég í afrit. Ég er að eyða færri lotum í að fara í Photoshop eða Flugelda og endurtaka síðan verkið í kóða.
Á einhverjum tímapunkti verður hönnunin að tengjast við einhvers konar bakenda, hvort sem það er CMS, Rails app eða eitthvað annað. Þar sem flest hönnunarvinna mín er í kóða gerist samþætting fyrr en síðar. Fyrir nokkrum árum fór einn af viðskiptavinum mínum, PointRoll, frá frumgerð til framleiðslu á fimm dögum.
Af hverju HTML5?
HTML5 er auðveldara en fyrri útgáfur af HTML. Tökum sem dæmi yfirlýsingu um skjalagerð. Í fyrri útgáfum af HTML var DOCTYPE leit svona út:
! LÆKNI html ALMENNT "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Og það voru sex mismunandi útgáfur. Sem betur fer HTML5 DOCTYPE lítur svona út:
! DOCTYPE HTML>
Í alvöru. Það er það. Átakanlega einfalt.
Þegar þú býrð til venjulega HTML síðu er fjöldi algengra þátta, svo sem haus, aðal innihaldssvæði, skenkur og fótur. Ég er viss um að þú hefur séð eitthvað svona áður:
div id = "haus> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Ekkert óvenjulegt þar. En þegar það er fyllt út með efni breytist þetta sniðmát í div súpu. Hins vegar, með nýjum merkingarþáttum HTML5, færðu eitthvað miklu einfaldara og auðveldara að skanna, svona:
haus> nav> / nav> / haus> grein> til hliðar> / til hliðar> / grein> fótur> / fótur>
Sjáðu þetta. Eitthvað sem er skynsamlegt.
Töfrandi gagnaeiginleikinn
HTML5 kemur með annan frábæra krók sem gefur þér möguleika á að búa til þína eigin merkingarfræðilegu merkingu: gögn-. Áður, ef þú vildir úthluta DOM-þætti einhverju þroskandi, varstu takmarkaður við skilríki, námskeið og hlutverk.
Því miður verða skilríki að vera einstök. Tímar eru alhliða (yippee!), En notkun þeirra getur fljótt orðið að óreiðu. Hlutverk eru vannýtt eign sem veitir ARIA verulega þýðingu. Nýlega hef ég verið að nota gögn - fyrir greiningarvettvang viðburða sem við erum að þróa með Beygingu.Við erum miklir aðdáendur að prófa hönnunina okkar. Þegar við vinnum að forritum eða síðum sem hafa mikla gagnvirkni viljum við hafa nánari innsýn í þátttöku viðskiptavina á síðunni.
Sláðu inn gögn-. Með því geturðu úthlutað, komið áfram og krókast í „skilgreint þitt eigið“ merkingarlíkan. Svo, til dæmis, geturðu gert þetta:
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ð getum fest hlustanda með JavaScript við síðuna og hvenær sem viðskiptavinur sveima yfir eða smellir á þennan hnapp getum við fylgst með þeirri virkni. Í stað þess að geta aðeins fylgst með því að einhver skráði sig í gegnum OAuth hjá Twitter getum við séð að þeir sveimuðu yfir Facebook, síðan Twitter, síðan LinkedIn og ákváðu svo að lokum að velja Twitter fyrir OAuth líkanið sitt.
Ímyndaðu þér að víkka þetta út á vefsíðu eins og Pinterest, eða nýju Myspace hönnunina þar sem viðskiptavinir draga og sleppa flísum til að endurraða þeim miðað við áhuga. Eða hugsanlega að fela flísar sem þeir hafa ekki áhuga á gögn- eiginleiki gerir þér kleift að tengja eða úthluta viðbótarlagi merkingarfræðilegrar merkingar við hluti sem þú getur skilgreint. Fyrir vefsvæði og forrit sem reiða sig mjög á Ajax opnar það ótakmarkað tækifæri.
CSS3 - það er nýja Photoshop
CSS3 kom með alveg nýtt stig af hönnun á útliti og tilfinningu sem áður þurfti bakgrunnsmyndir, sneiðar og hina alræmdu „rennihurðartækni“. Sem betur fer er þetta allt úr sögunni.
Lítum á að búa til flottan hnapp með línulegum halla, ávölum hornum, textaskugga sem gefur honum fallegan stafapressa og ljóma á sveima. Að læra þessar aðferðir mun ná langt. Hvert þeirra er hægt að nota sjálfstætt, eða í ýmsum samsetningum til að ná fram næstum því hvaða sjónrænu hitastigi sem nú er á vefnum í dag.
Fyrst skulum við gera nokkrar breytingar á sjálfgefnu hnappur> og input type = "send"> þætti. Ef við gerum ráð fyrir að þú notir einn af venjulegu CSS endurstillingunum, þá bætum við aðeins við litastærð og öndunarherbergi.
/ * Hnappar hnappar, sem hafa hnappa. ========================================= * * / hnappur, inntak [type = "send"] {hæð: 2.7em; bólstrun: .4em .7em; línuhæð: 1,9; }
Protip: Hnappar og inntak sem eru sendir geta verið erfiðar að endurgera. Ég hef komist að því að með því að stilla línuhæðina í 1,6 eða hærra, geturðu forðast að höggið þurfi að auka deilingu eða spennu innan hnappur> tag.
Nú höfum við „lagað“ hnappamálið, við getum búið til .btn bekk til að gefa okkur fallegan hreinan hnapp með ávöl horn, línulegan halla, útlínur og það bókstafaprent útlit.
.btn {sýna: inline-block; jaðar: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; jaðar-radíus: 4px; padding: .4em .7em; bakgrunnur: # edeff2; bakgrunnur: -webkit-gradient (línulegt, 0% 0%, 0% 100%, frá (#fefefe), litastopp (0.55, # edeff2), til (# e4e6e9)); bakgrunnur: -moz-línulegur-halli (miðju efst, #fefefe, # edeff2 55%, # e4e6e9); -moz-kassaskuggi: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; kassaskuggi: rgba (160,172,187, .7) 0 0 .2em 0; litur: # 6c7786; leturstærð: 1.1em; textaskuggi: #fefefe 1px 0 1px; línuhæð: 1.375em; bendill: bendill; }
Og svo ágætur sveimaáhrif með lúmskum ljóma með því að nota kassaskuggi aðferð:
.btn: sveima, .btn: fókus {-moz-box-skuggi: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; kassaskuggi: # 129ceb 0 0 2px; bakgrunnur: # e6e9eb; bakgrunnur: -webkit-gradient (línulegt, 0% 0%, 0% 100%, frá (# f7f7f7), litastopp (0.55, # f6f6f7), til (# e6e9eb)); bakgrunnur: -moz-línulegur stigi (miðju efst, # f7f7f7, # f6f6f7 55%, # e6e9eb); litur: # 45484b; textaskuggi: rgb (255,255,255) 1px 1px 0; jaðar-litur: # c9c9c0; }
Nú er ég ekki mikill aðdáandi þess að skrifa línulega stigfallskóða. Það er langt og ruglingslegt. Eins og þú sérð hef ég aðeins látið útgáfuna fylgja með fyrir -moz, -vefkit, og staðlaða líkanið. Ef þú vilt taka með -o og -ms útgáfur þarftu að tvöfalda kóðann.
Það eru tveir aðrir möguleikar. Einn er CSS3 rafall; það eru nokkrir fáanlegir á vefnum, þar á meðal ColorZilla. En ef þú vilt auka leikinn svolítið skaltu íhuga að kafa í Sass: ásamt Kompás er það guðdómur.
Sass + Kompás: töfrandi ljúffengur
Þú getur hætt að vonast eftir CSS4 einhyrningsútgáfu. Það er hér og heitir Sass + Kompás. Sass stendur fyrir Syntactically Awesome Stylesheets: þú erfir alla hefðbundna kosti CSS3 með aukinni gleði breytna, mixins, extenders og annars góðgætis.
Ég endurgerði nýlega 5.000 lína CSS skrá sem hafði meira en 30 afbrigði af sama bláa skugga. Með Sass skipti ég út öllum afbrigðum fyrir þennan kóða:
litur: $ blár;
Með því að skilgreina $ blátt í mínu _variables.scss skrá, ég get búið til sjálfgefinn lit sem sérhver CSS eða SCSS skrá getur vísað til. Allir sem skrifa CSS geta notað $ blátt og ekki þurfa að hafa áhyggjur af því að nota eyedropper, finna hex kóða eða RGB, RGBA eða HSL lit.
Manstu eftir þessum línulega stigakóða? Í stað þess að skrifa nokkrar línur af kóða, hvernig væri þetta:
@ innihalda bakgrunn (línulegur-halli (# b1cfdc, # 7a9cac));
Láttu Sass og Compass vinna þungar lyftingar og búa til rétta setningafræði fyrir þig: gert. Segjum að þú viljir dekkri eða léttari útgáfu af lit. Þú gætir fært eyedropperinn um í Photoshop, eða bara notað skipanirnar lighten / darken í Sass:
@ innifela bakgrunn (línulegt stig (dökkna ($ litegray, 2%), dekkra ($ beinhvítt, 5%)));
Það mun skapa línulegan halla með 2% myrkri $ lite-grátt og 5% dökkt beinhvítur. Voð! Þú þarft ekki einu sinni HEX eða RGB kóða.
jQuery: ó, já þú getur það
Ég hef játningu að gera. JavaScript notað til að hræða mig. Svo fann ég jQuery. Ég mun ekki segjast vera JavaScript-sérfræðingur, en ég er nokkuð viss um að ég get tekið út nánast hvers konar umskipti eða aðgerðir sem ég þarf til að nota jQuery.
Tökum sem dæmi möguleikann á að birta aukasímanúmerinntak á skjánum með því að smella á tengilinn Bæta við nýju númeri. Með því að nota jQuery skrifar þú þetta einfaldlega:
// - Progressive reveal - // $ (’. New-number’). Smelltu á (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Ertu að leita að einhverju lengra komnu? Það er líklega viðbót við það. Grunnhegðun er auðveld og flókin er aðgengileg með jQuery.
Rammar
Tveir öflugustu rammarnir í dag eru Foundation og Bootstrap. Nú, áður en þú hafnar CSS ramma, leyfðu mér að biðja þig um eitthvað. Notarðu jQuery? Ruby on Rails? Django? Allir rammar.
Rétt eins og jQuery og RoR, Foundation og Bootstrap fæddust af því að viðurkenna að það eru talsverðir hlutir sem við gerum aftur og aftur (svo sem endurstillingar, leturfræði, ristir, eyðublöð, hnappar, flot og listar). Foundation og Bootstrap bjóða bæði stuðning við móttækilegri hönnun með notkun hjálparflokka. Báðir eru vel skjalfestir og hafa verið prófaðir á vegum, svo að þú getur notað þá með öryggi.
Einn lykilmunur á þessu tvennu: Bootstrap er byggt á MINNT kerfi fyrir CSS forvinnslu, en Foundation er byggt á Sass. Ég vil frekar Sass en MINNI vegna viðbótar getu þess, en bæði Sass og MINNU skvetta hefðbundnum CSS í sundur.
Ein síðustu hugsun um ramma. Fyrir þá sem vilja ekki erfa aukalega uppblástur ramma einhvers annars skaltu íhuga að velja núverandi og svipta það berum beinum eða kirsuberjatínslu frá nokkrum til að rúlla sjálfur. Hvort heldur sem er, þá er í raun engin ástæða til að byrja frá grunni í hvert skipti.
Lokahugsanir
Viltu meiri stjórn á því hvernig hönnunin þín reynist að lokum? Færðu fleiri ferla uppstreymis að kóða. HTML5 færir loksins DOM tilfinningu. Góð lausn við vitleysu DOCTYPEs og divitis. CSS3 er nýja Photoshop: línulegir hallar, borderradius og kassaskuggi FTW! Og með verkfærum eins og Bootstrap, Foundation, Sass og jQuery hefur það aldrei verið auðveldara að færa hönnun uppstreymis að kóða.
Uppgötvaðu 55 ótrúleg dæmi um HTML5 yfir á Creative Bloq.
