Design a Responsive Website or Theme

Making your website or theme responsive for all devices may seem like a daunting task. It really isn’t and you can even convert your existing website into a responsive one with very little work. Of course you want it to display appropriately on desktop, tablets and mobiles, that is the purpose, right.

Responsiveness in the Past

Before the word “responsive” was even part of web lingo, mobile friendly websites started popping up which were often dedicated websites running separately from the main website, often on a subdomain or subfolder or even hosted by a 3rd party provider or service offering such a tool.

These mobile versions were also often redirected to from the main website when the main website did a browser detection and realized that you were actually browsing the website on a phone. You were then redirected to or served the mobile version.

It wasn’t user-friendly because the mobile friendly version of the website really didn’t offer much in comparison to the full website and it always seemed outdated, like it was glued together. I’m sure there were good ones here and there though.

Creating a Responsive Website Today

With all the wonderful technology provided such as CSS2 and 3 and the powerful rendering engines in the browsers we use these days, creating a responsive website has become extremely easy. I won’t go into depth, recreating a design or anything, I’ll just give you a quick overview and reference to what you need to do.

CSS Media Queries for Phones, Tablets and Desktop

You can do this with a new or an existing website or theme. In the main stylesheet, you simply need to add some media queries for different types of devices and those devices will be determined by the width they can cater for. Here are the media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

(https://gist.github.com/tribulant/af4ca5ec010d98e4a06f)

And that’s all there is to it really!

The media queries above are good reference and a solid starting point but there are other ways of doing it as well in similar fasion. For examle, you could use max-device-width and min-device-width and also orientation with values portrait or landscape if you wanted to create a more intricate stylesheet.

Making the Design Responsive

Once you have the media queries in your stylesheet, it is time to get creative.

Within each media query, you can now do what you please to. You can hide certain elements by class or ID or you can change the width, height, alignment, background, font, etc. for certain elements, classes or IDs as needed.

I’ll give you an example, using a header. This is the full, desktop header:

2015-01-16_21-31-43

As you can see, full header with the logo on the left and a user area on the right. Below that is a full menu/navigation with a search box on the right-hand side. This is okay for any desktop screen with width 1024px or higher.

This is the tablet portrait header:

2015-01-16_21-32-05

With tablet in portrait view, the maximum width of the screen is usually about 767px. As you can see for tablet portrait, the logo is still on the left, the user area on the right is more minimalistic and the menu/navigation has become a select drop down menu instead of a wide, full menu. To achieve this for tablet portrait, the media query to use is the second one in the CSS media queries I gave you above.

So certain things are set to not be displayed and other things specific to the mobile/tablet view are then set to display again on the other hand. Here is a rough example of part of the CSS used for the header on the tablet portrait media query:

/* #### Tablets Portrait or Landscape #### */
@media (max-width: 767px) {
#header {
width: 100%;
}

#user_area #user_cart,
#user_area #user_livesupport,
#navigation {
display: none;
}

#navigation-select {
display: block;
}
}

(https://gist.github.com/tribulant/79ea76c661c567ad8f8f)

Try Your Own Responsive Design

I hope that the media queries help and that the very shallow and rough example helps and that you will now be able to try your own responsive design on your theme or website.

Feel free to comment if you have any suggestions, ideas or questions. Any suggestions are welcome since there are many ways of doing responsive designs and each designer may have a preferred approach to this.

Beautiful Newsletter Templates

Professional newsletter templates that are fully responsive for desktop, tablet, and mobile. They are 100% cross-client compatible.

See Them
Comments

No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Save 15% On All Purchases

Use this amazing, limited offer and SAVE BIG! Buy any of our WordPress plugins, extension plugins or newsletter templates.

Save 15% On All Purchases

You have Successfully Subscribed!

Pin It on Pinterest