In theorie is er geen verschil tussen theorie en praktijk

Drupal | E-Commerce | Google | Marketing | SEO | Social media | Usability | Webdesign

Succesvolle website: 30 webdesign tips (Deel 5)

Drupal webdesign

Succesvolle website: 30 webdesign tips (Deel 5)

Een succesvolle website vraagt om een geslaagd webdesign. We zetten 30 handige tips voor je op een rij, inmiddels zijn we aangekomen bij deel 5 van de serie. Deze keer aandacht voor de navigatiestructuur op je website, een handige back to top-link, tags in de code, afbeeldingen en het gebruik van JavaScript op de website.


JavaScript in het webdesign

JavaScript staat bekend om z’n pop-up, kleine dialoogschermpjes die zich vertonen. Wil je daar gebruik van maken binnen je webdesign? Je kunt er met Alertify.js (http://fabien-d.github.io/alertify.js/) eenvoudig voor zorgen dat het er een stuk beter uit komt te zien, bijvoorbeeld op basis van de huisstijl die je gebruikt. Je kunt JavaScript aanpassen aan je eigen CSS-stylesheet.


Afbeeldingen toevoegen

Wil je gebruik maken van afbeeldingen binnen het webdesign? Zorg ervoor dat je de hoogte en breedte vaststelt (bij voorkeur in percentages). Je voorkomt daarmee dat de website standaard een 1 x 1 pixel versie laadt, om daarna de daadwerkelijke hoogte en breedte op te halen.

Dit leidt tot websites die traag laden en de inhoud laten verspringen zodra de browser aan de afbeeldingen toekomt. Door de attributes voor de hoogte en breedte mee te geven kun je dat eenvoudig voorkomen.


Tags in de code

Nu we toch in de code van de website zitten is het met het oog op het webdesign bovendien verstandig om gebruik te maken van pre tags en inline code tags. Je kunt daarmee een stap verder gaan dan met headers en paragrafen.

Je kunt veel meer standaard-tags toevoegen in een text/NFO-bestand. Sommige websites hebben die al niet meer nodig, maar over het algemeen vormen ze een waardevolle toevoeging.


Back to top-link

Meer gericht op de gebruikers van je website kun je een back to top-link integreren. Die zorgt er (bijvoorbeeld rechtsonder of linksonder) op de pagina voor dat je eenvoudig terug kunt scrollen naar de bovenkant van de pagina. Het is niet nodig om zelf het scrollwiel of touchpad te gebruiken, een druk op de knop is voldoende om terug te keren naar de bovenkant waar bijvoorbeeld het hoofdmenu staat.

Je kunt de knop bijvoorbeeld in de footer laten verschijnen, of op het moment dat iemand door een blogartikel begint te scrollen.


Navigatiestructuur en webdesign

Houd tenslotte rekening met de navigatiestructuur binnen het webdesign, vooral wanneer je een complexe website hebt. Surf zelf eens over je website en doe of je een bezoeker bent die een bepaalde dienst of een bepaald product zoekt.

Welke links zouden jou interesseren en welke omwegen of obstructies kom je tegen? Zorg er met de navigatiestructuur voor dat je binnen een paar klikken uit kunt komen waar je zou willen zijn.