Redesigning It’s Pronounced Metrosexual .com – how (and why) I created my first responsive Thesis website.

in Design

Thesis has quickly become my favorite framework for WordPress web development.  It takes everything I love about WordPress and supercharges it, but in an elegant way.  It’s Banner and the Hulk.  I only had one gripe: Thesis is not a responsive framework.

Well, I fixed that.

If you head over to www.itspronouncedmetrosexual.com and click around, play with your browser width, or check it out on mobile, you’ll see a gracefully scaling, responsive site.  And that was built on Thesis.  How’d I do it?  Let’s take a look. 

*Note: this is by no means a step-by-step tutorial – or even a tutorial for that matter.  It is, however, a thorough explanation of how I did what I did.  If you’ve got a solid grasp on Thesis, WordPress, CSS, and a decent grasp on PHP, you should be able to copy what I did fairly easily.

Let’s start with the why.

There are several reasons I redesigned (other than the simple fact that it was time for a facelift).  Let’s look at a few.

The Mobile Problem

I was getting about half of my traffic through mobile devices.  A third of that was tablets (read: iPads) and the other two thirds a smattering of smart phones.  My bounce rate was incredibly high for mobile devices (94% compared to 65%) and average time on site significantly lower (1:35 compared to 3:54).  Now, when you extrapolate that out to about 10,000 views a day, you can see how much traffic I was losing.  It bummed me out that my site was bumming all those mobile folks out.

The Content Accessibility Problem

The content I create is relatively timeless.  I write educational pieces that are meant to be shared.  The problem with the traditional blog format is it’s reverse chronological.  An article I wrote two months ago is just as relevant as one I write today, but the odds of someone finding it were slim.  I had to come up with a way to highlight that content, and make it accessible to everyone, regardless of their browsing device.

The Big-Browser / Ad Delivery Problem

I’ve been struggling with ads ever since I implemented them.  I’ve never wanted the ads to interfere with the user experience, so I’ve had to place them in sidebars.  I didn’t want to become another Wired.com.  But I realized that in larger browsers (>1400px wide) I had a ton of unused space on either side of the layout (a typical 960 layout problem) that I would much rather be using.

Responsive Design to the Rescue!

Breaking the traditional layout and switching to a responsive design was a huge step (and took a lot of trial-and-error style learning), but I’d say it was completely worth it.  Here are some things to consider as you approach your first responsive design.

Having a responsive mindset

Laying out the design for the responsive site was a new challenge.  First of all, it was hard to break my tendency to build in pixel or em widths.  It’s all about percentage widths.  Also, you have to think about how best to utilize the main breaking points of browser widths, but with a common goal in mind.  My goal was to push my content (whatever article someone landed on) as high up as possible, with the design still making sense and being navigable.

Creating several layouts instead of one (or two).

The new site has four key layouts.  In each of these layouts, some significant change is made to allow the percentage-based widths and site elements to continue to scale gracefully.  Below is a diagram of the basic layouts I designed for www.itspronouncedmetrosexual.com.

 Remembering your core demographic for each layout

People using wider browsers are more likely to be on desktop computers, sitting further from the monitor.  People using tablets need a safe place to scroll without inadvertently clicking nav items or ads.  Etcetera, etcetera.

Let’s look at a specific example.

The category navigation I build for the new site (the Cadillac feature) is pretty flashy.  Since I’ve launched the new site, the rate of browsing the categories has increased over 1,000,000%.  That’s right, my visitors are now ten-thousand times more likely to see my category pages (which is exactly what I wanted).  But those flashy nav icons and their placement aren’t very conducive to mobile browsing, so I sacrifice that element and degrade them into simple drop downs as the browser width decreases, thus making for a better viewing experience for mobile visitors.

CSS3 Media Queries + Thesis = A Hacky Good Time

If you’re unfamiliar with media queries, get familiar.  You don’t need javascript, or any heavy WordPress plug-ins to make a snappy, responsive site.  Just a few lines of CSS3 to complement a savvy design and you’ll be set.  With that said…

Thesis is not meant to be responsive, but you can make it happen.  Let’s just say you have to bend it a little, until the point where it’s about to break.  I’ll tell you how roughly how I did it.  Odds are, there’s an easier/better/more efficient way, but for my design needs (the two navs and the news column) and with my know-how, this is what I came up with.

A few generic, nearly universal pointers

The CSS property “max-width” is your friend, particularly if it’s followed with “100%” and preceded by an “img” tag.  This will allow you to add images of any size into any area of your layout without breaking it.

Similarly, the CSS property “overflow:hidden” is helpful within declared-size elements that contain finicky social plug-ins (e.g., Facebook like box).

Finally, if your stomach turns when you see sidebar headlines that break two lines, you’re going to want to use images (or meticulously change the size of the font with media queries as the width of the sidebar changes).  Images make for an easy, if not slow-loading, solution.

Prep Thesis for the “bending”

Enable full-width frameworks, and consider how you are going to need to manipulate the columns as you choose a column order.  For my site, I wanted the content in the middle of every design, so I chose the Sidebar 1, Content, Sidebar 2 layout.  The widths are irrelevant because you’ll be replacing those with percentages.

Create and hide all the elements you’ll need in CustomFunctions.php

In addition to the standard navigation menu, I needed my custom catgory nav (with icons), the dropdown category nav for iPads, both dropdown navs (category and site) for mobile devices, the logo placement for all my different layouts, and my additional news column.  If you’re unsure of how to use  custom functions, look it up.

Once you create all of these elements in your Custom Functions and style them in CSS, you’ll need to hide all but your “primary” ones.  For me, I picked the browser-width range that was most common for my site visitors and made that my primary (~1200 pixels wide).

Style your layout

Depending on what width ratios and navigation placement you decided upon, style your main layout elements to receive your new design.  Below is the actual snippet from that segment of my style sheet.

/* LAYOUT */

#side_logo, #side_site_nav, .custom #logo, .custom #tagline, #small_cat_nav, #side_site_nav, #dropdown_nav, select#cat_nav {display:none;}

.custom #header_area, .custom #header_area .page {padding-top:0;}

.custom #header {
width:39%;
height:auto;
max-height:70px;
float:left;
padding:0;
margin:0 .5% 1em;
background-size:100%;
clear:none;
}

.custom ul.menu {
width:58%;
float:right;
position:absolute;
top:0;
right:0;
padding:0;
margin:0;
}

.custom #column_wrap {
width:80%;
float:left;
}

.custom #sidebar_1 {
width:25%;
padding:0;
float:left;
text-align:right;
}

.custom #content {
width:71%;
float:right;
position:relative;
margin:0 2%;
padding:0;
background:#fff;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .6);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .6);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .6);
-webkit-border-radius:5px;
-moz-boder-radius:5px;
border-radius:5px;
z-index:10;
}

.custom #sidebars {
width:20%;
float:left;
position:relative;
z-index:100;
text-shadow: 0px 1px 1px #fff;
filter: dropshadow(color=#fff, offx=0, offy=1);
}

.custom #sidebar_2 {
width:100%;
}

#news_col {
background:url(images/bg-linen-grey.jpg) repeat;
color:#212121;
font-size:1.2em;
line-height:1.4em;
font-weight:500;
padding:4%;
margin-bottom:2em;
text-shadow: 0px 1px 1px #efefef;
filter: dropshadow(color=#efefef, offx=0, offy=1);
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-webkit-border-radius:5px;
-moz-boder-radius:5px;
border-radius:5px;
}

Finally, set up your media queries

Now that you have all of your elements built and styled, you’ll want to set up your media queries at key breaking points so they show/hide the different elements strategically.  Below are the queries I use (edited to just show layout elements).  You can see how they relate back to the functions I mentioned, and show and hide as the browser size changes.

@media only screen and (max-width: 600px) {
.custom div#footer {display:none !important}
}
@media only screen and (max-width: 767px) {
.custom #sidebar_1, .custom #column_wrap, .custom #content, .custom #sidebars {
float:none !important;
width:100% !important;
margin:0!important;
}

#dropdown_nav {display:block !important;}

.custom .menu, #cat_nav {display:none !important;}

#header {width:100% !important; max-height:100px !important;}

.custom #sidebar_1 ul.sidebar_list {margin-top:2em !important}

.custom .thesis_widget_search input {font-size:2em !important; margin-top:0 !important;}

}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
#cat_nav {display:none !important;}

select#cat_nav {display: block !important; width:100%;}

.custom .thesis_widget_search input {font-size:.85em !important}

#news_col h2 {font-size:1.7em !important;}
#news_col h3 {font-size:1.1em !important;}
}

@media only screen and (max-width : 1024px) {

.custom .teaser, .custom .teasers_box .page {
width:92% !important;
margin:0 !important;
padding:4% !important;
float:none !important;
}

.custom .teaser_right {margin-top:3.4em !important;}

.custom #footer p, .custom #footer a {font-size:14px !important;}
}

@media only screen and (min-width: 1025px) {

#news_col h1 {font-size:2.1em !important;}

}

@media only screen and (min-width: 1400px) {

.custom #header_area {display:none;}

.custom #content_area {margin-top:2.2em !important}

#side_logo, #side_site_nav {display:inline !important;}

#news_col {position:absolute; float:left !important; width:42% !important; padding:3% !important;}

.custom #sidebar_2 {width:48% !important; float:right !important;}

.custom #content {width:61% !important; padding-right:10% !important;}

.custom #sidebars { width:30% !important; margin-left:-10% !important; margin-top:2em !important;}

.custom #footer {width:57% !important;}

}

Previous post:

Next post:

This Website Design is for Sale!