Akkurat nå er vi velsignet med mange, vel, fantastiske ikonskrifter som fortsetter å vokse med hver utgivelse, som Font Awesome, Glyphicons og Ionicons. Og spillforandrende alternativer som Iconic kan være rett rundt hjørnet. Men å søke gjennom denne overfloden av ikoner én etter én fører ofte til kjedsomhet og anstrengte øyne.

Jada, jeg kan bruke nettleserens søkefunksjon eller søkefilteret på siden for å søke i et bibliotek. Men med mindre jeg matcher klassenavnet nøyaktig, vil det ikke bli funnet. Dette er et problem jeg har snakket om før, og et problem Font Awesome tar noen skritt for å adressere ved å aliase ikonnavn. Men så sammenligner jeg flere biblioteker, og vurderer hvilke jeg skal bruke basert på dekning og design, og dette problemet multipliseres.

Speedometers

For å klø denne kløen, skapte jeg GlyphSearch i helgen.

GlyphSearch

Det lar deg søke i Font Awesome, Glyphicons og Ionicons samtidig, og ikoner er tagget med tilleggstermer, noe som betyr for eksempel at alle tre ikonene ovenfor skal bli funnet uavhengig av om du søker etter "tachometer", "dashboard" eller "speedometer". Du kan også klikke på et ikon for raskt å kopiere klassenavnet til utklippstavlen.

GlyphSearch er omtrent så minimalt et verktøy som jeg kunne lage for dette, men det får jobben gjort for meg, og forhåpentligvis er du enig. Jeg ble fristet til å legge til innstillinger som skriftstørrelse og farge, men motsto; hvis det er noen etterspørsel, gi meg beskjed.

Merknader

I tillegg til selve ikonskriftbibliotekene, bruker jeg Algolia for søk og Flatly for stiler. Prosjektet er hostet på GitHub.

Vi har alle støtt på CAPTCHAer, de irriterende registreringsfeltene du aldri får riktig på første forsøk. Men CAPTCHAer spiller en viktig rolle ved å holde spamboter ute ved å verifisere at du er et menneske. I tillegg til dette, tjener reCAPTCHA et større gode ved å la deg digitalisere gamle bøker i prosessen. Møt CRAPCHA. CRAPCHA CRAPCHA tjener ikke et dobbelt formål. Den tjener knapt et enkelt formål. Og det er ikke for å holde spammere ute. Det CRAPCHA gjør er å irritere brukere ved å presentere en CAPTCHA med uleselig tekst. Ingenting nytt så langt? Vel, CRAPCHA-forsøk legges ut på CRAPCHA-tavlen, noe som gir underholdning for alle. Du kan til og med klikke på et tidsstempel for å lagre en for ettertiden. Prøv det selv:

Legg til på nettstedet ditt

Hvis du driver et nettsted og vil overraske dine intetanende gjester med dette, er det bare å kopiere og lime inn følgende kode.

Advarsel, CRAPCHA validerer faktisk ingenting. På den annen side er det morsomt.

Merknader

CRAPCHAer er laget ved hjelp av en blanding av rare Unicode og Font Awesome-tegn som har gjennomgått CSS3-transformasjoner.

Forsøk lagres og hentes ved hjelp av den flotte tjenesten levert av Parse Firebase.

Du kan sjekke ut CRAPCHAs kildekode på Github.

En besøkende på nettstedet ditt bestemmer seg for å følge deg på Twitter. Du har en lenke i bunnteksten – men søket deres etter «Twitter» gir ingen resultater, og de går videre. Dessverre kalte du lenken «@brukernavn» i stedet. Cinnamon.js forhindrer akkurat denne situasjonen og tar bort noe av smerten ved å navngi ting. Den lar brukere finne lenker, bilder og annet innhold ved hjelp av synonymer, ved å bruke nettleserens innebygde Finn-funksjon. Demo For å se den i aksjon, søk på denne siden etter «Twitter», «Spice», «Email» eller «Contact». > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus orci ut mi laoreet rhoncus. Pellentesque congue urna tincidunt tortor rhoncus dapibus. Duis faucibus dolor a sem ultrices at facilisis risus cursus. Cras vel euismod nisl. Ut vitae risus et libero sagittis ultrices et vitae ligula. Følg meg på . Aliquam at turpis id diam placerat consequat at vitae est. Aenean tellus magna, lacinia vitae facilisis facilisis, egestas ut sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nå meg . Donec tincidunt dapibus dui luctus rhoncus. Nam sagittis egestas blandit. Nulla imperdiet tincidunt enim, a tempus sapien volutpat a. Maecenas sed elit ipsum, ut tristique odio. Suspendisse potenti. Bilde av Last ned Du kan laste ned skriptet eller se det på GitHub nedenfor. Last ned GitHub Bruk Legg til Cinnamon.js rett før body-slutttaggen. Pakk deretter inn det valgte elementet (span-tagger anbefales) og gi det et data-cinnamon-attributt med en kommaseparert liste over synonymer som verdi. Hvis du pakker inn et bilde, vil også alt-teksten bli brukt, som i bildet ovenfor. Cinnamon.js fungerer på moderne nettlesere og IE8+. Her er et eksempel: Blå Merknader Dette er ment å være et bevis på konseptet, og du bør sannsynligvis ikke bruke det i produksjon. Skjult tekst, brukt villedende, kan straffes av Google. Nøyaktig hva som regnes som bedrag er det ingen som vet, men det er en risiko for at det anses som en skitten SEO-taktikk selv om det ikke er ment som sådan. Cinnamon.js skader ikke tilgjengeligheten; den bruker aria-hidden for å fortelle skjermlesere å ignorere synonymene. I løpet av testingen oppdaget jeg at Safari håndterer søk på siden ganske annerledes enn andre nettlesere. Safari søker ikke etter strenger midt i ordet med mindre ordet bruker CamelCase. Når du fremhever samsvarende tekst, ignorerer den visse CSS-egenskaper som overflow, opacity og z-index. Utheving er semi-deaktivert ved å sette -webkit-user-select til none. Sjekk ut kilden for å se hvordan det fungerer. Noen spørsmål: Bruker vanlige folk i det hele tatt nettleserens Finn-funksjon? Er brukerens avhengighet av Finn-funksjonen et symptom på dårlig design, eller er det rom for bedre søk på siden slik det har vært for nettsteds- og nettsøk? Oppdateringer * 26. februar 2013: Jeg skrev en artikkel med Robert Nyman om dette for Mozilla Hacks. * 5. mars 2013: David Artiss har pakket Cinnamon.js som en WordPress-plugin. * 25. mars 2013: Michael Kutschall gjør noen lovende fremskritt med en tom skrifttilnærming. Han går mer i detalj i et blogginnlegg.

iTunes 11 markerer et betydelig avvik fra tidligere versjoner. Selv om mange av endringene er problematiske (et annet innlegg for en annen gang), vil jeg fokusere på en positiv ting: den utvidende albumeffekten. I likhet med mapper i iOS, lar denne effekten brukere skanne en liste over elementer og åpne en på plass. Dette har fordeler i forhold til mer tradisjonelle popup-vinduer og modusendringer, som kan skjule innhold og føre til at brukeren mister sin plass i listen. iTunes 11 Et annet aspekt ved denne funksjonen er at den bruker innhold for å forbedre kromen. I den detaljerte visningen genereres bakgrunns- og tekstfargene algoritmisk fra albumkunst. Dette tjener ikke bare et praktisk formål ved å få den detaljerte visningen til å skille seg ut fra listen, men skaper en fin (i de fleste tilfeller) estetisk effekt og en følelse av å differensiere ett album fra det neste. De uredde Seth Thompson og Wade Cosgrove har allerede gjenskapt dette ved hjelp av Mathematica og Cocoa henholdsvis. Apples algoritme viser seg å være ganske sofistikert. Her er min versjon, ved hjelp av HTML, CSS og Javascript. Expanding Albums Demo Og du kan sjekke det ut selv her:

Detaljer

Demoen er bygget med App Folders, med atferd og stil modifisert for å etterligne iTunes. Color Thief brukes til å utlede farger fortløpende fra albumkunst ved hjelp av en median cut-algoritme. På toppen av dette valgte jeg farger for akseptabel kontrast ved å konvertere RGB til YIQ, et fargerom som bedre reflekterer menneskelige oppfatninger. Sist men ikke minst, Mustache brukes til å trekke albumdata fra en JSON-fil inn i maler. Jeg fikk leke med flere spennende HTML5- og CSS3-egenskaper da jeg laget denne demoen, inkludert text-overflow, multi-columns, transitions, animations og canvas. Dessverre betyr dette at demoen krever en moderne nettleser. Fremtiden kan ikke komme raskt nok.

Det er en flott tid å lære å kode. Det virker som at så lenge det har vært internett, har det vært tekstbaserte veiledninger om koding. Men nå ser vi fremveksten av forelesningsvideoer (se iTunes U), massive åpne nettkurs (se Coursera) og interaktive veiledninger (se Codecademy). Jeg har prøvd dem alle, men det som har fanget meg i det siste, er å se proffene i arbeid – senest 37signals-designer Ryan Singer mens han designer og prototyper et brukergrensesnitt. Bortsett fra tilfredsstillelsen av å se en mester i sitt fag, tilbyr disse videoene læringsmuligheter som ville blitt redigert bort i mer strukturerte veiledninger og polerte forelesninger. Her er noen ting jeg plukket opp fra skjermopptaket, ting jeg ikke ville fått fra andre kilder om emnet.

Ta inn omgivelsene

Mange veiledninger hopper over verktøyene, gir sin egen forenklede versjon eller går for standarden og den mest brukte. Og dette kan godt være den rette tilnærmingen for nybegynnere. Men for de med litt mer erfaring kan det være både fascinerende og lærerikt å kikke inn i miljøene som utviklere har formet etter sine behov og særegenheter.

• Ryan utfører skjermopptaket på sin egen maskin (eller i det minste sin lånemaskin). For prototyping bruker han Rails for å dra nytte av SCSS og maler, sammen med den problemfrie utviklingsserveren Pow.

Pow

Triks i faget

Mens små triks gir godt bloggfôr, gir veiledninger vanligvis ikke rom for dem. Skjermopptak bringer dem til live, satt i en større sammenheng.

• Ryan ville bytte fra kodeeditor til Photoshop avhengig av hva han ønsket å lage en mockup av. På sin Mac kopierte han nettleservinduet direkte til utklippstavlen a la Windows. Jeg var kjent med command-shift-3 for å lagre et skjermbilde til fil og command-shift-4 for å lagre en region, men visste ikke at du kunne hoppe over filen ved å legge til control til hver tastekombinasjon.
• I Photoshop eksperimenterte han med bredden på elementer ved å velge en kant, holde nede command-option-shift og deretter bruke piltastene i den retningen han ønsket at elementet skulle utvide seg. Nok et must-know for designere.

Photoshop

Løse problemer

Skjermopptak sentrerer ofte rundt dårlig definerte problemer som er fulle av uforutsette problemer. Disse problemene kan gi lærerike øyeblikk i hvordan man feilsøker og løser dem effektivt.

• På et tidspunkt var Ryan ikke fornøyd med hvor overskriften ble delt i to linjer, men ønsket å unngå en break tag hvis mulig. Fasilitatoren nevnte HTML5 word break opportunity element, som verken Ryan eller jeg var kjent med før.

Linjeskift

Som en digresjon

Gitt sendetid, vil de fleste proffer uunngåelig utdype noen høyere nivå-problemer om feltet eller fellesskapet. I målte doser kan disse digresjonene være tankevekkende og avsløre det større bildet.

• Ryan diskuterer mønstre for å merke opp seksjoner som den nedenfor. Pakker du seksjonsinnholdet tett inn, eller inkluderer du seksjonsoverskriften slik at hele seksjonen er pent innkapslet? Han foreslår en løsning som noen ganger brukes på 37signals, men forklarer at et godt mønster egentlig ikke er etablert ennå.
• Noen minutter senere snakker han om den semantiske bagasjen som ordnede og uordnede lister bringer sammenlignet med divs.

Markup

Konklusjon

Jeg håper vi ser flere av disse videoene av designere og utviklere i aksjon. Med så mange mennesker som stoler på nettbasert læring og overfører det til profesjonelt arbeid som kanskje også er eksternt, hjelper disse videoene med å gjenopprette noe av den stilltiende kunnskapen som har gått tapt i andre, mer raffinerte ressurser. Hvis du ikke allerede har gjort det, sjekk ut forhåndsvisninger for resten av PeepCodes Play by Play-serien. Minecraft-skaper Notchs maraton-livestreams er en åpenbaring, og Chris Coyiers redesign av CSS Tricks, som har blitt vellykket finansiert på Kickstarter, er en annen å se frem til.

I fjor publiserte jeg et galleri av alle Apple Store-fasader noensinne. Det var et raskt og enkelt prosjekt, gjort på et innfall. Men det tok etter hvert sitt eget liv og fikk dekning fra tungvektere som MacRumors, Gizmodo og Time (i den rekkefølgen).

Hvis jeg hadde visst at så mange øyne ville være rettet mot det, ville jeg ha brukt mer tid på å få ting riktig. Det så fint nok ut, men jeg visste at det ikke fungerte som det skulle. Etter at den første bølgen av oppmerksomhet hadde lagt seg, bestemte jeg meg imidlertid for å la det være bra nok, bortsett fra å legge til en og annen ny butikk. Det var tross alt et sideprosjekt.

Og det gikk bra, helt til Apple reviderte nettstedet sitt med høyoppløselige bilder. Nå var bildene større og beskåret bredere, noe som betydde at nye butikker ikke lenger passet med resten. Så jeg begynte å grave i Apple Storefronts igjen forrige uke. Først var det bare for å oppdatere det med de nye bildene. Men så kunne jeg ikke hjelpe det, og det eskalerte til mer.

Flere endringer

Med de nye, større bildene ser du trærne mer enn skogen. For å løse dette la jeg til en bryter mellom to størrelser, samt en bryter for etikettene.

I tillegg til de gamle land- og statsfiltrene, kan du nå filtrere etter år og sortere etter eldste eller nyeste. Og disse visningene er kartlagt til forskjellige URL-er, noe som betyr at du kan lagre og dele dem.

Så er det grensesnittet. Jeg ønsket at nettstedet skulle fungere bedre på mobil, så jeg adopterte det velprøvde Bootstrap som mitt rammeverk. Dette tillot meg også å bruke Slate-temaet jeg opprettet på Bootswatch for det visuelle designet.

De nye funksjonene tvang frem andre grensesnittendringer. Den gamle navigasjonslinjen var overbelastet med lenker, og nå trengte jeg å gjøre plass til mer. Hvor skulle jeg plassere alt, spesielt på mobil? Min løsning var å flytte primære filtre til en nedtrekksmeny, men holde sekundære filtre ute. I stedet kan de nås ved å klikke på en bestemt stat eller år på en etikett.

Til slutt har det vært en rekke ytelsesforbedringer og en strømlinjeformet oppdateringsprosess, takket være Google App Engine og Djangos malingssystem.

Så justerte bilder ... og så alt dette: versjon 2.0 av Apple Storefronts.

Apple Storefronts 2

Selv om jeg avslørte hemmeligheten i et intervju i går, ville jeg formelt kunngjøre et personlig prosjekt kalt Bootswatch. Det er en samling av tema-swatches som du kan laste ned gratis og slippe inn i ditt Bootstrap-nettsted. Du kan sjekke det ut på bootswatch.com.

Hva er Bootstrap igjen?

Bootstrap er et populært web-rammeverk laget av noen talentfulle folk på Twitter. Det tillater selv de mest tidspressede og design-hemmede å lage fine nettsteder.

Etter hvert som flere og flere nettsteder tar i bruk Bootstrap, er et voksende problem ensformigheten mellom dem. Du kjenner kanskje allerede igjen den karakteristiske svarte linjen og de blå knappene. Her er noen eksempler, hentet fra Built with Bootstrap.

Built with Bootstrap

Mitt mål med Bootswatch er å gjøre det mulig for utviklere som bruker Bootstrap å prøve et nytt utseende, uten å investere mye tid eller energi. Det beste med det er at det ikke endrer koden eller arbeidsflyten din nevneverdig.

Så hvordan bruker jeg Bootswatch?

Først, gå over til Bootswatch og velg en swatch. Last ned bootswatch.min.css-filen som er knyttet til den.

I Bootstraps CSS-katalog finner du et stilark i full (bootstrap.css) og minified (bootstrap.min.css) form. Gi dem nytt navn eller flytt dem til et trygt sted. Slipp deretter inn den nye CSS-filen og sjekk at HTML-en din peker til den. Hvis du noen gang ombestemmer deg, er det bare å slippe inn en annen swatch eller bytte tilbake til originalen.

Hva om jeg vil utvide Bootswatch?

Bootswatch er et åpen kildekode-prosjekt, og du er velkommen til å modifisere swatches ytterligere eller lage dine egne. Hvis du er interessert, fork eller følg GitHub-repositoryet.

Hver rå swatch består av to LESS-filer. Den ene er variables.less, som er inkludert som standard i Bootstrap og lar deg tilpasse disse innstillingene. Den andre er en ny fil kalt bootswatch.less som introduserer mer omfattende endringer.

Først legger du til disse to filene i Bootstraps egne LESS-filer. Du vil overskrive standard variables.less.

Deretter åpner du bootstrap.less og rett før linjen "Utility classes" på slutten, legger du til @import "bootswatch.less";. Denne kommandoen inkluderer bootswatch.less når du kompilerer LESS-filene til CSS, og å plassere den nær slutten overstyrer tidligere stiler med samme CSS-selektor-spesifisitet.

Nå kan du begynne å tilpasse variables.less og bootswatch.less. Du står også fritt til å endre de andre LESS-filene, noe som i noen tilfeller vil være enklere, men swachen din kan bli skjør for fremtidige endringer i Bootstrap selv. Når du er klar til å teste koden din, kompiler til CSS og nyt!

Oppdatering

Sjekk ut artikkelen min på Smashing Magazine om Customizing Bootstrap.

Jeg brukte nylig altfor mye tid på å finne et domene for et prosjekt. Hvert bra .com-domene, og til og med de fleste av de dårlige, var for lengst blitt kapret av spekulanter. Dette fikk meg til å lure på hvordan oppstartsbedrifter håndterer dette. Fra å lese nyhetene ser det ut til at flere og flere går for alternative TLD-er som .me og .us. Mange bruker til og med domenehacking for å gjøre denne svakheten til en styrke. Nærmer vi oss et vippepunkt med alternative TLD-er, gitt deres økende synlighet og levedyktighet? For å finne ut av dette gikk jeg til CrunchBase og samlet domenene til 1000 selskaper som ble grunnlagt hvert år fra 2005 til 2011¹. Selvfølgelig er det andre faktorer som spiller inn i dette utvalget, men det er en ganske god måte å avdekke domenetrender i oppstartsverdenen. Det jeg fant var at .com (i blått nedenfor) dominerer, akkurat som det alltid har gjort. Gjenkjenneligheten og prestisjen til .com er en kraftig, selvforsterkende ting. De siste sju årene har den ligget på rundt 85 prosent med få tegn til å falle. Omtrent 50 andre TLD-er gnager på den gjenværende kakestykket. Hold musen over grafen for mer informasjon. Har oppstartsbedrifter brukt B-liste TLD-ene, .net og .org? Bare litt. Omtrent 2 prosent av oppstartsbedriftene bruker hver av dem, selv om .org finner en nisje hos NGO-er og lignende, kan .net være på vei ut av moten (relativt sett) de siste årene. Og her er en nærmere titt på et utvalg TLD-er som ser ut til å være populære blant oppstartsbedrifter. Ironisk nok, men kanskje ikke overraskende, er .biz en flopp, mens .me, .io og .co opplever oppgang det siste året. Det gjenstår å se om dette er en del av en større trend. For oppstartsbedrifter kan en strategi være å skaffe seg et alternativt domene billig til å begynne med, og å anskaffe .com-versjonen når du får finansiering senere. Men med alternative TLD-er som knapt gjør noe inntrykk, er det tydelig at det å ha et .com-domene er en prioritet helt fra starten, og at de kanskje er villige til å gå på akkord med navnet sitt for å sikre at de får tak i et. Til tross for trengselen på .com, viser det seg at domenenavn ikke blir noe lengre. Her er en graf som viser at det til og med er en liten nedgang i antall tegn siden 2009. For å holde domenenavnene korte, er det absolutt mye av den samme kreativiteten med å navngi oppstartsbedrifter i dag som Paul Graham bemerket tilbake i 2006. Og til tross for tilstrømningen av alternative TLD-er, er oppstartsbedrifter, for tiden, fortsatt dotcoms.

I dag er oppmerksomheten vår delt mellom mange apper på mange enheter, som er nettverksbaserte og stadig oppdateres. Gitt dette, brukes statusmerker mer enn noen gang for å hjelpe brukere med å opprettholde bevissthet. De brukes overalt fra operativsystemer til applikasjoner til nettsteder, med varierende grad av suksess.

Det som gjør et merke veldesignet, er at det kommuniserer litt tidsriktig informasjon på en slagkraftig måte. Dette oppnås gjennom konsistens og kontrast. Konsistens hjelper brukere med å gjenkjenne et merke ved å holde seg til et standard utseende og posisjon. Kontrast hjelper brukere med å legge merke til et merke ved å velge en farge og form som skiller seg ut fra innholdet.

Facebook er ett eksempel som oppnår både konsistens og kontrast, selv om de har det relativt enkelt. Gitt den monokromatiske konteksten, vil nesten hvilken som helst fargeklatt gjøre susen.

Facebook

Apple og Netflix har en vanskeligere jobb fordi merkene deres brukes på svært varierende innhold. I iOS overvinner Apple dette på to måter. For det første gir de merket en skygge og kant som kontrasterer med selve merket, slik at det skiller seg ut enten det brukes på et ikon som er mørkt, lyst eller nesten hvilken som helst kombinasjon av farger. For det andre forskyver Apple merket til en posisjon som er utenfor grensene for ikonet. Dette endrer ikonets silhuett og, enda viktigere, skaper et skille mellom metadata og objekt.

iPhone

Netflix gjør ingen av delene, og resultatet er at når du skanner gjennom tilbudene deres en skjermfull om gangen, skiller merkene seg knapt ut.

Netflix

En utfordring Netflix står overfor, stammer fra semantikken i merkene deres. I stedet for å kommunisere et tall eller et enkelt varsel, må de skildre "Nye episoder" og kanskje andre betydninger som "Nytt på Netflix" og "Utløper snart", som det ikke finnes standard symboler for, ennå¹.

Netflix har en fantastisk merittliste, og designer elegante grensesnitt for over 400 forskjellige enheter. De kan gjøre det mye bedre med merkene sine.

Her er en rask guide til multi-touch-bevegelser på Kindle Touch, siden Amazon ikke tilbyr dokumentasjon og noen kommandoer er mindre enn åpenbare. Bevegelser inkluderer trykk, hold, sveip og klyp. Gi meg beskjed hvis det er noen jeg har gått glipp av.

Trykk

Kindle Touch bruker et system med usynlige trykksoner kalt EasyReach.
Soner

Trykk høyre sone: Neste side
Trykk venstre sone: Forrige side
Trykk øverste høyre sone: Slå på/av bokmerke
Trykk øverste sone: Bokalternativer
Alternativer

Hold

Hold: Ordbok + tekstalternativer
Hold
Hold og dra: Tekstalternativer
Hold og dra

Sveip

Sveip til høyre: Neste side
Sveip til venstre: Forrige side
Sveip opp: Neste kapittel
Sveip ned: Forrige kapittel

Klyp

Klyp sammen: Reduser skriftstørrelse
Klyp fra hverandre: Øk skriftstørrelse
Klyp