How To Customize Responsive Designs & Themes

How To Customize Responsive Designs & Themes

Customizing responsive designs or themes to accommodate all mobile resolutions in an ideal fashion to produce a beautifully mobile-friendly responsive website isn’t easy. If you want to make your website unique you’ll need to understand how to modify responsive designs. This is a brief overview of the standard ways to go about customizing responsive designs to meet your website’s needs.

Standard Mobile Resolutions

  • Mobile portrait (320×480)
  • Mobile landscape (480×320)
  • Small tablet portrait (600×800)
  • Small tablet landscape (800×600)
  • Tablet portrait (768×1024)
  • Tablet landscape (1024×768)

@media CSS Rule

The @media CSS rule can be set to type screen in order to use different styles for different screen resolutions. For example, if I wanted styles to only apply to the standard mobile portrait resolution, I would use the following @media CSS rule:

If I wanted to target small tablet screen resolutions only, I would use the following:

If I want to target desktop resolutions, I’d just place my CSS rules for desktop resolutions outside and above the @media rules, so when the @media rules occur they override the desktop ones.

!important CSS Declaration

The !important CSS declaration can be used to override pre-declared CSS styles regardless of its location in the stylesheet. It can come in quite handy when working with responsive designs. At the same time; however, it is a good practice to try to minimize its usage.

For example in the following case, the h1 font size would be 2em, even though 1em was declared last:

Hiding/Showing Elements Based On Resolution

Sometimes it is necessary to completely disable certain elements on smaller resolutions. For example, if you have a Leaderboard banner (728×90) on your website it clearly isn’t going to fit on a 320 pixel wide screen. In this situation, it makes sense to simply hide the element from view.

In order to handle the Leaderboard example, we would just hide the element (for this example lets say it’s tagged with the id “leaderboard”) for resolutions under 728 pixels wide with the following CSS:

Lets say you wanted to show a message only to smartphone visitors (for this example lets say it’s tagged with the id “smartphone-message”), this could be done with the following CSS:

How Stylesheet Ordering Works

The last CSS rule wins, unless there are !important declarations being used. This means the last CSS file loaded for a given page and the last line in that CSS file that applies to a given class, id or element is what will be used. If there are !important declarations being used the same rules apply, except the last CSS rule with the !important declaration wins instead.

For example in the following case, the h1 font size would be 1em simply because it was set as font size 1em last:

Positioning & Sizing Tweaks

Generally speaking it will be necessary to adjust the positioning & sizing of your website’s content to work on the various standard mobile resolutions. The best way to go about this is to adjust your styles based on how your website currently renders on the various resolutions. A quick way to see your website in all the standard mobile resolutions is to use Google Chrome’s Web Developer extension. Once installed, you simply go to Resize > View Responsive Layouts. Each responsive design has different breakpoints. Breakpoints are where your styles are adjusted based on the width of your Browser’s screen. If your site is simple enough it may be possible for you to remove some of these breakpoints to save you some time, it really depends on how your site is currently rendering on the various standard mobile resolutions.

Once you see your website in all the standard mobile resolutions, it will be clear to you what positioning & sizing tweaks will be necessary to accommodate all of resolutions. You just need to make sure that your site is functional and pleasant to view in the various resolutions. By the time you get to the smartphone resolutions it will be evident that you’ll have to expand a lot of widths to 100% and possibly adjust some font sizes to ensure readability. These tweaks can be accommodated with the methods described above.

WordPress Theme Development Resources

WordPress Theme Development Resources


Slightly Modified Options Framework

Slightly Modified Options Framework

SMOF is a great framework to use as a starting point when building out theme options for your custom WordPress theme.

TLDRLegal

TLDRLegal

TLDRLegal makes it super easy to understand what any given source code license means and the rules for usage.

TGM Plugin Activation

TGM Plugin Activation

If your theme integrates with third-party plugins you’ll want to reference them using TGM Plugin Activation to ensure users of your theme have all the necessary WordPress plugins installed.

Sublime Text 2

Sublime Text 2

This is the best text editor I have ever encountered, I highly recommend it to any developer. I bought a license for $70 and recommend you do the same, it’s worth every penny!

XAMPP

XAMPP

XAMPP makes it super easy to setup/run a local LAMP server on Mac OS X, Linux &: Windows.

CodeCanyon

CodeCanyon

There are a ton of great premium WordPress plugins and other code goodies on CodeCanyon. Some of these scripts offer developer licenses that allow you to bundle them with your theme. There’s no reason to reinvent the wheel!

Bootstrap

Bootstrap Responsive Design Framework

My personal favorite responsive design framework.

Foundation

Foundation Responsive Design Framework

Another excellent responsive design framework.

Theme-Check

Theme-Check WordPress Plugin

This WordPress plugin tests WordPress themes to ensure they follow coding standards. Great for ensuring your WordPress themes follows best practices.

Web Developer

Web Developer Chrome Extension

The Web Developer Chrome extension is great for any form of web development. The “View Responsive Layouts” feature is particularly helpful when debugging responsive themes.

Theme Sniffer

Theme Sniffer Chrome Extension

This is the lightweight Chrome extension I built to detect the template or theme being used on any Joomla or WordPress site.

WordPress Responsive Starter Themes

Here are several options for starting a new responsive WordPress theme. My favorite is Underscores, as it generates the latest version of the official WordPress theme Twenty Thirteen renamed to whatever title you give it.

Guides & References

Here are a few resources to utilize particularly if you’re new to WordPress theme development.

How To Test The Best Responsive WordPress Themes

How To Test The Best Responsive WordPress Themes

When you’re shopping for a premium responsive WordPress theme on ThemeForest you want to get your money’s worth. Choosing a theme can be very overwhelming as there are a myriad of options on ThemeForest. Next time you’re in the market for a responsive WordPress theme you may want to follow this guide to ensure you choose your theme wisely.

Throughout this guide I have used the Avada Responsive WordPress Theme created by Theme Fusion as the example theme in question. I chose this particular theme because it is an extremely popular, well-constructed, premium responsive WordPress theme. I have no association with Theme Fusion.

For great WordPress themes, check out the Top Responsive WordPress Themes Born in 2014.

Test The Theme Demo

  • View Standard Responsive Layouts All At Once with Google Chrome’s Web Developer Extension
  • This is a very efficient & effective way to identify any obvious quality issues with a responsive design.

    Google Chrome Web Developer Extension: View Responsive Layouts

  • Test the responsive design given your specific mobile use case with Google’s GoMoMeter
  • Your particular use case determines whether or not the theme will meet your need as is. For example the Avada Responsive WordPress Theme would require tweaking to accommodate a web site focused on lead generation, but would be ready out-of-the-box for a publisher.

    GoMoMeter Lead Gen Test Results

  • Test the theme’s page speed & underlying quality with GTmetrix
  • Keep in mind that you should ignore the server-side specific issues, since your site will ultimately be dependent upon your own web server’s configuration. Also, some issues are inevitable with very highly configurable themes, as they unfortunately require lots of unused CSS and inefficient CSS selectors in order to accommodate a wide array of optional design configurations.

    Wordpress Responsive Theme GTmetrix Report

  • Test how the theme renders in all the browsers and operating systems you want your web site to support with Browsershots
  • Discovering a cross-browser compatibility issue after you’ve launched a new design is no fun for anyone and cleaning these types of issues up can be very tedious.

    WordPress Responsive Theme Browsershots

  • Test the site for color blind design issues with Chrome Daltonize
  • About 7% of American males & 0.4% of American females are color blind. The Avada Responsive WordPress Theme looks essentially the same when “Daltonized” so I’m including an example screenshot from the extension rather than the example theme.

    Chrome Daltonize

  • Take a quick look at the source code, this can give you a lot of insight into the quality and readability of the underlying code
  • Look at naming conventions, formatting, consistency, code efficiency, referenced libraries, etc. For example, the Avada Responsive WordPress Theme creators leverage the Google Font API and use a CDN for their demo site. They’re also using the meta viewport tag. The fact that they are using these more recent technologies & standards is a good sign.

    Wordpress Responsive Theme Source Code

  • Test the contact form and see if it offers user-friendly validation
  • When theme developers take the time to implement validation on their contact forms they are more likely to spend time on other little, but important details.

    Wordpress Responsive Theme Contact Form Validation

  • Type in a URL you know doesn’t exist for the theme and see if an elegant 404 page design exists
  • On the same note, when theme developers take the time to implement custom 404 page designs they are again more likely to spend time on other little, but important details.

    WordPress Responsive Theme Custom 404 Error Page

    Look for ThemeForest themes with…

  • Elite Authors
  • These authors have earned over $75,000 on the Envato Marketplace, clearly they’re doing something right!

    ThemeForest Elite Author

  • Good Buyer Ratings
  • Pretty obvious why this is important.

    ThemeForest Buyer Rating

  • High Purchase Volume (relative to the release date)
  • Again…obvious.

    ThemeForest Purchases

  • Frequent Updates (relative to the release date)
  • You’re not buying a theme to maintain it’s core design & functionality. Make sure the theme you buy will be supported for the foreseeable future.

    ThemeForest Frequent Theme Updates

  • Significant Customization Options
  • While the theme demo may look spectacular, you’re going to want to personalize it. You don’t want your site to look like all the other web sites running the same theme. Make sure there’s enough built-in customization options to differentiate your site, especially if you’re not a front-end developer.

    ThemeForest Theme Features

  • Unique Theme Features (that you couldn’t easily replicate using freely available WordPress plugins)
  • For example you can get tons of shortcodes and/or create your own by simply installing Shortcodes Ultimate.

    Shortcodes Ultimate WordPress Plugin

34 Google Analytics Advanced Traffic Segment Templates

34 Google Analytics Advanced Traffic Segment Templates

Google Analytics Advanced Segments

Advanced segments in Google Analytics are one of the most powerful tools for gaining immense insight into your visitors. Not utilizing them is a HUGE mistake for any web site owner. For this reason I’ve spent the time creating, collecting and consolidating them to aid you in your Google Analytics mastery. If you have any I missed, please share them. I want to make this the best and most thorough source for Google Analytics advanced segments online. In order to use these advanced segments in your Google Analytics accounts, simply click on the links of the ones you would like below to add them to your accounts for your own use. Note that if you would like to add many or all of these advanced segments, you can save time using the batch installation method explained at the bottom of this post.

Keyword Length Segments

Note that I have excluded keywords with “://” and “.com” in them to avoid URLs and domains from making their way onto this segment, since they are not keywords. I’ve also taken the liberty of removing “(not provided)” and “(not set)” from the 2 Word Keywords segment for this reason.  So obviously, you’ll have to adjust the .com to whatever your domain TLD is, if it isn’t a .com.

Conversions by Visit Count

Josh Braaten recommends this segment because he finds it very useful for lead generation. It shows you how the number of visits impact your conversions and allows you to see different behavioral patterns leading to conversion.

Mobile Traffic Segments

Google Analytics comes with Mobile Traffic and Tablet Traffic segments built-in as defaults. For some odd reason they do not, by default provide Smartphone Traffic or Desktop Traffic segments. You can easily build these missing segments using the default Mobile & Tablet segments, which I have done for you below.

Responsive Resolutions Traffic Segments

Wouldn’t it be useful to see how many actual visitors are encountering the various dimensions of your responsive layouts? A lot of time is spent making sure responsive layouts render well in all the standard resolutions. I’ve created the following advanced segments to help you see how many of your visitors are actually being impacted by your work utilizing regular expressions. I’m utilizing the resolutions found in the Skeleton boilerplate responsive grid. If you have any others that you’d like to see here, please let me know.

Branded & Non-Branded Keywords Segments

I have these setup, so they include “” in the filters. So you’ll need to replace this with your brand name. If your brand is multiple words, it usually make sense to setup multiple filters. For this blog I would use if “penguin” or “initiatives”, rather than just if “penguininitiatives”. This should encompass your core brand as well as brands related to your core brand. This can include projects, products, people, events, nicknames, etc. Essentially anything people may type in to find your web site specifically due to an association with your web site. Take a quick look through your Google Alerts keywords, as some of the keywords you’re tracking there may be relevant. Just scanning through your non-brand keywords will help you identify any of these you may have missed. I have them setup to exclude “://” and “.com” as well as “(not provided)” and “(not set)”, so your segments aren’t cluttered with non-keywords.

(not provided) Traffic Segment

If you want to painfully discover how much traffic you aren’t allowed to see the organic query behind thanks to our friends at Google, I’ve included it as well.

Social Media Traffic Segment

I’ve tried my best to capture as many major social media channels and common social URL shorteners as possible. Feel free to suggest more so we can make this more comprehensive. Currently the list includes: facebook, quora, twitter, linkedin, google plus, youtube, hacker news, reddit, imgur, tapiture, disqus, 9gag, tumblr, stumbleupon, delicious, technorati, digg, myspace, bit.ly, tinyurl, ow.ly, t.co, & tweetdeck.

Blog Traffic Segment

Your blog traffic is another segment that should be included by default, but isn’t. The one below assumes your blog is located at the following path: domain.com/blog/

Filter Major ISPs

Jeff Sauer of Jeffalytics put this segment together to help isolate odd activity on your web site likely caused by unnatural traffic.

Q&A Keyword Monitoring

Kane Jamison created this custom segment to help mine your own keyword traffic for ideas for Q&A content for your site.

Business Hours vs. Off Hours

Michael Freeman of ShoreTel created this custom segment to see what impact business hours 8 a.m. – 9 p.m. (ET) have on your web traffic.

Image Search Traffic Segment

Unfortunately, this won’t get you the detail of the specific keywords driving this image traffic. It will merely tell you how many visitors are coming in per day from Image Search. Google considers all of this traffic “referral” traffic for some bizarre reason, so you’ll need to be viewing the Overview or the Referrals Traffic Source in order to see this segment’s data.

User Behavior Segments

  • Explorers (visited more than 3 pages and are new visitors)
  • Fans (visited more than 3 pages and are returning visitors)
  • Bouncers (visited one page and left)
  • Non-Bouncers (visited more than one page)

Goals Segments

You should absolutely be tracking custom goals for all froms of conversion on your web site (desired actions you want your users to take on your site). Make sure you setup advanced segments for all of your custom goals as well, if you haven’t already.

Share Your Google Analytics Advanced Segments

In order to share your Google Analytics advanced segments, once you’ve created them simply follow the instructions from the Google Analytics Blog: Share your custom reports, advanced segments and dashboards

Save Time With Batch Installs

If you want to install most or all of the above segments, you can save yourself some time by batch installing them via the links below. You can pick and choose which segments you want or do not want to install in each batch.

Return The Favor

On a final note, think about how much time you just saved by having all these advanced segments ready to go for your use. Just imagine how much time that would have taken you to set all of those up from scratch!

Now please return the favor and put forth a small percentage of the time & effort you just saved, by sharing this link with your friends & colleagues via Google+, Twitter, LinkedIn & Facebook!

If you want to go the extra mile, please suggest a useful advanced segment that we should add to our collection here.

Pin It on Pinterest