Unintentionally Blank

I am a big fan of the mobile web, having just upgraded to Opera Mini 4 and been recently quoted in a Read/Write Web article on mobile web apps praising Google Maps for Mobile (yeah, that Phil is me, shame they didn’t send me any link love!).

I am actually a big user of both Google’s Gmail for Mobile as well as Maps for Mobile and was delighted to hear on the official Google blog that there has been not only an update to Maps for Mobile, but a new Google Mobile Blog. While I have subscribed to the mobile blog to keep up with updates to the two programs I mention above, as well as Android, the new version of Maps had me most excited.

GPS Without GPS

The newest feature of Maps, besides seemingly working quicker and with a nicer interface, is the My Location feature, a way to tell approximately where you are using mobile tower identification. It’s not quite GPS, but for anyone without it, it adds a whole lot more to your phone, without costing you anything extra. If you want to find out more about My Location, read the post and watch the video on the Google Mobile Blog.

The One Problem With My Location…

…is that my phone, a Sony Ericsson K800i, doesn’t support it. (It actually doesn’t specifically say on that page that my model doesn’t support it, but I pressed 0 a whole load of times and then checked the help in the program and it said “myl: N/A,” which really disappointed me.)

I should be getting a new phone soon, so hopefully I will be able to use this feature in the future, but until then, if anyone else uses My Location on Google Maps for Mobile, drop me a comment to tell me what I’m missing out on!

The Mobile Web Rocks!

Opera Mini lets me browse like I’m on a fully fledged desktop browser, Gmail gives me my mail, Maps gets me from place to place (I’ve lived in London a year and I still don’t have a clue). Do you use the mobile web at all? Any particular favourite programs or sites? I would love to hear of any experiences you have had with the mobile web, and if you haven’t tried it, have a go and let me know what you think.

I was shocked and horrified yesterday, when I read some of the comments under Ajaxian’s interview with Christian Heilmann on unobtrusive JavaScript. There is an air of selfishness (unobtrusive JavaScript “takes too long to develop”), misunderstanding (it “adds complexity”) or general pigheadedness (”target audience is lame”) about the comments from those who are against the idea of unobtrusive JavaScript. There are people out there without JavaScript enabled and, if your site does not work without JavaScript, it causes problems.

So, just as accessibility was getting a kicking by certain individuals over at Ajaxian, Jonathon Snook stood up and asked, consequently answering from his point of view, what does accessibility mean? I liked the analogy that accessibility is a spectrum, covering lots of cases, lots of people. It is not just about blind people, it is not just about making sites work without JavaScript enabled, it covers topics as wide ranging as colour blindness to quadriplegia. There are a lot of things that everyone can do to make sites accessible to more people, the simplest often having the biggest results (like ensuring all images have meaningful alt attributes defined) and reading Jonathon’s view as someone who doesn’t preach accessibility, but uses the tools available in the best way he knows, is refreshing.

I recently discovered that Opera Mini, the mobile browser for those of us without iPhones, had not only released its 4th version, but that, like mobile Safari, had killed off handheld style sheets in favour of media queries. This brought about quite a positive response from Russell Beattie, who thought that media queries are “a much better way to specify formatting” as well as worried thoughts, again, from Christian Montoya.

Before I came to any conclusions, I wanted to try out what you could do with media queries first. Currently Safari 3, Opera 7+, Safari on the iPhone and Opera Mini 4 support media queries and all other browsers should ignore them. Our favourite exception to every rule, Internet Explorer does have problems with them though, occasionally applying rules regardless of whether they apply. Opera provide a very good explanation of why and how to avoid this with safe media queries.

3 Columns, 2 Columns, 1 Column - The Choice Is Your Viewport’s

Not the catchiest of phrases, but the first application I thought media queries, essentially if statements on the size of your browser’s viewport, were perfect for was site layout. 3 columns isn’t much use on a mobile device, but one column looks silly when you’ve got 1024 pixels of width, so why not have both?

So, I stole Eric Meyer’s example of Any-Order Columns, changed the sizes up to pixels to make everything easy (center column 500px wide and columns 2 and 3 both 200px wide) and applied the following CSS:

@media all and (max-width: 899px) {
#block3 {
float:none;
clear:both;
width:100%;
left:0;
margin-left:0;
}
#block1 {
margin-left:0;
}
}
@media all and (max-width: 699px) {
#block1 { width:300px; }
}
@media all and (max-width: 499px) {
#block1 { width:100%; margin-right:0; }
#block2 { width:100%; float:none; clear:both; }
}

This says that, at viewport widths of 900px and above you will see 3 columns, between 900 and 700px wide you will see 2 columns and the 3rd column drop below to take up 100% width. Then, between 700 and 500px, the main column shrinks to 300px to fit and finally at below 500px of viewport width you will see one column with the content all in order (there’s a reason I chose Any-Order Columns!).

You can see my example in Safari 3 or Opera 7, 8 or 9 or even the Opera Mini simulator. Viewing it in any other (major) browser would just appear to give you three columns 900px wide.

Findings

Disappointingly you have to refresh to get the effect of the media queries, rather than just resizing your browser. However, for such a simple example I thought it worked quite effectively. It allowed the test page to be displayed ideally depending on the size of the screen, giving a third option for the future for those constantly stuck between fixed or liquid width layouts. I also liked that when you view the page in Opera Mini there was no need to zoom in. Even though the display of full web pages and the zoom is one of the little browsers strongest points, not having to zoom because the page is already formatted for the small screen makes it even easier to surf.

I still have more to consider about the potential of these media queries in general, but in the future, as the number of different screen resolutions and the number of browsers supporting media queries grow, this is something I would consider again. What do you think? Is this potential, something to start using now or something to forget?

About a month ago I wrote about how a few high profile sites locked users out or prevented the use of parts of their site because they relied on JavaScript being available. Since publishing the post a couple of interesting things happened to reinforce to me that JavaScript accessibility matters.

The Nationwide Understands

The power of a little blog was shown the other day when I received a comment from Ian Lloyd (of Accessify and The Web Standards Project). While I have read Ian’s writing online, I had no idea that he worked for the Nationwide and was surprised to find this out in his comment and delighted to hear that he has referred the issue (users without JavaScript enabled could not access the login page to the online banking section) on to be dealt with.

For any large company, reacting to criticism from a relatively unknown blogger is quite unusual, but to do so with the grace that Ian did, especially resolving to look further into it, is fantastic. I understand what Ian said, legacy code could be at fault and it could be a long time before anything hits the main site due to the necessary processes of big business, but if the Nationwide are able to change this and allow access to the whole of their site without JavaScript being required then I will be pleased to claim a big victory for accessibility!

The People Have JavaScript Problems

It may seem to some people that 6% of users not using JavaScript is insignificant. Facebook claims to have 54 million active users, Hotmail advertises over 11 million unique users. 6% of those figures is 3 and a quarter million and over half a million users respectively, not insignificant figures.

These big numbers sound impressive, but they are also faceless numbers based on aggregated statistics and can start to mean nothing after a while. Over the last month, since publishing the original article, a few Internet users have drifted by my site driven by a few searches that prove being unable to use sites without JavaScript is confusing. In the last month I have had 4 visits from search engines with the query “facebook without javascript,” 3 visits from the search term “hotmail without javascript,” and 24 other visits from search terms involving the words JavaScript and either Facebook or Hotmail. These are real users that are finding it difficult or impossible to use a web site because it relies on JavaScript for certain functions.

Conclusion

There are users out there who do not have JavaScript enabled. It is possible, with the right mindset (like Ian Lloyd and Nationwide), to consider this and create sites that do not rely on JavaScript for core functionality. Don’t exclude users by forgetting this.

I’m kicking off my web developer tools series with, what I imagine to be, a lesser known tool from WestCiv. It may sound more like a procedure in a hospital, but XRAY is a simple but invaluable tool in any developer’s belt.

Quick, Simple, Informative

XRAY allows you to take a quick look at some vital properties of any element on your page. Fire up XRAY, click on an element and you will see its name, id and any classes, its position in both the page and the page hierarchy, height, width and whether it is floated, its border, padding and margin. A whole lot of information presented very neatly.

Even better is the visual way in which XRAY displays your information. Not just presenting it in the heads up display, but highlighting the element on the page, colouring the padding and margins and displaying the position, height and width next to the element too. And that’s not all, the latest version of XRAY allows you to navigate between ancestors and descendants of the element with your up and down keys and between siblings of the element using left and right.

One last thing about XRAY, it is usable in most browsers as it is a bookmarklet. There is no downloading, just drag it from its home to your bookmarks and you can click it at any time to bring up the tool on any site. Though it can be a pain to use in Internet Explorer, this can be very useful to tell if there are any differences in basic proportions between IE and your favourite standards based browser.

It’s quick, simple to use, available for most browsers and gives you information about your web pages with just a couple of clicks. I tend to use this as a quicker alternative to more complex Firefox extensions and highly recommend it for use when building anything from the very simple to the very complex web layouts. Try it out here, XRAY this page! If you like it, get the latest version from WestCiv and XRAY any page!