Det finns två saker du kan lägga till på nästan vilken webbplats som helst för att öka läsaren: dropplock och hjältebilder. Dessa är inte något nytt, och de är inte "hemligheter". Men många designers inser inte att de används för mer än bara estetiska skäl. Idag ska jag förklara varför de jobbar - och visa dig att bäst genomföra dem.
Strax innan jag dyker in, ett varningstecken. Användning av dessa element kommer att öka läsräntorna. Det vill säga fler människor kommer att läsa din kopia. Men om din kopia är dålig, kommer du också att använda drop caps och hjälte bilder minska svarsfrekvensen. Så du måste ha en stark kopia för att använda dessa element effektivt. Annars får du faktiskt färre konverteringar. Du kan kolla in min tidigare artikel här på Design Shack för en snabbstartguide för att spotta och skriva övertygande kopia.
Drop Caps
Varje designer är bekant med snygga, överdimensionerade tecken som springer upp i början av ett block av text. Kallas också initialer, droppkepsar härstammar från den brittiska öarnas åttonde århundrade. De verkar ha varit helt dekorativa till att börja med och fastnat genom renässansen och till modern användning för att? ja, de ser snygga ut.
Som det visar sig är de mer än bara lätta på ögat. De ökar också läsare, genom att preying på ett grundläggande mänskligt behov: behovet av fullständighet. Enkelt uttryckt kan människor inte stå och lämna något halvvägs. De måste klara det. När du läser en bok före sängen och du tänker, "Jag lägger ner den i slutet av sidan", du aldrig faktiskt do-som sidan alltid slutar halvvägs genom en mening. Du måste vända om för att slutföra det, eller hur?
Drop caps fungerar på samma sätt. Eftersom de sticker ut, och eftersom de är smack-bang i din naturliga ögonväg på en sida, är de nästan omöjliga inte att läsa. Du behöver bara det kortaste ögonkastet för att ta in ett enstaka brev. Men när du har tagit den in kräver ditt behov av fullständighet att du åtminstone läser resten av ordet. Och när du har läst ordet, behåller samma behov dig till slutet av meningen. Med en bra öppningslinje kan detta vara allt som krävs för att du sedan vill läsa stycket. Och så vidare.
Några bästa praxis för Drop Caps
Håll dem rimligt små
Du kan givetvis göra en droppelock så enorm som du vill. Men det här är kontraproduktivt. När de över tre linjer är höga börjar initialerna "lossa" från resten av texten och stå ensam, vilket besegrar deras syfte. Plus, första stycken kan vara ganska korta. Så om du dynamiskt tillämpar ett mycket stort dropplock till början på varje sida med CSS, kan det ta upp mer vertikalt utrymme än det stycke det är kopplat till. Som bara ser dumt ut.
Låt mig också notera här att du vill se till att din åtgärd (linjebredde) inte är för stor, annars kommer du fortfarande att få problem med det här. Mer än 80 tecken per rad minskar läsbarheten, så om du kommer att drabbas av att lägga i dropplockar, kommer du noga att hålla din åtgärd snygg och lutad också för att göra det värt. jag använder maxwidth: 75ex; för alla mina innehållsförpackningar.
Använd en stark färg
Det är också klokt att sätta droppehattar i en iögonfallande färg, snarare än i mörkgrå eller svart som resten av texten (igen antar jag att du använder den läsbara designen möjligt; omvänd text minskar läsaren. ) Orange eller rött är naturligtvis bäst, det är de mest provocerande färgerna, men vilken färg som din design tillåter kommer troligen att fungera bättre än vanlig grå eller svart.
Hjältespel
En hjälte skott är ett porträttfoto av författaren, som ligger bredvid öppningsfältet. Det kan sticka ut från stycket till vänster eller höger, eller flyta inline som en droppelock.
Varför fungerar det? Två anledningar:
- Ansikten lockar vår uppmärksamhet som galen. Av alla former och mönster i världen är de de som vi är de mest hardwired att känna igen och fixera på. Varför tror du att Jungfru Maria verkar ha så många människor i deras spannmål?
- Vi litar på människor mycket mer när vi känner att vi känner till dem. Om vi kan se vad författaren till en bit ser ut, börjar vi bilda ett starkare förhållande med honom. Det här är bra inte bara för läsare, men också för omvandlingar. Förbindelsen vi känner med författaren ökar vår förtroende för honom, vilket ökar det uppfattade värdet av det han säger - och uppfattat värde är vad som gör att utsikterna klickar på samtal till handling.
Några bästa praxis för hjältebilder
Kom ihåg dina texter
Alltid alltid använd en bildtext. Bildtext får läsas 200% mer än kroppskopia-så du vill få ut det mesta av dem. Förutom att ge upphovsmannens fullständiga namn och referensuppgifter är det klokt att inkludera en viktig försäljningsplats: sammanfatta en viktig fördel, garanti, premie eller liknande.
Matcha kopieringstalet
Naturligtvis är det bara meningsfullt att använda en hjältespel när kopian är skriven som om den är från en enda person. För frilansare är hjältebilder därför utmärkta. De flesta av de bästa copywritersna använder dem. (Jag bryter mot denna regel på min egen sida, på grund av min mystiska person som Information Highwayman.) För större företag är de ofta inte lämpliga på varje sida.
Överväldiga inte din läsare
Kom ihåg att hjältespel dra verkligen hård. Det innebär att de kommer att konkurrera med andra element på sidan - inklusive droppehattar. Om du måste välja mellan att använda den ena eller den andra är ett hjälte skott troligen det bättre alternativet (dela test för att se till att kursen varierar).Om du bara använder hjälten skott, placera den till vänster - för att stödja, snarare än att bryta, läsarens naturliga ögonblick.
Använd bara en högkvalitativ bild
Det är bättre att inte använda någon bild alls än att använda en eländig. Om du inte har en bra bild, använd inte helt hjälte skott alls. Kom ihåg att syftet är att uppmuntra i läsaren en känsla av ett förhållande med författaren - för att stärka förtroendet. En snaggle-tandad bild ändrades från 640? 480 ner till en 50? 38-miniatyr och sedan skalas tillbaka till en 120? 90 hjälte skott-sparade sedan som en JPEG på 40% kvalitet? inte så bra. Varken-allmänt sett-är ett foto av författaren som ser orört, disheveled, berusad, stenad eller på annat sätt tvivelaktig. Kom ihåg att stilen på fotot kan bidra till eller förringa den uppfattade trovärdigheten hos personen som den visar.
Detta innebär också att du bör undvika att använda en bild som kommer att kollidera med din design. I exemplet nedan ser du att jag använder en stiliserad hjälte skott för att matcha min drop cap.
Exempel med kod
Jag ska ge dig några tips nedan för att koda upp både en dropplock och en hjälte skott. Känn dig fri att chip in efteråt och kritisera mina metoder. De är vad jag har funnit för att fungera bäst, men det finns alltid mer än ett sätt att skölja en katt.
Skapa en droppelock
Tiden var att droppehattarna skulle hackas tillsammans med bordsceller. Tack och lov är det att skapa dem mycket enklare och mer elegant idag. Beroende på hur du vill att ditt dropplock ska tillämpas måste du bestämma om du ska använda en klass, CSS-väljare eller båda.
Om du är glad att ha en droppelock applicerad på första bokstaven på varje sida, kan du bara använda väljare. Till exempel, låt oss säga att första stycket alltid följer en första nivåhuvud i din markering. I så fall kan du använda CSS närliggande siblingsväljaren i kombination med första bokstaven pseudo-klass:
Det är trevligt och enkelt, och det fungerar i alla webbläsare värda att nämna (och några som inte är). Men chansen är att din uppställning inte alltid är så grundläggande. Till exempel, om på vissa sidor använder du både en första och en andra nivåhuvud? Återigen löses detta lätt med närliggande syskonväljaren:
Eller om du använder HTML5 och lägger dina rubriker i grupper:
Personligen vill jag ha mer granulär kontroll än detta. Förutom att ha en dropplock i början av varje sida vill jag ibland placera en manuellt (efter en sektionsbrytning, kanske). I sådana fall använder jag en klass.
Nu har jag sett många människor som använder spänna element för att skapa drop caps-bara vikla brevet i a med rätt klass bifogad, och av dig går. Jag har alltid betraktat detta som ganska inelegant-men om du har någon form av begränsning med ditt CMS som gör min lösning problematisk, gå till den. Jag föredrar att bara bifoga en klass till en paragraf. Här är CSS:
Jag använder inte p.drop-cap: första bokstäver {} för att jag gillar att hålla mina alternativ öppna. Somedag skulle jag kanske vilja lägga en dropplock på en blockquote. Hur som helst är den medföljande HTML enkel:
Okej så mycket för att trigga dropplocken. Men hur är det med att faktiskt styling det? Det finns två lil caveats här.
Välj en lämplig typsnitt
Du måste komma ihåg att olika teckensnitt har olika stilar av huvudstäder. Generellt bör en bokstav vara ca 1 cm hög. Men vissa typsnitt har? egenheter. Ibland hittar du ett "A" tar upp mer vertikalt utrymme än en "H", till exempel. Eller en "J" kommer att trycka ner under baslinjen. Alla möjliga småkvaliteter som detta kan göra konsekvent att uppnå en snygg dropplock extremt svår. Jag föreslår att du gör motsatsen till vad jag gjorde när jag skapade min hemsida och hitta ett teckensnitt med jämn, konsekventa huvudstorlekar att använda för dina droppar. I exemplen nedan kommer jag att använda League Gothic för drop cap och Aller Light för bildskärmsytan.
Radavstånd
Gecko-baserade webbläsare verkar inte bry sig om linjens höjd, men WebKit gör det. Om du får fel i raden, kommer du inte att märka i Firefox, men drop-knappen kommer att ställas in i fel vertikal position i Chrome och Safari.
Så hur vet du vilken linjehöjd (och fontstorlek) du ska använda? Du kan få ett bra utgångsområde genom att ta antalet stycken linjer som du vill att drop-capet ska täcka och multiplicera det med ditt stycke linjehöjd. I exemplet nedan använder jag en linjehöjd på 24px, och dropplocket täcker tre linjer-så jag börjar med en teckenstorlek på 24? 3 = 72px, ställa in linjens höjd till samma och se hur det ser ut.
Observera att jag faktiskt inte vill ta upp hela 72px vertikalt utrymme, eftersom dropplocket borde sätta mer eller mindre spola med medelstorleken för stycke fonten - inte längst upp i raden. Men de flesta teckensnitt använder sätt mindre vertikalt utrymme för en em än typsnittstorleken tillåter; så vid 72px kan vi bara få 65px i glyph höjd.
Nu för den faktiska CSS. Jag ska ge det här till dig i ett linjärt format när jag bygger upp det och ger dig den sista koden i ett format som är lättare att läsa i slutet. Koden för stycket är ganska grundläggande:
Och vi ska göra dropplocken ett blocknivåelement och flyta det till vänster om stycket:
Som kommer ut så här:
En gång i tiden fanns det en liten dropplock som heter "O". Han var en allmänt anständig kille utan flyg, men i hans fientliga ögonblick tycktes han tycka om sig själv som en bogserbåt, som drackte sina läsare oräkneligt i ett stort hav av annorlunda text. (Hans designer hade glömt att formulera sitt innehåll med andra skannbara element som stycken, listor och underrubriker. En väldigt sorglig historia.)
Inte så illa, men glyfen tar upp mindre vertikalt utrymme än det borde. Med en fontstorlek på 72px är liga gotiska "O" bara 55 pixlar hög. Och det behöver också lite andningsutrymme. Det är ganska snällt upp mot kopian just nu.
Du kanske har lagt märke till att Firefox positionerar glyksen ovanför punktens genomsnittlinje, medan Chrome eller Safari placerar det korrekt på rätt sätt. Detta beror på att de har olika idéer om var toppen av stycket är. Vi måste lägga till en toppmarginal så att Firefox kommer att positionera glyfen korrekt; vilket innebär att linjens höjd reduceras för Chrome. Med lite experiment hittade jag följande för att fungera i det här fallet - men du måste tweak din egen kod beroende på teckensnitt, teckensnittstorlekar och raderhöjder du använder:
Så här ser det ut:
En gång i tiden fanns det en liten dropplock som heter "O". Han var en allmänt anständig kille utan flyg, men i hans fientliga ögonblick tycktes han tycka om sig själv som en bogserbåt, som drackte sina läsare oräkneligt i ett stort hav av annorlunda text. (Hans designer hade glömt att formulera sitt innehåll med andra skannbara element som stycken, listor och underrubriker. En väldigt sorglig historia.)
Jag rekommenderar verkligen att prova olika bokstäver också. "M" och "A" avslöjar ofta små vertikala positioneringsproblem, eftersom deras kepshöjd oftast är större än andra bokstäver för att kompensera för den optiska illusionen av korthet som skapas av sina toppar. Kontrollera även hur "J" ser ut, eftersom det ibland har en nedstigning, även i aktiverad form. Slutligen, om ditt teckensnitt har gamla stilfigurer, släng bara det och hitta ett med fodernummer. Det är vad de är för!
Okej, låt oss lägga till ett hjälte skott!
Skapa en hjältespel
Jag sa innan hjälten skott och släpp kepsar kan vie för uppmärksamhet. I det här fallet ska jag försöka använda det till min fördel. Jag använder ett stiliserat hjälte skott som kompletterar dropplocket och sätter det tätt in i första stycket. Eftersom vi är hårda för att plocka ut och granska ansikten ovanför ganska mycket annat, kommer läsarnas ögon att dras till hjälten sköt först. När de läser bildtexten kommer de ta reda på varför de borde läsa kopian? och sedan går dropplocken till jobbet och leder ögonen till rätt ställe.
Wrapping A Hero Shot
Det kan vara frestande att skapa en hjälte skott genom att bara kasta in en D Bnonn Tennant, Internet copywriter och direktmarknadsexpert om hur du ökar dina konverteringsfrekvenser genom att trycka upp din kopia läsare. Min personliga preferens är att placera hjälten skott till höger, med en droppelock som kompletterar den till vänster. Men som alltid är det sista ordet i detta avseende test. Olika arrangemang fungerar för olika publik och olika utföranden. Det kan hända att du blir bättre läsare med bara ett hjälte skott till vänster och ingen dropplock. Eller en droppe keps och ingen hjälte skott. Observera också att alla hjältar med anständigt storlek, med någon användbar bildtext, kommer att sträcka sig över minst två stycken - även om första stycket är relativt lång. Se till att du tillåter detta i din design. Det ser ganska bra ut, men det finns några problem. För det första är bilden placerad lite låg, eftersom det finns lite osynligt utrymme i bilden. För det andra verkar bildtexten lite avskild från hjälten. För det tredje, eftersom bilden är 100px hög - som inte är en multipel av 24px linjens höjd som jag använder - sitter bildtexten något av det vertikala rutnätet. Med lite tweaking fann jag att a 
margin-top av -15px för .hero-shot, och -11px för .heroshot s, sätt upp saker bara snyggt. (Om dessa siffror verkar fel är det förmodligen för att de alltid är ungefärliga, att få all din text att ställa upp på samma vertikala rutnät är nästan omöjligt). Kolla in det:
D Bnonn Tennant, Internet copywriter och direktmarknadsexpert om hur du ökar dina konverteringsfrekvenser genom att trycka upp din kopia läsare.
Min personliga preferens är att placera hjälten skott till höger, med en droppelock som kompletterar den till vänster. Men som alltid är det sista ordet i detta avseende test. Olika arrangemang fungerar för olika publik och olika utföranden. Det kan hända att du blir bättre läsare med bara ett hjälte skott till vänster och ingen dropplock. Eller en droppe keps och ingen hjälte skott.
Observera också att alla hjältar med anständigt storlek, med någon användbar bildtext, kommer att sträcka sig över minst två stycken - även om första stycket är relativt lång. Se till att du tillåter detta i din design.
Den slutliga CSS
Här är den slutliga CSS-koden, som lovat (du är mer än välkommen att kopiera den direkt):
Slutsats
Och det är det-vi är bra att gå med en snygg droppehatt och hjälte sköt för att matcha. Gärna lämna egna tips eller kritik, eller fråga uppföljningsfrågor, i kommentarerna.