Mailchimp, een grote verzender van e-mail nieuwsbrieven kondigde vandaag aan voortaan media queries te ondersteunen. Zoals eerder besproken kunnen media queries worden gebruikt om de layout van websites aan te passen aan verschillende apparaten. Ditzelfde werkt voor HTML e-mail. Met deze mogelijkheid wordt het dus beter mogelijk e-mail geoptimaliseerd voor iPhones en Android-toestellen te verzenden, zonder de layout van de desktopversie te verliezen. Lees meer op het weblog van Mailchimp.
YouTube maakte afgelopen week bekend hoeveel video’s er inmiddels worden geplaatst: Elke seconde wordt nu een uur aan video ge-upload! Om dit te vieren maakten ze een prachtige website, die in animaties verteld hoeveel er in die tijd kan gebeuren: One Hour Per Second.
Geschreven door Joost van der Borg in de categorie: Webdesign
Ben je klant bij de ING dan kun je vanaf vandaag gebruikmaken van een mobiele versie van iDeal.
De mobiele versie van het betaalsysteem is aangepast aan smartphones door de knoppen groter te maken en het scherm anders in te delen.
Om gebruik te maken van iDeal hoeven zowel klanten als webwinkels niets te veranderen. Het systeem werkt hetzelfde als de volledige versie en de mobiele versie verschijnt automatisch als een betaling uitgevoerd wordt via een smartphone of ipad.
Volgens ING speelt de bank met iDeal Mobiel in op de behoefte van klanten. Directeur Michael Koutstaal: “Consumenten willen met hun mobiele telefoon betalingen doen. Onze app is binnen een maand bijvoorbeeld al meer dan 400.000 keer gedownload.”
Ook hadden webwinkels de wens een mobiele versie van iDeal te kunnen gebruiken, geuit tegenover ING.
Rabobank
De Rabobank presenteerde eind november nog een onderzoek waaruit bleek dat een testpanel erg positief reageerde op iDeal Mobiel. Wanneer de Rabobank en andere banken het mobiele betaalsysteem gaan gebruiken, is niet bekend.
Mobiel toegankelijk site
Bekend is dat steeds meer sites mobiel bezocht worden. Is je site nog niet mobiel toegankelijk, kijk dan eens op onze site voor de mogelijkheden of neem meteen contact met ons op. http://flyers.nl/site/webdesign/mobiel-webdesign/
Natuurlijk kunnen we je ook informeren over een succesvolle webwinkel.
Google kondigde afgelopen woensdag aan dat Google Maps niet langer gratis in alle sites ingebouwd kan worden. Het gebruik van Google Maps via de API op allerlei sites is de afgelopen jaren enorm toegenomen. Ook wij gebruiken op veel van de door ons gebouwde websites kaarten en routeplanners via Google Maps. De meeste MKB-sites zullen gelukkig zonder problemen gebruik kunnen blijven van deze kaarten, gezien de gestelde limieten:
Voor sites die minder dan 25.000 keer per dag Google Maps tonen blijft gebruik gratis
Hierboven betaal je $4,- per 1.000 weergaves
Voor grootverbruikers zijn speciale tarieven af te spreken
Hoewel voor veel gebruikers dus weinig zal veranderen, heeft dit ook op non-profit sites met (plotseling) veel gebruikers mogelijk grote impact. Gebruik van alternatieve bronnen als OpenStreetMap.org kan dan mogelijk uitkomst bieden.
Geschreven door Joost van der Borg in de categorie: Webdesign
Het wordt steeds meer noodzakelijk bij elke site rekening te houden met het feit dat ze bekeken worden op andere apparaten dan de huis-tuin-en-keuken computer. Mobiel is inmiddels duidelijk een factor van belang. Nu.nl heeft afgelopen maand bijvoorbeeld meer mobiele bezoekers gehad dan via vaste verbindingen. Er zijn verschillende strategieën mogelijk om hiermee om te gaan.
Met zijn artikel “Responsive Web Design” op A List Apart startte Ethan Marcotte een nieuwe manier van webontwikkeling. Dit zette hij door met het het bijbehorende boek. De steeds grotere diversiteit in schermgroottes en gebruik van websites noodzaakt een betere manier om sites te ontwikkelen. Pagina’s die alleen op 1024×768, of 1280×1024 goed te bekijken zijn werken niet op iPads, Android-telefoons of grote tv-schermen. Door gebruik te maken van een paar relatief eenvoudige technieken kan een site geschikt gemaakt worden voor al deze schermen.
Hiermee verdwijnt in veel gevallen de noodzaak gebruik te maken van bijvoorbeeld sites specifiek voor mobiele telefoons. Dit neemt een aantal nadelen weg, zoals het onderhoud aan verschillende sites met dezelfde inhoud. Een verkeerd geïmplementeerde site maakt het onmogelijk de juiste pagina te vinden met een mobiel apparaat via de ‘normale link’. Vaak verwijzen sites naar de homepage van de mobiele versie, of redirecten ze naar een verkeerde pagina. Door slechts 1 pagina te gebruiken, met dezelfde HTML, dezelfde CSS en hetzelfde achterliggende CMS, kunnen dit soort fouten niet meer voorkomen.
Recent werd met medewerking van Marcotte de nieuwe site van de Boston Globe gelanceerd: een grote nieuwssite die perfect bruikbaar is op schermen van 27 tot 3 inch. Hiermee heeft de techniek bewezen geschikt te zijn voor sites van elk formaat.
Een ander voorbeeld van een op deze manier ontwikkelde site is het recent door ons opgeleverde huidtherapievievermans.nl. De header bovenaan de pagina wordt minder hoog op kleinere schermen. Het menu krijgt op mobiele telefoons hogere knoppen, zodat deze makkelijker aan te tikken zijn op touchscreens. Ook wordt het submenu op iPhones en android-toestellen onder de inhoud van de pagina geplaatst, zodat deze inhoud niet verborgen zit onder 4 schermen met menu, maar direct te zien is. Omdat dezelfde pagina wordt geladen op alle apparaten hoeven aanpassingen ook maar op een plaats te worden gedaan. Deze techniek zal door ons in de toekomst steeds meer worden toegepast.
Geschreven door Joost van der Borg in de categorie: Webdesign
Dat het gebruik van Flash minder populair is na de opkomst van mobiele apparaten (met name de iPhone en iPad) die hier geen ondersteuning voor bieden is inmiddels duidelijk. Flickr.com, de populaire foto-deel-site, heeft enige tijd geleden ook haar slideshows aangepast zodat ze in HTML werken. Dit was voor hen echter niet genoeg, op de iPad werkten deze wel, maar niet zoals op dit apparaat gebruikelijk (bladeren door van foto naar foto te ‘vegen’). Daarom hebben ze een nieuwe HTML-variant van de slideshows gemaakt, waarmee dit wel mogelijk is. Op iPads kun je nu fullscreen bladeren, en zoals in de Photos-app van Apple zelf van foto naar foto vegen. Hoewel het niet altijd mogelijk is voor elk apparaat specifiek te programmeren, is het een goed idee rekening te houden met de verwachtingen die mensen hebben van het apparaat waarmee ze werken. Lees meer over de oplossing van Flickr op hun blog.
Geschreven door Joost van der Borg in de categorie: Webdesign
De makers van A List Apart geven sinds korte tijd ook boeken uit. Deze boeken zijn gericht op webdesigners, en worden gekenmerkt door de beperkte lengte (het eerste boek is 85 pagina’s lang). Ze zijn geschreven door experts op hun gebied, het eerste boek “HTML5 for Web Designers” is geschreven door Jeremy Keith. Inmiddels zijn er nog twee boeken bij gekomen: CSS3 for Web Designers (door Dan Cederholm) en The Elements of Content Strategy (door Erin Kissane). Van het nieuwste boek is een klein stuk te lezen: “A Checklist for content work“.
Eerder bespraken we nieuwe input-types in HTML5 en hoe je placeholders voor tekst toevoegt. Daarnaast is in de specificatie ook voorzien in de mogelijkheid formulieren te laten valideren door de browser.
Om deze mogelijkheid aan te zetten hoef je niets te doen, de nieuwe input-types kunnen automatisch worden gecontroleerd. Zo zal een <input type="email"> vanzelf worden gecontroleerd als e-mail adres (waarin de + gewoon geldig is, backend-programmeurs van Nederland!). Als gebruik wordt gemaakt van een <input type="number"> met een max-waarde zal een hogere waarde vanzelf worden afgekeurd.
Helaas, op deze mogelijkheden kunnen we nog niet vertrouwen: Opera heeft een deel van deze validatie ingebouwd, en geeft netjes aan wat er mis is. Safari valideert wel, maar geeft geen enkele feedback. Het wordt simpelweg onmogelijk een formulier te submitten met ongeldige waarden. Vanaf Firefox 4 zal deze browser support hebben voor deze vorm van validatie, hoe goed deze zal zijn is mij nog onbekend. Overigens: Het zal nooit mogelijk zijn op browservalidatie alleen te vertrouwen, goede server-side validatie blijft onmisbaar, maar op termijn kunnen javascript-oplossingen achterwege worden gelaten.
Een laatste tip: Wil je géén validatie op een bepaalde input? Geef dan het attribuut novalidate mee. Het hele formulier niet valideren, geef dan <form novalidate> mee. Heb je meer handige formulier-validatietips? Ik hoor het graag.
Geschreven door Joost van der Borg in de categorie: Webdesign
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
Mailchimp, een grote verzender van e-mail nieuwsbrieven kondigde vandaag aan voortaan media queries te ondersteunen. Zoals eerder besproken kunnen media queries worden gebruikt om de layout van websites aan te passen aan verschillende apparaten. Ditzelfde werkt voor HTML e-mail. Met deze mogelijkheid wordt het dus beter mogelijk e-mail geoptimaliseerd voor iPhones en Android-toestellen te verzenden, zonder de layout van de desktopversie te verliezen. Lees meer op het weblog van Mailchimp.
Het wordt steeds meer noodzakelijk bij elke site rekening te houden met het feit dat ze bekeken worden op andere apparaten dan de huis-tuin-en-keuken computer. Mobiel is inmiddels duidelijk een factor van belang. Nu.nl heeft afgelopen maand bijvoorbeeld meer mobiele bezoekers gehad dan via vaste verbindingen. Er zijn verschillende strategieën mogelijk om hiermee om te gaan.
(foto: Daniel Bogan)
