Introducing a Mobile-First Genesis Theme

One of the things that I love most about my position in our company is that I have the ability to try new things when it comes to design.

Usually that takes place in the context of developing Genesis themes and it’s always an adventure. So a few weeks ago I started playing with the idea of creating a mobile-first version of the default Genesis sample theme.

The idea wasn’t exactly new to me, since community member Mickey Kay and his team at Mighty Minnow had released their own version last year. I’ve also had a few brief conversations with Gary Jones on the subject of mobile-first as well.

I decided it was time to embrace the idea that a mobile-first strategy with theme development was something to consider. I’ve read many articles on the subject, and thought it was finally time to see what the fuss was all about.

So I downloaded our sample theme, installed a fresh demo and began hacking away at the CSS. Check out the Mobile First demo site to see what happened.

I plan on writing more about the actual process and what I’ve learned along the way, but in the meantime I thought that I’d share what I’ve been working on.

And … the Mobile First theme is FREE to download. Click here for access.

Optimize Images for Retina Display

A few weeks ago I wrote about optimizing Gravatars for Retina display. This used CSS to resize images of authors and those who leave comments on your blog.

But what about images inside the entry content of your post?

Well I took matters into my own hands, and decided to do a little research. One could argue that the same process as optimizing Gravatars would work with post images, but there’s a cost involved with that.

Typically images that are found in posts can range anywhere from 400-1000 pixels in width. If we chose the @2x method, this would mean that each image would be between 800-2000 pixels in width.

Serving images that large on every page load could result in a tremendous resource hog, not to mention it would eat away at your bandwidth.

As I was doing my research on a better way to serve optimal images to folks with a Retina display, I found a script that came highly recommended by many.

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

How Retina.js Works

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple’s prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

If you have an image in your blog post that looks like this:

The script will check your server to see if an alternative image (appended with @2x) exists, and if it does, will output that image along with the original height and width. The new HTML would look like this:

Below is a sample image that is dynamically being served with the retina.js script. The image you see was added to this post with the first set of HTML you see in the code above, but output as the second set of HTML code.

Golden Gate Bridge in San Francisco

(Note: If you’re reading this post via email, you won’t be able to see what I’m talking about. Head over to the browser version of the post for the good stuff.)

How to Implement Retina.js

Now that I’ve sold you on adding the retina.js script to your site, I’ll walk you through how to implement it. It’s quite a simple process, so don’t sweat it.

The first thing you need to do is download the retina.js files. Unpack the zip file and you’ll see a folder with two files inside. (retina.js and retina.min.js)

Copy the retina.min.js file, and place that into the /js/ folder inside your theme. If your theme doesn’t contain a /js/ folder, just create a new one and then upload the file onto your server.

Now you need to properly enqueue the retina.min.js file your functions.php file. Most themes already have an enqueue function that is loading other scripts (such as responsive menu js file) or styles such as Google Fonts or Dashicons.

Here’s how the enqueue function looks in my theme. Notice the second line of the wp_enqueue_script — that is where I’m loading my retina.min.js file.

Creating Retina Images

Now that you’ve got the retina.js loaded on your website, it’s time to talk about the images you want to show on your blog post.

Because you will be serving @2x images, you need to figure out what the width of your content area is, and then create images that are twice the size. For instance, my content width is 720px, so I create images that are 1440px wide.

The image of the Golden Gate bridge above is 1440px by 720px, but I also need to have a smaller version of that with half the dimensions that will be served on displays that are non-Retina.

When I want to show an image, all I have to do is upload both the regular size version (720px by 360px) as well as the @2x size version (1440px by 720px) through the Add Media option in my post editor.

Because both files are being uploaded into the same directory, the retina.js script finds the Retina-optizmed version and displays that when necessary.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Display an Email Signup Form After Blog Posts

It’s no secret that one of the biggest keys to success for growing your business is email marketing. While it might seem old-fashioned compared to social media, the effectiveness of email marketing can still be huge.

Of course you need to make sure you’re doing it right, so be sure to build trust by giving your subscribers something of value.

Genesis has made the process of collecting emails simple. With a few lines of code and a plugin, you’ll be on your way to building your business.

Enabling the After Entry Widget

After releasing a number of StudioPress themes that included an after entry widget are that we registered via the theme and a custom function, we decided it was time to make that even easier to do.

We added code inside of Genesis that does all of the dirty work for you, so all you need to do is place the code below into your theme’s functions file:

This code will register the after widget area for you, and place it directly onto the genesis_after_entry hook.

Adding the Genesis eNews Extended Widget

The next step in the process is quite simple as well. Download and install the Genesis eNews Extended plugin on your website.

For those of you who are unfamiliar, this plugin creates a new widget to easily add mailing lists integration to your Genesis-powered website. Email providers supported include FeedBurner, MailChimp, AWeber and FeedBlitz.

Once you have activated the plugin, go to the Appearance > Widgets screen in your dashboard and place the Genesis eNews Extended widget into the after entry widget area.

Now you can configure the widget options based on your email provider and customize text for input boxes and submit buttons.

Styling Your Email Signup Form

At the bottom of my blog posts you will see that I’ve placed an email signup form. I’ve styled the form a bit through my theme’s style sheet in order to get it to look the way it does.

Below is the CSS that I used on my form, which should give you a place to start on styling your own email signup form.

Enabling theme support for the after entry widget area results in the widgets being placed into a container that has the .after-entry class applied to it.

Obviously the CSS that you see above is customized to match the look of my site, so you might need to add/remove some of what you see.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.