Fotobewerkingen voor het online plaatsen

De kwaliteit van foto’s is belangrijk, maar ze dienen ook goed gecompresseerd te zijn, om zo snel mogelijk te verschijnen in je website.

Als ik zelf foto’s plaats voor websites van klanten of van mezelf zijn dit de gemiddelde handelingen die elke foto eerst ondergaat (bijvoorbeeld door middel van Photoshop) in deze volgorde:

  1. Fragment selecteren
  2. Retoucheren
  3. Licht en contrast aanpassen
  4. Kleurcorrecties toepassen
  5. Formaat en resolutie aanpassen
  6. Scherptefiltering voor het web toepassen
  7. Compressie toepassen en bewaren

Natuurlijk wordt hier soms van afgeweken indien nodig. Soms dienen we een horizon horizontaal te zetten of delen te verwijderen of toe te voegen. We kunnen zo de visuele kwaliteit meestal flink verbeteren, maar hoe beter het origineel, hoe beter het eindresultaat. Een echt slechte foto valt niet te redden, hoogstens “toonbaar” te maken.

Heel wat handelingen per foto, die mee het verschil maken tussen een amateuristische en een professionele website.

Hoe afbeeldingen compresseren voor gebruik op het web?

Hoe kleiner de hoeveelheid bits die je afbeeldingen bevatten, hoe sneller je pagina’s bij de gebruiker op het scherm verschijnen. Daarom is het gebruikelijk om afbeeldingen goed te “compresseren” alvorens te uploaden. Ook voor emailgebruik is dat beter.

In de meeste grafische programma’s heb je een optie “save for web”, zoals bv. in Photoshop®. Daar kun je kiezen voor .jpg (foto’s e.d.) of voor .gif (logo’s, tekeningen zonder kleurovergangen) of voor .png (logo’s, tekeningen met transparantie). Vertrek steeds van je origineel beeld als je verschillende versies maakt. Verder lezen

Webpagina’s met tables of Cascading Style Sheets (CSS)?

Webdesign evolueert van een layoutopmaak met tables naar opmaak met CSS. Op het eerste gezicht is het systeem met tables eenvoudiger. Maar CSS biedt meer mogelijkheden en de webdesign-evolutie is toch onomkeerbaar. De leercurve is wel stijl en de overschakeling vraagt een grondige studie. Ook door de uitzonderingen vanwege de verschillende browsers (Internet Explorer!). Nadien plukt men de vruchten. CSS geeft een soepele layout die eenvoudiger te veranderen is. Vooral als men de CSS in een aparte, gelinkte file plaatst. De enige uitzondering waar men beter tables gebruikt, is … voor tabellen.

Welke lettertypes gebruiken in websites

In tegenstelling tot het ontwerpen voor drukwerk, kan men zich in webdesign best beperken tot een klein aantal lettertypes. Elk letterype dat je gebruikt, moet immers aanwezig zijn op de computer van je doelgroep. Indien niet, dan gaat de browser automatisch overschakelen naar een Times of dergelijke als standaardlettertype. Best kun je steeds enkele alternatieve types toevoegen. Verdana en Georgia zijn zowat de meest gebruikte fonts voor lopende tekst in websites, omwille van de vlotte leesbaarheid op schermen.
Een mogelijkheid om aan deze beperking te ontsnappen, is lettertypes omzetten in een grafisch beeld (bv. .gif file), maar dat is dan weer niet te lezen door de search engine crawler robots. Een nadeel op het vlak van zoek-scores.
Er bestaan nog wel ingewikkelde, omstreden Flash-alternatieven.
Een lijstje van “super-safe”-lettertypes: Verder lezen

Op welke formaat ontwerpen?

Een permanente vraag die rijst bij het ontwerpen van een website is: wat is de meest geschikte breedte en hoogte, vermits er zoveel verschillende schermen en resoluties worden gebruikt.

Ongeveer 80 % van de gebruikers heeft momenteel (maart 2007) een scherm met minimum 1024 x 768 pixels. Zo’n 20% heeft een kleiner scherm. Dit is natuurlijk afhankelijk van de doelgroep: voor business-to-business-sites kan men uitgaan van de eerste groep. Business-to-consumer-sites dienen dus nog rekening te houden met de kleinere schermen.

Een website kan een vaste breedte hebben, of een variabele breedte, dus een “rekbare” layout, die zich aanpast aan het gebruikte scherm.

Vaste breedte:

  • voordeel: volledige keuze van de layout door de ontwerper, dus meer grafische mogelijkheden.
  • nadeel: niet zo geschikt voor hand-held toestellen.
  • nadeel: soms te veel ruimte op grote schermen

Variabele breedte:

  • voordeel: past bij elk scherm en dat wordt volledig benut.
  • nadeel: layoutmatig minder mogelijkheden, want de vormgeving verandert met het scherm.
  • nadeel: in het ontwerp dient men wel op te letten dat de regelbreedte van de teksten niet te groot kan worden (max. ± 100 tekens per regel), want dat leest moeizaam.

Hier is een visueel overzicht van de verschillende schermresoluties. Tussen haakjes staan de schermafmetingen, maar door menu-bars e.d. dien je je ontwerp te richten op het kleiner formaat, dat ernaast staat vermeld en overeenkomt met het gekleurde vlak.

Een Favicon maken

Een favicon is een icoontje dat o.a. verschijnt voorin de adresbalk van je browser (zie het logo-icon hierboven).
Het is een speciaal formaat dat steeds de benaming “favicon.ico” moet hebben.

  1. Maak het in een grafisch programma zoals Adobe Photoshop?? op 64 x 64 pixels.
  2. Reduceer dan tot 16 x 16 px.
  3. Bewaar als favicon of indien je dit niet kan met je programma, “bewaar voor web” als gif (= favicon.gif), open die file dan in een programma zoals Graphic Converter en bewaar als windows icon. (.ico)

Deze file uploaden in je rootfolder.