Tag Archives: mobile

Flexible stylesheets

Been working on some flexible style sheets for someone else so I thought I should do some for me so I’ve started on the homepage of this site (its the one most people look at). As ever its a work in progress I have not done this blog yet.

This is the homepage at 900px wide:

Homepage at 915px wide

This is the homepage at 300px and 500px wide:

Homepage at 500px and 300px Wide

Why

People are using a wide range of devices of different screen sizes and resolutions. You want your content to look good on all those devices don’t you?. Even if its only for legibility. Designing a site to only work on a huge great desktop monitor will please the art director when he prints it out but it isn’t going to please a customer who is using a 1060px wide screen or even a customer with his browser window set as a small portion of a larger screen.

How

I’ve been using media queries support does vary somewhat across desktop devices. The most notable one I found didn’t work for me was Internet Explorer 8. You can get around that one if you include a js script. You can get an idea of the support offered by various browsers on When can I use.

What sizes? devices

It depends on your circumstances, what kind of devices are people using to visit your site with. If you have a load of visitors using massive art director style monitors you might want create a very big screen set of styles. If lots of people are using small screen devices then you need to look at those. If only a very small number of people use that very odd dimension then it might not be worth bothering.

Desktop browsers

This is reasonably easy you can resize your browser window and see how you site adapts in your various browsers. Opera is good for this as they have a simple tick box that allows you to turn on ‘show webpage dimensions in titlebar’ which gives you a simple way to see the current depth and height as you resize. On a Mac its under Opera > Preferences > Advanced > Browsing.

Mobile devices

You can check your site in emulators as starting point but support does vary from device to device and ideally you want to test on real devices. They have settings that alter how they display your content that might be set to zoom out a larger site or ignore the media queries you have made completely.

bashing a stylesheet to flexibility

When

Ideally you should do this stuff when your putting a site together to start with and consider it when designing the site. Some things are awkward to scale, I’ve found tables awkward in the past.

You can bash an existing site into a more flexible approach or just the most used parts of the site.

Mobile web design

Android have published a guide to developing applications, despite being an advert for Ice Cream Sandwich, it is quite useful and provides good tips for how to design any small screen based application be that mobile apps or web sites to be viewed on handheld devices.

I’m trying to get my head around how to design things for very small screens at the moment so I found it quite useful.

  • Size of your fingers – aim to make usable bearing in mind the size of the end of your finger is 7-10mm, and you need to maintain a clear gap between each item.
  • Feedback – on interaction to try and indicate that something will happen, they suggest using percentage shades of the same colour.
  • Consistancy – across interface of the same visual clues if touching the arrow makes you move from screen to screen on one part. It shouldn’t suddenly switch to being a edit cue on another screen.
  • Describe only what is necessary – you only have a small screen and people don’t want to know the details. If you have an error message they don’t want to know that you have a parse error or some such.
  • Headline first – “Aliens have landed and you have 6 messages” rather than “You have 6 messages and Aliens have landed”.
  • Be familiar to the devices interface – don’t try and make your android app use iphone design elements, or vice-versa you should be taking advantage of your users familarity with their own device.
  • Pictures being more obvious than words -Real objects are more intuitive than buttons and menus, for icons I guess this comes down to not making people think.* They extend it into pictures being more obvious than words. Guess there is less brain action needed to go from picture of steve > steve! than from “steve the monkey” > oh yeah > steve > steve!. **
  • Only show whats necessary – don’t show whats not needed for that screen. This is ok as long as items are placed in familiar locations. You don’t want everything shuffling position when you go from page to page.

Most of this is the same as its always been but its always good to remind yourself. Sometimes I’ve ignored design reading this made me wonder how much of this is really about toys for adults.

* Never really been sure about using an envelope for an email icon but I suppose if that is what everything else uses then its the right thing to use.
**Wonder if this is the logic behind a visual search engine like Oolone.

References