Expressive versus Classic Design Aesthetic’s effect and affect on speed.

Another WordPress Experiment

Bota

Foxy

Frank green

Clarity

PhotoGrid

Codium Grid

Frank yellow

This case study introduces how we customized the free Bota WordPress theme. This theme is our foundation for producing a website for the Palouse Health Center.

Our “Bota theme case studyeBook.
13p, full-color, printable, 11 x 7.5 inch, 979k
Download the PDF for free.

One of the biggest concepts shown in this report is how we communicate our choice of a warm color palette. Color palettes are the primary communication device for a website’s “look and feel.” A unique image color-extraction tool helped keep consistency when we selected background and type colors.

We always set site goals. We wanted warm, rural images with depth-of-field lens effect for mood. Besides color, lighting in these images needed to be consistent.

We show how we found free plugins and royalty-free, legally-unencumbered stock images. We wanted to achieve sub-second page load times using low-cost hosting. That’s usually considered impossible with WordPress.

Besides our usual audit of Home page performance, we talk about surprise discoveries of speed benefits in the theme and plugins we chose.

During the experimental Frank theme project, we learned the mysteries of achieving under 1-second page loads on cheap, shared hosting.

fraank-7-big

Our “Frank theme case studyeBook.
19p, full-color, printable, 11 x 7.5 inch, 1.6M
Download the PDF for free.

To get the domain count on a shared server, we use an online tool called Reverse IP Domain Check at www.yougetsignal.com. When we saw the number of domains fighting for bandwidth on two separate GoDaddy servers, we were astounded at the disparity – one was almost clear and the other crammed. We decided to add the plugin WP Super Cache to both sites.

For PagePipe, it made no difference. This was typical of past performance with cache plugins because we always optimized sites to the point it never mattered. Or frequently, adding the cache plugin broke some other feature we needed.

Imagine our surprise, when we installed WP Super Cache on TeareLabs and the loadtime immediately dropped from over 3 seconds to 500 milliseconds. Our target!

We might conclude at this point: First, the more exaggerated the number of domains, the greater the opportunity for improvement from caching. If you’re site is optimized and you have a server that isn’t jammed with traffic, it may not need a caching plugin – yet.

NOTE: Since this was written GoDaddy reduced the number of domains on the SteveTeare.com server to 23 domains. Then the caching plugin no longer gave any benefit.

In this report, you learn a few graphic tricks for page variety. We give a brief explanation of how the JPEG Xray images were produced. Also, how PNG signage can make lightweight fake columns when you place more content in the caption.

We also examine the necessity of stock images for low-budget production – in spite of Google’s custom photography recommendation.

You see how a no-brainer color scheme can mimic the powerful green, white, and black used on PagePipe trials (report #6). We show plenty of yellow-and-black identities as models. And demonstrate gray-scale testing for legibility. Expressive color schemes and the common Frank theme tie these two fraternal twin-sister websites together.

The difference between fixed-width and responsive design messed up touch-screen navigation for our dropdown menus. This was impossible to test on a simulator. We needed a real iPad with fat fingers to troubleshoot these problems.

Speed – or page load time – is always the first aspect a website user encounters. If the page load is too slow, the viewer will discard the site. It doesn’t matter how attractive it is. They never saw it. People are impatient.

Our “Foxy theme case studyeBook.
17p, full-color, printable, 11 x 7.5 inch, 995k
Download the PDF for free.

Branding aesthetics is important for web credibility, too. It‘s the second judgment made by viewers. And it’s made so fast it’s subconscious. If they don’t like the look of the site immediately, you’ve lost the opportunity to make a good first impression. Yes. People do judge a site by the landing page decoration before any text content.

This Foxy theme case study focuses on choosing a color palette and images that create feeling and mood. Choosing colors should never be based on the mere choice of a favorite color. A single, solitary color is not a palette. Feelings, memories, or color psychology is usually formed from combinations of colors. Best practice of using two or three colors is all it takes.

We chose the color palette from the main image and finally sampling specific colors to keep the website feeling cohesive. See for yourself and use these creative color ideas on your next project.

In this case study, you’re introduced to a free and fast WordPress theme called Frank. It’s adaptable and a good foundation for building basic websites. It isn’t universal in application but we like it a lot.

Our “Frank theme case studyeBook.
19p, full-color, printable, 11 x 7.5 inch, 1.6M
Download the PDF for free.

The downloadable report explains two plugins, SS Downloads and Sell Digital Downloads. We use them for selling case-study reports. (These reports are now free). These are extraordinary plugins because they’re both purpose-built and, thus, have speedy page-load times.

You learn our decision-making process for removing and replacing plugins. We deleted or substituted: Notification Bar, WP Orbit Slider, Symple Shortcodes, and WP Responsive Menu. We also examine the claimed benefits of notification bars.

In the branding department, you see how to use an expressive color palette of green, black, and white. It’s a little risky but more memorable. We also show fast-loading, spunky, and whimsical illustrations for page variety.

You discover our criteria for choosing from 32,753 WordPress plugins. We then test the Dependency Minification plugin and others. We recommend substituting with lightest plugins first and experiment upwards until things work.

We talk about the simple opportunities for new business from pitching responsive WordPress websites.

You find out about the modern benefits of re-using old Splash Screen technology. The biggest advantage being reducing content density based on reader’s goals.

To improve usability, we replaced the theme default menu using Sticky Header plugin.

And finally, we dump Google Analytics in favor of a marketing lead tracking plugin.

When an industrial client approached us about getting a website, they said we had to use WordPress, and that the deadline was just two weeks. It turned out to be more than just a website.

Our “Clarity theme case studyeBook.
13p, full-color, printable, 11 x 7.5 inch, 720k
Download the PDF for free.

Sometimes two weeks isn’t bad – for a small and simple site – but this project was going to involve a lot more than just putting stuff on some web pages, and taking it online.

Not only did we need to come up with a great design, but we also had to figure out the marketing strategy, come up with all the graphics, write the copy, write up an interview with one of the product developers, design pseudo product packaging, and more – all for a product we had never heard of.

We also had to battle our way through some problems with the ThemeTrust Clarity theme, including major weirdness related to the built-in slideshow.

Did this keep us up late at night? Yes. Did we got the job finished in time? Yes. Is the client happy? Yes, the client is very happy.

This case study focuses on building an artist’s portfolio website. These are always challenging because they are large-image intensive. In the past, people expected longer load times on portfolio sites and were usually willing to wait. Not any more.

Our “PhotoGrid case studyeBook.
13p, full-color, printable, 11 x 7.5 inch, 880k
Download the PDF for free.

Performance engineering is a position found on web teams at large corporations. Their goal is studying loadtimes, server latency, throughput, and memory usage. They tune a website to achieve optimization goals that are within a performance budget. The budget is not specified in dollars but rather milliseconds. Web time is literally money.

Anything that slows down a website is “expensive” since it cuts into the allotted performance budget.

Performance engineering is idealistic – usually working towards the unachievable loadtime of zero seconds. A well-tuned site loads the Home page in under one second.

Before mobile applications and websites came along, no one worried about millisecond loadtimes. Well, some people did – but they weren’t making any news.

The invention of online tools to measure web performance helped produce de facto standards from experts at large-corporate laboratories. Speed is a competitive issue. Speed became more desirable and a hidden asset.

Speed is a website differentiator. Differentiation is part of creative marketing positioning strategy. If two websites have equal offers, customers prefer a 1-second page rather than a heavier 10-second page. People don’t like to wait for services especially on the Internet. Plain and simple.

Our experience is no WordPress theme will produce a sub-second load time straight out-of-the-box. It will be more between 4 and 8 seconds. It requires customization, tweaking, and experimentation to get it slimmed down. Few web designers will do this extra work to deliver quality.

Is website optimization even significant for small businesses? Absolutely. More and more small business customers use phones and tablets to find, compare, and locate services. Slow wireless connections make optimization a necessity. If a site doesn’t fit and is slow on a phone screen, it’s immediately considered “old and obsolete.” It implies you’re business may be apathetic, uncaring, and behind the times.

Times change but speed is as critical as ever. Because of mobile phones, we’ve stepped back to the years of dialup modem connections. But today’s users still expect mobile or responsive sites to be just as fast as wired, desktop browsers.

What we show you in this case study is how you can be a common-sense performance engineer and make your site experience the best.

WordPress categorizes the free Codium Grid theme as a fluid layout instead of responsive. It’s a layout that uses proportional measuring for content, images, or any other item. This allows the web page to stretch and contract relative to the user’s screen size.

Our “Codium Grid theme case studyeBook.
18p, full-color, printable, 11 x 7.5 inch, 935k
Download the PDF for free.

Responsive design is the process of creating a website or theme with all devices and screen sizes in mind. The techniques of fluid design combined with CSS media queries creates a theme that is responsive.

Media Queries is a CSS3 module allowing image rendering to adapt to conditions such as screen resolution. Media Queries is a cornerstone technology of responsive web design but not fluid design.

This report presents the customization phases used to brand and optimize the WordPress Codium Grid theme for use as a fast-loading design portfolio website.

During the experimental Frank theme project, we learned the mysteries of achieving under 1-second page loads on cheap, shared hosting.

Our “Frank theme case studyeBook.
19p, full-color, printable, 11 x 7.5 inch, 1.6M
Download the PDF for free.

To get the domain count on a shared server, we use an online tool called Reverse IP Domain Check at www.yougetsignal.com. When we saw the number of domains fighting for bandwidth on two separate GoDaddy servers, we were astounded at the disparity – one was almost clear and the other crammed. We decided to add the plugin WP Super Cache to both sites.

For PagePipe, it made no difference. This was typical of past performance with cache plugins because we always optimized sites to the point it never mattered. Or frequently, adding the cache plugin broke some other feature we needed.

Imagine our surprise, when we installed WP Super Cache on TeareLabs and the loadtime immediately dropped from over 3 seconds to 500 milliseconds. Our target!

We might conclude at this point: First, the more exaggerated the number of domains, the greater the opportunity for improvement from caching. If you’re site is optimized and you have a server that isn’t jammed with traffic, it may not need a caching plugin – yet.

NOTE: Since this was written GoDaddy reduced the number of domains on the SteveTeare.com server to 23 domains. Then the caching plugin no longer gave any benefit.

In this report, you learn a few graphic tricks for page variety. We give a brief explanation of how the JPEG Xray images were produced. Also, how PNG signage can make lightweight fake columns when you place more content in the caption.

We also examine the necessity of stock images for low-budget production – in spite of Google’s custom photography recommendation.

You see how a no-brainer color scheme can mimic the powerful green, white, and black used on PagePipe trials (report #6). We show plenty of yellow-and-black identities as models. And demonstrate gray-scale testing for legibility. Expressive color schemes and the common Frank theme tie these two fraternal twin-sister websites together.

The difference between fixed-width and responsive design messed up touch-screen navigation for our dropdown menus. This was impossible to test on a simulator. We needed a real iPad with fat fingers to troubleshoot these problems.