S8080 Blog

Whilst doing some research on mobile web design, I was looking for information on how to cater for the wide range of devices and screen sizes that are out there, and came across a useful article at mobiForge.com: Effective Design for Multiple Screen Sizes.

It provides some handy statistics on the most common screen sizes for mobile devices; I was amazed that 128 pixels is the most common width for a mobile (I would’ve imagined it to be a little bigger). It actually turns out that most devices share one of three widths: 128, 176, or 240 pixels. These values are generally getting bigger year-on-year – especially with the advent of the iPhone in 2007 (which has a 320 pixel wide screen).

The gist of the article is that by targeting your design at a medium screen size, and using good, clean, semantic markup, it’s fairly straightforward to make a site that degrades gracefully to smaller screen sizes, and can be progressively enhanced to provide extra functionality/styles to more capable devices.

Here’s a neat article from Smashing magazine summarising whether to open a new browser window or not:

http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/

A quick summary / rule of thumb is open links in a new window only if:

• The link is to a non HTML document e.g. a PDF, XLS, MP3 etc, in this case use a popup window without browser control toolbar
• The link provides help / assistance (so the user doesn’t have to navigate away fro the page they are currently on)
• The link interrupts an ongoing process (e.g. filling in a form, checkout forms) so a user doesn’t lose information that they have already typed in
• The link is to a large image which takes time to load (opening the image in a new window allows the user to read the content while the big image is loading)

Everything else should open in the same page unless explicitly stated that links are opened in a new window – and don’t open a new window unless there’s a really good reason.