Til tross for min skepsis til det tabloide «avisuttrykket» mange nettaviser tar i bruk for å gjøre forsiden sin spennende, må jeg si at det har en effekt på meg også. Stadig flere blogger lar seg inspirere av nettavisstilen og legger opp til layouter som bruker prinsipper fra papir- og nettavisene. Det kan for eksempel være at man legger toppsaken i full bredde, mens resten av sakene vises i halv bredde. Et annet eksempel er ulike tekststørrelser i titler, der enkelte ord blåses opp eller krympes for å sette fokus på det som er viktig.
De store nettavisene har systemer som gjør det enkelt å oppnå den rette layouten. På mindre sider, der publiseringssystemet for eksempel er WordPress, er det ikke like lett å løse alt på like elegante måter. Kanskje tittelen ikke blir så fin, når toppsaken hopper ned til neste posisjon, men beholder sin formatering.
Jeg har lekt med en ide som jeg ønsker deres innspill på.
La oss si alle saker, uansett bredde, har samme HTML-grunnlag. Det eneste som skiller fullbreddesaker fra halvbreddesaker er en CSS-klasse og bildenes høyde og bredde. I CSSen definerer vi en standardstørrelse på tittelen i fullbreddesaker og en standardstørrelse i halvbreddesaker. Det er en fordel om halvbreddesaker har halvparten så stor tittelstørrelse. Ord(ene) vi ønsker å utheve eller forminske, pakker vi inn i en <span>. På denne taggen kan vi enten sette en klasse eller skrive inline CSS. Tekststørrelsen, innenfor <span>, definerer vi i prosent. Det gjør at tittelen på fullbredde- eller halvbreddesaken vil ha et fast forhold mellom standardstørrelsen på tittel, og prosentverdien på <span>.
Skjermdump av toppsak på VG.no - 19.06.2009
Nettlesere er spesielt ulike i sin behandling av tekst. Det skal ikke mange pixler til, før teksten bryter i en nettleser, mens andre nettlesere viser teksten slik den var tenkt. Derfor er det viktig å ikke finjustere titler for mye. Titlene på VG.no faller stadig fra hverandre i min standard nettleser (Safari).
Hva synes dere om løsningen?
Litt...
Haarball
2 December, 2009 – 20:23Skulle jeg implementert dette ville jeg kanskje gjort noe sånt som å sette både størrelsen på titlene og bredden på innholds-kolonnen i ems, sånn at teksten forholdt seg til bredden, uavhengig av bredden på nettleservinduet.
Martin Berglund
3 December, 2009 – 02:35Ja, det kan være en god måte å gjøre det på. Embasert design er utfordrende, men veldig kult når man får det til. Har du noe eksempel på sider som har løst designet slik?
Haarball
3 December, 2009 – 02:59Når jeg tenker meg om er det ikke sikkert det hadde fikset problemene. De oppstår jo ofte som du sier i forbindelse med at forskjellige nettlesere og plattformer rendrer fonter på forskjellige måter. Jeg tenkte at innholdskolonnen på VG er flytende, men det er den jo ikke.
Det ga meg en ny ide: prosent-basert font-sizing. Prosent-bredde på en flytende innholdskolonne, og tittel-fonter satt i prosent. Ville ikke da titlene endret størrelse proposjonalt med bredden på innholdskolonnen (mao. bredden på nettleservinduet)? Det må jeg teste.
Problemet til VG løses vel rimelig greit av desken med en kjapp cross-browser test, og hvis man finner et problem, legg inn litt slingringsmonn ved å minke tekststørrelsen på frasen som skaper problemet.
Martin Berglund
5 December, 2009 – 15:37Ja, nøkkelen er (som du skriver) å la det være litt luft på høyre kant. Legg gjerne igjen noen lenker til eksperimenter du tester. Det er interessant å se hva som er mulig å gjøre med prosent
tool
24 December, 2009 – 10:30Takk for en interessant blogg