Yesterday, I designed a new logo, created a new site header, and changed a few colors here and there for High Yield Savings Accounts. This wasn’t at all part of a longer-term design strategy for the site, but I wanted to do it, mostly because I wanted to have some higher-resolution graphics at hand so I could start setting up social media accounts and other items.
That site uses a barely-modified Thesis theme (or framework) for WordPress. There’s nothing wrong with Thesis per se, but it is dated and does not support mobile displays well out of the box. Compare that with WordPress’s new default theme, Twenty Seventeen, which is designed for mobile devices first, but still looks great on wide, larger displays.
I installed JetPack and enabled the mobile theme extension so at the very least, the site renders on mobile devices with some legibility. In general, heading towards mobile-first, responsive layouts is the right approach for all content websites.
What is a mobile-first design strategy? Well, most websites since 1994 have designed with a CRT-monitor 3:2 aspect ratio or a 16:9 HD display in mind, both large enough (and with adequate resolution) to display a fair amount of information horizontally. As small mobile devices became capable of browsing the internet, web designers were faced with a challenge of fitting all that wide information on a much smaller, much lower-resolution display, that’s usually oriented vertically.
So they found ways to stuff the information onto a smaller screen. Differentiated style sheets and new coding standards helped browsers manipulate information to fit into displays of all sizes, but that still doesn’t work all the time.
Instead of taking a website and shrinking it to fit mobile devices, a mobile-first design strategy creates simple layouts that will look well on any size browser window. As a window size increases when moving from mobile to desktop, the design takes advantage of the increased available space by moving and adding elements. It results in a much cleaner look, and it works well especially for blogs and other text-focused websites.
And that’s the approach I’ll take when I map out a new design for the site. But now that I enabled Jetpack’s mobile-friendly feature, there isn’t a strong, immediate need for a complete redesign. That task is on my priority list to work on after I review and update a significant amount of content.
I will not hire out designers for this project. I can do most of the work myself, and will do until the site generates more revenue.
On the revenue note, not everyone agrees with the importance of a mobile-first design strategy. Advertisers who use product tables (like this high-yield checking rates table) find that the quality of traffic using mobile devices is inferior to the quality of traffic using desktop browsers. One account manager stated that mobile traffic generates one-tenth the conversions (successful sales vs all click-through traffic) of full-screen traffic.
Thus, the advertisers have no incentive to care or think about how to make product tables render effectively on mobile devices.
In my opinion, they should. Mobile devices are not just the future of the internet, they’re here now. 20% of the traffic on highyieldsavingsaccounts.net is mobile. That’s low, but only because the site isn’t mobile-friendly. Search engines don’t like sites that aren’t mobile-friendly. Adulting.tv is mobile-friendly with a responsible layout, and almost half of all that site’s traffic is from mobile devices. (It’s a vastly different audience, too, which accounts for some of that difference.)
And yes, someone shopping for — and ready to make a deposit into — a new bank account is more likely to be doing their research on a full-screen computer than on a mobile phone. But the percentage of serious customers using mobile instead of a computer will continue to increase. Companies that connect products with customers need to find a way to reach mobile customers in a way that will work.
In order for the site to be a success and to optimize the investment, I’ll need to maximize the performance of the advertising. (In a future post, I’ll write about the reason advertising is my main focus, rather than creating a product to sell or pursuing some other type of revenue.) This will involve experimenting with design elements on both desktop and mobile devices.