5 einfaldar leiðir til að bæta vefritgerð
Tegund er einn af mest notuðu þættir á vefnum. Hugsa um það. Nema þú ert YouTube eða Flickr, eru líkurnar á að vefsvæði þitt sé að koma fyrir texta innihald þitt - ekki ímyndaða umbúðirnar sem umlykur hana. Svo hvers vegna eru vefhönnuðir enn að meðhöndla texta eins og efri hluti?
Góð leturfræði færir til síðu og eykur læsileika . Það gerir fólki kleift að vinna úr upplýsingum hraðar.
A fleiri skannanlegur, læsileg síða þýðir góða gesti. Til hamingju með gesti koma oft aftur, kaupa vörur, fara eftir athugasemdum og deila síðuna með vinum. Sjáðu hvers vegna það gæti verið þess virði að hugsa um?
Ég gæti blíðt að eilífu um hversu langt typography hefur komið á vefnum og hversu langt er enn að fara. Ég hef oft hoppað á milli vefja og prenthönnunar. Þegar þú ert að fara frá InDesign til TextMate eru takmarkanir á vefur gerð glær .
En nóg hefur verið sagt um hvaða vefur gerð getur ekki gert. Þetta er ekki að fara að vera annar rant. Í staðinn, skulum einbeita okkur að 5 einföldum lagfærum fyrir leturgröftuga augnhárin sem flóa yfir netið.
1. Notaðu A Reset Stylesheet
Heimskur, en satt: Enginn tveir vafrar nota sömu forsendu. Mismunur í padding, margar línur, fyrirsagnir og inndælingar eru hömlulaus. Ef þú vilt að vefsíðuskilin þín sé samkvæmari í gegnum vafra, þá borgar það að byrja með CSS Endurstilla stílblað.
Tveir ég mæli með:
CSS endurstillt sniðmát Yahoo
Eric Meyer er CSS Reset Stylesheet
2. Horfðu á mál þitt
Mál vísar til lengdar eins línu af gerð. Lengri lína = lengri mælikvarði. Rannsóknir hafa sýnt að til að ná hámarks læsileika ætti að keyra texta dálka eins og aðal líkamsútgáfan þín vera einhvers staðar á bilinu 45 - 75 stafir (30-50 ems) þar á meðal rými . Þetta er ein af ástæðunum fyrir því að vökvahönnun (þau sem dálkarnir stækka og samdrættir til að passa breidd vafrans) eru erfiðari í augum.
Að auki ætti leiðandi þinn að hækka með lengd mál þitt . Leiðandi er magn hvítt bils milli textalína og er stjórnað með CSS línuhæðinni. Ef þú þarft að nota ofangreint mál skaltu ganga úr skugga um að leiðangurinn þinn opnar.
Sömuleiðis, ef þú ert með lítinn dálki eins og skenkur með stuttu máli, ætti leiðandi þinn að vera þéttari. Ég finn sjálfgefið gildi sem flestir vafrar úthluta er svolítið of þétt. Línuhæð um 1.4em virkar vel fyrir flestar líkamsþættir.
3. Hneigðu að geimnum milli
Það snýst ekki bara um texta þína - það er um plássið sem umlykur það. Of lítið pláss gerir texta erfitt að lesa, en það gerir of mikið. Lykillinn er að finna einfalt jafnvægi sem leiðir augun frá einum þátt í næsta.
Eitt af algengustu mistökum sem nýir hönnuðir gera eru að fylla út hver tomma af plássi. Hvítt rými vísar til tómt eða "neikvætt" rými um efnið þitt og það er mikilvægt. Kíktu á vel hannað tímarit eins og Dwell or Good og þú munt sjá að þrátt fyrir að það kostar útgefanda peninga til að prenta hverja síðu, þá skilur þau mikið af hvítu plássi í kringum textann. Blaðsíða verður jafnvægi og augan þín mun flytja frá rými til rýmis á áhrifaríkan hátt.
Til viðbótar við að stilla línuhæðina þína (eins og nefnt er í # 1) skaltu prófa að auka púðar og margar línur. Nema þú ert að reyna að draga úr brjálaður sjónrænu bragði, þá ætti alltaf að vera gott magn af hvítt bil í kringum texta þína. Ekki láta það raska gegn öðrum þáttum, sérstaklega myndir. Láttu innihaldsefni þitt (fyrirsagnir, málsgreinar, skenkur osfrv.) Anda.
Mark Boulton skrifaði mjög upplýsandi grein um White Space fyrir lista í sundur, skoðaðu það út.
4. Ekki fara letur brjálaður
Góð þumalputtaregla fyrir hvaða hönnuður er: Notaðu ekki meira en tvær leturgerðir andlit í hönnun þinni. Tveir letri andlit geta litið mjög stílhrein. Listi sundur notar afbrigði af Georgia og Verdana til að búa til glæsilegan og fáður útlit. En að halda áfram að bæta við letri andlit í viðmótið þitt skapar óþarfa rugling. Á sama hátt, forðastu að nota of mörg leturstærð, liti eða meðferðir á síðu eða í málsgrein eða keppa við hvert annað í stað þess að bæta áherslu eins og ætlað er.
Þó letur stafi og tækni eins og sIFR og Typeface.js leyfa þér að tilgreina bara um hvaða letur sem þú vilt sem sjálfgefið, standast freistingu til að fara villt með líkamsyfirlitinu. Skreytt leturgerðir er best haldið í fyrirsagnir vegna þess að þau hafa áhrif á læsileika. Hugsaðu um það - hvenær er síðasta skiptið sem þú tókst upp á pappírsskáldsögu sem er alfarið í Comic Sans?
Þegar þú býrð til letur stafla skaltu fylgjast með stærð pörunar þinnar. Sumir leturgerðir sem líta svipaðar út í mjög mismunandi stærðum. Verdana og Arial eru góð dæmi um þetta. Typetester er frábært tól til að bera saman algerlega vefrit og skapa vel stafla. Annað gagnlegt tól sem kallast Font Stack Builder sýnir þér hvaða hlutfall notenda mun sjá hverja breytingu.
Burtséð frá hvaða leturgerðir þú ákveður að nota skaltu ganga úr skugga um að þau séu ekki smábarn. Ég veit það erfitt ... lítill texti lítur vel út. En hugsa um hina fátæku, squinting notendur! Haltu líkamanum yfir 10 eða 12 punkta. Ef þú krefst þess að þú ert ungur, þá ertu að minnsta kosti að nota hlutfallslega límvatn fyrir alla þá IE 6.0 notendur sem annars gætu ekki gert það stærra. Lesa Grein Wilson Miner á leturstærð fyrir frábæra umræðu.
5) Ekki vanræksla upplýsingar
Viðskiptavinurinn veitti innihaldið. Að bæta því við síðuna er bara spurning um að afrita og líma, ekki satt? Rangt, rangt, rangt. Þetta er gildra vefur hönnuðir falla allt of oft.
Jafnvel þeir sem við erum flókin að bæta við fyrirsögnarmörkum, sniða hverja málsgrein og skipuleggja bulleted listir með varúð gleymdu nokkrum mikilvægum einkennum. Margir (þ.mt ég) saknaðu á formlegri þjálfun, svo þú getir ekki ásakað okkur alveg. En djöfullinn er í smáatriðum. Tími okkar við faðma þessar grunnatriði:
Notaðu klár vitna
Hver er munurinn á snjöllum vitna og heimskum tilvitnunum? Smart vitna (einnig þekkt sem bók eða hrokkið ) eru bognar og hafa bæði opnun og lokun. Dumb ( straight ) vitna eru venjulega beint upp og niður. Apostrophe er einkennilega bara eitt vitna svo sama vandamálið á við. Einfaldur vitnisburður (einnig þekktur sem fyrsti ) ætti aðeins að nota á milli mælinga. Til dæmis, 6'4 "notar tvöfalda og einn prenta vitna.
Því miður lyklaborð okkar vanræksla að helsta tilvitnun. Microsoft Word og aðrar ritstjórar ritstilla bara þau fyrir okkur eins og við skrifum. Að bæta við skilvirkar vitna í HTML síður krefst meiri vinnu frá vefhönnuði vegna þess að þú þarft að nota merkingu til að búa til upphafs- og lokunarvitnaðartákn. Ég sé sama vandamálið með em og en-streymi, ellipsis, vörumerki og höfundarréttartákn. Coders taka auðveldan leið út með því að skipta þeim með bandstrikum, mörgum tímum, stórt TM og hinn frægi (C). Notkun rétta táknanna skiptir máli sjónrænt. Gera það rétt og gera ritstjórar alls staðar brosandi.
Hvernig á að gera klár vitna:
#8216; = opnun einstakra vitna
’ = loka tilvitnun
“ = Opnun tvöfalt vitna
” = loka tvöfalt vitna
Ég veit - enginn vill eyða allan daginn að veiða niður tilvitnanir. Til allrar hamingju, verkfæri eins og SmartyPants og Textism getur gert mikið af legwork fyrir þig með því að sjálfkrafa forsníða texta sem inniheldur klár vitna og þess háttar.
Lesa "The Trouble með EM og EN" frá lista fyrir sundur fyrir nánari upplýsingar um efnið og UTF-8 stafakóðun fyrir algengustu sérstafir.
Ein ástæða - mikið af CMS textaritstjórum (eins og sá sem þessi síða notar) leyfir þér ekki að innleiða klár vitna án viðbótar viðbætur. Sorglegt en satt.
Hættu að setja tvær rými eftir tímabil. Vinsamlegast! Það er ekki nauðsynlegt og það er frekar pirrandi.
Á tenglunum þínum, notaðu ramma-botn: 1px solid í stað texta-skreytingar: undirstrika . Undirstreymir geta keyrt í gegnum styttri stafina (g, j, p, q, y) sem gerir þeim erfitt að lesa, sérstaklega þegar smærri leturstærð er notuð.
Og á meðan það hefur ekkert að gera með typography, hlaupandi fljótur stafa stöðva aldrei drepið neinn . Jafnvel þótt allt sem þú gerðir var afrita og líma, þá stafar stafsetningarvillur sem renna í gegnum lifandi vefsvæði mjög vel á alla sem taka þátt.
Gefðu gaum að þeim 5 festa og hönnun vefsvæða þinnar er viss um að bæta. Mundu að þetta eru bara upphafspunktur. Góð leturfræði er lærður kunnátta eins og nokkuð annað, og það krefst náms og æfingar . Haltu alltaf auga út fyrir síður sem fá það rétt og taka mið af því sem þeir eru að gera. Þarftu innblástur? Skoðaðu síðurnar hér að neðan til að fá dæmi um frábæran vefritgerð og eftir dæmi sem þú finnur fyrir að vera innblástur.
Ævintýralegt:
Skrifað eingöngu fyrir WDD eftir Mindy Wagner.
Hvað finnst þér um þessar einföldu leiðir til að bæta ritgerð þína? Ertu að koma þeim á vefsíðum þínum? Okkur langar að heyra frá þér!