One of the hottest web trends of 2013, is responsive web design. Most of us have heard of it, but very few of us know what it really is. Responsive web design is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.
So, how do I know if my site is responsive? If you’re currently on a computer, drag the size of your window to something smaller – try half the screen. If the layout has changed and now looks more suited to that window size, then your website is responsive. If nothing changed, then your website isn’t responsive.
If you’re on a mobile device, does the website look like it’s been specially designed for your device? If so, then it’s responsive! If not, then it isn’t.
Whilst this article may all seem very repetitive, different websites have different ways of displaying the responsiveness. Most sites will simply change the layout, however, some websites will reduce the amount of content, to a more readable amount for a mobile device.
The wpContent website is responsive, and you’ll notice that the layout changes upon resizing the browser.
The responsive web technologies are still being tweaked and developed, however, there are a few plugins you can use to make your site responsive.
- Responsive Images Generator & Loader is a WordPress Plugin which generates smaller image files for mobile devices, meaning that the site will also load quicker.
Here’s a great example of a responsive website being displayed on different devices.
Credits: What is Responsive Web Design – http://smallbiztrends.com/2013/05/what-is-responsive-web-design.html
What The Heck Is Responsive Web Design – http://johnpolacek.github.io/scrolldeck.js/decks/responsive/