Number One Design Boutique Mistake
In my new adventure I have to analyze websites developed by Design Boutique web shops. Guess what the most common mistake is? Oh yah, the have all the cool css transitions. But what did they forget? Gee, I wonder what that might be.
They forgot to have a centralized way to start css transtions after the web page has fully loaded. Why is this important? Well, go down the road to your local McDonalds and try to view video on their wifif connect as their wifi is only dsl speed. The first image header and font combination is about 15 seconds of video in bandwidth usage.
THE SOLUTION
Now, you could take each css transition and check if the page loaded. But, having every css transition do that on a page is not good for performance so let’s do something smart.
First, let’s make a CSS class that prevents all the page CSS transitions from executing:
This is css
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
and you than add that class to yoru thml body tag:
<body class=”preload”>
And now the last part the javascript code that upon the page being fully loaded removes the prelaod class from the body tag:
$( document ).ready(function() {
$(“body”).removeClass(“preload”);
});
And with that little trick you can have a better site than the average Design Boutique
