Responsive Design is a big phrase at the moment. It’s all about optimisation. Engineering your web site or app to look it’s best on any device is really important – it’s got to be effortless. Advances in CSS3 have made this a lot easier, for designers and developers. It’s also been a leap for customer and user experience, meaning that users can use the web site or the app, whatever device they choose and the experience doesn’t suffer. However, this shouldn’t be exclusive to e-commerce sites, as more people are doing things on the move, all sites should be following this direction. So I’ve decided to make sure that even my own blog is readable from smartphones and from tablets.

This is how it looks on an Apple iPhone 4s and a tablet:

 

.
OK, so the text is still fairly small (it does appear bigger on the devices), but it’s still readable and you can even see the buttons on the smartphone (just). You can see how the text nicely realigns itself for a more narrow column and adheres to a different grid ratio. The proportions are good, and the images are nicely resized. Overall, a success I would say. Basically if your users are noticing that there’s a difference between their devices then there’s something to notice, and you need to do something about it. If they don’t even notice then the design is likely to be how they expect – if not better. It’s always good to try to anticipate how the user is going to be using your site, whether they might have their mobile device landscape or portrait, and what activity it is they’re doing. Are they reading? Make the text larger. Are they going to have to type? Make sure the important stuff is kept above the keyboard. Are there a lot of pictures? Make sure they resize appropriately and they’re at the correct resolution and size for the device they’re on.