BlogmyQuery – BMQ

One of the useful things in HTML5 is the placeholder attribute that lets you specify a short hint for text input fields (textarea elements and the text states of the input element). In browsers that implement placeholder according to the specification, the hint text is displayed only when the field is empty and unfocused.

This is good since it gives you an opportunity to provide the user with hints regarding what they are expected to enter in the field. What is not good is that the placeholder attribute is often used as a substitute for the label element. I’ve seen this in various demos of the placeholder attribute as well as in demos for scripts that emulate the placeholder attribute in browsers that don’t natively support it. So some developers appear to misunderstand what the placeholder attribute is meant for and how it works.

Read full post

Posted in Accessibility, HTML 5, Quick Tips, Usability.

Copyright © Roger Johansson

The other day Rachel Andrew posted Stop solving problems you don’t yet have, where she brings up an increasingly common problem with front-end development – unnecessary bloat.

I agree completely. Too many people include too much by default in their web projects these days. Boilerplates, polyfills, shivs, crazy conditional comments, rare or uneccesary meta elements, and so on.

Read full post

Posted in CSS, Coding, JavaScript.

Copyright © Roger Johansson

Recently a coworker pointed me to an article explaining Why your ‘Skip to Content’ link might not work in WebKit-based browsers like Safari and Chrome. Read the article for details or read my post from September 2005 about Keyboard navigation problems in IE and Safari for a briefer explanation.

In summary: following an in page link (a link that targets an element on the same page, like <a href="#main">Skip to main content</a>) does not properly move keyboard focus in WebKit browsers. This means that when you press tab after activating an in page link, focus is moved to the first focusable element after the link rather than the first focusable element after the target.

Read full post

Posted in Accessibility, Browsers.

Copyright © Roger Johansson

I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.

It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

Read full post

Posted in JavaScript, Usability.

Copyright © Roger Johansson