CSS galleries een zegen of een vloek voor webdesign

gepost op Woensdag 20 april 2011 door Lieven

Heel wat webdesigns van Webatvantage worden opgenomen in CSS Galeries zoals www.cssmania.com, www.cssdrive.com, .... Da's uiteraard leuk voor onze designers en de extra link building, die dit met zich meebrengt.
Maar er is ook een keerzijde aan deze medaille.

Je krijgt er namelijk een vertekend beeld door in de statistieken. De dag van opname, krijgt de betreffende website meestal enkele duizenden bezoekers en dit blijft toch gerust enkele weken tot maanden verder uitdijnen.
Daar valt nu nog met te leven.

Maar wat we vandaag vaststellen overtreft wel alles. Het design van Baby's Corner werd schromeloos gekopieerd, éénmaal voor een Mexicaanse website en éénmaal voor een Turkse. Mijn eerste gedachte was, dat een van onze designers een leuke bijverdienste had opgezet in het buitenland, maar ze zouden het beter doen, dus er is iets anders aan de hand.

Site rippers

Blijkbaar worden via "slechte" site rippers, de sites gedownload en vervolgens gedeeltelijk aangepast. Enkele schoonheidsfoutjes:

• als we in de broncode gaan kijken vinden we nog steeds onze naam terug: ...meta name="author" content="Webatvantage BVBA"...
• sommige javascript includes verwijzen nog via absolute paden naar de origineel gekopïeerde site
• voor sommige grafische banners is niet eens de moeite gedaan om ze te vertalen
• last but not least, er wordt vergeten om het accountID van Google Analytics aan te passen, dit is dan ook hoe we deze sites op het spoor zijn gekomen.

Hier alvast enkele screenshots, oordeel nu zelf:

De originele site www.babyscorner.be:



De Mexicaanse kopie www.pediatriqx.com:
Hier zit in de footer nog een link naar de site van Baby's Corner, klik er even op enlaces.

De Turkse kopie www.hikayecim.info/Default.aspx:
Neem hier zeker eens een kijkje naar de banners (de Twitter-button) staat bv. nog in het Nederlands, klik ook even op de eerste button Kategolier en vergelijk dit even met  deze pagina: http://www.babyscorner.be/NL/Corners.

Als je kopieert maak het dan beter

Ik zou er minder problemen mee hebben, indien de kopie beter is dan het origineel. Dan kunnen we er zelf nog wat van leren, maar dit kunnen we hier helaas absoluut niet vaststellen.
De vraag is, wat kunnen we hiertegen ondernemen? Misschien weet Feweb raad, laat ons hopen, ... ongetwijfeld to be continued.

We hebben er intussen al een derde ontdekt, vergelijk deze 2 sites gerust eens:

• www.imperial.be
• www.ozankarafiativeco.com

Usability tips voor webdesigners

gepost op Dinsdag 14 september 2010 door Inge

Mensen surfen op het internet omdat ze iets zoeken. De taak van een webdesigner is om deze zoektocht zo 'luxueus' mogelijk te maken.
Kortom moeten we ervoor zorgen dat de surfer efficiënt vindt wat hij zoekt én dat deze zoektocht een aangename ervaring is.

Enkele eenvoudige usability tips:

• Het gebruik van breadcrumbs. Als Hans en Grietje gebruik hadden gemaakt van broodkruimels, hadden ze hun weg naar 'Home' wel gevonden. Breadcrumbs worden vooral gebruikt wanneer pagina's bestaan uit meerdere subpagina's. Het zorgt voor een transparante structuur van een website.
  
• Vergroot (indien mogelijk) het aanklikbaar veld van een link. Maak bijvoorbeeld van een link in een lijstje een block-element (display:block;).
  
• Gebruik genoeg contrast op de website en zorg ervoor dat de lettertypes groot genoeg zijn. Om een aangename leeservaring te bieden, kan je gebruik maken van de line-height. Een paragraaf leest veel vlotter als de lijnen niet tegen elkaar gedrukt staan.
  
• Zorg voor een duidelijke navigatie & structuur op de website.
  
• Het gebruik van genoeg ruimte tussen de elementen op een pagina zorgt ervoor dat de structuur gezien wordt.
  
• Geef elke gebruiker gemakkelijk toegang tot de website. Maak gebruik van de webstandaarden.
  
• Geef zinvolle feedback op wat de surfer doet. Vult de bezoeker bijvoorbeeld een veld in een formulier fout in, geef dan aan wat wel verwacht wordt.
  
• Dat goede copyrighting de gebruiksvriendelijkheid van een website verhoogt, is een understatement.
  
• Maak van het bedrijfslogo, een link naar de homepage.
  
• Zorg ervoor dat alles werkt. Niets zo frustrerend voor een bezoeker als iets dat niet lijkt te werken.
  

En zo zou ik nog wel even kunnen doorgaan. Maar misschien dat de tip der usability tips wel deze is: wees een user!
Leef je in als bezoeker van de website en ontdek zo wat beter kan.

Werken met CSS sprites

gepost op Woensdag 07 april 2010 door Pieter

Wat zijn CSS sprites ?

CSS sprites zijn meerdere achtergrondafbeeldingen die herleid worden tot 1 grote afbeelding. Daarna wordt met behulp van de css-eigenschap "background-position" de juiste afbeelding weergegeven op basis van de x en y coördinaten van de achtergrondafbeelding.

Enkele voordelen...

• Het grootste voordeel is het verschil in laadtijd voor uw website. Doordat allerlei kleine afbeeldingen tot 1 afbeelding herleid zijn, worden er minder http-requests gemaakt worden, wat leidt tot een snellere laadtijd van uw site.
• Je hoeft maar één afbeelding te onderhouden in plaats van tientallen kleine aparte afbeeldingen.
• Alles is 100% regelbaar via de CSS.
• Het mouse-over probleem in Internet Explorer wordt hiermee verholpen.

Sprites worden vaak gebruikt in de navigatie van een website. Enkele bekende voorbeelden hiervan zijn de websites van Apple en Google.

Bekijk een voorbeeld van hoe een CSS sprite tot stand komt.