Hierbij stuur ik een voorstel tot wijzigen van de website layout van een aantal statische pagina's.
http://www.ubuntu-nl.org/gemeenschap http://www.ubuntu-nl.org/gemeenschap/meedoen http://www.ubuntu-nl.org/ondersteuning/steunpunten http://www.ubuntu-nl.org/ondersteuning/engelstalig http://www.ubuntu-nl.org/nieuws >>> zou moeten worden Links, als sub-pagina van nieuws
http://www.ubuntu-nl.org/gemeenschap/gedragscode http://www.ubuntu-nl.org/gemeenschap/regelsDit voorstel is gemaakt n.a.v. de discussie die is begonnen op het forum van Ubuntu-nl :
http://forum.ubuntu-nl.org/index.php?topic=86808.msg932449#msg932449Uitgangspunt voor lay-out van informatieve webpagina'sInformatieve pagina's van websites dienen voor de bezoeker overzichtelijk zijn. Voor de ontwerper betekent die, dat de nadruk ligt op navigatie en indexering.
Met het oog op de webrichtlijnen betekent dit:
- een goed gebruik van de semantische tags: h1-6, p, ul, ol, dt, dd, blockquote, etc.
Vanuit typografisch oogpunt :
- de regellengte beperkt wordt tot ca. 12 - 14 woorden per regel.
- dat de tussenkopjes
Vanuit taalkundig perspectief bekeken :
- het gebruik van het kortere zinnen aan te bevelen. (Dat gaat op dit moment te ver.)
Met die uitgangspunten zijn een aantal wijzigingen gemaakt :
- op de html-pagina's in de sectie "#content"
- in het style sheet base.css
Aanpassingen HTMLH2 - opwaarderen naar H1
De oranje kleur komt op de pagina voor het hoogste hierarchische niveau.
p strong - opwaarderen naar H2
Is meer in obvereenstemming met de webrichtlijnen (p strong gebruiken als kopje is knoeien).
1e alinea: p strong
De eerste alinea is van de pagina's is vaak bedoeld als algemene toelichting. Op dit moment is dat vet gedrukt. Het heeft mijn voorkeur dit in een grotere letter te zetten.
Aanpassingen Style Sheet - base.cssRegellengte - maxwidth: 44em.
- Dit betreft de elementen p, ul, li
- Maxwidth legt geen harde eis op aan andere browser formaten/apparaten, is dus fluid.
- De eenheid em is niet pixel-gestuurd, maar afhankelijk van het gebruikte lettertype: zelfs bij een kleine letter wordt de regellengte beperkt gehouden.
h2: padding-top
De afstand tussen kopje en voorgaande alinea wordt op die manier vergroot en gaat het niet "zweven" tussen twee alinea's.
Hernoem de sub-pagina Nieuws --> LinksDe sub-pagina Nieuws verwijs naar externe sites met Tips&Trucs, Blogs, Feeds. Het is verstandig
- de titel v/d pagina aan te passen --> Links
- de sub-pagina ook op te nemen in de sub-navigatiebalk "Links"
- de tekst van het kopje te veranderen in Links voor Ubuntu gebruikers" (ipv "Nieuws").
OpmerkingenGebruikte browser
Opera 12.16 onder Linux
Reverse Engineering
Het is mij onbekend hoe de wijzigingen in Drupal moeten worden doorgevoerd. De wijzigingen zijn gemaakt aan de client-side (de browser). Een goed hulpmiddel daarbij was het de browser Opera, die de mogelijkheid heeft de online pagina offline op te slaan (inclusief, js, css, images) in een mht-bestand.
mht - bestandsformaat
mht is een containerbestand dat webpagina's offline opslaat (inclusief, js, css, images). Het hier gebruikte mht.bestandsformaat is gemaakt met Opera 12.16 en weer te lezen m.b.v. Opera. Ook andere browsers kennen dit formaat, maar deze zijn niet geheel compatible met elkaar.
Virus-scan
Omdat het een container-bestand is, van onbekende bron, dient u vooraf dit bestand te scannen met een virus-scanner. Voor mijzelf heb ik de controle uitgevoerd met Clamtk (engine 0.98.5). Er is niets gevonden.
Aanbeveling Testen van voorgestelde aanpassingen van base.css
- heeft het een negatief effect op
- andere pagina's
- andere browser
- andere apparaten (phone/tablets)
Drupal
Gezien Ubuntu-nl wordt gemaakt m.b.v. het cms Drupal dient te worden bekeken op welke wijze de html-content kan worden herzien op tag-niveau (h1, h2, p, p strong).
EZ-man / 24 december 2014