From gaming to web development
“With 18% of people in the UK accessing the internet using a game console, it’s time to look beyond desktop, mobile and tablet browsers.”
I was positively surprised to see a Mario Bros introductory slide, when Anna Debenham started her talk at the Web is conference a few weeks back in Cardiff. It wasn't something I expected to see, although - as it later proved - gaming consoles are relevant to web development and we can learn a lot from looking at how they render websites.
Anna talked mainly about limitations of console web browsers and limited input and how they impact web browsing in general. We are used to creating websites for touch, mouse and keyboard inputs. Actually, there are more types of input than we realise, for example voice, gesture or using two screens. We also need to consider very small and very large screens.
With these in mind, we can design and develop more usable websites, not only for consoles, but for many other devices. As Anna said, by making something better for one device, you might end up improving the experience for many more.
“The lines are blurring between what is mobile, tablet and desktop these days” (Cameron Moll). There are device silos (mobile, tablet, desktop), as Anna pointed out. These silos are just wrong in my opinion… We cannot design a website targeted for (i.e. iPhone) users with media queries crafted for specific devices… As soon as a newer device comes out, these might just no longer be the best media queries for that website or device. Also, content might not look its best when we don’t take it into account when selecting our media queries… But I am going off topic now…
“What is mobile? Can we define it by the devices people use or where they use them?” Luke Wroblewski. I could not agree more. To me, “mobile” in modern web development means a device that is used on the go, not just a phone. There is this misconception and at first I also found it confusing - many people are used to the term mobile describing a mobile phone. They may not be aware that they also have a “mobile tablet” and a “mobile handheld console”.
no design for screen size = no device independence
I didn’t even write notes about this, as I think it is just self-explanatory… You cannot have device independence, if you do not take into account various screen sizes. When your site is not usable on a mobile phone, for instance, you would be breaking device independence… In Anna’s words… “Don’t dismiss devices just because you don’t use them”
Performance is a user requirement
Jason Grigsby - “We can’t predict future behaviour from a current experience that sucks”. Also, when making choices, we need to consider many things, for example is our beautiful banner image going to use up a lot of the user’s bandwidth? What do you sacrifice instead?
It is not just about the size of the websites. A lot of consoles have very limited support for things we take for granted, for example CSS. On some consoles it would mean broken layouts, while others will not render the sites at all. Other devices have very limited or difficult to use input like on-screen QWERTY keyboard. Some handheld devices allow users to extend it onto a TV screen, shifting the experience from a relatively small into a much larger screen.
Finally, some random guidelines for web design/development:
Design to standards, not to browsers
Test for capabilities, not UA strings, [when detecting browser/device/whatever], many devices have wrong or misleading UA strings.
Progressive enhancement - detect features not limitations
Test on real devices - not simulators - as simulators aren't often reflecting the real device’s behaviour. Anna’s Game console browsers site for some web based tests and you can compare the results with your own real devices.
If this post was of interest to you, you may want to visit Future Friendly website to read a bit more about building websites in a more future friendly way. You can also watch John Grigsby’s - The Immobile Web on Vimeo.