I’ve recently become more interested in design and user experience. I found a good talk on Responsive Design Workflow which my friend @sherylyulin recently shared. Responsive Design or more specifically, responsive web design has become a very big buzz word in the tech industry, but is actually quite important given where the internet is heading – internet access from anywhere and any device.

What exactly is responsive web design? Wikipedia defines Responsive Web Design (RWD) as “an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)”.

With more of the emerging world onboarding onto the internet via mobile and the availability of new and different device form factors, responsive web design has become increasingly more important.

I found some good examples via this Socialdriver post. If you go to the Boston Globe and Smashing Magazine website, you can resize the page by dragging the corner in and out to create smaller or larger dimensions. The design will respond and adapt to the changing size. The design is fluid (by using responsive CSS elements). I also came across this fluid layout style when playing with Twitter Bootstrap.

I have to admit that a lot of mobile websites look really crappy when viewed from my iPhone – the ones specifically designed as mobile websites. The culprits can be found on websites that lie on a m dot domain (e.g. m.hoyts.com.au). They usually seem to have a limited functionality set of the actual website and just look plain ugly – I’ve never liked them. With responsive design, the way that we design websites is changing – there are some things that just won’t work on a mobile device e.g. hover effect.

The thrust of the video is that web design itself is changing but the actual design process itself also needs to change. I’ve been through the design process multiple times at a web design agency, and working for a client can be quite painful because of the back and forth process on design, particularly using photoshop. I do like the approach espoused by the speaker to make it more efficient and to rethink how we do it by going from the wireframes to HTML/CSS/JS prototypes (but show them a JPEG version of it first) 🙂

I think that part of the problem is also the emergence of wireframing tools that allow you to make clickable prototypes with actual elements you’d find on an app or website. For example, I’ve used omnigraffle and I was able to re-create an iPhone layout using the exact buttons. I do like the idea of going really basic and using content reference wireframes and sketching. The problem with using actual elements is that it can restrict how you think about the design.

Responsive design and responsive design workflow is some interesting food for thought. The video is at a good pace and the speaker is well spoken, so hope you enjoy it.

I’m out like mobile websites,

Matt Ho