Understanding responsive mobile & tablet design

Responsive Web Design is a way to change your website depending on the browser size. Now I’m showing here Smashing Magazine. Smashing Magazine is a website that I read a lot and I really like the effort they went into to redesign the different pages depending on the browser size. So at the moment we’re looking at it as you would on say a really big screen say, like an iMac or 4K monitor or something really big and high definition.

You can see there’s a nav on the left, a subnav, our main content and some ads. But once I get smaller, say down to a regular desktop view, can you see it changes? It goes down to this navigation here, our main content and ads but it gets smaller, say down to a tablet view it changes quite a bit, ditches the ads, the navigations become a bit smaller, this is along the top here now, but if I go down even smaller, down to the mobile view, okay, things change quite a bit again.

Now what you need to take from that is when you’re designing Photoshop, Photoshop is a static medium. It not a scaleable, stretchy one like what you can get when its finally put out as a website. So the trick for designers is when mocking up a prototype in Photoshop is that you’ll need to design the different views so that when you hand it over to the developer they know what the site does when it gets down to mobile.

What happens when the menu is in tablet view – all those sorts of questions need to be answered in your mock-up. What you don’t want is loads of questions back and forth between you and the developer trying to answer questions that should have been fleshed out in the concept stage and that is a quick introduction to responsive web design.