Get a Responsive Design and World-class Performance with the New Effectus Skin

by Chris Pearson · 63 comments

This year, Google announced that it would be increasing its use of mobile-friendliness as a rankings signal.

This is big news, but it isn’t really surprising, as the web has been heading in a more mobile direction for quite a few years. Responsive design has been the rage for a long time, and all of our Thesis Skins feature responsive designs that look great on every device.

But just having a responsive design doesn’t make your site mobile-friendly. Because mobile internet connections are, on average, much slower than broadband signals, site performance is every bit as important as having a responsive design…perhaps moreso!

Everyone is making a big deal about responsive design right now, but did you know that Google has been using site performance as a rankings signal since February of 2010?

This is where most WordPress Themes and responsive designs fall woefully short: Design is easy to see; performance is a bit more nebulous and is affected by many factors.

At DIYthemes, we like to sweat the details, and we love performance. This is why we’ve created the new Effectus Skin, which brings you a customizable responsive design with a huge helping of world-class performance enhancements.

The MOST Customizable Responsive Design

With the Effectus Skin, you can choose from 1, 2, and 3-column layouts, and you can orient those columns in any way you like (3-column with content in the middle, for example). Of course, you can also make these columns any width you want.

I could go on and on about the design flexibility here, but I think the following examples illustrate this more effectively than I can:

I made each of the examples above in about 2 minutes by using only the Design options in Effectus. And it’s not just about the layouts, either—you can control fonts, colors, and even the big images that appear in the Action Box at the top of the page from the comfort of your WordPress dashboard.

Speaking of the Action Box…

Action Box for Opt-ins, Sales Leads, or Just Showing Off!

Did you notice the big email opt-in form atop the sample designs linked above? That’s the Action Box, a totally customizable area that is sure to grab your visitors’ attention.

Whether you’re looking for a serious email opt-in area or simply trying to point your visitors in a specific direction, the Action Box is ready to be whatever you want it to be.

You can place images, video, or anything else you want in the Action Box. Once you’ve done that, you can precisely control the look of your Action Box by using the built-in Design options to do things like add background images or change colors, which I did in the examples linked above.

Google Fonts, but without the Performance Hit

Plenty of WordPress Themes include access to Google Fonts, but have you ever run one of these things through the Google PageSpeed or GTmetrix performance analyzer?

The results are…shocking, to say the least.

Nobody wants to give up the customization flexibility fonts provide, but man—that performance hit is a serious bummer.

I’m happy to report that we’ve solved this problem with Effectus.

The Effectus Skin features an asynchronous implementation of Google Fonts, which is a nerdy way of saying that Google Fonts won’t slow down your page loads or cause a damaging performance hit in your metrics.

So go nuts—pick any font you want, and rest assured that your site is still fast and optimized for your ever-growing mobile audience.

Oh, and Effectus will help protect your search engine rankings, too, as Google continues down the path of favoring optimized performance over just about everything else.

Custom Post Editor Buttons for Enhanced Style

Creating stylish and interesting content has never been easier than it is with the Effectus Skin.

In addition to a new appearance that more accurately reflects how your posts will look once they’re published, your WordPress post editor now includes special content buttons as well.

Effectus post editor buttons

Figure 1. You can use the Effectus post editor buttons to create drop caps, notes, alerts, tips, content boxes, and even blocks of code.

Not familiar with notes, alerts, tips, or content boxes? I think you’ll dig ’em—see what they look like below:

Effectus notes, alerts, tips, and content boxes

Figure 2. Notes, alerts, tips, and content boxes in the Effectus Skin.

Responsive Design Done Right

Not all responsive designs are created equal. In fact, there’s a built-in paradox with mobile responsive design that makes it much more difficult than just, “Make this design appropriate for mobile devices.”

The issue? Performance. Sites need to be slimmer and faster on mobile devices, but responsive CSS is much bulkier than “classical” CSS, which results in longer loading times. This is strike one.

In addition, it’s become fashionable to make responsive menus and other elements operate with JavaScript—specifically, jQuery—and these fancy treatments require more resources and take longer to load than simpler approaches. Strike two.

Finally, mobile-responsive CSS isn’t even sufficient to handle everything you might put on your site. For example, typical YouTube and Vimeo video embeds, while technically responsive, appear both small and unsightly, especially on mobile devices in portrait orientation. Strike three.

Effectus includes thoughtful solutions to each of the issues described above.

For starters, it’s got a mobile-first stylesheet, which is the leanest and most effective way to write mobile-responsive CSS. You can rest assured that the Skin is loading the minimum amount of resources for your mobile users, and that translates to better site speed all around.

Next, Effectus does not include jQuery or other bulky scripts that unnecessarily weigh down your site for mobile visitors. Wherever possible, we’ve taken a minimalist approach that favors speed and efficiency over flashiness that adds little or nothing (or sometimes even annoyance!) for your visitors.

Third, Effectus contains a bit of automatic magic that ensures your YouTube and Vimeo embeds will look excellent on all devices and in all orientations. I’m not aware of any other WordPress Theme that includes such thoughtful, mobile-centric detail.

The bottom line? With Effectus, we’ve covered an unprecedented number of details, all with the goal of providing you with a responsive design that maintains the highest standards of performance and efficiency.

Explore Effectus Skin Features

You can see the Effectus Skin in action on the Thesis Skin Demo site, but I’d like to provide you with some specific things to look at instead of just sending you over there and telling you to let ‘er rip.

A Word About Effectus Creator Matthew Horne

Effectus is the first official Thesis Skin from Matthew Horne, who joined the DIYthemes team in January 2015.

Matthew has a keen understanding of the Thesis architecture coupled with a mind focused on optimization and performance, and this combination makes him a world-class Skin creator.

On top of that, he’s completely dedicated to building web design and development products that give you the flexibility you want without sacrificing anything in the performance department.

His efforts shine through in Effectus, and I know you’re going to like working with this fine Skin.

How to Get the Effectus Skin

To get the Effectus Skin, you must own an active Thesis license. (Don’t have one? Get one here.)

If you already have a Thesis license, simply log into DIYthemes, and then visit the Get Skins page. Click on Effectus, and boom—you’ve got world-class performance and unparalleled responsive design flexibility.

Live Effectus Demo with Thesis Creator Chris Pearson

To see Effectus in action and to learn more about it, check out this webinar.

Finally, we’d love to hear what you think about Effectus, so give us your feedback in the comments below. Happy webmastering!

About the Author: Chris Pearson, Thesis creator and DIYthemes founder, is obsessed with optimizing the web and making sure every last detail receives the attention it requires. You should follow him on Twitter here.

If you enjoyed this article, enter your email below to get free updates!

{ 63 comments }

Ramanan

I use Thesis 1.8.6. Can I use Effectus, or is it only for Thesis 2?

Chris Pearson

Hi Ramanan, Effectus only works with Thesis 2. Since Thesis 1.8.6 is not responsive, you might consider upgrading now that Google has gotten so serious about mobile-focused design.

Reese

Chris and Matthew,

You guys nailed it again! Can’t wait to get my hands on this beast of a skin.

Kumar

Hi Chris,
I just purchased the new skin. Can’t wait to get it up and running. I have been a thesis user for over 5 years now and I can say that I am very happy with thesis. You guys did a fantastic job.
Are there any updates coming to the core thesis platform layer ? Have not seen any updates. Wordpress is upgraded by few versions, but have not seen any changes to the core from your team…would love to hear from you.

Chris Pearson

Hi Kumar, the primary reason we haven’t updated the Thesis core is because it’s so stable.

That said, we have a development roadmap for version 2.2 and are working through it now. There’s no official timeline yet, but we have a few new and exciting features in the works.

Kumar

Thanks for the response! Cannot wait to see the new roadmap…cheers!

Ron Devito

I’m currently running Pearsonified. Should I be looking to phase that out and use Effectus in its place? I’m speaking in terms of performance and Google ranking.

I like the feature set of Effectus as described here – specifically the post type / alert and the action box. For a political news site, there is a strong argument to migrate for these features.

Chris Pearson

Ron, not unless you want to. Like Effectus, Pearsonified is geared toward maximum performance and accessibility.

In addition, the Pearsonified Skin already contains styles to handle notes, alerts, and content boxes, so the only things you don’t have right now are the additional post editor buttons.

(For the record, you can deploy these styles by switching to the HTML post editor and adding classes of note, alert, or box to paragraphs of text.)

We’ll be updating Pearsonified with those buttons soon, though.

As for the Action Box, we may consider including one of these in all of our Skins, as it seems like a crucial element for just about any kind of site where opt-ins or lead generation are a primary concern (which is just about every successful site).

That said, if you’re looking for these features right now, then Effectus is ready to rock!

Rick Lomas

I’m a huge fan of Pearsonified too, I’ve gone pretty deep with it on my site. I am interested in the bits you mentioned about Effectus behaving properly with YouTube and the Google Font issue. Could these get incorporated into Pearsonified in the future?

Chris Pearson

Rick, we’ll be adding both of these features in the next Pearsonified update.

Rick Lomas

Boom! Exactly the answer I wished for – Thanks Chris 🙂

Ron Dowd

Hi Chris,

Another Ron here – couldn’t agree more with Ron Devito. I’ve spent some considerable time now with the Pearsonified skin (I was an early adopter of Thesis and upgraded from 1.x earlier this year.) So far (with the help of the forum) I’ve been able to do everything I’ve wanted to do. Very impressed!

Only slight gotcha has been a problem with Article Schemas, which don’t seem quite right (see my forum post) but I’m hoping this will be addressed in an upcoming Thesis release!

Seth

Dudes, love this skin. Fixes a few issues that have bothered me a ton. Hard to pick at it, but only thing I saw as landscape vs portrait view on mobile zooms the text. Pearsonified skin is the only one that doesn’t. That said, benefits far outweigh that tiny detail. Super good job fellas.

Chris Pearson

Good spot there, Seth. Matt is all over incremental updates on Effectus, and this will likely make the next round of fixes.

That aside, glad you’re digging the new Skin!

Jessica

I was just about to take the plunge into the Pro theme. How is Effectus different?

Chris Pearson

Are you referring to the Thesis Professional License? If so, that’s just a Thesis license that includes three Skins: Classic Responsive (included in all Thesis licenses), Social Triggers, and Pearsonified.

Effectus is an add-on Skin that you purchase separately.

At this time, Pearsonified and Effectus are our most advanced Skins, and Effectus currently offers more features and more design flexibility than Pearsonified.

Regarding design flexibility, Effectus can be configured in 1, 2, or 3-column layouts, but Pearsonified is only available in a 2-column version.

Aniruddh

Hi,

I am using Personified skin. I read in your documentation page that, Effectus comes with Related Post Box. Can i purchase only related post box? Any new boxes like Popular post coming soon?

Chris Pearson

Aniruddh, we do not currently offer a Related Post Box for sale, but based on your comment, we’ll consider releasing this (and other Boxes similar to it) in the future.

Aniruddh

Hi Chris,

Thanks for the reply and promise on boxes. It will be very useful for a person like me who doesn’t know any coding.

Hugh

Great, but I am still using Thesis 1.8 because I am not a web developer and just want a site that works and am totally confused with all this talk about skins and things. Do you have some idiot’s guide to using Thesis 2.x and can I try implementing it on one of my sites and then revert if I do not like it, or will I end up with a lot of changed settings that will take me hours to undo? I want to spend what little time I have on content not website development, but I have had the warnings about my sites not being mobile friendly.

Chris Pearson

Hugh, Skins are WordPress Themes. The only difference is that they run on the Thesis architecture, which enables them to do lots of things that typical WordPress Themes cannot do.

The primary reasons to update your site to Thesis 2 are for the enhanced performance and access to Skins, which are customizable, mobile-responsive designs that have been optimized to perform well in search engines.

Activating Thesis 2 will not affect any of your Thesis 1 settings, so you can go back at any time.

Thesis 2 represents everything I’ve learned over a 10 year web design and development career, and I’m confident it will put your site in the best position to succeed moving forward.

Frank

Not every Blog has the Need for Opt-ins or Sales Leads, that are placed inside the Action Box. I wish that there were an Option to put Featured Posts in the Action Box. Then this Skin would be much more flexible.

Andre Chaperon

Chris, Effectus is a great addition (picked it up over two weeks ago).

BUT when are you going to support oversized (overhanging) images that extend outside of the normal column width, like this:

https://resonardemo.wordpress.com/image-alignment-and-styles/

(See the moose about half way down.)

Pretty please.

Andre

Chris Pearson

Andre, I’ve been wanting to do something like this in a simple, 1-column Skin, so perhaps you’ll see this kind of treatment soon 😀

Andre Chaperon

Yeah! … WOOP! WOOP!

Patrick

Really a great Skin!

Is there a video of the live Demo I can watch? I had to leave after 20 minutes and I really would like to see the rest…

Chris Pearson

Patrick, we’re going to do another webinar (live demo + Q&A) on Wednesday, June 3. About 24 hours after that, we’ll post a link to a replay so you’ll be able to watch it whenever you want.

Gerald Lopez

Hey Chris thanks for the demo today. Effectus looks the business! I also learned heaps about Thesis just listening to you, especially about best practices and tips – gems that would take months of hanging around forums (which I don’t have time for). Can you please please please consider doing regular webinars on how to best use Thesis and your skins? I’m sure other readers will agree with me!

Cheers mate!

Chris Pearson

Gerald, at the very least, we’ll have webinars covering our Skins, which should provide insight into how to use Thesis most effectively.

We did a webinar for the Pearsonified Skin last year, and I’m working on making that video public as we speak.

Gerald Lopez

Thanks Chris, I assure you watching the experts talk about Thesis and the skins, especially key designers like yourself, is vital for users. We get to know the why and how of Thesis, and the rationales which provide the big picture. We get to know WHY Thesis is the best product out there, which inspires us to delve into it more and become experts ourselves.

Hans Braumüller

Hi Chris,

I mailed yesterday with your team member Godhammer regarding your new Skin, but I could not assist to your webcast. Is there a recording at youtube or at your site now available?

I am curious, because I am thinking about upgrading of Classic Responsive to this Skin. The font-family is easy to replace? I want using other type, maybe a Google Font, with greater condensed headlines and a little less technical style for the rest, what you are showing at demo version.

Have you an affiliate program? Maybe I can earn the costs for the new Skin, telling about it at my SEO Site, you find linked from my name.

Greetings from Hamburg, Germany.

Chris Pearson

Hi Hans, no recording is available yet, but we’re going to do another Effectus webinar on Wednesday, June 3.

Regarding Effectus, changing fonts is as simple as selecting the font(s) you want in the Design options. Out of the box, Effectus comes with 69 Google Fonts plus standard fonts that are considered to be web-safe.

In addition, you can add any Google Fonts you want at any time, so you have total freedom and flexibility with your fonts.

Finally, you can sign up for our affiliate program here.

Kerem

Just as I wanted a theme. It was very nice. thanks

Taswir Haider

Good to see adding asynchronous functionality for Google fonts, this has really speed up things. But it would be nicer if the theme support Thesis 1.8.6 as well. I am still Thesis older version freak, so couldn’t wait to see the same.

Chris Pearson

Taswir, I stopped working on Thesis 1 in early 2010. Thesis 2 represents the synthesis of everything I learned since I started working on the web 10 years ago.

Now that Google is putting such an emphasis on responsive websites, it’s time to upgrade. Thesis 2 is better in every single way.

Daniel Daines-Hutt

Really excited to check this out

I’m a sucker I think I have like 5 different thesis skins to choose from!

Daniel

Rick Cano

I’ve been running my personal site on Thesis 1.8.6 only because I hadn’t really used my personal site for any real purpose…but had been thinking about using it more for personal interests.

Your new Effectus skin with Thesis 2.0 is the motivation I was looking for to make the transition. The demo was excellent…loving it already.

I’ve been a licensed member for over 5 years…DIY Themes have delivered the goods every single time. Thx

Chris Pearson

Sweet! Get your upgrade on 😀

Hafiz

You guys are simply awesome. I am a old user of thesis but still it makes me amuse. Really love the skin. Thumbs up for you guys

Chris Pearson

Thanks, Hafiz!

Sunny WordPress Pro

Hi Chris,

I had faced issues in past with other skins in the opt-in forms with text boxes alignment & re-sizing in responsive layouts. Even multiple fonts sometimes gives trouble in responsive web forms design when the resolution gets smaller. I wish in the WordPress Effectus Skin takes care of it.

Chris Pearson

Sunny, you won’t experience any of these problems with Effectus.

Manuel

Nice Theme for Thesis! But there is one question: is it possible to fix the nav-menu (“floating menu”) out of the box?

Chris Pearson

Manuel, for performance reasons, Effectus does not include any JavaScript for this purpose out of the box. However, it’s trivial to add, so you could certainly do this yourself without much trouble.

David Alexander

Looks pretty cool but doesn’t seem like a lot after nearly a year without much overall progress with Thesis. Thesis is still awesome no doubt but there are some aspects I wish had evolved already. Not to say anyone else is really doing a better job, I have mostly the same pet peeves with Genesis and some additional issues but there is so much more potential that Thesis is yet to demonstrate. Lets hope over the next few months we see some changes to the core. Also I miss the days when the DIYThemes blog was regularly updates and used as a means of communicating with the customer base and proponents of this wonderful tool.

I do however love that the skin uses the WYSIWYG, I tried and failed to do that with a skin before :p utilizing WP more and the tools it can provide seems the way to go especially as they put more and more emphasis on the customizer RE: Chris’s tweet from today https://twitter.com/pearsonified/status/606451096823808001 even if not everyone is behind it, some things work in customizer, some don’t I guess. I personally agree that menu editing on front end seems unnatural.

Chris Pearson

David, I’m curious to see what you think is missing from core.

From my perspective, the most critical addition to Thesis is not code, but rather education and demonstration.

Thesis is the world’s first 100% data-driven, object-oriented template system, and because of this unique status, outreach and education are far more important than incrementally adding bloat to the core.

Personally, I’d actually like to remove a few things from core and make it even slimmer than it already is 😀

Finally, keep in mind that each Thesis Skin is essentially a full-featured WordPress Theme. Many companies are based on a single Theme (indeed, DIYthemes operated this way for its first 4.5 years), and now, we have 5 excellent Skins with a 6th on the way.

Thus, while the progress may seem slow, the usable results are profound when viewed from this perspective.

At any rate, stay tuned, because I think you’re going to appreciate the progress we’ll be demonstrating over the next few months.

Manuel

Thanks for your quick answers Chris! The only thing i would like to wish is an translation feature. For example it is not that easy to change the red “Read More” into another language. I also found no solution to translate “You may also like …” or “add one” (comment).

Chris Pearson

These specific items are on the Thesis 2.2 development list, so you should be able to achieve a complete translation once this new version is released (no release date yet).

samtaa jain

Hi chris, i love this theme, how much it will cost me?? please reply..

Chris Pearson

Effectus is a one-time, $67 purchase.

Sandeep

Responsive design themes, how much does it affect on rankings

Chris Pearson

Sandeep, Google doesn’t reveal how much particular factors affect rankings, but suffice it to say—whenever they make an announcement like this, it’s because they are letting you know this factor is now a big deal.

In other words, your site will continue to slide in the rankings over time unless you make adjustments to enhance “mobile-friendliness.”

Sandeep

Thanks for the response, I will keep that in mind.

Dr. Lawrence Kindo

This Thesis Skin is quite a piece of work. I am enjoying the bells and whistles that come with this skin. I was pretty amazed with the number of ways I could modify my websites with just a few minor changes in the dashboard. The visual editor with the additional buttons for boxes is really amazing! You should definitely try it.

I do hope the Thesis Team come up with more innovative skins to help us noobs without dirtying our hands with code. I managed putting my site live with the new skin within 20 minutes of tinkering, and mind you, I am no pro!

Thanks again, Chris for this great Thesis Skin!

ilham

I think i need to use this design for my new landing page

Jay

How do I recover my DIYthemes account when the email I used to register is no longer active?

Brian

This looks very nice. I was just looking to redesign some of my websites. I really like how simple but at the same time modern it looks.

hafiz

You guys rock again . can’t wait anymore. Effectus is really effective.

Atinder

Effectus is a great Skin with 3 columns, fixed width layout, content in the middle. I just started using it on my Micro Niche Blog and I am happy with it.

Warrior Marketing

This is an amazing skin! I can see the marketing possibilities just looking at the demo. Great work!

Lenard Rusty

I do hope the Thesis Team come up with more innovative skins to help us noobs without dirtying our hands with code. I managed putting my site live with the new skin within 20 minutes of tinkering, and mind you, I am no pro!

Thanks again!!

Salman Aslam

Nice work guys! Really glad that you are keeping up with new features, designs and changes to stay updated and relevant.

Make sure to keep doing that 🙂

Rob Stephens

Being a graphic designer I love to work with new web fonts so i’m happy you took this into consideration with Effectus. I ran one of my old websites though GTmetrix and was shocked at how much Google fonts were affecting the page speed!