Quantcast
Channel: Bourn Creative » WordPress Tips
Viewing all articles
Browse latest Browse all 10

A Behind the Scenes Look at a WordPress Website Makeover

$
0
0

Today's Innovative Woman Magazine WordPress Website MakeoverRecently we launched a brand new custom WordPress website for Today’s Innovative Woman, and wanted to share some of the behind the scenes strategy for the site and insight into why we built it the way we did.

At Bourn Creative we view the primary role of design as problem solving. While the visual look and feel is important, it must first and foremost support the overall site strategy.

Today’s Innovative Woman is a magazine for women entrepreneurs and business owners with print distribution of more than 10,000, visibility at events around the country, and a strong online community.

While the original WordPress theme worked great when the magazine was first launched, Today’s Innovative Woman was was quickly outgrowing the site. With a booming community, growing subscriber base, and influx of guest writers and featured experts, not only did publisher Cathy Alessandra need a new custom WordPress site, but she needed a whole new online strategy!

First let’s take a look at some of the issues with the old website:

  • There was A LOT of content on secondary pages and blog posts that was important and needed to be found easily, but there was no easy way to organize and promote it
  • The site navigation strategy was limiting and caused much of the content to be hidden
  • With a radio show, a blog, a nationwide tour, and two large live events, the site was cluttered and cramped
  • The theme itself was lacking some much needed features like footer widgets and multiple sidebars
  • The site was extremely slow to load and would often time out. It also looked less than ideal on mobile devices
  • Feature Experts and Writers weren’t getting the exposure they needed

After strategizing with Cathy to determine the overall goals for her business and site moving forward — and reworking parts of her business model — She turned us loose and let us do our thing (a very rare and welcome occurrence) to come up with a new design and site strategy that not only solved the problems of the current site, but added immense flexibility for the future.

Here’s the final solution that was built:

A New Custom Genesis Child Theme

To start, we planned the new design as a custom child theme for the Genesis Framework. We build all of our WordPress sites using Genesis for the flexibility, security, and built in SEO (Search Engine Optimization) options.


A Wider Design Features More Content

Today's Innovative Woman Website | 1140 Custom Genesis Child Theme

The old WordPress site was based on a 960 pixel wide layout with a border margin, which resulted in a narrow primary content width and limited area for secondary content like sidebars.

The new design is based off an 1140 pixel wide layout without a defined page background allowing for an open, three-column layout. By changing to an 1140 pixel width, the new site allows for a sidebar on either side of the main content. This solved the problem of not having enough space for advertising and still allowing the secondary content to be placed in a prominent position.


Multiple Sidebars to Feature Writers and Page-Specific Content

Since we built the WordPress website using Genesis, we used the plugin Genesis Simple Sidebars so unique sidebars could be used on specific pages throughout the site. The plugin also allows each featured writer to have a dedicated secondary sidebar to promote their own site; an important feature of the client’s evolving business model.


A Whole New Navigation Strategy

Primary and Secondary WordPress Navigation Menu Design

The old website’s navigation utilized a tiered/stacked design, making it a little difficult to create a strategy or hierarchy between the primary site links and the secondary content navigation links.

Our solution was to move the main website navigation to the upper right of the header using a widget area and a WordPress custom menu. By creating a widget area in the header to accommodate the primary navigation, a simple text widget was added above the menu to create an easy way for the client add call to action text to promote the next event at the top of the site. The final strategy for the header navigation was that they would remain constant throughout the site and contain the most important links.

For the secondary navigation menu, we utilized Genesis’ built in menus and added the plugin Genesis Simple Menus, allowing for an alternate navigation menu to be applied anywhere in the site, similar to the sidebar strategy. So you’ll see the content categories featured prominently at the top of the page, and other menus featured throughout the different site sidebars.


Flexible Footer Widgets

WordPress Website Footer Widgets

The final navigation design strategy for the new site was to effectively utilize three footer widgets to feature the remainder of the secondary content that needed to be on every page & post.


Mobile Responsive Design

Mobile Responsive DesignThe old Today’s Innovative Woman site worked fine on mobile devices like iPhones & tablets, but it required pinching/zooming to read the content. As a publishing site that utilizes radio, print media, and social media, we decided to integrate a responsive design strategy. Responsive design uses code to detect the width of the device viewing the site and makes adjustments to re-size and scale the content.

If you view the new site on a tablet or phone, you can see how it resizes and adjusts to fit the screen. For the home page slider to maintain responsiveness, we used our favorite slider plugin Soliloquy. It automatically scales with the screen size without any extra code.

Good news if you want a responsive site too; most of the pre-designed Genesis WordPress themes are responsive out of the box.


More Options For Formatting Content

With the old theme, Cathy had all the basic options for formatting her content — basic and boring! And the type was small, hard to read, and plain old Arial.

The new custom theme features larger type, more white space, and more awesomeness — so it’s easier to read. We pulled in two custom Google fonts to add visual interest in the headlines and subheadlines, brought in the Genesis column classes, coded custom bulleted list styles with triangles and check marks, designed custom feature/testimonial boxes, and used custom social media icons.


Quantum Leap In Exposure for Featured Experts

Today's Innovative Woman Featured Expert Page Design

With the old theme, Featured Writers’ articles were published to the blog and as new content was published they were buried. There wasn’t much benefit for the writers.

Now the Featured Experts (formerly called Featured Writers) have much more exposure with dedicated author archive pages that are indexed by search engines. Writers also have the option to add a customized sidebar to their author archive and articles promoting their free offer, services, products, social media profiles, and more … this way, anytime someone interacts with their content on the Today’s Innovative Woman site, they get much more exposure and more traffic back to their website.

Also, Genesis now features Google+ author support, allowing the Featured Experts to gain more visibility in search results by interlinking their profiles and getting Google to display their photo in search result pages.


Better, Faster Hosting

The final piece of the puzzle was to migrate the new site to faster and more reliable hosting. This is especially important when viewing sites on a mobile device. Today’s Innovative Woman is now hosted at WP Engine, a performance WordPress only hosting company. The site is easily 5 times faster and Cathy can rest easy knowing that her site is automatically backed up everyday.


And That’s It (Except For The Results)!

We hope you enjoyed this glimpse behind the scenes and insights into what really goes into a website makeover.

The new site only launched 16 days ago, and already Cathy is reporting awesome results! According to Google Analytics, new unique visitors to the site are up 27% and her opt-ins have DOUBLED!

And, we hope that seeing how awesome Cathy’s site turned out inspires you to give your designer the freedom to do what they do best too!

The post A Behind the Scenes Look at a WordPress Website Makeover appeared first on Bourn Creative.


Viewing all articles
Browse latest Browse all 10

Trending Articles