Over HTML5

HTML5 is al enkele jaren in ontwikkeling en het lijkt er op dat het ook nog een tijdje zal duren vooraleer HTML5 officieel ‘af’ zal zijn. Toch ondersteunen browsers al enkele van de nieuwe HTML5-tags en duiken er op blogs meer en meer artikels op over deze nieuwste HTML-telg.

So what’s up?

Maar hoever staan we nu? Is XHTML ten dode opgeschreven en moeten we vanaf nu opnieuw HTML gebruiken? Kunnen we überhaupt al HTML5 gebruiken en wat moeten we daarvoor doen? Wat is dat nieuwe canvas element waar iedereen zo lovend over spreekt?

Alles over HTML 5

In de Boagworld podcast episode 184 (eind september 2009) heeft de host een interview met Jeremy Keith, één van de zogenaamde HTML5 superfriends. Jeremy slaagt er in om als geen ander enkele ingewikkelde concepten achter HTML5 heel erg duidelijk uit te leggen. Hij haalt hardnekkige misverstanden de wereld uit en laat ons weten wat we best doen om ons als websitebouwers optimaal voor te bereiden op HTML5. In het interview verwijst Jeremy ook naar enkele interessante links over HTML5.

Je kan de episode beluisteren op de episodepagina van de Boagworld podcast website. Het interview begint rond de 23ste minuut. Je vindt er trouwens ook een volledig neergeschreven versie van het interview. Enjoy.

Categorieën: Webomgeving,

0 reacties

Scrollen in het oneindige

Een paar jaar terug was ik onder de indruk van de manier waarop Google voor Google Reader de klassieke vorm van paginering had herdacht en zelfs onnodig gemaakt.

Hieronder zie je een voorbeeld van een klassieke paginering: op de pagina zie je enkel de eerste items. Wil je meer items zien, dan moet je doorklikken naar de volgende pagina.

Google Reader gebruikt geen paginering maar maakt gebruik van de scrollbar: wil je meer items zien, dan scroll je gewoon naar onder. Als de scrollbar beneden is, worden nieuwe items aan de pagina toegevoegd.

Het is een geniaal eenvoudige oplossing die erg intuïtief werkt en die voor iedereen meteen ook duidelijk is.

Wat goed is, krijgt navolging

Googles vernuftige oplossing heeft sindsdien uiteraard navolging gekregen. Recent nog door Haystack bijvoorbeeld, de nieuwe jobsite van 37signals. Als je er naar beneden scrollt, dan worden nieuwe portfolio’s ingeladen op de pagina. Hoe meer je dus scrollt, hoe langer de pagina wordt. Probeer het maar eens.

Scrollen in het ijle

Maar op de Haystack website lijkt het scrollmechanisme me minder logisch. Als je op zoek bent naar een webdesignbureau uit België, dan ga je waarschijnlijk alle portfolio’s willen afschuimen uit België om zo een juiste keuze te kunnen maken. Je begint dus te scrollen en er komen telkens portfolio’s bij. Dat werkt handig.

Maar na een tijdje ga je je echt wel afvragen hoeveel portfolio’s er nog volgen. Op de Haystack pagina is nergens te zien hoeveel scrollwerk je nog zal hebben om alle portfolio’s uit België te kunnen zien. En dus ben je maar een beetje aan het scrollen in het oneindige.

Bij een klassieke (en goedgebouwde) paginering heb je altijd een idee van hoeveel items er nog volgen. Is er geen paginering dan kan je vaak uit de lengte van de scrollbar afleiden hoe lang de pagina is en dus hoeveel items er waarschijnlijk nog gaan volgen. Maar op de Haystack manier blijft het gissen.

Een oplossing

Een simpele aanduiding van hoeveel portfolio’s nog volgen, zou volgens mij helemaal niet misstaan om het systeem een pak gebruiksvriendelijker te maken. Da’s trouwens ook wat Google Reader doet.

Categorieën: Opinies, Webomgeving,

1 reacties

Tekstomloop op het web in Photoshop

Bij het ontwerp van nieuwspagina’s of blogpagina’s op websites zie je vaak een foto links of rechts bovenaan het artikel. De tekst loopt dan mooi rondom de foto. Hieronder een voorbeeldje van wat ik bedoel, zoals te zien op www.typography.com:

Het is een vormgeving die natuurlijk ook heel vaak in offline media te zien is zoals kranten en magazines. In opmaakprogramma’s als InDesign is het daarom makkelijk gemaakt om een tekstomloop rond een afbeelding te creëren. Er is zelfs een volledig paletje aan gewijd met bijkomende tekstomloopopties.

Ook met HTML en CSS is zoiets heel eenvoudig te realiseren. In Photoshop daarentegen is het allemaal wat moeilijker. Logisch: Photoshop is er in de eerste plaats om foto’s te bewerken. En niet om teksten te zetten. Maar omdat zoveel ontwerpers opgegroeid zijn met Photoshop, is het toch voor velen onder ons het favoriete programma om websites in te ontwerpen.

Vandaar deze eenvoudige tip om het effect van een tekstomloop te bekomen in Photoshop:

• Teken met de pen de vorm van een tekstkader rondom je foto. Door te shift-klikken kan je trouwens perfect horizontale of verticale lijnen tekenen.
• Beweeg met het tekstgereedschap binnenin je padvorm. Als alles goed is zie je een bolle cursor.
• Klik in de padvorm om het pad om te zetten naar een tekstkader.
• Typ of plak je tekst in het tekstkader.

Je tekst zal nu mooi rond de foto lopen. Als je het tekstkader wil aanpassen dan kan je daarvoor de padgereedschappen gebruiken. Met de witte pijl kan je bijvoorbeeld de ankerpuntjes nog individueel verplaatsen.

Het is een beetje behelpen, maar het werkt wel.

Categorieën: Ontwerp, Typografie, Photoshop, Webomgeving,

1 reacties

De Helvetica’s van het internet

Arial, Verdana en Georgia: het zijn de Helvetica’s van het internet. Overgebruikt, onopvallend en leeggezogen van elke connotatie. Waarom vallen webdesigners altijd terug op deze 3 klassieke lettertypes? Het antwoord is helemaal niet spannend: het zijn de enige fonts die op nagenoeg elke computer geïnstalleerd zijn. En dus is de kans enorm groot dat jij ook deze tekst in Arial ziet, en de titels in Georgia.

Maar als we de aankondiging op de nieuwe Typekit website mogen geloven, dan staan we aan de vooravond van een typografische webrevolutie. Typekit, een online fontbibliotheek, zal het technisch en legaal mogelijk maken om als ontwerper webteksten in een arsenaal aan kwaliteitslettertypes te zetten. De bezoeker krijgt dan steevast het juiste lettertype te zien. Hoe het allemaal in zijn werk zal gaan, kan je lezen op de Typekit blog.

Hoera! Eindelijk zullen ook websites net als boeken, tijdschriften en affiches in prachtige letters verschijnen. Niet via onhandige javascript- of flashtrucjes, maar dankzij het eenvoudige @font-face css-principe. Ik kijk uit naar zoveel moois. Lettervormen die iets vertellen over de inhoud van de website, die een gevoel kunnen versterken en die bijdragen tot een betere ervaring van het internet.

Alleen vrees ik ook de keerzijde van de medaille. Hoelang zal de experimentale fase duren waarin blogs en websites van hobbyisten in de meest onleesbare lettertypes gezet zullen worden? Een Impact voor leestekst en een goedgekozen Comic Sans – dat is toch schoon meneer – voor de invulvelden?

Hoewel Arial, Verdana en Georgia al lang niet meer tot de verbeelding spreken, één ding moeten we ze wel toegeven: ze zijn verdomd goed leesbaar op schermen. Ze leggen de nadruk op de tekst en de inhoud en daar gaat het in de meeste gevallen om.

Het wordt een uitdaging voor iedereen om op een goede manier met de nieuwe mogelijkheden om te gaan. Komt er ooit een dag waarop we met weemoed terugblikken op het oude driefontsinternet?

Categorieën: Ontwerp, Typografie, Opinies, Webomgeving,

4 reacties

Websites testen in Internet Explorer 6, 7 en 8

Gisteren heeft Microsoft versie 8 van Internet Explorer uitgebracht. Het zal dan ook niet zo heel erg lang meer duren vooraleer een groot deel van de surfers overschakelt naar IE8. En dat is goed nieuws uiteraard. De browser gaat een pak beter om met de huidige webstandaarden dan elke vorige versie.

Maar elke medaille heeft een keerzijde, vooral voor een webdesigner dan. Elke browser heeft zo zijn eigen kuren en elke versie durft wel eens een webpagina op een andere manier weergeven. Een websiteontwerp dat er perfect uitziet in IE7 kan er totaal verdraaid uitzien op IE6.

En je mag er natuurlijk helemaal zeker van zijn dat niet iedereen met de laatste nieuwe versie van Internet Explorer zal surfen. Op Windows surfen heel wat mensen nog met IE6 en IE7. Maar een groot deel van de Windowsgebruikers gebruikt ook Firefox, Chrome, Safari of Opera als standaard browser. En dan hebben we het nog niet over Macintoshgebruikers gehad: weer andere browsers in een andere omgeving.

Websites testen in verschillende browsers

Als ik als webdesigner een website ontwerp dan is het dus noodzakelijk dat ik die website kan zien zoals de gebruikers die gaan zien en beleven. Er gaat dus heel wat testwerk aan vooraf op de verschillende browsers en systemen. Zelf werk ik op een Mac waarop Safari, Firefox en Opera is geïnstalleerd. Elke website wordt uitvoerig geoptimaliseerd voor deze browsers. Daarnaast heb ik Parallels Desktop geïnstalleerd dat me toelaat om Windows XP te draaien op dezelfde computer. Zo kan ik mijn websites gelukkig ook testen en optimaliseren voor Windowsgebruikers. En dat zowel in Chrome, Firefox, Opera, Safari en Internet Explorer.

Multiple IE

Alleen laat Microsoft je niet zomaar toe om de verschillende versies van Internet Explorer naast elkaar te gaan installeren. Als je dus IE8 installeert, dan zal je IE7 nergens meer terugvinden. Maar via een programmaatje genaamd Multiple IE lukt het wél. Ik draaide er vroeger al Internet Explorer 6 en 7 mee naast elkaar, maar nu lukt het dus ook voor IE8. Hier is wat ik daarvoor heb ondernomen:

• Installeer Multiple IE en daarmee meteen Internet Explorer 6 (en elke vroegere versie als je dat wil).
• Open IE7, download en installeer IE8. Internet Explorer 7 is nu automatisch van je computer verwijderd. Maar dankzij Multiple IE zou IE6 nog altijd beschikbaar moeten zijn.
• Download en installeer de standalone versie van IE7.

Internet Explorer 6, 7 en 8 naast elkaar!

Multiple IE zorgt er nu voor dat je zonder problemen Internet Explorer 6, 7 en 8 naast elkaar kan draaien. Dat is uitstekend nieuws voor iedereen die websites maakt natuurlijk. Je kan je klant een website voorschotelen die er goed zal uitzien voor elke gebruiker, ongeacht het systeem en de browser waarmee die gebruiker surft.

Categorieën: Webomgeving,

16 reacties

Een kleine suggestie voor Safari 4

Apple heeft vorige week een publieke bètaversie van Safari 4 op de wereld losgelaten. En dus veert de wereld van webdesigners, vormgevers en Macgebruikers even op.

Onderwerp van discussie is vooral de vernieuwde plaatsing van de tabs zoals je in de screenshot hieronder kan zien. Maar daar ga ik het niet over hebben gezien er al voldoende inkt over is gevloeid.

Wachtwoordbeheer

Ik wil wel even een ander onderdeel van de browser uitlichten: dat van het wachtwoordbeheer. Als je net als mezelf door de jaren heen al heel wat online identiteiten hebt verzameld, dan is het een zegen wanneer de browser die gebruikersnaam-wachtwoordcombinatie voor je bijhoudt. Maar de manier waarop Safari dat doet stoort me een beetje.

Stel je het volgende voor: je surft naar een forum waar je een nieuw onderwerp wil starten. Aanmelden is daarvoor noodzakelijk maar het forum heb je al een tijdje niet meer bezocht en dus is het even gissen naar de gebruikersnaam en het wachtwoord waarmee je je indertijd op deze website registreerde.

Je vult in wat je denkt dat juist is en klikt op de Inloggen knop. Hierop stelt Safari je voor je gebruikersnaam-wachtwoordcombinatie te bewaren. Op zich behulpzaam natuurlijk, alleen weet je niet of je ingevulde gegevens wel correct zijn. Safari heeft nu eenmaal de vervelende eigenschap om het loginverzoek pas te verzenden nadat je een antwoord hebt gegeven op zijn prangende vraag. Nu zijn er twee mogelijke verwenselijke scenario’s:

1. Je twijfelt en kiest voor Niet bewaren
Het loginverzoek wordt verzonden naar de website. Je kan inloggen dus de gegevens blijken correct te zijn. Uitstekend nieuws. Alleen heeft Safari je logingegevens uiteraard niet bewaard. Bij het volgende forumbezoek word je dus met hetzelfde probleem geconfronteerd.

2. Je twijfelt maar kiest toch voor Bewaren
Het loginverzoek wordt verzonden maar blijkt fout te zijn. Vervelend want als je wegsurft dan houdt Safari nu wel de foutieve logingegevens bij. Als je volgende week opnieuw op deze website terechtkomt dan staat daar mooi de verkeerde gebruikersnaam-paswoordcombinatie ingevuld voor je.

Toegegeven: je kan die bewaarde gegevens wissen of aanpassen via het voorkeurenmenu van Safari, maar wie houdt zich daar echt mee bezig?

Firefox

De meest elegante oplossing bestaat al een tijdje in Firefox: wanneer je op de Inloggen knop drukt dan wordt het loginverzoek meteen verzonden naar de website. Ondertussen verschijnt bovenaan een balkje dat je vraagt of je de zopas ingevoerde gebruikersnaam-wachtwoordcombinatie wil bewaren.

Als het inloggen succesvol blijkt dan kan je gewoon op Onthouden klikken. En anders klik je op Nooit voor deze website of Niet nu natuurlijk. Eenvoudig maar duidelijk én gebruiksvriendelijk.

Laten dat nu net twee begrippen zijn die Safari hoog in het vaandel draagt.

Categorieën: Opinies, Webomgeving,

0 reacties

Waarschuw je Internet Explorer 6 gebruikers

Een groeiend aantal drukbezochte Noorse websites raadt sinds kort alle Internet Explorer 6 gebruikers aan te upgraden naar een moderne browser. Ze doen dat via een duidelijke waarschuwing die enkel die — weliswaar slinkende — groep gebruikers treft.

Now we’re talking! Internet Explorer 6 kwam op de markt in augustus 2001. In internettermen is dat een eeuwigheid geleden. De browser is hopeloos verouderd, maakt gebruikers kwetsbaar voor allerhande digitale rotzooi en neemt een serieus loopje met webstandaarden. Het web zonder IE6 zou om vele redenen een betere plaats zijn.

Vandaar een oproep aan mijn collega webdesigners: laat ons de Belgische Internet Explorer 6 gebruikers van hetzelfde laken een pak geven via een upgradeboodschap op zoveel mogelijk Belgische websites. Upgraden naar een nieuwere versie van hun browser kunnen ze gratis en ze hebben er alleen maar gewin mee.

Code voor een upgradeboodschap

Hoe toon je een boodschap enkel aan gebruikers van IE6 of lager? Het kan eenvoudig via een zogenaamde conditional comment. Alles wat tussen de code in vierkante haken staat is alleen voor het oog van die surfers zichtbaar:

Zoals je ziet werd het blokje code in een div geplaatst en daardoor is het makkelijk vorm te geven via css.

Verspreid de boodschap!

Hoe meer sites zo’n boodschap laten zien hoe hoger het effect natuurlijk. Dus bloggers start het bloggen, twitteraars start het twitteren en ontwikkelaars start het coderen. Via Wolfr’s oorspronkelijke Goodbye IE6 blogpost kwamen we te weten dat webdesigners en/of bloggers Netlash, Lensco.be, Audience, MouseOver, Norio, Cubus en Ardville alvast meedoen. Hopelijk breidt de lijst snel uit. Laat zeker iets weten als je mee doet!

En euh… ben je zelf één van die 20% surfende Belgen die in een hoekje achter een kamerplant wel eens durft te surfen met een archaïsche browser uit het stenen internettijdperk? Dan weet je wat je te doen staat: hier is de link met upgradeinformatie. Of je kan natuurlijk één van de vele gratis en uitstekende alternatieven uitproberen.

Categorieën: Opinies, Webomgeving,

5 reacties