ZOMDir > BlogNL

maandag 30 maart 2015

Doe de noscript tag in de ban

Laatst kwam ik er achter dat Wave een Alert geeft als er een <noscript> tag wordt gebruikt.

Dat verbaasde me enigszins. Ik had nog steeds in mijn hoofd dat dat gewoon nette code was.

Wave stelt echter:
A <noscript> element is present. Content within <noscript> is presented if JavaScript is disabled. Because nearly all users (including users of screen readers and other assistive technologies) have JavaScript enabled, <noscript> cannot be used to provide an accessible version of inaccessible scripted content.

Sterker nog, het gebruik van de
<noscript> tag zou eigenlijk helemaal niet nodig moeten zijn als je website opgezet is volgens Progressive enhancement. Het idee is dat je dan uitgaat van de meest simpele webpagina welke door alle oude browsers correct kan worden getoond. Vervolgens voeg je hier extra's aan toe zonder de basisfunctionaliteit in gevaar te brengen.

Het World Wide Web Consortium stelt zelfs dat het lomp is om de
<noscript> tag te gebruiken.
The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly.

Het is dus beter om met Javascript de pseudo noscript code te verwijderen, dan een <noscript> tag te gebruiken. Bijvoorbeeld aan de hand van onderstaande code:

<span id="noscript">The basic functionality you want to offer...</span>
<script type="text/javascript">
/* Remove the <noscript> code */
var noscript = document.getElementById('noscript');
noscript.parentNode.removeChild(noscript);

/* Your enhanced code, to give a better user experience */
/* ... */
/* ... */
</script>


Zie ook het voorbeeld "Noscript without <noscript>".

Weer wat geleerd.

Nog een leerpuntje is dat spammers in het verleden misbruik maakten van de <noscript> tag. Google negeert dan wel wantrouwt noscript code. Nog een argument dus om de <noscript> tag niet meer te gebruiken.

Groeten,
Hans
--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

maandag 23 maart 2015

Onleesbare webpagina's toch lezen

Een van de subprojecten waar ik in in het kader van het ZOMDir project aan heb gewerkt was de Setextbrowser. Dit omdat ik voor ogen had het toevoegen van een nieuwe link zo eenvoudig mogelijk moest zijn.  In principe zou één invoerveld, voor het adres van de link, genoeg moeten zijn.

Na het opgeven van een nieuwe link zou dan automatisch de ankertekst en de tooltip tekst van de link moeten worden bepaalt op basis van respectievelijk de title en de description van de te linken webpagina.

Een groot probleem was indertijd dat ik geen idee hoe ik de tekst van een webpagina moest lezen, hetgeen reden genoeg was om de Setextbrowser te maken. Het idee daarvan was simpel:

Lees een webpagina in en toon deze vervolgens in het Setext formaat.


Onleesbare webpagina's toch lezen

In de praktijk niet alleen een leuke vingeroefening. Het is nog verdomde handig ook. Zo gebruik ik de Setextbrowser als:
  • ik een hele slechte draadloze internet verbinding heb (de Setextbrowser reduceert het aantal bytes dat moet worden opgehaald aanzienlijk);
  • de site die ik wil lezen slecht te lezen is (weinig contrast, veel reclame, blokkerend javascript, niet geschikt voor mobiel...);
  • mijn werkgever, in mijn ogen ten onrechte, een website heeft geblokkeerd en ik meen deze toch te moeten lezen voor mijn werk.
Recent, met dank aan Jules Ernst, heb ik de Setextbrowser ook min of meer geschikt gemaakt voor het raadplegen van tabellen. 

Dus kom je een keer een niet lekker werkende website tegen, bekijk hem eens met de Setextbrowser. Wellicht kan je dan wel lezen wat er staat.

Gegroet,
Hans

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

zondag 15 maart 2015

15000 links

Leuk. 15-3 (15 met drie nullen) staan er 15000 links op ZOMDir.



--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare

maandag 9 maart 2015

Browsersize at a Glance

Gedurende het ZOMDir project liepen er meerdere subproject(jes). 

Eén daarvan is Browsersize at a Glance. In feite een hele simpele website die aangeeft hoeveel ruimte er beschikbaar is voor een webpagina. Dat is handig om een idee te krijgen waar je voor responsive website designs eventueel een breekpunt moet plaatsen.

Beperk het aantal breekpunten

In de praktijk wil je zo min mogelijk breekpunten. Immers elk breekpunt erbij, betekend een extra ontwerp voor je website. Voor de websites behorende bij ZOMDir worden er meestal 3 en soms 4 ontwerpen gemaakt (bij voorkeur zo minimalistisch mogelijk). 

De praktijk leerde mij dat minimaal een ontwerp moet worden gemaakt voor:
  • Computer schermen smaller dan 730 pixels;
  • Computer schermen breder dan 730 pixels
  • De printpagina

Tip: Mocht je een website willen laten ontwerpen. Vraag dan altijd om de drie bovenstaande ontwerpen in plaats van één ontwerp. 

De keuze van 730 als breekpunt is enigszins arbitrair al vond ik het wel handig dat deze ergens ligt tussen de breedte van een smartphone en die van een tablet.

Een iPhone 4S (portrait mode) is 320 pixels breed. Een iPad (landscape) is 768 pixels breed. Op mydevice.io/devices kan je van allerlei andere apparaten de breedte terugvinden.

Tot slot. Als je je afvraagt waar een vierde ontwerp goed voor is. Dat is vaak voor de televisie, of voor hele smalle schermpjes zoals dat van de Nintendo DSi.

Succes maar weer met je website,
Hans

N.B. Browsersize at a Glance maakt gebruik van Javascript en is daarmee één van de weinige websites van ZOMDir die echt niet zonder Javascript kunnen.

--
ZOMDir.com is een startpagina en een Wiki
Ook jij voegt in 10 seconden een link toe
Voor meer informatie, ga naar Slideshare