Design - CSS - CSS3 - Mobile - Responsive

The Magic of Responsive Design

Pssst, it’s 2014, have you heard of responsive design? Even if you haven’t heard of it, you probably know what it is. If you surf the internet on your smartphone or tablet, you might have noticed that the browser resizes accordingly to fit the website on your screen (even when you switch to landscape mode!). The design is responding and adjusting accordingly to the device you’re using.

In this article, I will give you a brief overview about responsive design, the technology behind it and share with you some of my favorite responsive WordPress templates.

The market today is saturated with different smart phones, tablets, laptops and desktops all with different screen sizes and resolutions. Designers and developers cannot create custom solutions for all devices.

I don’t need a crystal ball to tell you that the number of such devices will continue to grow. According to CNN, in the US alone mobile usage has doubled since 2009. That means that more and more users are browsing the internet on their phones instead of desktops and laptops.

So, how do you create a site that will render consistently (and beautifully!) across the most popular mobile and tablet devices available on the market today?

The answer is: HTML combined with flexible grids, flexible images and CSS media queries!

responsive design

The Magic Behind Responsive Design

So you build your HTML, and then the magic happens when you get to the CSS. In a nutshell, your CSS will have a query to check the width of several devices, so that the browser knows how to display your site.


The CSS media query used to check the device is device-width. An iPhone 4 has a device-width of 320 px, this is different than resolution because iPhones now have retina displays so even though the width of the iPhone itself is 320 px, the resolution is actually 640 x 960.


The Syntaxxx site in an iPhone screen

Basically the media query checks: “if your screen is this size, style it this way”

CSS Media Queries

Sample CSS media query that lists several devices and their screen dimensions

Another important element to make your responsive design work is to use a flexible, also commonly referred to as “fluid” CSS layout. Instead of defining your column and image sizes in fixed (or absolute) pixels, such as 200 px, you use percentages (width: 50%) instead and let the browser do the work!

For example, if you set an image with a max-width of 100%, the browser knows to display the image at 100% view at all times, even if the screen gets narrower the image will adjust to fit within the browser screen.

Why Use Responsive Design? And When?

First consider your audience and the content you will be presenting. Investigate whether there’s a real need for users to access your site on a mobile device. It may be that the content is better suited for only a standard desktop-sized website or perhaps an app.

If you’re worried about browser support, keep in mind that all current desktop and mobile browsers today support CSS media queries. Even older versions of Internet Explorer (which has been known to give designers headaches), can support the @media CSS media type, which will allow you to apply your CSS to a specific medium.

Furthermore, you can look into already existing responsive design frameworks, so you don’t have to reinvent the wheel. These frameworks contain templates you can customize to fit your project. They are the foundation of your responsive design. If you want to learn more about these frameworks, check out HTML5 Boilerplate and Bootstrap.

It’s now 2014 and responsive design is more than just a trend, it’s becoming an industry requirement. With responsive design you can offer users a consistent user experience

Responsive WordPress Themes

If you have a client that needs a responsive site but doesn’t have the budget for a custom design, consider using a WordPress theme. There are numerous responsive WordPress themes available for different industries.

There are themes geared towards the type of content you want to display, for example: photography portfolio, blog, tech start-ups, e-commerce. The options are endless. To save you some time, here are some of my favorite responsive WordPress themes.

Response Theme

Response Theme

Response Theme

Fusion Theme

Fusion Theme

Fusion Theme

Avada Theme

Avada Theme

Avada Theme

The One Pager Theme

The One Pager

The One Pager

Inovado Theme

Inovado Theme

Inovado Theme

Summing It All Up

If you want to build up your portfolio and stay on top of the industry, learning how to design responsive websites is imperative.

The beauty behind responsive design is that developers and designers no longer need to create different versions of a site to accommodate for different devices and screen resolutions.

Combining the power of CSS media queries and a liquid layout offers the best user experience. Your site will look good in every device!

About the author

Patricia is the Founder of Upwards Content, a fledgling content creation/management business. If you like my articles, follow me on Twitter!

Share this post

Leave a Comment

Subscribe To Our Newsletter