Eerder besprak ik de toevoeging van verschillende input-types in HTML5. Een andere nuttige uitbreiding op het <input>-element is het placeholder-attribuut. Hiermee kun je eenvoudig een tijdelijke tekst in een input-veld plaatsen om aan te geven wat je hier verwacht. In browsers die dit ondersteunen wordt de tekst weergegeven (lichter dan echte content) tot het veld de focus krijgt. Als het element leegblijft, of opnieuw leeg is komt de placeholder-tekst terug. In safari ziet dit er zo uit:
Het placeholder-attribuut wordt momenteel ondersteunt in Safari, Chrome, Opera en binnenkort ook in Firefox. Internet Explorer heeft helaas nog geen ondersteuning. Browsers die het attribuut niet begrijpen negeren het gewoon, dus het kan zonder risico worden gebruikt. Is de placeholder essentieel, dan kan gebruik worden gemaakt van technieken om het gedrag hiervan te kopiëren. Ik heb vaak gebruik gemaakt van de techniek die wordt besproken in ‘Making compact forms more accessible’ op A List Apart. Ook zijn er vele jQuery-plugins voor placeholders te vinden, die in sommige gevallen de content van het placeholder-attribuut gebruiken om een ‘nep’-placeholder te plaatsen.
Het is met dit attribuut een kleine moeite geworden een extra hint te geven aan de gebruiker van je formulieren. Als je goede voorbeelden van het gebruik van deze techniek ‘in het wild’ kent, hoor ik er graag van.
Geschreven door Joost van der Borg in de categorie: Webdesign
Eén van de nu al bruikbare toevoegingen aan HTML5 is een uitbreiding aan de input-types die beschikbaar zijn in formulieren. Uiteindelijk is het de bedoeling dat hierdoor browsers slimmer kunnen omgaan met gegeven informatie. Zo wordt bijvoorbeeld formulier-validatie zonder javascript mogelijk. Een paar handige input-types die nu het gebruik van mobiele browsers gemakkelijker maken zijn de volgende: <input type="tel" name="telefoon" >
Hiermee geef je aan dat als invoer een telefoonnummer verwacht wordt. Als je dit element gaat invullen op bijvoorbeeld een iPhone, krijg je een numeriek keypad in plaats van het uitgebreide keyboard. Zo is het invoeren van een telefoonnummer een stuk gemakkelijker. Dit ziet er ongeveer uit zoals in de afbeelding. Hetzelfde geldt voor ‘number’, waarmee je een numerieke waarde kunt ingeven: <input type="number" name="leeftijd" >
Met de volgende krijg je een aangepast keyboard voor e-mail en website-adressen: <input type="url" name="siteadres" > <input type="email" name="email" >
Ook zijn er input-types voor datums, tijden en zoekvelden. De hele lijst is in de specificatie te vinden. Browsers die deze types niet ondersteunen interpreteren het gewoon als type ‘text’, en zullen zonder problemen de juiste waarden doorgeven.
Geschreven door Joost van der Borg in de categorie: Algemeen, Webdesign
Het lijkt een trend te zijn: Sites die niet krampachtig proberen geen content onder ‘the fold’ te zetten, maar het (verticaal) scrollen omarmen en onderdeel van de site maken. Enige tijd geleden kwam de teaser-site voor ‘Ben the Bodyguard‘ uit, een (nog niet gelanceerde) iPhone app. Al naar beneden scrollende vertelt Ben over de gevaren van niet-beschermde data, terwijl het scrollen van de gebruiker kleine animaties activeert.
Een paar dagen terug kwam Nike met ‘Nike Better World‘, waarin het van Silverback bekende parallax-effect verticaal wordt toegepast, waardoor deze site ook een andere ervaring wordt dan anders gedacht. Ook mooi om de overgangen tussen de verschillende secties te zien, en hoe de verticale navigatie wordt weergegeven aan de rechterkant.
Vandaag kwam ik ‘A guide to the open internet‘ tegen, een site die wel heel duidelijk maakt wat er (onder andere) op het spel staat als het gaat over Net Neutrality. Hier wordt de verticale scroll gebruikt om het punt te maken, en zoals bij Ben the Bodyguard wordt de positie van de gebruiker in de site gebruikt om toelichtingen te plaatsen.
Tot slot net wat anders, een manier om een stripverhaal weer te geven, zonder verschillende pagina’s te gebruiken. Het eerste deel van ‘the Wormworld Saga‘ is een door Daniel Lieske in zijn vrije tijd geschreven strip/graphic novel, waarin de verticale scroll ook niet bepaald geschuwd wordt.
Geschreven door Joost van der Borg in de categorie: Algemeen
