Responsive Web Design
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:
Leave a Reply