1. Chrome haal Internet Explorer in

Als de huidige groeicijfers doorzetten, wordt Chrome (van Google) ’s werelds populairste browser. Rond het midden van 2012 komt er een einde aan de de 13-jarige heerschappij van Internet Explorer. In reactie op de dominantie van Google, zal Microsoft in het voorjaar Internet Explorer 10 uitbrengen. Dat wordt een geweldige browser met een gelikte interface, verbazingwekkende snelheid en een uitstekende ondersteuning van de W3C standaarden .

2. Internet Explorer 6 en 7 sterven uit

In januari 2012 surft wereldwijd 1,8% met Internet Explorer 6 en 4,0% met Internet Explorer 7. En dat wordt snel minder. De extra kosten om websites in deze browsers goed te laten werken zijn dus nog nauwelijks de investering waard. Webdesigners zullen minder vaak ingewikkelde en tijdrovende aanpassingen doen om het ontwerp er in Internet Exolorer 6 en 7 precies hetzelfde uit te laten zien.

Toch is 5,8% van de markt een heleboel mensen en blijven Internet Explorer 6 en 7 de standaard browser voor veel grote organisaties en overheidsdiensten. De beste oplossing is te zorgen dat websites goed blijven werken in Internet Explorer 6 en 7. Het ontwerp hoeft niet pixel-perfect te zijn, het mag best wat minder mooi zijn. Als de essentiële inhoud maar beschikbaar blijft voor iedereen.

3. Tablets en smartphones vragen om Responsieve Design

In 2012 krijgen steeds meer mensen tablets. De Apple iPad en de Kindle Fire worden steeds populairder, en binnen een paar maanden, zal je op elke zakelijke bijeenkomst tablets aantreffen. Ze zijn misschien niet echt nodig, maar het maakt je wel cool en belangrijk. Momenteel surft ongeveer 8% op het web met een smartphone.

In 2012 wil iedereen dat zijn website goed werkt op desktop computers, tablets en smartphones, zowel in liggende als in staande positie. Webdesigners zullen bij hun ontwerpen hier rekening mee moeten houden. Dit heet Responsive Design: het ontwerp past zich vanzelf aan aan de schermbreedte. De meeste webdesigners blijven echter websites ontwerpen met een vaste breedte. Ik ben me al aan het bijscholen in flexibele lay-outs en CSS3 media queries en ga dit in 2012 in praktijk brengen.

4. HTML5 in plaats van Flash voor animaties

HTML5 neemt steeds meer de paats in van Flash, bijvoorbeeld bij bewegende banners (advertenties).

De voordelen van zijn onder meer:

• HTML5 werkt ook op iPad en iPhone, Flash niet.
• Animaties passen zich aan aan verschillende schermformaten door het gebruik van o.a. media queries.
• De bestandsgrootte wordt kleiner, zodat animaties sneller verschijnen.
• HTML5 animaties zijn moeilijker te blokkeren.

5. Webpagina’s worden steeds zwaarder

Als de huidige trends zich voortzetten, zal de gemiddelde grootte van een enkele webpagina – inclusief alle CSS, JavaScript en mediabestanden – tegen het einde van 2012 de 1MB bereiken. Dit is vreemd, omdat HTML5 en CSS3 de noodzaak voor afbeeldingen en JavaScript verminderen. Toch worden er steeds meer filmpjes, scripts, etc., aan webpagina’s toegevoegd. Bedenk dat steeds meer mensen mobiel surfen. Voor hen is het extra belangrijk dat pagina’s snel laden Als jouw pagina’s langzaam laden, doe je bezoekers dan een plezier en laat je website ombouwen naar HTML5.

Nieuwe website hoog in lijst voornemens ondernemers

Nu.nl schrijft: Ondernemers gaan het nieuwe jaar in met de doelstelling vooral online meer aanwezig te zijn. Een nieuwe website prijkt hoog in de lijst met voornemens.

Dit blijkt een enquête van de zakelijke marktplaats Offerti.nl. Ondernemers zijn er vanzelfsprekend vooral op uit in het nieuwe jaar meer klanten te werven en het bedrijf uit te breiden. Om dit te doen is een aanwezigheid online belangrijker geworden.

Een nieuwe of verbeterde website is hier een belangrijk onderdeel van. Vooral ondernemers die al langer dan 2 jaar bezig zijn zien meer waarde in een actuele online website.

Offerti.nl ondervroeg 30.000 ‘professionals’ naar hun goede voornemens.

Wat zijn jouw goede voornemens voor 2012?

Wil je ook een nieuwe website of wil je je bestaande website verbeteren? Neem contact op met Winy Schalke. Ik bespreek graag de mogelijkheden met je.

Eenvoudiger uploaden

Bestandstype herkenning

Er zijn een aantal onderdelen gestroomlijnd. Je hoeft nu slechts op één icoontje te klikken om het bestandstype van je keuze te uploaden. Zodra het bestand is ge-upload worden de juiste velden getoond met relevante informatie over het bestand.

Drag-en-drop media uploader

Foto’s en andere bestanden voor berichten en pagina’s toevoegen gaat nu veel eenvoudiger. Sleep bestanden vanaf je computer in het venster van de uploader. Je kunt één of meerdere bestanden in één keer toevoegen. Heel fijn deze verbetering!

Dashboard ontwerp

Flyout menu’s

Navigatie in het dashboard gaat nu sneller en met minder klikken door de nieuwe flyout submenu’s. Als je met de muis over een hoofdmenu-item gaat in je dashboardnavigatie, worden de submenu’s op magische wijze getoond. Je hebt slechts een enkele klik nodig om bij elk dashboardscherm te komen.

Header + Admin bar = Toolbar

Om ruimte te besparen en de efficiëntie te vergroten, zijn de toolbar en de oude Dashboard header tot één toolbar samengevoegd, die altijd bovenaan in beeld blijft. Als je met je muis over de toolbar-items gaat verschijnen menu’s voor snelle toegang tot diverse onderdelen.

Prettige weergave

Een aantal dashboardschermen zijn bijgewerkt voor betere weergave in diverse beeldschermformaten, waaronder een verbeterde iPad/tablet ondersteuning.

Help tabbladen

De nieuwe Help tab zie je in de rechterbovenhoek van de dashboardschermen, direct onder je naam. De Help inhoud is overzichtelijk opgedeeld in secties, met links naar relevante documentatie en de ondersteuningsfora.

Voelt als de eerste keer

Nieuwe feature pointers

Als er na een update iets vernieuwd is in het dashboard verschijnt er de eerste keer een helptekst die uitleg geeft over de wijziging(en).

Bericht-update changelog

Vanaf nu zie je wanneer je WordPress is ge-update een welkom-scherm — ook toegankelijk op elk moment vanaf het W-logo in de linker hoek van de toolbar — waarop je kunt zien wat nieuw is in deze versie.

Inhoud extra’s

Verbeterde co-bewerking

Heb je ooit een bericht willen bewerken nadat iemand anders er al mee klaar was en een waarschuwing gehad dat de andere persoon nog steeds aan het bewerken was? Vanaf nu krijg je deze waarschuwing alleen als deze persoon nog op het bewerkscherm is, dus geen vertraging meer.

Update nu!

Wil je ook updaten naar de nieuwe versie van WordPress en profiteren van al deze verbeteringen? Neem contact op met Winy Schalke van Alva Design.

Het lijkt zo makkelijk, een plaatje “van je website plukken”. Je klikt met de rechter muisknop op het plaatje en kiest voor “Afbeelding opslaan als…”. Maar het is zelden een goed idee want meestal is zo’n webplaatje veel te klein om in drukwerk te gebruiken. Op het scherm ziet het er goed uit maar de resolutie van een beeldscherm is maar 72 dpi. Voor drukwerk is een resolutie van 300 dpi nodig. Een gedrukt plaatje bestaat namelijk uit veel fijnere puntjes dan de pixels op een beeldscherm.

In foto-bewerkingsprogramma’s, zoals Photoshop, kun je de resolutie van het webplaatje naar 300 dpi omzetten, maar dan neemt de afmeting in centimeters evenredig af. Een foto van 10 x 15 cm op een website wordt dan slechts 2,5 x 3,5 cm in drukwerk. Meestal veel te klein om te gebruiken.

Een button is vaak geen plaatje

Met CSS en HTML kun je tegenwoordig website-buttons maken die eruit zien als een plaatje, maar in werkelijkheid alleen maar uit een stukje code bestaan. Je kunt zo’n button dus niet “van de website plukken”. Probeer het maar eens met de button hiernaast.

Terug naar mijn klant, die een button van haar website wil gebruiken voor het tijdschrift. Die button was inderdaad geen plaatje, dus de hierboven beschreven truc “Afbeelding opslaan als…” werkt niet. Maar natuurlijk is er een oplossing.

De oplossing

1. Open de webpagina in een browser en vergroot de pagina zo ver mogelijk (met ctrl + of command +). De button is nu bijna schermvullend. Een groot beeldscherm is hierbij handig.
2. Maak een schermafbeelding (screenshot) van de button.
3. Open deze in Photoshop.
4. Maak de resolutie 300 dpi, met behoud van de bestandsgrootte (dus niet resamplen). Het plaatje wordt in centimeters veel kleiner, maar op het beeldscherm zie je dit niet.
5. Stel de kleurmodus in op CMYK.
6. Bewaar het plaatje als .psd (photoshop bestand).
7. Nu kun je het plaatje voor drukwerk gebruiken.

Als je programma geen psd bestanden als plaatjes accepteert dan kun je in Photoshop het bestand bewaren als .jpg in de hoogste kwaliteit.

Het werkt als volgt: Houd je de Ctrl-toets ingedrukt en draai het muiswieltje naar boven. De letters worden groter. Je kunt ook één of meerdere malen op de ‘+’ toets drukken terwijl je de Ctrl-toets ingedrukt houdt.

Om de letters kleiner te maken draait je het muiswieltje naar beneden (Ctrl-toets ingedrukt blijven houden). Of je drukt een of meerdere malen op de ‘–’ toets.

Mac gebruikers: in plaats van de Ctrl-toets gebruik je de Cmd-toets.

Dit werkt bij alle internetbrowsers zoals Firefox of Internet Explorer. Ook werkt het bij veel andere programma’s waaronder PDF-viewers, teksverwerkers (o.a. Word) en spreadsheets (o.a. Excel).

Alleen bij Internet Explorer 6 werkt het niet. Deze versie is al 10 jaar oud, en een heleboel andere dingen werken ook niet goed in deze verouderde browser. Wie nog met Internet Explorer 6 raad ik dan ook aan om te upgraden naar een nieuwer versie. Je zult zien dat veel websites er dan opeens anders (en veel mooier) uitzien. Google en WordPress zijn onlangs gestopt met het ondersteunen van Internet Explorer 6. Dat betekent dat zoeken met Google en een website bijhouden met WordPress niet meer kan in deze browser.

Doelgroep bepalen

We waren met 10 deelneemsters, een prettig aantal. De docent, Marieke Blomsma, is tekstschrijver en heeft haar eigen tekst- en communicatie adviesbureau, Woord in Stijl. Na een korte voorstelronde kregen we meteen de eerste opdracht: het bepalen van je doelgroep. Een aantal van ons blijkt een veel te brede doelgroep te hebben. Vooral de grafisch ontwerpers/webdesigners (waaronder ik) hebben hier last van. Als je je doelgroep wat specifieker maakt kun je die doelgroep in je communicatie gerichter aanspreken.

Marketingmiddelen

Na het bepalen van de doelgroep bekeken we welke middelen je kunt inzetten om je doelgroep(en) te bereiken. Meerdere doelgroepen kan namelijk ook, als je ze maar op de juiste toon aanspreekt. Voor de ene doelgroep kan een maandelijkse nieuwsbrief een effectief middel zijn, voor de andere werkt het beter om dagelijks via Twitter van je te laten horen. Marieke had hiervoor een handige communicatiematrix gemaakt die we meteen konden invullen: welke marketingmiddelen zet je in voor welke doelgroep en hoe vaak doe je dat. Ik ging dus met een ingevuld schema naar huis, waarmee ik meteen aan de slag kan.

Twitter en Facebook

Sociale Media zoals Twitter en Facebook zijn heel geschikt om je bedrijf te promoten. Marieke nam een hele rits tips voor zakelijk Twitteren met ons door en legde daarna stap voor stap uit hoe je een Facebookpagina voor je bedrijf opzet. Er was te weinig tijd om hier tijdens de workshop mee te oefenen, maar gelukkig mailde Marieke ons na afloop haar presentatie met alle tips.

Website

Ook een goede website is natuurlijk een belangrijk middel om meer klanten te krijgen. We kregen een aantal praktische tips, over hoe je de aandacht van de bezoeker van jouw website kunt trekken (call to action) en kunt vasthouden, onder andere door het schrijven van goede webteksten.

Tot slot gingen we weer praktisch aan de slag: Twee aan twee deden we een ‘quickscan’ van elkaars website op sterke en zwakke punten en gaven elkaar tips voor verbetering. Bij mij pakte dat zo goed uit dat mijn collega me vroeg om een offerte voor het verbeteren haar website. Ik ging dus behalve met een ‘toolbox’ vol met tips en trucs ook nog met een nieuwe opdracht naar huis.

Marieke Blomsma

Workshop ‘Promoot je bedrijf via internet’

• Docent: Marieke Blomsma
• 12 november 2011, van 10 tot 5 uur, Grafisch Lyceum Rotterdam
• Georganiseerd door Women on the Web

Met klein bedoel ik niet de afmetingen, maar de bestandsgrootte. Dit is het aantal kilobytes (kB) van het bestand. Voordat je plaatjes uploadt moet je ze daarom eerst optimaliseren.

Optimaliseren

Optimaliseren is: een plaatje zo duidelijk en zo mooi mogelijk op je site tonen, maar tegelijkertijd het bestand zo klein mogelijk houden.

Veel mensen uploaden grote foto’s naar hun website. Als de foto niet mooi op de pagina past verkleinen ze die met HTML-eigenschappen zodat de foto kleiner wordt weergegeven dan hij in werkelijkheid is. Dit is zonde: het bestand is onnodig groot.

De juiste afmetingen

Verklein elk plaatje tot de werkelijke afmetingen waarin je het wilt tonen op je website. Als je een foto in 360×240 pixels wilt tonen, upload de foto dan ook in die afmeting. Verklein de foto met Photoshop of een ander fotobewerkingsprogramma tot het gewenste formaat. Bewaar hem onder een andere naam.

Geef alle bestanden die je aan je website toevoegt internet-namen. Dat wil zeggen: geen spaties, hoofdletters en leestekens.

Heb je geen fotobewerkingsprogramma, dan kun je op fotoverkleinen.nl online je foto verkleinen en bewaren.

Bestandstypen

Er zijn 3 bestandstypen voor het web: JPEG, GIF en PNG. Alle 3 comprimeren plaatjes tot kleine bestanden en maken de resolutie 72 dpi, de juiste resolutie voor het web.

1. JPG (JPEG)

   Dit bestandstype kies je voor foto’s. JPEG kan plaatjes met veel verschillen in kleur, patroon en contrast flink comprimeren zonder zichtbare verlies van beeldkwaliteit. Het kan miljoenen verschillende kleuren per bestand opslaan en je kunt de mate van compressie instellen. Te veel compressie levert een blokkerig beeld op, je moet een beetje experimenteren met de instellingen. JPEG ondersteunt geen transparantie.

2. GIF

   GIF comprimeert bestanden zonder kwaliteitsverlies. Dit bestandstype is geschikt voor plaatjes met weinig kleuren. Hoe meer grote vlakken van één kleur, hoe kleiner het bestand. Nadeel is dat er slechts 256 verschillende kleuren kunnen worden gebruikt. Bij GIF kun je een adaptief palet gebruiken. Je kiest de beste kleuren uit voor een plaatje (dat kunnen er bijvoorbeeld slechts 8 zijn) zodat dit zo klein mogelijk blijft, maar wel een goede kwaliteit behoudt. GIF is dus niet geschikt voor afbeeldingen met veel verschillende kleuren, zoals foto’s of illustraties met kleurverlopen. GIF ondersteunt transparantie, maar geen gedeeltelijke transparantie.

3. PNG

   PNG comprimeert bestanden ook zonder kwaliteitsverlies. PNG biedt net als GIF de mogelijkheid tot transparantie, maar ondersteunt ook alpha-transparantie. Alpha-transparantie kan ook gedeeltelijk transparant zijn. Hiermee kun je mooie afbeeldingen maken die overlopen in de achtergrond. Een nadeel van PNG is dat Internet Explorer geen transparantie ondersteunt.

Welk bestandstype kies je?

Probeer altijd het bestandstype te kiezen dat voor een specifieke afbeelding het kleinste bestand oplevert met de beste de beeldkwaliteit.

Photoshop heeft een handige optie: Save for Web. Hiermee wordt overbodige informatie uit het bestand weggelaten en kun je zien welk bestandstype het kleinste bestand geeft: GIF, JPG of PNG. Let daarbij wel op de beperkingen die ieder type heeft.

Dat kan vrij makkelijk, als je webmail hebt. Met Webmail kun je vanaf elke computer die verbonden is met het Internet en waarop Internet Explorer, FireFox of een andere webbrowser is geïnstalleerd, e-mail ontvangen en verzenden. Je hoeft hiervoor geen programma op je computer te installeren. De meeste webhostingproviders bieden webmail standaard aan bij een webhostingpakket.

Je moet wel in je emailprogramma (bijvoorbeeld Outlook of Mail, op je eigen computer) een paar instellingen aanpassen.

In mijn email programma (Mail voor de Mac, vergelijkbaar met Outlook voor de PC) heb ik ingesteld dat de emails die ik ophaal niet meteen verwijderd worden van de server (bij Hensel Hosting, mijn webhosting provider), maar daar nog 1 week blijven staan. Je kunt kiezen uit: nooit, na één dag, na één week, na één maand.

Heb jij (of je kat) dan een keer een per ongeluk een bericht op je computer gewist, dan kun je dit via webmail altijd nog lezen.

Ook kun je instellen dat de weggegooide berichten niet meteen definitief verwijderd worden maar bijvoorbeeld pas na een maand. Je kunt kiezen uit: nooit, na één dag, na één week, na één maand.

Hetzelfde kun je instellen voor verstuurde berichten. In Outlook of andere mailprogramma’s zitten vast vergelijkbare instellingen.

Zo hoef je je kat tenminste niet de deur uit te doen want: Cats love Macs

WordPress is begonnen als een publishing platform voor bloggers, maar heeft zich gaandeweg ontwikkeld tot een volledig CMS. Joomla is meteen begonnen als volwaardig CMS. Tegenwoordig werken beide systemen prima om een volledige website op te onderhouden.

Joomla heeft standaard veel meer ingebouwde functies, zoals een lidmaatschapssysteem en het verwerken van user generated content.

Als je een bedrijfswebsite wilt, die fungeert als een online visitekaartje of online folder van je bedrijf, zul je maar af en toe de tekst willen aanpassen of een foto uploaden. Je gebruikt dan lang niet alle functionaliteiten die standaard in Joomla zitten. Voor zulke websites is Joomla een te zwaar systeem.

De basis van WordPress is veel kleiner. Er wordt geen code geladen die niet nodig is als je alleen een eenvoudige website hebt. Daarnaast is WordPress heel gebruikersvriendelijk en sneller te leren dan Joomla.

Wat eventueel ontbreekt in WordPress (redactioneel management, pagina management, e-commerce, lidmaatschap) kan eenvoudig worden toegevoegd met goede plugins. Zo kan WordPress gebruikt worden voor een weblog, een bedrijfswebsite, een nieuwswebsite, een website met lidmaatschap, of een webwinkel.

Hieronder zet ik de voor- en nadelen van beide systemen op een rij.

Joomla!

Voordelen

• Goed menu systeem.
• Sterke statische pagina structuur.
• Ingebouwde lidmaatschap/community mogelijkheden.

Nadelen

• Traag en onhandig.
• Niet gebruiksvriendelijk.
• Website van 2000 pagina’s of meer is mogelijk, maar het is lastig om een pagina in de admin te vinden.
• Niet flexibel.
• Zwakke ondersteuning voor weblog.
• Moeilijk om eigen thema’s te maken. Veel Joomla sites zien eruit als Joomla.
• Zwakke ingebouwde SEO (zoekmachine-optimalisatie).
• Geen zoekmachinevriendelijke URLs ingebouwd.
• Slechte code, niet volgens W3C-standaarden. Moeilijk om fouten in de code op te sporen.
• Voor de meeste goede plugins moet worden betaald.

WordPress

Voordelen

• Zeer gebruiksvriendelijk.
• Flexibel.
• Website van 2000 pagina’s of meer is goed mogelijk.
• Makkelijk om eigen, unieke thema’s te maken. Een WordPress site hoeft er niet uit te zien als een WordPress site.
• Veel goede plugins beschikbaar, meestal gratis.
• Voortdurend in ontwikkeling. Elk jaar verbeterd.
• Ingebouwde weblogfunctie: makkelijk om een weblog in je website te integreren.

Nadelen

• Niet ale plugins zijn even goed en na een upgrade ontstaan hierdoor soms problemen.
• Zwakke statische pagina structuur zonder plugins. Met plugins is dit eenvoudig te verhelpen.
• Vaak upgrades nodig. Je moet, of je wilt of niet, regelmatig upgraden om veiligheidsredenen.

Conclusie

WordPress is mijn keuze voor kleine, middelgrote en ook grote websites. Vooral vanwege het gebruiksgemak en de ingebouwde weblogfunctie. Bij nieuwe projecten is het belangrijk om goed na te denken wat je precies met de website wilt kunnen doen en op basis daarvan het meest geschikte CMS te kiezen. Meestal voldoet WordPress. Als er een zwaarder systeem nodig is kies ik eerder voor Drupal of Typo3 dan voor Joomla en werk ik samen met collega’s die daarin gespecialiseerd zijn.

Links

Content management systemen

• WordPress
• Joomla
• Drupal
• Typo3

Enkele voorbeelden van grote WordPress websites

• North Sea Jazz festival
• NRC Next
• Universiteit Utrecht Master’s Programmes
• 40+ Top WordPress Websites

<div class='ngg-navigation'>
<a id="ngg-prev-1" href="/schilderijen">&#9668;</a>
<a href="/schilderijen">1</a><span>2</span>
<a href="/schilderijen?nggpage=3">3</a>
<a href="/schilderijen?nggpage=4">4</a>
<a href="/schilderijen?nggpage=5">5</a><span>...</span>
<a href="/schilderijen?nggpage=8">8</a>
<a href="/schilderijen?nggpage=9">9</a><a href="/schilderijen?nggpage=10">10</a>
<a id="ngg-next-3" href="/schilderijen?nggpage=3">&#9658;</a></div>     
</div>

De oplossing

In mijn stylesheet heb ik toen .ngg-navigation a.prev en .ngg-navigation a.next een  text-indent van -5000px gegeven, zodat de ongewenste “tekst” pijltjes niet meer zichtbaar zijn.

En mijn gallery werkt weer als vanouds en ziet er weer prima uit. De gallery is te zien op de website Paul Corvers – Schilderijen.