Roger Johansson lives in Sweden, where he currently works as a web developer at NetRelations, a web agency in Göteborg, Sweden. He is passionate about web standards, accessibility, and usability.
Roger is best known for his personal site - 456 Berea Street - where he writes about... you guessed it... web standards, accessibility and usability.
- 1. How long have you been a web developer and when did you get the web standards bug?
Roger: I did my first dabblings with HTML in 1994, when Mosaic was new and hot, but it wasn't until 1996 that I started working seriously with web development. At the time, I was more into the "design" side of web design. Like most, I was all too guilty of abusing HTML for presentational purposes. Semantics and validity were not considered, just the visual results.
When Internet Explorer started gaining market share, taking over Netscape as the majority browser, I came across more and more websites that I couldn't use. Or rather, I was not allowed to use them, because the owners and/or developers of those sites didn't want me there.
Why? I'm a Mac user, which means anything that relies on Internet Explorer for Windows is out of reach for me. Clueless web developers made sure I was met by broken browser sniffing and rude messages on many sites. That's when I realised that web development has to be based on common standards, not the latest proprietary extensions introduced by any single browser vendor.
This was around 1998. I started trying to educate the people I was working with at the time about "web standards", even though the term was unkown to me back then. Then the Web Standards Project launched and made it all much clearer.
A couple of years later, Zeldman's article "To Hell With Bad Browsers" and the WaSP browser upgrade campaign came along, and put into words what I felt about the current state of the web. That made it a lot easier to argue for web standards, even though many web designers and developers were still very hard to convince.
Since many clients still required that their sites looked more or less identical in all browsers, even ancient ones like Netscape 4 and IE 4, I actually continued to use tables for layout a while, but strived to at least use valid HTML. But around two years ago, I finally ditched the layout tables and went all CSS.
- 2. 456 Berea Street was launched on March 23 2003. Did you have any idea how successful it was going to be?
Roger: No way. Not that I knew what to expect, really. It took a while for things to take off, and it wasn't until I published the English version of "Developing with web standards" that I started getting any kind of serious traffic (by my standards).
One of the goals I had with the site was to have a kind of remote bookmark storage for my own benefit, something I still use it for. After some time I started writing more original content, but I didn't know if anyone was going to be interested in what I was writing about.
- 3. You wrote "Developing with Web standards" in March 2004. It's an amazingly detailed article - almost a book. Did it take long to develop?
Roger: It took quite a while, yeah. I spent a lot of time researching, writing, and rewriting it, and it just kept growing. It was not meant to be that detailed at first, but it kind of decided that on its own. I'd say it took five or six weeks of evenings and weekends to write it. One of the reasons I had for writing the article was to make this information more readily available for Swedish web developers. In my daily work, these are the people I need to communicate with, and though most Swedes understand English very well, many find it easier to read things in Swedish. Because most information related to web standards is in English, I decided to write the original version of the article in Swedish.
A few weeks later I translated the article into English, and new translations are being added continuously. I think it's great that people are willing to take the time to translate a document that large.
- 4. You seem to be slightly obsessed with round corners, with articles like "Rounded corners", "CSS Teaser box", "CSS Teaser box revisited", "News list" and "Flexible box with custom corners and borders". Can you explain this obsession?
Roger: I was kind of expecting that question. It's not me, actually. I'll have to blame my coworkers here, especially Tobias Nilsson, a very talented designer who comes up with these great design comps which use a lot of rounded corners.
Instead of telling him to rework the designs, I decided to use CSS to create the look he wanted as efficiently as possible. When I felt the techniques were working, I wanted to document them as a reminder to myself and to share them with others, giving something back to the community.
- 5. "Web development mistakes" is a very handy list for developers. How did the idea come about?
Roger: One way of judging the quality of a site is to take a peek under the hood, and see what the HTML looks like. I like to do that a lot, especially if I'm visiting the site of a competitor or a prospective client, or a site that seems broken in one way or another. More often than not, what I see is a complete mess, even on sites built by professional web developers who really ought to know better.
So I had this idea that I'd write about the mistakes I encountered most often. It ended up being a pretty long list, and caused an interesting discussion in the comments on my site.
- 6. Let's talk ampersands and validation. They look so small and insignificant. Do they really need encoding?
Roger: Well, if we don't consider the fact that encoding them is required in order for a document to validate, I'd still say yes. Sure, most of the time nothing breaks and all is well, but let's consider the most common place to find unencoded ampersands: URL query strings.
Many developers and publishing systems use query strings to send variables from one document to another within a website, and the ampersand is the most widely used query string separator. The problem is that the ampersand is also used in HTML and XHTML to start a character entity. If a query string contains an unencoded ampersand which is followed by a sequence of characters that resemble a character entity, browsers will convert the ampersand and those characters to the character represented by the entity. That will obviously break the query string, and can make things stop working. Having been bitten by this bug myself, I make sure any ampersands under my control are properly encoded.
- 7. When developing new sites, what Doctype and MIME type do you generally use and why?
Roger: This is a somewhat controversial subject these days. There is an ongoing argument about the use of XHTML with a "text/html" MIME type, with some people (including the W3C) stating that it's OK for "HTML compatible XHTML 1.0), while others say it is bad practice. Being aware of the issues involved, I use the XHTML 1.0 Strict Doctype for all new sites. Depending on the publishing system, I either use the "text/html" MIME type for all user agents, or use "application/xhtml+xml" for the browsers that can handle it and "text/html" for the rest. In some cases, like on my personal site, I also convert the XHTML to HTML 4.01 Strict before sending it as "text/html".
Which way I choose to go depends on how confident I am that no invalid XHTML will be created by the publishing system. When you use "application/xhtml+xml", documents must be fully well-formed, or browsers that support that MIME type will refuse to display them.
- 8. You have spent a great deal of time researching form controls. Is it safe to style them, and do browsers render them with any consistency?
Roger: If I look at this from a usability point of view, I'd say leave the form controls to the browser. That way people visiting the site will immediately recognise form controls as such.
Some light styling can be OK though — a touch of background colour for text inputs and maybe setting a different font face.
And no, browsers do not render form controls consistently, and there is nothing you can do about it. Sorry. Some browsers, especially Apple's Safari, accept very little styling of form controls. For the sake of usability, accessibility, and your own sanity, just accept that form controls will look different in different browsers.
- 9. Your article "Bring on the Tables" is very clear and easy to follow. You mention some of the less known attributes like scope, as well as touching on elements like colgroup and col. How well are these three supported by the more recent browsers/devices, in your experience?
Roger: Many of the lesser-known elements and attributes that I mention in that article are accessibility features, and won't be visible to people using a graphical browser. They won't get in the way, either, so there's no reason not to use them.
The scope attribute is not yet supported by all assistive technology, but it's getting better.
Colgroup and col are pretty well supported HTML-wise in modern browsers, but when it comes to styling columns with CSS, there are some browser variations. Note that the only CSS properties that can be applied to columns are border, background, width and visibility.
- 10. You've covered web standards, round corners, form controls and tables. What's next?
Roger: Ha! Did you think I was going to reveal that? Seriously though, I'm not sure. I have a few ideas lying around, and I've started working on a couple of articles. When the time comes, I'll let you know.
- Thank you, Roger for the interview
- Roger: Thanks for asking me!