• Zoek
Sikkepitje.nl

Sikkepitje.nl

this private cloud

Website conventies - tips voor een goede website

Richtlijnen voor een goed ontwerp

  • De homepage moet iets bieden zowel voor mensen die textueel zijn ingesteld en de hierarchie in het menu ontdekken, als voor mensen die visueel zijn ingesteld en belangrijke item goed in beeld krijgen. Concreet: maak een goed menu als ook pictische items op de homepage naar veelgebruikte paginas.
  • Een website volgt de "F"-indeling of de "Z"-indeling
  • Breng altijd het menu in beeld! Een bezoeker raakt makkelijk verdwaald wanneer het menu buiten beeld raakt.
  • Uit de voorgaande regel volgt: maak de pagina net te lang. Vermijd te moeten scrollen.
  • Niveaus van menu - wel genoeg , maar niet teveel. 3 niveaus is al veel.
  • Niet meer dan 8 items in elk menu
  • Nieuws: nieuws uit 2006 is niet meer relevant! 3 nieuwsartikelen is genoeg.
  • Titels en koppen in leesbare tekst maakt het voor Google mogelijk om je site te indexeren. Gebruik van afwijkende fonts levert (nog steeds) problemen. Er zijn technieken om fonts te renderen m.b.v. javascript en bovendien textueel te laten bestaan. JeffreyOtten.
  • Gebruik liefst standaard webfonts, en anders systeem-specifieke fonts.
  • 12 fonts op het web ondersteund door Kees TM. Common fonts to all versions of Windows & Mac equivalents

Startdocument nieuwe website

Een formulier van Keestm

  • Geef voorbeeld sites. Beschrijf wat je goed en wat je minder goed vind aan elk van deze sites. Mijn voorbeelden zijn;
  • Geef een titel met trefwoorden. Dit is een titel met een heel korte zin die de website samenvat. Zoekmachines kijken naar deze trefwoorden.
  • Tekst voor meta-description; vertelt waar de website overgaat, bedraagt maximaal 150 tekens. Zoekmachines als Google tonen deze onder de titel bij zoekresultaten.

Huisstijl

Dit zijn voorbeelden van website met een eigen opmerkelijke stijl

Huisstijl van de Nederlandse overheid

Dit zijn websites met de huisstijl van de nederlandse overheid. Ze hebben allemaal een soortgelijk en herkenbaar thema. Slechts de kleurstelling verschilt.

Gemaakt volgens de e-Overheid webrichtlijnen die zijn beschreven op http://www.webrichtlijnen.nl

Nieuwe Stijl

Websites volgens de Nieuwe Stijl: open, licht, leesbaar en toegankelijk

speciale aandacht voor

Menu met 2 niveaus

Kleurgebruik in websites + Hulpmiddelen

Anders

Webfonts

De website HTML5Test gebruikt in de score een webfont. Dit ziet er goed uit in Chromium/Chrome en Firefox en zelfs in IE 8 wordt dit font goed getoond. Het gebruikte font PusabRegular is een vrij font. Op FontSquirrel is een zgn. @Fontface-kit te downloaden waarmee dit of een ander font valt de integreren in een website.

FontSquirrel biedt "commercially-use free fonts". De methode voor CSS-embedding gebruikt geen Cufon. Cufon gebruikt omzetting in SVG om fonts op het web te publiceren, maar laat geek tekstselectie toe. Zie ook Typekit voor een niet-gratis manier om fonts via de Cufon-methode te publiceren die wel tekstselectie toelaat.

Mijn favorieten:

Webfonts die werken!

Achtergronden

CSS

NASA gebruikt aardige CSS 

input[type=text],input[type=password],input[type=submit],input[type=button], button{
	overflow: hidden;
	padding: 7px 10px;
	margin: 0 5px 10px;
	border: none;
	outline: none;
	border-radius: 3px; 
}

Stijlige knoppen

http://amber.bonhoeffer.nl/~paul/dev/inputstyle/

Website-iconen

We kennen allemaal al het icoontje in Internet Explorer, Firefox of Chromium dat door een website aangeboden worden als favicon.ico. Dit afbeelding in ICON-formaat van 16 x 16 pixels levert het beeld van de website op de tabbladen of bookmarks. De webbrowser probeert het bestand van de rootdirectory te laden : http://sikkepitje.nl/favicon.ico

Mijn iPad 3 doet aanvragen voor de volgende 4 afbeeldingen:

  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-144x144.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

De iPad gebruikt deze afbeeldingen voor het plaatsen van een link op het beginscherm. Apple noemt dit "Web clips". Volgens Specifying a Webpage Icon for Web Clip is de standaard grootte 57 x 57 pixels als er geen grootte is gespecificeerd. Deze afbeeldingen worden opgezicht in de rootdirectory van de website , of op een andere plaats indien gespecificeerd m.b.v. een <link>-tag. Op de precomposed afbeelding worden geen effecten toegepast, wanneer ze in de dock staan.

Afhankelijk van het apparaat worden er verschillende groottes opgezocht. Welke afmetingen dit zijn voor ieder apparaat (iPhone,iPad) vind je in Custom Icon and Image Creation Guidelines.

Om snel klaar te zijn: plaats een apple-touch-icon.png in de rootdirectory van je webserver, of plaats een regel <link rel="apple-touch-icon" href="thisismyicon.png" /> in je webpagina met een verwijzing naar een bestaande afbeelding.

Nou WAT kan ik hiervan leren?

Code formatters

Word wrap en Overflow

Word-wrap kan in CSS worden aangeschakeld met 

word-wrap: break-word;

Dit helpt het afsnijden van te lange regel in <pre> en <code> blocks op mijn Vanilla5-skin. 

text-wrap: avoid

wordt nog niet ondersteund. 

overflow: scroll;

is ook een oplossing, in plaats van bovenstaande word-wrap property. Te lange tekst wordt zichtbaar met scrollbalken.

Responsive Webdesign

zie Responsive Webdesign

Responsive webdesign in pmWiki

CSS Beautifier, CSS Formatter, CSS Minify

Hoe maak je een snel ladende site

2017-04-06
Alles over Page speed optimization en hoe maak je je website snel op desktop en mobiel.

Meet de laadsnelheid van jouw website

Achtergrond