Build Your Own Business Website header image

Using the Agility 3.2 Skin for Thesis 2.3

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

My goals in developing Agility 3.2

  • Easier to layout and style the site
  • More control over the mobile experience
  • Easier and more granular control of template management
  • Fast and lightweight
  • More flexible Schema
  • Flawless Responsive Video

I wanted it to be easier for beginners to layout and style the site. I wanted you to have more control over the mobile experience so that the settings that were applicable for the desktop could be modified, for example, for a smart phone.

I wanted you to have easier and more granular template management because I want you to be able to restore individual templates to their default condition or restore parts of templates and not have to restore the entire Skin to its default.

I wanted a website developed with Agility 3.2 to be fast and lightweight so that’s how I developed the Skin.

I wanted you to have more flexible control over Schema and I wanted you to have flawless responsive video. Those were my big goals for the Agility Skin 3.2.

Easier for Beginners

The first part of easier is really easier for beginners creating the site and customizing the site. In the first place the majority of users are not going to need to learn how to use the Skin Editor.

No Need to Use Skin Editor

For a lot of beginners the Skin Editor is intimidating so my fundamental desire in Agility 3 was to make it so you did not need to go into the Skin Editor to do anything. There may be one or two things you might want to change that you can’t change without going into the Skin Editor but for the most part you can develop a good-looking effective fast website without ever touching the Skin Editor.

No Need to Write Custom CSS

The second thing I wanted to do was to make it so you didn’t need to write custom CSS. And even if you know how to write custom CSS, I want it to be faster and more error free by using settings to write the CSS for you.

Automatic Golden Ratio Typography

I also wanted to have automatic golden ratio typography. By that I mean regardless of the width of the site, regardless of the width of the column on the site and regardless of the width of the device that is viewing the site, I always wanted perfect typography. That means the system is able to calculate that for you every time no matter what you changed and no matter what the condition was.

Easy Social Networking Setup

I also wanted beginners to have easy social networking setup. Social networking plugins are notoriously heavy. They notoriously slow down the rendering of the site and they are notorious for interfering with other things. I want you to have all the benefits of social sharing and social profiles without all the downsides of the ways people do it today.

Easier for Professionals

For pros, I wanted you to have more and better tools in the Skin Editor.

Whole New Tool Set in Skin Editor

You’ll see that when we start talking about some of features. Agility 3.2 contains a whole different tool set than you might be familiar with if you look at other Thesis Skins.

Design Options for Pros

And I wanted to have design options that really are for the Pros. Design options that allow you to customize media queries, allow you to streamline javascript and allow you to go above and beyond in terms of styling menus and that sort of thing. I wanted some design options in there just to make the Pro Shop easier.

How Agility 3.2 is Easier for Beginners

So how does agility make things easier for beginners? Well, it provides a highly customizable header and footer without using the Skin Editor.

Highly Customizable Header and Footer (Without Skin Editor)

We’re going to talk about configuring header and footer in detail later but I didn’t want you to ever have to go into the Skin Editor to say put a widget in the header instead of a header image. I wanted you to not have to go into the Skin Editor if you wanted to include a search bar here instead of a phone number. Or if you want three widget areas across the header.

Changes Made Affect All Templates

In a typical Thesis Skin, if you want to make those kinds changes to a header you have to do it in every single template inside the Skin Editor. With Agility 3.2 you don’t ever have to go into the Skin Editor for those changes and when you make those changes they migrate across all of the templates. It doesn’t just affect one template.

Highly Customizable Front Page Layout (Without Skin Editor)

I also wanted to do the same thing for the front page layout. I wanted you to be able to decide what kind of content you want on your front page, whether it’s a slider or it’s a call to action or some other type of content, and to be able to make those choices for yourself without having to it inside the Skin Editor.

You could say, I want four columns here and I want them all the widgets or I want four columns here but I want two of them to be featured content boxes and two of them to be widgets. You can do that sort of thing, have that kind of control without needing to use the Skin Editor.

Style Everything from Skin Design

I also wanted you to be able to style everything from the Skin Design. When I released Agility a year and a half ago, the desire to do that resulted in about 3,500 design options which meant that you had to have a pretty powerful server setup in order to really manage all of those design options.

Works with All Hosting Now

That didn’t work well for everybody. So, I changed the list of design options and we actually have more choices and I reconfigured them so that even the least expensive shared hosting system can use it.

What You Can Style Here

You can still style all different kinds of backgrounds. You can provide different widgets styles. You can style different types of calls to action and different types of menus. Again, you can do all this without having to write custom CSS.

Individual Template Options

I wanted you to have a really easy way to turn on and off on a per template basis design options. In a lot of Skins if you turn off the date you’re turning it off for the whole site. Well, maybe you want the date off pages but you wanted the date on for posts. I want you to have that choice. And again you don’t need to get into the Skin Editor in order to create a custom template so you can make that choice that way.

Responsive Video With Click of a Button

I also wanted to give you the ability to have a responsive video simply with a click of a button. As part of Agility 3.2, every post and page has a section called Agility page details. One of the things you can do is choose specific Schema for that but another thing that you can do is add responsive video.

If you’ve embedded video somewhere on this page whether it’s in the sidebar or it’s in your content area, all you have to do is check this box and the video on that page will be responsive.

The reason why we just don’t do that for the whole site is because the chances are you don’t have videos on every page. It doesn’t make a lot of sense to provide responsive video that will increase page load where it is not needed. So, we just do the responsive video on those pages that will benefit from it.

Easy Template Restore

I wanted a simple and easy template restore. This is especially valuable for beginners because you get in there and play around not realizing that you’ve made a change you don’t want or a change that has gone across all of your pages or you’ve made some change and now you want to restore a specific template back to its original condition. We now have Agility restore templates to help with that.

You can say “I just want to reset the header” and this will reset the header to the Agility defaults all the way across the board. No matter what you’ve done to the header this will fix it in all of the default templates in Agility.

The same thing is true with the footer. If you played around with the footer, maybe you changed the footer in the Skin Editor on a couple of pages and you want to change it all back and you don’t remember how to do that, all you have to do is reset the footer to defaults. The footers all the way across the site will be restored back to defaults.

The same thing exists for templates. You may have made a change to one of your templates and you don’t really remember how to get back to the original. Or you weren’t happy with it but you can’t get back to the original. Now you can always say I want to get my no sidebars template back to its default, put a checkbox in there, click the button and that template will be restored to its original condition.

In regular Thesis, there isn’t any Skin available except for Agility 3.2 that I know of in which you can do this kind of restore. The only way you can restore a template is by coming over to the Skin Editor, going into the Data Manager and restoring defaults. And when you restore a default, you don’t have a choice of which template you want to restore. You can choose to restore templates or boxes and CSS variables or whatever but you can’t actually say I only want to restore this template and I want everything else to remain the same. I think that’s especially useful for and makes it easier for beginners.

I already showed you that easy flexible Schema where all you have to do is choose on the page what you want the Schema to be if you don’t want it to be the default. We’ll look at social networking here in a minute and you’ll see that too.

How Agility 3.2 is Easier for Professionals

So how does it make it easier for Pros?

Simple Method for Creating Responsive Layouts

The most important way in which we make it easier for Pros is that when they’re customizing a template, they have very simple method for creating responsive layouts. In prior versions of Agility you would have had to create column wrappers and reverse column wrappers and columns and all that sort of thing.

Column Layouts

Now if you need to create a section that you want to be responsive all you have to do is come down to the Agility Easy Responsive Column Section and here you’re going to choose your columns and column configuration.

You can add classes and ID’s for a column wrapper, you can add an area wrapper, you can add page wrapper, you can remove or include typical padding on the columns and you can even add a heading above the column section. Once you’ve done that, all you have to do is drop the columns into place and you have a responsive column section without cluttering up this box with a whole bunch of different parts of responsive column system.

Subcolumns Layouts

The same thing is true within Agility Subcolumns Section. This is designed to allow you to nest columns. Let’s say you wanted to have three columns inside of some column. Obviously you’re not going to nest a single column but let’s just say you want to do three columns equally sized inside of a column that is half the width of the page. Well, that’s what this nested or subcolumns section is for.

This section allows you a great deal of flexibility and it’s always going to be flawlessly responsive. So, no matter what your page view is, everything is going to collapse and expand properly based on the width of the device being used.

New Boxes

We also have a bunch of new boxes.

  • Enhanced query box
  • Related posts query box
  • Related post thumbnails query box
  • Fluid grid layout
  • Agility hook box

We will talk about all of these boxes in depth as we go through the seminar series.

New Options

We also have a whole set of JavaScript options which allow you to customize what JavaScript gets loaded which can help you speed the side up. We have custom media query options that allow you to fine-tune the views on a mobile device and we have a bunch of supplemental style options for various widgets styles or menu styles or text area styles. These styles don’t apply to anything specific yet but you can create HTML that can then use these additional styles.

Styling Features

Speaking of styles, Agility 3.2 has a ton of cool styling features.

  • Google fonts
  • Font Awesome icons
  • Color scheme generator
  • Menu styles
  • Easy website width configuration
  • Easy styling of elements and areas

Color Scheme Generator

The color scheme generator is very cool and you would be familiar with you if you have been using Agility 3. If you aren’t familiar with it we will be covering this extensively tomorrow. This is a color scheme generator where you can choose the color that you want to use as your base of your color scheme. It’s best if I show you. Here’s where you get a complimentary color scheme based on that color and here’s a complementary color scheme.

You could say show me a split complementary color scheme. That’s essentially a three color scheme. You can decide to look at a Triadic color scheme which is sort of in between complementaries and you know you can look at an analogous color scheme or monochromatic color scheme.

And when you get a funny thing like that you just flip it and try it again. The way the color wheel works sometimes you have to go backwards instead of forwards to the calculation. Anyway you’ve got an analogous color scheme here as well. I think it’s that’s a pretty sweet little tool.

Menu Styles

We have a whole different menu styles. My menu looks different because of changing the color setting. But let’s say you want to change the background. If you want to change the background color, you don’t have to remember what the color name is because the color scheme shows up in your color choices. It makes it a lot easier for you to apply your color scheme to various elements in the Skin. Anyway, I’m very happy with the color scheme generator.

Website Width Configuration

You also have very easy website width configuration. Most themes have a set width but in the Skin Design you can choose the typical desktop width. You have a choice of full screen which means it’s going to be as big as a monitor is or 1280, 1140, 1032 or 960 pixels.

When you make those choices, the font size, the padding, the margin, all of that automatically recalculates so that it matches. It applies the golden ratio typography to the width of the columns and the width of the page and that translates all the way down into devices so you have a very wide flexibility there.

Areas and Elements You Can Style without CSS

Also, you now have essentially easy styling of everything. You can style your content, your icons with different background colors or borders or padding and different Skin colors. You can style calls-to-action, you can style widgets, you can style background sections, you can style all of your fonts. You can style read more button, call to action buttons and phone numbers.

You can you have complete control over all of the styles without really having to resort to custom CSS. In fact, BYOB Website has very little custom CSS because BYOB Website is now running Agility 3.2. Most of the styling comes from the Skin Design options. I made liberal use of that and my custom CSS is less than a quarter of what it used to be. There’s some for video players and things that aren’t actually part of Agility.

Screaming Fast Page Speed

Agility 3.2 is screaming fast! Let’s come over and look at this PageSpeed Insights for Agility 2.2. This is the demonstration site, thesis2-test.byobtutorial.com, for Agility 2.2 and it used to score a lot better but the scoring has changed over the last couple of years. Right now it’s getting 66 out of 100 for mobile and 80 out of 100 for the desktop.

However, this www.agilityskin.com which is the demonstration site for Agility 3.2 scores 87 out of 100 for mobile and 89 out of 100 for desktop. Note that optimized images is one of the big things here that has nothing to do with the Skin. The images that it wants me to optimize are the post images and the featured images and those things that have absolutely nothing to do with the Skin.

So just in terms of Google’s PageSpeed insights, Agility 3.2 is quite a bit faster but there’s this place called WebPageTest, where I ran a test of Agility 3.2. For the front page on the demonstration site, which is the heaviest page on the site, the documents complete in 1.27 seconds and it’s fully loaded in 1.313 seconds.

For those of you who know how PHP seven can affect page speed, this is not running PHP 7. This is running on PHP 5.3 or maybe 5.5 but it’s not running PHP 7. You can tell that from the Waterfall here where all these things are not loading concurrently. But if it were using PHP 7 all these would be loading concurrently so it’s going to be a lot faster on PHP 7 than it is on PHP 5.5.

When you take a look at this question of speed index, you’ll notice it gives me a 1220 speed index. That puts me in less than a 10th percentile that is more than 90% of the top. 300,000 Alexa sites are slower than Agility 3.2 is and the average is almost 4x what Agility is. So Agility is screaming fast.

One other thing that is becoming more and more important in SEO is the speed of your website and the speed of your Skin and the ability to optimize JavaScript loading and all the other kinds of things that load. Cutting the speed of that sort of thing can make a big difference in your SEO. I’m becoming more and more mindful of that in my own work and I want to make sure I get this as fast as possible for you so that you can get that benefit.

Introduction to Agility 3.2

How to Upgrade Agility 3 to 3.2

Overview of the Agility Appearance & Layout

Overview of Agility 3 Settings

Understanding the Agility 3 Page Layout

Images in the Agility Skin for Thesis 2

Setup Agility 3.2 For the First Time

Setup the Agility 3.2 Header

Setup Front Page Display and Content Options

Agility Featured Content Box

Agility Icon Content Box

Agility Call to Action Box

Agility Copyright Box

Setup the Agility Footer

Setup the Agility Site Wide Settings

Setup the Agility Single Post Settings

0 Comments… add one
0 comments… add one

Leave a Comment