The Endo Creative website recently went through its third iteration. I didn’t start with a traditional Photoshop file design mockup. Instead I designed everything inside the browser, tweaking the layout and styles with CSS. I took module designs that I liked from around the web and incorporated them into a custom WordPress theme.
Ultimately I am happy with the way the site turned out. I accomplished the main goals that I had from the beginning.
Website Redesign Goals
- Start with the mobile experience first
- Keep the performance of the site as quick as possible
- Create a completely custom and unique WordPress theme
Mobile First Philosophy
I created the site with a mobile first philosophy. This means that I thought about the mobile experience first, and then added complexity to the site as the device width increased. For example, on mobile devies I load a smaller CSS background image for the hero image on the homepage. The keeps smaller devices from downloading a larger file size than necessary, increasing the speed of the website. This is especially important on devices will a smaller bandwidth.
The WordPress theme is a completely custom build based on the Underscores starter theme. The theme wranglers at Automattic created the Underscores theme as what they call a “1000 hour head start” for WordPress theme development. The theme comes with a basic skeleton that can be customized to the unique needs of the design.
For the typography I chose the Robota font from Google Fonts. Robota is a san serif font that is easy to read on all devices and screen sizes.
CSS Preproccessing with Sass
I used Sass for the CSS of the theme. Sass is a CSS preproccessor that makes writing CSS faster and easier. Using the techniques I talked about at WordCamp Kansas City I incorporated a compressed version of the CSS file into the WordPress theme. Once again, performance on mobile being one of main goals forced me to think of ways to decrease the file size of the web site’s assets.
I wanted the blog to be more prominently featured on the homepage so that visitors to the site can easily find the new content I add to the site. This section will showcase the latest news, WordPress tips, and helpful techniques I have learned. My goal is to create a growing resource for WordPress users and developers to take their site to the next level. I also want to share the things I learn while in the trenches of building websites.
Site Performance
The final step in the website build process, after tweaking all of the styles and rewriting some of the content, was to decrease the load time of the site and make it as quick as possible. I ran the site through the Pingdom Website Speed Test to see a visual waterfall of all the assets being loaded by the site. I wanted to reduce the number of HTTP requests, since each request to the server increases the load time of the site.
I found that the Jetpack plugin loaded more resources than I needed, so I updated the Jetpack plugin settings and disabled all of the modules the site wasn’t using, like their Custom CSS feature. Jetpack has gotten a bad wrap for making a site slower, but all you have to do is turn off the features you don’t want to load. I like using Jetpack for things like Site Stats to see a quick overview of the traffic to my site.
A site is never complete, and I will continue to make optimization tweaks as I learn more about web performance best practices. This website is a reflection of me as a web developer and I am proud to put my stamp on it.
