If you’re in the web-designing world at all, you’ll know that “Responsive Design” is all the rage right now, as well it should be. You can have a site that is optimized for a desktop browser, a tablet device, as well as a mobile phone – all without replicating work and using only one css file.

As I found out in my initial attempt at creating a mobile site, the work got super redundant and out of control.

Today my goal was to make a responsive design. And I achieved the goal with the help of this online tutorial: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Basically, the trick is to use CSS3 Media Queries. It’s basically telling a device what it should do based on the size of the window.

I won’t go into any further detail because the above-mentioned tutorial is pretty good at that. But I will share my demo work. It’s not meant to be intricate, just a framework to build off of.

• Click here to go to the demo site.
• Resize your browser window narrower until you see the changes.

Did you spot the changes?

Screenshots:

Desktop View

Mobile Phone View