Sisältö
- Edut suunnittelulla koodilla
- Tiedot ensin
- Mobiili hyvyys ilmaiseksi
- Yhteisen kielen löytäminen
- Opi nopeammin
- Nopea iterointi
- Nopeampi aika käynnistää
- Miksi HTML5?
- Maaginen data-attribuutti
- CSS3 - se on uusi Photoshop
- Sass + kompassi: maagisesti herkullinen
- jQuery: Voi kyllä, voit
- Kehykset
- Lopulliset ajatukset
Tämä artikkeli ilmestyi ensimmäisen kerran .net-lehden numerossa 235 - maailman myydyimmässä aikakauslehdessä verkkosivujen suunnittelijoille ja kehittäjille.
En ole koskaan ollut suuri fani tehdä mitään enemmän työtä kuin tarvitaan. Minulla on tapana arvioida menetelmiä ja työkaluja niiden kyvyn perusteella tehdä minusta tai tiimistäni tehokkaampi. Kuinka nopeasti he vievät meidät toimivaan tuotteeseen? Kuinka tehokkaita he ovat kommunikoinnissa? Pysyvätkö he poissa tieltämme?
Vuosien mittaan olen säätänyt suunnitteluprosessiani ja työkalujani. Luulen, että teen niin edelleen. Se on luonteeltaan tekniikan ja verkon suunnittelu. Tämä teollisuus kehittyy jatkuvasti; myös prosessimme ja työkalujemme on kehityttävä.
HTML5 ja CSS3 helpottavat siirtymistä suuremmalle osalle suunnitteluprosessia ylävirtaan - poispäin Photoshopista ja enemmän kohti elävää, hengittävää suunnittelua. Työkalut, kuten Foundation, Bootstrap ja jQuery, tekevät enemmän suunnitteluprosessistasi koodaamista helpommin lähestyttävää.
Edut suunnittelulla koodilla
Ensinnäkin, en kannata Photoshopin tai muun visuaalisen muokkausohjelman pudottamista työnkulusta. Sen sijaan keskityn etuihin, jotka johtavat mallin siirtämisestä koodiin ennemmin kuin myöhemmin.
Tiedot ensin
Olen aina pitänyt HTML: n suunnittelusta siitä, että se kannustaa ajattelemaan datasta ensin. Sitä vastoin käyttämällä piirtäjäohjelmia, kuten Illustrator, OmniGraffle tai Balsamiq, aloitat laatikosta ja täytät sen tiedoilla.
HTML: ssä rakennat DOM: n (asiakirjaobjektimalli), ikään kuin rakentaisit sisällysluettelon. Se on paluu todelliseen tietosuunnitteluun, jossa on merkitykselliset hierarkiat. HTML5 vie sen askeleen pidemmälle lisäämällä uusia semanttisia elementtejä: artikkeli, osa, otsikko, sivu, alatunniste ja niin edelleen. Tämä data ensin -lähestymistapa sulautuu hienosti mobiili ensin, reagoiviin malleihin.
Mobiili hyvyys ilmaiseksi
Jos luet tätä, suunnittelet todennäköisesti mobiililaitteille. Ja todennäköisesti sinun on suunniteltava lomake tai kaksi. HTML5: n avulla olet onnea. Ennen HTML5: tä syötetyypit olivat melkein joko teksti- tai salasanakenttiä. HTML5 otti käyttöön useita muita syötetyyppejä, kuten:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Näiden ylimääräisten, ainutlaatuisten syötetyyppien todella upeaa on, että iOS- ja Android-mobiiliselaimet tunnistavat ne ja vaihtavat automaattisesti asiayhteyteen perehtyneen näppäimistön - ilman erityisiä jQuery-laajennuksia tai hakkereita. Voi, ja jos selaimesi ei tiedä mitä input type = "email"> on, niin se vain oletusarvoisesti on tekstinsyöttö.
Yhteisen kielen löytäminen
"On mahtavaa, kuinka suunnittelijamme ja kehittäjämme voivat työskennellä samalla kielellä" - John Drago, Inflection-sovelluskehittäjä.
Katso, kuulostaako tämä tutulta. Olen neuvotteluhuoneessa, jossa on puoli tusinaa palvelinpuolen sovellussovellusta, jotka voivat koodata ympyrääni ympärilläni Ruby-, Python-, Java- tai .NET-muodossa. Olen ainoa suunnittelija. Muutama ehdotuksistani hylätään aluksi liian monimutkaisina toteuttaa. Kävelen taululle ja aloitan taululle HTML: n ja CSS: n kirjoittamisen siitä, miten suunnittelu voitaisiin toteuttaa. Yhtäkkiä keskustelun sävy muuttuu ja yksi kehittäjistä sanoo vastahakoisesti: "No, joo - jos teemme sen niin, se voisi toimia."
Suunnitteluprosessin siirtäminen koodiksi on parantanut keskusteluja kehittäjien kanssa. Siellä on lisätty taso kunnioitusta, joka saadaan tietäen kuinka muotoilla suunnittelusi koodilla. Sinun ei tarvitse olla asiantuntija ansaitaksesi tämän kunnioituksen. Vaikka HTML- ja CSS-taitoni ovat kovaa, JavaScript-taitoni ovat parhaimmillaan keskinkertaisia. Ja en ole ujo myöntämästä sitä. Silti, kun työskentelemme käyttöliittymän tai palvelinpuolen kehittäjien kanssa, se, että voimme puhua yhteisellä kielellä tai tavata puolivälissä, on valtava etu.
Opi nopeammin
Vaikka lankakehykset ja visuaaliset yhdistelmät voivat auttaa suunnittelussa, nämä staattiset artefaktit ovat teoreettisia. Kuinka monta kertaa olet yrittänyt selittää vuorovaikutusta jollekulle, vain saadaksesi heidän vastaamaan: "Luulen, että minun täytyy nähdä se." Mitä nopeammin pääset prototyyppiin, johon ihmiset voivat olla vuorovaikutuksessa, sitä nopeammin voit kokea suunnittelun ja nähdä, toimivatko ideat.
Nopea iterointi
Milloin viimeinen tuotantoon toimitettu muotoilu sopi tarkalleen Photoshop-tietokoneeseesi? Melkein ikinä. Digitaalisen tuotesuunnittelun myötä muutos tapahtuu jatkuvasti. Lisäksi muutokset, kuten otsikkojen koon lisääminen 22pt: stä 24pt: iin parilla tusinalla näytöllä, voivat viedä tunteja Photoshopissa. Älykkäät objektit antavat sinulle jonkin tason olio-suunnittelun Photoshopissa. Valitettavasti useimmat tuntemani visuaaliset suunnittelijat eivät käytä älykkäitä esineitä tarpeeksi. CSS: n avulla typografiset muutokset vievät minuutteja tuntien sijaan, koska ne kannustavat järjestelmällisempään lähestymistapaan suunnitteluun.
Entä kaikkien painikkeiden lineaaristen kaltevuuksien muuttaminen? Tai reunan koko? Entä jos vaihdat neliön kulmista pyöristettyihin kulmiin? Photoshopissa tämä voi viedä tunteja, ja sinun on silti koodattava se. Kyky suunnitella koodina auttaa välttämään paluuta takaisin Photoshopiin visuaalisen suunnittelun iteroimiseksi. Kun siirrät muutokset ennen koodia CSS3: n ja Sassin avulla (joita käsittelen myöhemmin tässä artikkelissa), ne voivat tapahtua reaaliajassa ja kestää vain muutaman minuutin.
Nopeampi aika käynnistää
Vuosien varrella, kun siirrin enemmän suunnittelutyönkulun alkupään koodiksi, kokenut todellisen parannuksen - noin 20-30 prosenttia vähemmän aikaa markkinoille tuloon. Mitä enemmän teen tämän, sitä vähemmän aikaa vietän päällekkäisiä ponnisteluja. Vietän vähemmän jaksoja Photoshopiin tai ilotulitusvälineisiin ja toistan sitten työn koodina.
Jossain vaiheessa suunnittelun on liityttävä jonkin tyyppiseen taustajärjestelmään, olipa kyseessä CMS, Rails-sovellus tai jokin muu. Koska suurin osa suunnittelutyöni on koodia, integraatio tapahtuu ennemmin kuin myöhemmin. Pari vuotta sitten yksi asiakkaistani, PointRoll, siirtyi prototyypistä tuotantoon viidessä päivässä.
Miksi HTML5?
HTML5 on helpompaa kuin aiemmat HTML-versiot. Otetaan esimerkiksi asiakirjatyypin ilmoitus. Aikaisemmissa HTML-versioissa DOCTYPE näytti tältä:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // FI" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Ja versioita oli kuusi. Onneksi HTML5 DOCTYPE näyttää tältä:
! DOCTYPE HTML>
Vakavasti. Se siitä. Järkyttävän yksinkertainen.
Kun luot tavallista HTML-sivua, on olemassa useita yhteisiä elementtejä, kuten otsikko, pääsisältöalue, sivupalkki ja alatunniste. Olen varma, että olet nähnyt jotain tällaista aiemmin:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sivupalkki "> / div> / div> div id =" alatunniste "> / div>
Ei siellä mitään erikoista. Mutta kun sisältö on täytetty, tämä malli muuttuu div-keittoksi. Sen sijaan HTML5: n uusien semanttisten elementtien avulla saat jotain paljon yksinkertaisempaa ja helpompaa skannata, kuten tämä:
otsikko> nav> / nav> / header> artikkeli> sivuun> / syrjään> / artikkeli> alatunniste> / alatunniste>
Katso tuota. Jotain järkevää.
Maaginen data-attribuutti
HTML5: n mukana tulee toinen mahtava koukku, joka antaa sinulle mahdollisuuden luoda oma semanttinen merkityksesi: data-. Aikaisemmin, jos halusit määrittää jotain mielekästä DOM-elementille, olet rajoittunut tunnuksiin, luokkiin ja rooleihin.
Valitettavasti henkilötodistusten on oltava yksilöllisiä. Luokat ovat yleismaailmallisia (yippee!), Mutta niiden käyttö voi nopeasti muuttua sotkuksi. Roolit ovat vajaakäytössä olevia omaisuuseriä, joilla on merkittävä merkitys ARIA: lle. Viime aikoina olen käyttänyt dataa tapahtumaseuranta-analyysialustalle, jota kehitämme Inflection-palvelussa.Olemme suuria faneja testata mallejamme. Kun työskentelemme sovellusten tai sivujen kanssa, joilla on paljon vuorovaikutteisuutta, haluaisimme saada tarkemman käsityksen asiakkaan sitoutumisesta sivulla.
Syötä data-. Sen avulla voit määrittää, siirtää ja liittää "määritä oma" -mallisi. Joten voit esimerkiksi tehdä tämän:
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 ">
Voimme liittää sivulle kuuntelijan, jolla on JavaScript, ja voimme seurata kyseistä toimintaa aina, kun asiakas vie hiiren päälle tai napsauttaa tätä painiketta. Sen sijaan, että voisimme vain seurata OAuthin kautta rekisteröitynyttä henkilöä Twitterissä, voimme nähdä, että hän leijui Facebookin, sitten Twitterin, sitten LinkedInin yli ja päätti sitten lopulta valita Twitterin OAuth-mallilleen.
Kuvittele, että laajennat tämän sivustoon kuten Pinterest tai uusi Myspace-muotoilu, jossa asiakkaat vetävät ja pudottavat ruudut järjestääkseen ne uudelleen kiinnostuksen perusteella. Tai piilottaa laatat, joista he eivät ole kiinnostuneita data- attribuutin avulla voit liittää tai määrittää ylimääräisen semanttisen merkityksen kerroksen määritettäville asioille. Sivustoille ja sovelluksille, jotka luottavat voimakkaasti Ajaxiin, se avaa rajattomat mahdollisuudet.
CSS3 - se on uusi Photoshop
CSS3 toi aivan uuden tason ulkoasun suunnittelulle, joka vaati aiemmin taustakuvia, viipaleita ja surullisen 'liukuovien' tekniikan. Onneksi se on kaikki menneisyyttä.
Katsotaanpa, miten tehdään hieno painike, jossa on lineaarinen liukuvärjäys, pyöristetyt kulmat, tekstivarjo, joka antaa sille mukavan kirjainpuristusefektin, ja hehku hiirellä. Näiden tekniikoiden oppiminen menee pitkälle. Kutakin niistä voidaan käyttää itsenäisesti tai erilaisina yhdistelminä vetääkseen melkein minkä tahansa nykyisen verkkoon suuntaavan visuaalisen kuumuuden.
Tehdään ensin muutama oletusarvo -painiketta> ja syöttötyyppi = "lähetä"> elementtejä. Olettaen, että käytät jotain tavallisista CSS-palautuksista, lisätään vain pieni koko- ja hengityshuone.
/ * Painikepainikkeet, joiden napit ovat. ========================================= * * / -painike, kirjoita [type = "lähetä"] {korkeus: 2.7em; pehmuste: .4em .7em; viivan korkeus: 1,9; }
Protip: Lähetetyt painikkeet ja syötteet voivat olla hankalia muotoilla. Olen havainnut säätämällä viivan korkeudeksi 1,6 tai enemmän, voit välttää hakkeroinnin tarvitsemasta ylimääräistä divia tai span -painiketta> tag.
Nyt olemme 'korjanneet' painikkeemme, voimme luoda .btn luokan antaa meille mukava puhdas painike pyöristetyillä kulmilla, lineaarinen kaltevuus, ääriviivat ja kohopaino.
.btn {display: inline-block; reunus: 1px kiinteä # d4d4cc; -moz-raja-säde: 4px; -webkit-raja-säde: 4px; reunan säde: 4 kuvapistettä; pehmuste: .4em .7em; tausta: # edeff2; tausta: -webkit-gradientti (lineaarinen, 0% 0%, 0% 100%, alkaen (#fefefe), värin pysäytys (0.55, # edeff2) - (# e4e6e9)); tausta: -moz-lineaarinen gradientti (keskimmäinen yläosa, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0, 2em 0; -webkit-box-shadow: rgba (160172187, .7) 0 0 .2em 0; laatikko-varjo: rgba (160,172,187, .7) 0 0 .2em 0; väri: # 6c7786; kirjasinkoko: 1.1em; text-shadow: #fefefe 1px 0 1px; viivan korkeus: 1,375em; kohdistin: osoitin; }
Ja sitten mukava leijuva vaikutus hienovaraisella hehkulla käyttämällä laatikko-varjo menetelmä:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; laatikko-varjo: # 129ceb 0 0 2px; tausta: # e6e9eb; tausta: -webkit-gradientti (lineaarinen, 0% 0%, 0% 100%, alkaen (# f7f7f7), värin pysäytys (0.55, # f6f6f7) - (# e6e9eb)); tausta: -moz-lineaarinen gradientti (keskimmäinen yläosa, # f7f7f7, # f6f6f7 55%, # e6e9eb); väri: # 45484b; teksti-varjo: rgb (255,255,255) 1px 1px 0; reunaväri: # c9c9c0; }
En nyt ole suuri fani kirjoittaa lineaarista kaltevuuskoodia. Se on pitkä ja hämmentävä. Kuten näette, olen sisällyttänyt vain version -moz, -verkkosarjaja vakiomalli. Jos haluat sisällyttää -o- ja -ms-versiot, sinun on kaksinkertaistettava koodi.
On olemassa kaksi muuta vaihtoehtoa. Yksi on CSS3-generaattori; Internetissä on useita, mukaan lukien ColorZilla. Mutta jos haluat tehostaa peliäsi hieman, harkitse sukeltamista Sassiin: yhdistettynä Kompassiin se on jumalatar.
Sass + kompassi: maagisesti herkullinen
Voit lopettaa CSS4-yksisarvisen version toivomisen. Se on täällä ja sitä kutsutaan Sass + Compass. Sass tarkoittaa syntaktisesti mahtavia tyylitaulukoita: perit kaikki CSS3: n perinteiset edut lisäämällä muuttujien, sekoitusten, laajenninten ja muiden herkkujen ilot.
Rakensin äskettäin 5000-rivisen CSS-tiedoston, jossa oli yli 30 muunnelmaa samalla sinisellä sävyllä. Sassilla korvasin kaikki muunnokset tällä koodilla:
väri: $ sininen;
Määrittelemällä $ sininen minun _muuttujat.scss Tiedosto, voin luoda oletusvärin, johon jokainen CSS- tai SCSS-tiedosto voi viitata. Kuka tahansa CSS: n kirjoittaja voi käyttää $ sininen eikä sinun tarvitse huolehtia pipettien käytöstä, hex-koodin tai RGB-, RGBA- tai HSL-värin löytämisestä.
Muistatko lineaarisen kaltevuuskoodin? Enemmän kuin koodirivien kirjoittamisen sijaan, entä tämä:
@ sisällytä tausta (lineaarinen gradientti (# b1cfdc, # 7a9cac));
Anna Sassin ja Compassin tehdä raskaat nostot ja luoda oikea syntaksin sinulle: valmis. Oletetaan, että haluat värin tummemman tai vaaleamman version. Voit siirtää pipettia Photoshopissa tai käyttää vain vaalennuskomentoja Sassissa:
@ sisällytä tausta (lineaarinen gradientti (tummentaa ($ litegray, 2%), tummentaa ($ luonnonvalkoinen, 5%)));
Se luo lineaarisen gradientin 2% tummennettuna $ lite-harmaa ja 5% tummunut luonnonvalkoinen. Voil! Et tarvitse edes HEX- tai RGB-koodeja.
jQuery: Voi kyllä, voit
Minulla on tunnustus. JavaScript käytti minua pelottamaan. Sitten löysin jQueryn. En väitä olevani JavaScripti-guru, mutta olen melko varma, että voin vetää melkein kaikenlaisia siirtymiä tai toimintoja, joita minun tarvitsee käyttää jQueryä.
Otetaan esimerkiksi mahdollisuus näyttää toissijainen puhelinnumeron syöttö näytöllä napsauttamalla Lisää uusi numero -linkkiä. JQueryn avulla kirjoitat yksinkertaisesti tämän:
// - Progressiivinen paljastus - // $ (’. Uusi numero’). Napsauta (function () {$ (’. Alt-numero’). FadeIn (’nopea’);});
Etsitkö jotain edistyneempää? Siinä on todennäköisesti laajennus. Peruskäyttäytyminen on helppoa ja monimutkaista käyttäytymistä jQueryn kanssa.
Kehykset
Kaksi vahvinta kehystä ovat tänään Foundation ja Bootstrap. Ennen kuin hylkäät CSS-kehykset, anna minun kysyä sinulta jotain. Käytätkö jQueryä? Ruby on Rails? Django? Kaikki kehykset.
Aivan kuten jQuery ja RoR, myös Foundation ja Bootstrap syntyivät tunnistamalla, että on olemassa melko paljon asioita, joita teemme yhä uudelleen (kuten nollaus, typografia, ruudukot, lomakkeet, painikkeet, navigointi ja luettelot). Foundation ja Bootstrap tarjoavat molemmat tukea reagoiville malleille käyttämällä apuluokkia. Molemmat on dokumentoitu hyvin ja ne on testattu tiellä, joten voit käyttää niitä luottavaisin mielin.
Yksi keskeinen ero näiden kahden välillä: Bootstrap perustuu CSS-esikäsittelyn LESS-järjestelmään, kun taas Foundation perustuu Sassiin. Pidän parempana Sassista LESS: iin sen lisäominaisuuksien vuoksi, mutta sekä Sass että LESS puristavat perinteisen CSS: n palasiksi.
Viimeinen ajatus kehyksistä. Niille, jotka eivät halua periä jonkun toisen kehyksen ylimääräistä turvotusta, harkitse nykyisen kehyksen valitsemista ja riisumista paljaisiin luihin tai kirsikan poimintaa muutamasta oman käärimiseen. Joko niin, ei ole mitään syytä aloittaa tyhjästä joka kerta.
Lopulliset ajatukset
Haluatko paremman hallinnan siitä, miten suunnittelusi lopulta osoittautuu? Siirrä enemmän prosesseja ylävirtaan koodiin. HTML5 tuo vihdoin jonkin verran järkeä DOM: iin. Hyvä räikeä järjetön DOCTYPEs ja divitis. CSS3 on uusi Photoshop: lineaariset kaltevuudet, reunan säde ja ruutuvarjot FTW! Ja työkalujen, kuten Bootstrap, Foundation, Sass ja jQuery, avulla suunnittelun siirtäminen ylävirtaan koodiin ei ole koskaan ollut näin helppoa.
Löydä 55 upeaa esimerkkiä HTML5: stä Creative Bloqista.
