- Create a more inviting website that is less traditional
- Maintain an excellent Page Speed
- Incorporate integrations with Zen Planner (internet based fitness software)
- Work with the owner to familiarize her with how to use WordPress and Beaver Builder
In our initial meeting the client and I worked on coming up with a layout which serves the first goal, to make the site more inviting. In recent years the best way to make a website look more interesting is to use a large graphic or a "hero image." We were inspired in particular by two websites, one created by Empowered Marketing and one not created by Empowered Marketing. We chose an initial color palette which served us well as we only changed one color in the end. This was an easy change because we use standards on our designs so a replacement of a color is relatively easy.
The foundation of this site is a solid WordPress theme called Blox Theme. This foundation gives me ultimate flexibility over the design because I prefer to use CSS to accomplish my goals so I have more control over the layout. Beaver Builder was used for content areas to give the owner / client ease of use and to accelerate the design process.
Mobile First and Responsive
In this case we wanted a large "hero image" background on the home page using a mobile first strategy. In WordPress content area images automatically use "srcset," a feature of modern websites that allows the browser to determine the ideal image size to load to save resources. Background images typically do not use Srcset because they are used in so many different ways.
One principle that fits into a mobile first strategy is to load ONLY one image based on screen size and make sure not to load any images that aren't needed on that size of screen. This is a bit time consuming because we have to test the background image on a wide variety of screen sizes and specifically define when which size of the image is used - it is not as simple as "srcset" because background images are NOTE displayed at actual size, you can assign different scaling, positioning, scrolling and animations. The proportions and visual elements of the background image make a dramatic difference because when you switch from landscape to portrait on a smaller device you have to get it right.
Responsive websites are the norm today so most themes include basic responsiveness and require little effort to make a great website look good on mobile devices. Again, this is an area where "good" is not enough. We prefer to make sites look great on all screen sizes so again we lean more heavily on CSS to define how elements look on mobile devices and to ensure that legibility remains. Many designers neglect this and you see wide margins on phones so there are only a few words per line of text. Another area that is neglected is how the logo scales. Many mobile versions of websites have teeny tiny logos because of lack of effort by the designer or developer and in some cases the theme doesn't lend itself to this and the designer doesn't know how to override the theme settings.
NOTE: both the 2016 and 2017 websites are responsive. Empowered Marketing has built responsive websites since 2012
The Client Experience
Initially the client wanted Empowered Marketing to do all work on the website, but over time she got more and more involved and gained confidence with using the tools provided. This is important because often the best blogger for a website is the client his or herself.
One of the main goals was to integrate Zen Planner with the website to take advantage of the schedule, events (and registration) and lead generation.
This website uses a large base font of 18 pixels. This makes it very easy to read. This is important since the business is based in Sarasota and the median age is 45 years old. Another significant change from the old site to the new site is the amount of white space. The new site has much more breathing room. White space contributes to user engagement and more.
This site benefits from the extensive use of professional photography by Bill Aquino. We sincerely appreciate it. Most websites suffer due to lack of great photography. This is a major challenge from the perspective of a web developer. Stock photos only go so far. If you have actual photos of your products, services and staff in situ it makes for a much better looking website and user experience.
Initially we included Zen Planner elements on every page of the website. Because of of the negative impact on Page Speed we elected to remove a Zen Planner opt-in from the home page. If any page needs to load fast it is the home page.
How can a larger site with more requests load faster than a smaller site?
The Page Speed Scores are very similar but the YSlow Scores are significantly different. The reason the new site loads faster is because it takes advantage of parallel requests. In other words. YSlow penalizes you more aggressively for having more requests but your page speed actually can be faster if you use a balanced approach. While the scores are important to us they aren't the only goal. The overall Fully Loaded Time being as low as possible is our true goal.
Working with the developer of the plugin, WP Google Maps Pro, we were able to make even more improvements. See Below.
As we often find in life, less is more. In this case a cleaner look with more whitespace is inviting. The solemnity of the hero image is offset by lighter hearted images elsewhere on the website.
While developer (Empowered Marketing) prefers to avoid integrations with third party applications, specifically because they fail to consider the impact of their scripts on page speed, we were able to find a happy medium by using Zen Planner only where absolutely necessary.
This was a fun project and we enjoyed working as a team with the Traditional Aikido of Sarasota owner, Laura Hackle, to accomplish her goal to have an even better website and experience for her clients.
Editor's Note: We encourage application developers and software as a service developers to hold themselves to a higher standard. In almost every case we have used third party integrations they had an overly negative impact on our lean, fast, highly optimized websites. In some cases we have developed our own ways to integrate with the applications so that we don't have to use the bloated code on our client sites. That isn't always possible but it shouldn't be necessary in the first place. We have seen this at every level from small bits of code for email services to massive integrations with corporate services which are so poorly designed that they cause most sites to load in 25 seconds ore more.