New Look and a Little Change in Focus for ClickNathan!
For those of you who tend to hang around the RSS feed readers, take a minute to pop on over to the new ClickNathan.com.
Aside from an updated look, there were a few things I wanted to accomplish with this redesign and I’ll touch on them here briefly, because I think they’re important for my clients and the web in general.
Performance
I have been focusing more and more on performance over the past five years, and wanted this site to reflect that. Aside from Google announcing a few years back that how quickly sites download will affect where they show up in search results, I do a ton of traveling and while your network connection in Downtown Big City, USA may be snappy, I can assure you that there are plenty of places around the nation and world that aren’t. I want people to be able to access my site quickly because, well, it’s better for business, and it’s better for the world. Building a better web is what every designer and developer should be focused on these days. We need more craftsman and less crap, in my opinion.
99 / 100 Mobile Homepage
95 / 100 Desktop Homepage
Pulling this off isn’t always so easy, though. For users who come to my site on their giant iMac retina displays, I wanted to make sure that my portfolio images looked great…which means a massive image with an equally massive filesize. Inversely, I didn’t want iPhone users to feel like they had to squint either. Luckily, the tech for this has evolved so much over the past three years that simply showing different devices a different image isn’t all that difficult.
Behind the Scenes: Optimizing Images on the Homepage
Firstly, I tend to export just about everything in Photoshop as a JPG with a quality rating of 51. Why 51? Because that’s the magic number. Anything below it, and Photoshop starts to really suck the life out of the color and quality of your photos. Anything above it and, quite frankly, I just don’t ever see the difference visually even as the filesize increases dramatically.
Next, I run everything through an app called Codekit, which works some behind the scenes magic to reduce file bloat again, typically by anywhere from 2 – 20%! I also use a plugin called WP Smush in my WordPress install…this will again reduce my image filesize’s a bit more. After using both plugins, I never notice any big visual differences, so it feels like a massive gain with little or no sacrifice. The process takes a bit longer, but is well worth it in the end.
Hosting is Key!
The third big factor in all of this is WP Engine.
I love them. Support, features, blah blah blah…that stuff is all really tasting icing on the cake, but it’s the service they’re actually selling–high end WordPress hosting–that really does it for me. I don’t have to mess around with every little setting on my server, with .htaccess files, and I certainly don’t have to spend days and days trying to configure caching plugins. I just get a faster site right off the bat.
How Pages are Coded
The biggest reason WordPress sites tend to run so slowly is that each and every plugin wants to add it’s own CSS and JS file(s) to every page on your site. Some add four or five of these. Most don’t need to add any, and all should only add them to pages where the plugin’s functionality actually has an effect.
I’ve written functions and tutorials on how to make this stuff happen with some of the big players, like removing Woocommerce styles and scripts on unnecessary pages, and only applying Gravity Forms scripts on pages that actually contain a form.
Just knowing that this is a problem isn’t enough though. There are plugins out there to help resolve the issue, but the fact is that even if you can get down to one or two JS files and a single CSS file, Google is still going to look at your site and think, “Well, you’ve still got three files we have to wait for just to show your website!”
Muchas gracias to the fine work being done by Patrick Sexton over at Varvy, it’s helped me understand over the years the ever evolving nature of using everything from jQuery to CSS delivery to how to snag fonts as efficiently as possible. It’s not always cut and paste, but it does help one to think about how this can all be accomplished.
One of the key features to getting a great Pagespeed score is to optimize exactly how Javascript files are delivered. Everything into one file, and defer that file until the rest of the page has had enough of a chance to load that the user can start digging into the meat of it all.
Okay, good to know! What’s the “change in focus” you mentioned though?
When I first began building sites way back around the turn of the millennium, I was focused solely on non-profits, small businesses and the like. And I still am!
However, though the cost of web design and development, especially the type I’m looking to do–with the attention to detail, the server quality, etc.–has gone drastically up, the budgets of these organizations have not always followed suit.
So, I wanted to create a service that could combine the best of both worlds. Custom design wasn’t going to be possible, but I knew I didn’t want to go the “unlimited theme choices!” route either. Unlimited is not better, I have discovered this over the years. “Just a few, really good options,” that’s where you want to be.
I also knew it was going to take a lot of thought and engineering to create a theme that didn’t just spew out stylesheet after JS file. One that could deliver resources efficiently, only use as much CSS on any given page as was absolutely necessary, and do it all beautifully and without any effort from the end user, my clients.
So, what could be considered the culmination of 16 years of web design and development, focused into a marathon coding session, resulted in Forage, “almost custom” web design starting at $999.
Forage sites start at $999, or $1499 for e-commerce included.My core business still is, of course, the truly custom stuff, but Forage is there for those who need to start a little more slowly, grow up, make some money, and then we can talk about the super awesome site we can build now that you’re off the ground.
More Information!
Initially, this site was here to provide as much information as it was to earn me clients. The last time I redesigned this site, I moved away from that a bit, making it a bit more difficult to find all of the info I believe one needs to make an informed decision, in an effort to show off my work.
This time around, it’s back in action. The About Web Design section discusses some of the really basic stuff that not everyone is so knowledgable about when they first realize or decide they want, need or presume to require a new website.
And of course, here at the web design blog I will continue to share tips, tricks and everything else I discover about how WordPress, Woocommerce and all of the other tools I use work.
Long post over! See you next time. 😉