MadEgg schreef op maandag 22 oktober 2012 @ 08:19:
[...]
Zal ik ze dan even voor je vergelijken in een screenshot?
[
afbeelding]
Zie hier het verschil tussen 3px padding (links) en de huidige 7px (rechts) padding op de frontpage. Het verschil is aanzienlijk en ik hoef een stuk minder te scrollen. Veel fijner voor het overzicht. Nogmaals, ik snap dat het op tablets en smartphones handig is dat er zo veel ruimte is zodat je minder snel misklikt met je vingers, maar op mijn PC en laptop heb ik daar absoluut geen last van dus is al die witruimte doodzonde. In de oude layout, via webarchive, was deze hoogte 5px, al een stuk beter dan 7px.
[
afbeelding]
En hier het verschil tussen line-height 1.2 (links) en de huidige 1.6 (rechts). De tekst met line-height 1.2 is voor mij veel leesbaarder, ik hoef niet zo'n eind 'visueel/mentaal' door te scrollen na een regel gelezen te hebben. Bovendien past er véél meer tekst op een scherm wat de informatiedichtheid vergroot. Wat mij betreft ideaal. In Tweakers 6 was de line-height 17px. De huidige 1.6 komt overeen met 20.8px, mijn voorgestelde 1.2 komt overeen met 15.6px. Zit ik er toch dichterbij.
Het is sowieso meer een voorstel met wat waardes die ik er maar even ingegooid heb, het punt is dat die afstanden op de oude site prima waren en dat er nu gewoon flink meer onnodige witruimte is toegevoegd.
Ik schreef op de FP aan Femme over hetzelfde onderwerp:
femme, allereerst mijn opmerking dat Tweakers 6 een van de beste sites was onder mijn specifieke omstandigheden (full screen browser) staat niet in deze post, maar in de gelinkte. Die gaat over de hoeveelheid wit *buiten* de tekst om, niet het onderwerp van deze post. Tweakers 6 was daar goed in, omdat het een vrij strak kader had, waardoor de tekst niet ging zweven over het oneindig witte maanlandschap van Tweakers 7. Dat ging dus nadrukkelijk niet over de oude regelafstand.
Nu even over die typografie: er staan een hoop fabels op het net over het gebruik van interlinie en regellengtes, 90% is baarlijke nonsens of stamt uit de tijd dat webdesign op 800x600 schermen gericht was. Vooral, bijna al die teksten zijn gebaseerd op oude studies onder (dus) onervaren scherm lezers. Zoals iedereen zich zal herinneren printte men toen nog massaal emailtjes uit ´omdat je niet van een scherm kon lezen´. De tijden zijn veranderd, maar de broodjes aap over beeldscherm typografie zijn gebleven (en niets verdwijnt ooit van het net helaas).
Vanuit een design oogpunt is een korte regel goed: als je het mensen vraagt in een A/B test vinden ze dat namelijk prettig. Ga je echter kijken wat de effectieve leessnelheid is van diezelfde mensen dan blijkt dat ze veel sneller kunnen lezen met langere regels.
Tweakers is een site met een hoge informatiedichtheid die gebruikt wordt om snel informatie op te nemen; niet een site om een maximum click-through te genereren, dus gebruik de ankeilers, spotlights en kopjes om mensen aan het lezen te krijgen, maar zodra ze dat artikel verder lezen dan de eerste alinea bedien je ze het beste met een lange regel.
Bij die langere regels hoort inderdaad een kleinere regelhoogte. Kijk maar in print; je oog moet het begin punt terug kunnen vinden, dat is de meest cruciale factor in leessnelheid en moeheid.
Dat Arial een erg hoge x-hoogte heeft en dat dit allemaal aan elkaar gerelateerd is betoogde ik ook al. We verschillen alleen in de conclusie. Doe eens een A/B test met een 1.2 a 1.3 versus jouw gouden snede 1.6. Je zal zien dat het ook op hogere beeldscherm resoluties uitmunted werkt. (Madegg hieronder heeft een goed voorbeeld). Je doelgroep zit overigens vaak op een lage dpi met die grote schermen.
Dan kan je dus meer informatie kwijt zonder scrollen én de leessnelheid gaat omhoog. Twee vliegen in een klap die voor de doelgroep belangrijk zijn.
Arial vind ik een bar font, omdat het op lage resoluties wel veel hinting bevat, maar het is a) karakterloos b) het pixeleert sterk met jullie fontsize op de kennelijk veel gebruikte 22-24" monitors in de doelgroep die HD res hebben en c) het oogt op een Mac anders omdat die elk lettertype wat vervetten (geen goede cleartype), maar op Windows is het een heel _rafelig_ lettertje en d) het is niet heel geschikt voor jullie content omdat het cijfers slecht weergeeft (geen hangende cijfers).
Experimenteer eens met Azuro, kenmerkend, geoptimaliseerd voor elk OS itt Arial, heel goed leesbaar en wat breder dan het erg smalle Arial. Iedere letter is eigen en het zou snel wennen omdat jullie site zoveel vaste bezoekers heeft. Wel als webfont natuurlijk want niemand heeft het.
:strip_icc():strip_exif()/u/51076/crop618fc17c72522_cropped.jpg?f=community)
/u/26608/tweakicon2.png?f=community)
:strip_icc():strip_exif()/u/232680/crop56a9f7b398e2c_cropped.jpeg?f=community)
:strip_exif()/u/25889/boes.gif?f=community)
:strip_icc():strip_exif()/u/378992/Frozen.jpg?f=community)
:strip_icc():strip_exif()/u/292145/avatar-klein.jpg?f=community){kind=avatar}
:strip_icc():strip_exif()/u/2030/zeef.jpeg?f=community)
:strip_icc():strip_exif()/u/137874/Geennaam.jpg?f=community)
:strip_icc():strip_exif()/u/181709/echtebakker.jpg?f=community)
/u/122874/crop5e26d7a209cd1_cropped.png?f=community)
:strip_exif()/u/128173/crop59a1592e54731_cropped.gif?f=community)
:strip_icc():strip_exif()/u/88308/tieinterceptor2%252070.jpg?f=community)
/u/1/femme.png?f=community)
:strip_icc():strip_exif()/u/220197/pino2.jpg?f=community)
:strip_exif()/u/259931/stuiterbal2.gif?f=community)
:strip_icc():strip_exif()/u/26315/bleh.jpg?f=community)
/u/274113/N7.png?f=community)
/u/236894/crop6061923fc7e68.png?f=community)
:strip_icc():strip_exif()/u/366328/pclip.jpg?f=community)
?
:strip_exif()/u/3443/lizard.gif?f=community)
:strip_icc():strip_exif()/u/82500/tweakersraul2.jpg?f=community)
:strip_icc():strip_exif()/u/78991/Image2.jpg?f=community)
:strip_exif()/u/23102/anandus.gif?f=community)
:strip_icc():strip_exif()/u/174532/homer2b.jpg?f=community)
/u/102105/crop56f481fe1f74f.png?f=community)
:strip_icc():strip_exif()/u/10088/WinAndApp.jpg?f=community)
:strip_icc():strip_exif()/u/149211/images.jpg?f=community)
:strip_icc():strip_exif()/u/386815/296252.jpg?f=community)
/u/113293/ferrariavatar2.png?f=community){kind=avatar}
:strip_icc():strip_exif()/u/484/crop651fd77412597_cropped.jpg?f=community)
/u/34659/crop65d886fa2535b_cropped.png?f=community)
:strip_icc():strip_exif()/u/2652/eend.jpeg?f=community)
:strip_icc():strip_exif()/u/61377/got_avatar.jpg?f=community){kind=avatar}
:strip_icc():strip_exif()/u/56290/crop5e9d80e7c6f05.jpeg?f=community)
:strip_exif()/u/23886/crop56b4d08045563.gif?f=community)
Dat was juist één van zaken die ik wel een verbetering vond! Eindelijk even snel klikken naar mijn fotoalbum en blog ... Waarom is dat er nou weer uitgehaald??? Te weinig clicks? :strip_exif()/u/310483/avatar%2520normaal%2520tweakers.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/14/wildhagen60x60.jpg?f=community)
/u/53171/naamloos3.JPG?f=community)
:strip_exif()/u/5116/jsr.gif?f=community)
:strip_icc():strip_exif()/u/155971/avatar_kerst.jpg?f=community){kind=avatar}
:strip_exif()/u/33515/Supra-Avatar2.gif?f=community){kind=avatar}
/u/341569/Naamloos.png?f=community)
Dit topic is gesloten.
