Joe Dolson: Accessible Web Design

This new book from Packt Publishing & Nirav Mehta is a quick and effective introduction to developing websites specifically targeted at mobile device users. I say “users” for a reason — - one of the strongest advantages to the book is a strong focus on considering your user and their needs as a key element of mobile web development.

My overall reaction to this book was positive. It covers a wide variety of key issues for mobile web programming in an easily understood manner. The book is targeted primarily at developers who already have some experience at web development and design, so it doesn’t delve into any serious detail when it comes to server-side programming or HTML coding, but instead makes a point of emphasizing places where the mobile web is different from internet interaction on a desktop device.

Mehta goes out of his way on many occasions to emphasize the serious importance of considering who (and what!) will be using your mobile web application.

“Any website accessed from a mobile device is mobile web — - whether it’s been tailored to work on a mobile or not!” Mobile Web Development, Nirav Mehta, page 10

The book covers a wide range of issues — - from developing for mobile devices using a “lowest common denominator” plan to implementing highly dynamic mobile applications which adapt automatically to the device currently in use. The text is easy to understand and follows a logical progression, starting with the mobile web development practices which are most similar to the development of standard web applications before moving into the areas which are very specifically targeted towards mobile devices.

This isn’t to say that the book doesn’t have a few flaws. I identified three areas where I really would have liked to seen better work.

Editing

In general, the copy editing on this text was pretty poor. The editing improved as I got further into the book (or I became more oblivious to it), but the introductory chapters had a lot of problems. There weren’t a lot of typos — - but the grammar was noticeably lacking. The book is rife with sentences like this:

“We will need a recharge of patience if we wanted to watch a movie preview on low speed mobile networks.”

I’m not a member of the grammar police, but I’m certainly sympathetic. Professionally published books simply shouldn’t contain the kinds of errors found in this book.

Code Examples

The author talks about following web standards as a critical element of mobile web development. That’s great. It is, however, a serious pet peeve of mine to see code examples which don’t reflect the text of the book. The very first code example in the book is this:

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">

The text preceding it states “Here’s how you can add an alternative stylesheet link in your XHTML page.” I see a problem here. Yes, the author does explain at a later point in the book that all XHTML elements must be closed: but it’s a simple fact of life that most people referencing this book will be far more likely to simply reference the code as is. This is simply a mistake; but it’s not one that should have made it through a review of the book.

I’ll admit that I haven’t gone through and checked the validation of every code example. Most of them seemed solid and accurate. There are definitely examples which wouldn’t be valid under the XHTML DocType, but I’m not adept enough with XHTML-MP to know off-hand if the same is true within the mobile profile DocType.

Appendices

Simply put, there aren’t any. There were numerous points in the book where I thought to myself that an appendix would be great. A list of resources cited by topic, a section summarizing the syntax of VXML, tables showing the differences between XHTML and XHTML-MP or between CSS and WCSS. These kinds of resources would have been tremendous benefits to the overall reference value of the text.

Overall

This is a worthwhile book. Even though I wouldn’t recommend trusting the code examples, the truth is that you should never simply take code examples as written — - you learn best by taking an example and re-purposing it for your own needs. Mobile Web Development will introduce you to the key issues for mobile web programming and design in a manner which can give you a quick start on mobile web application development.

I’ve just had an article published at Accessites, the accessible design showcase where I’m also a site reviewer. The subject is about mobile design: what kinds of complexities you can encounter when attempting to design a site with wide-ranging mobile compatibility. I’m also dealing with accessibility — there are numerous areas where mobile development and accessible design overlap, and it can help your development process to keep these ideas in mind.

Accessites doesn’t support comments, so after you give the article a read, feel free to discuss here!

Other Links: Mobile Phones Review, Compare & buy the latest mobile phones

Looking over my site statistics the today I noticed a few referrals from a site called Search and Go. Having never heard of the site, I figured I’d check it out and see what was up. Well, turns out it’s a project which is still in beta development which intends to provide a comprehensive information portal including articles, news, a directory, and various other tools.

One of the key aspects for Search and Go (as one might conclude from the title) is that it’s intended to be fully accessible by mobile internet devices, and also has a featured directory section of sites tailored for mobile devices.

Looking at their code, I’m pretty happy - they are using very clean, semantically appropriate design. Since it’s still in beta, and the front page is clearly labeled as a work in progress, I’m not going to go out of my way to criticize the site’s layout, although I’d suggest making their navigational skip links a little more transparent. That is, possible to be made visible. There’s a very interesting article on the subject of skip links by Gez Lemon and Mike Cherim available at Accessites.org which is worth looking at on this subject.

As for my own site, I was thrilled to see it organized under the category Internet > Web Accessibility > Accessible Designers. The sheer novelty of the existence of this category is worth noting, since many directory sites take so little effort to consider accessibility as to lack a category for it entirely.

Good luck, Search and Go!

Related Link: 220-603 220-603 Certification Practice Exam Test Questions

I’ve been thinking about the mobile web today. Accessible web design is all about providing access to web-based information to all users and platforms - and the mobile web is a fast-growing and very challenging area.

The biggest challenge with mobile web design is the fact that you just can’t test it very easily. There are dozens of mobile browsers and related products.

Opera has supplied options to test for small screens in their browser for quite some time, but that only provides testing for Opera’s interpretations. Every web enabled phone provides a browser of some sort - many of them have created their own browsers. Some use obscure custom browsers.

And Google has now announced their own lightweight mobile interpreter for pages accessed through a search from a mobile phone. This is all wonderful, but it’s a herculean task to test for all of these options (not to mention all of the phone charges and extra handhelds one would need to acquire!).

All of these services have their own interpretation of web standards (or non-interpretation, as the case may be). Support for HTML, CSS, and handheld specific style sheets is very spotty. However, a well-constructed page will usually degrade gracefully in a mobile browser. Not always, of course, but there are certainly things you can do which will help.

• Use proportional widths.

  Handheld browsers usually have very small screens - the largest screen I know of is on the Hiptop from Danger, measuring in at a massive 240 pixels. Nobody likes side-scrolling! If you use a proportional width you can avoid this problem.

• Place your page elements in a logical order.

  Which comes first, the content or the navigation? Neither is a great solution - if your visitor is going to an article, they want content. If they’re looking for an article, they want navigation. You’ll have to make a choice - but I feel this is where internal page navigation is a must. Provide just a few links to navigate around the page - Skip to Navigation, Skip to Content, perhaps even a dynamic link to visit the most recent article published! These can go at the very top of the page, allowing you to organize your page as you need. I still am inclined to recommend that content comes before main navigation, however.

• Follow web standards

  Despite the fact that support for standards is not good amongst handheld browsers, you should always strive for standards. Unless you have a tremendous development budget which can support redevelopment of your mobile interface everytime a new browser comes out, you need to plan for the future. It is a better bet that the future of handheld browsers will tend towads standards than not.

This is a minuscule part of what you can do to improve your mobile web presence - Cameron Moll is writing a four-part series which provides detailed and extensive tips for mobile web design.