Applying New ReadyTheme: Suivant to Shadows

[lesliekirk]

Thank YOU! I wasn't sure if you could still edit the post so I was going to use my "super" powers to edit on your behalf. These are the types of posts that can help so many people!

[SidFeyDesigns]

Haha "super" powers can be very handy. And not a problem. Glad to have posted something helpful to the Miva community.

[SidFeyDesigns]

Also another thing I forgot to mention was analyzing the fonts being used on the site. Primarily different font weights and the icon fonts.

Font Weights

For each font weight css class a whole new font file needs to be served.

We host our google font locally but I'm pretty sure this applies to locally hosting the font or using google's cdn (For Suivant: <link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900|Playfair+Disp lay:400,400italic,700italic" rel="stylesheet" data-norem="">)

So I started with our image heavy page templates (SFNT, CTGY, PROD, PLST, SRCH)

I made sure that only two font weight css classes were being used. normal (400) and bold (700)

There were a couple of spots where css classes medium (500) and ultrabold (900) were only being used once on each page and they were causing two more font file requests to be made to style a total of 3 or four words. The shopping cart link in the global header for desktop screens was one of them.

I also just did away with playfair all together since it was only being used in the Pre header promo area in the readytheme content section for the global header.

The efforts above alone reduced 5 render blocking http requests with pretty minimal effort which also shaved off some load time and moved our google page speed score up.

Icon Fonts

This was a bit more involved and I would recommend doing it in a test environment if possible unless you don't mind icons not showing up correctly while working on this. This could be bad for mobile unless there are words describing what the icon represents (ex. account icon says "Account" underneath it)

For me, I have a "wholesale version" of our site that you can only access with an account assigned to the wholesale availability group.

Although its technically live, we haven't made an official launch for it yet so this was the perfect place to test out using a custom icon font.

The Basic of This "Exploration":

Between the Elegant Icons and the Custom Suivant icon fonts that ship out with suivant, only about 44 out of the 500-ish icons were being used.

Now if your thinking "why Miva does this?", my guess would be because it makes it very easy to customize the icons to suit the needs for just about any online business out there. This makes the ready themes much more flexible for any kind of online business.

So just to make this clear I am not bashing Miva in anyway. Icons have become a standard and I don't see them going away anytime soon. I'm just pointing out possible solutions to help page load speed and the icon fonts are a great opportunity if you use a small portion of what is actually available.

That being said, if hundreds of icons are being used on your site then doing this may not be worth the effort.

First things First... BROWSE YOUR SITE... On mobile, tablet and desktop.

Browse every page template you can including account pages. Make an account through your site for yourself if you haven't already.

Also pay close attention to your global header and footer on all devices and check your mobile navigation as well.

Make a physical list of every icon used on your site. (old fashioned pen and paper will do or type up a list in a text or word doc)

Once you are 100% sure you've gathered the full list of icons used go to this site:

https://icomoon.io/app/#/select

This app is fantastic and allows you to build your own custom icon font that only contains the icons that are actually being used on your site.

Once you've built your new icon font download the zip file.

You then need to add the font files to your server via ftp unless you have direct access to the server.

I chose to put the font files in the readytheme directory and created a new folder called fonts:

yourdomain.com/mm5/themes/suivant/fonts/

Then you need to call in the font files via the fonts.css file using @font-face. Before making any changes I would save the original file as fonts-original.css or something like that so you can easily have a copy to revert back if you need to.

I put the new custom icon font css code at the very end of the file so that any elegant icons being used would still work and only the custom suivant icons would be effected.

Ex:

/* ------------------------ Custom Icomoon Icon Font ------------------------ */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?je2bbj');
  src:  url('../fonts/icomoon.eot?je2bbj#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?je2bbj') format('truetype'),
    url('../fonts/icomoon.woff?je2bbj') format('woff'),
    url('../fonts/icomoon.svg?je2bbj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="rt-icon-"], [class*=" rt-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon', sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-rt-icon]:before {
    content: attr(data-rt-icon);
    font-family: 'icomoon', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none;
}

.rt-icon-address-card-o:before {
  content: "\f2bc";
}
.rt-icon-vcard-o:before {
  content: "\f2bc";
}
.rt-icon-amazon:before {
  content: "\f270";
}
.rt-icon-angle-double-up:before {
  content: "\f102";
}
.rt-icon-angle-left:before {
  content: "\f104";
}
.rt-icon-angle-right:before {
  content: "\f105";
}
.rt-icon-apple:before {
  content: "\f179";
}
.rt-icon-bars:before {
  content: "\f0c9";
}
.rt-icon-navicon:before {
  content: "\f0c9";
}
.rt-icon-reorder:before {
  content: "\f0c9";
}
.rt-icon-caret-down:before {
  content: "\f0d7";
}
.rt-icon-caret-left:before {
  content: "\f0d9";
}
.rt-icon-caret-right:before {
  content: "\f0da";
}
.rt-icon-caret-up:before {
  content: "\f0d8";
}
.rt-icon-cc-amex:before {
  content: "\f1f3";
}
.rt-icon-cc-discover:before {
  content: "\f1f2";
}
.rt-icon-cc-mastercard:before {
  content: "\f1f1";
}
.rt-icon-cc-paypal:before {
  content: "\f1f4";
}
.rt-icon-cc-visa:before {
  content: "\f1f0";
}
.rt-icon-close:before {
  content: "\f00d";
}
.rt-icon-remove:before {
  content: "\f00d";
}
.rt-icon-times:before {
  content: "\f00d";
}
.rt-icon-cog:before {
  content: "\f013";
}
.rt-icon-gear:before {
  content: "\f013";
}
.rt-icon-credit-card:before {
  content: "\f09d";
}
.rt-icon-envelope:before {
  content: "\f0e0";
}
.rt-icon-facebook:before {
  content: "\f09a";
}
.rt-icon-facebook-f:before {
  content: "\f09a";
}
.rt-icon-feed:before {
  content: "\f09e";
}
.rt-icon-rss:before {
  content: "\f09e";
}
.rt-icon-file-text-o:before {
  content: "\f0f6";
}
.rt-icon-globe:before {
  content: "\f0ac";
}
.rt-icon-heart:before {
  content: "\f004";
}
.rt-icon-home:before {
  content: "\f015";
}
.rt-icon-instagram:before {
  content: "\f16d";
}
.rt-icon-lock:before {
  content: "\f023";
}
.rt-icon-minus:before {
  content: "\f068";
}
.rt-icon-phone:before {
  content: "\f095";
}
.rt-icon-pinterest-p:before {
  content: "\f231";
}
.rt-icon-plus:before {
  content: "\f067";
}
.rt-icon-question:before {
  content: "\f128";
}
.rt-icon-repeat:before {
  content: "\f01e";
}
.rt-icon-rotate-right:before {
  content: "\f01e";
}
.rt-icon-search:before {
  content: "\f002";
}
.rt-icon-shopping-cart:before {
  content: "\f07a";
}
.rt-icon-trash:before {
  content: "\f1f8";
}
.rt-icon-truck:before {
  content: "\f0d1";
}
.rt-icon-twitter:before {
  content: "\f099";
}
.rt-icon-unlock-alt:before {
  content: "\f13e";
}
.rt-icon-user:before {
  content: "\f007";
}
.rt-icon-youtube-play:before {
  content: "\f16a";
}

Now comes the time consuming part:

Once your font is set up and hosted locally on your server you need to start editing all page templates and global sections using icons.

I started with the global header and footer, then moved to the mobile navigation. Then I did the checkout pages and account pages.

You need to look for a couple different snippets of code.

Here are examples of what to look for and what to change in the code.

Elegant Icon font data attribute and icon classes:

Changing the unicode for the data attributes. The unicode are the letter and numbers listed in the classes in the css code example above

The unicodes might be different for you because they are assigned when building your custom icon font.

Yes the &#x in the beginning and the ; at the end are required in the data-icon html snippets below.

<span data-icon="&#xe090;"></span> needs to be changed to <span data-rt-icon="&#xf095;"> (Contact Icon)

Changing icon classes. The classes are listed in the css code example above.

The classes might be different for you because they are assigned when building your custom icon font.

<span class="color-black icon-icon_cog"></span> needs to be changed to <span class="color-black rt-icon-cog"></span> (Settings Icon ACLN)

Custom Suivant Icon font data attribute and icon classes:

Changing the unicode for the data attributes. The unicode are the letter and numbers listed in the classes in the css code example above

The unicodes might be different for you because they are assigned when building your custom icon font.

Yes the &#x in the beginning and the ; at the end are required in the data-rt-icon html snippets below.

<span data-rt-icon="&#x61;"></span> needs to be changed to <span data-rt-icon="&#xf007;"> (Account Icon)

Changing icon classes. The classes are listed in the css code example above.

The classes might be different for you because they are assigned when building your custom icon font.

<span class="color-black rt-icon-basket"></span> needs to be changed to <span class="color-black rt-icon-shopping-cart"></span> (Basket Icon)

Mobile Navigation Icon:

This is slightly different and for the Suivant Theme since the mobile navigation is moved from the navbar to the slide out menu via javascript based on screen size.

You should only have to change one snippet of code in your plugins.js file and you may want to save the original file to plugins-original.js in case you want to revert back to the original icon fonts.

In the // ---- Mobile Navigation Functions ---- // section: again, the unicodes might be different for you because they are assigned when building your custom icon font.

.append('<span data-name="'+a+'" data-rt-icon="&#x64;" class="next"></span>') needs to be changed to .append('<span data-name="'+a+'" data-rt-icon="&#xf105;" class="next"></span>')



Once you have done all the dirty work and have confirmed that all icons being served are indeed the New custom icon font, you can remove the elegant icon and custom suivant icon css code from the fonts.css file.

You've successfully removed yet another http font request.



All of the above efforts have not only reduced http requests, but it also significantly reduced the size of the icon font.

Instead of possibly up to 9 http font requests it should now be down to 3.

Instead of a 65kb in icon fonts its now down to 13.5kb (in the case of 44 icons instead of 500 icons) It may not seem like much but every byte counts, especially during any high traffic periods.



Sorry this was long winded, but I just thought it might be another helpful piece of information for any fellow speed enthusiasts ;)

Thanks for reading if you have stumbled upon this thread.

-Nick Harkins

[SidFeyDesigns]

I am also thinking that this thread should probably be moved to the suivant readytheme section of the forum since a lot of these optimizations are directly related to suivant.

Can anybody help me get it moved? I have never moved a thread before.

Thanks

[Matt Zimmermann]

Taken care of.

[SidFeyDesigns]

Thanks Matt.

[Jim Cockerham]

So is the client dimensions module needed anymore when using the Shadows Theme?

[Matt Zimmermann]

Jim Cockerham No, Client Dimensions was an experiment included in the early ReadyThemes. Shadows does not include it nor can I recommend adding it with the improved functionality of current browsers.

[Jim Cockerham]

Jim Cockerham No, Client Dimensions was an experiment included in the early ReadyThemes. Shadows does not include it nor can I recommend adding it with the improved functionality of current browsers.

Thanks for the info. I never really knew exactly what it did. I am redesigning our site with Shadows and it was assigned by default to many page in the new branch, probably because it was assigned to the old version of the pages.