When I started using the internet to access the world wide web, back in the early 90s I had a 14″ monitor with a 640×480 resolution. That’s 640 pixels (dots) wide and 480 pixels high, smartphones did not exist and connection was made via a modem (US Robotics) and a dial-up (phone line) connection.
Then I started working for an IT company and moved up to a 15″ screen with a 800×600 resolution and could get more on my screen. I was really excited when I moved to a 17″ screen with a 1024×768 resolution. Not only could I be more productive but we moved to an ISDN (digital connection) and the world was a better place.
Although I had been using a smartphone for a while (I am a bit of a geek) the adoption of a phone with a screen really took off in 2007, when after 2 years of development, Steve Jobs announced the very first iPhone.
This introduced a problem for web designers and developers. Screen resolution was 420 x 480 and sites developed for traditional monitors tended to not work very well on Smartphone screens. Monitors were wider than they they were taller – SmartPhones were taller than they were wider and so a lot of horizontal scrolling was required. And this was just horrible.
As a consequence, web developers started to design mobile only websites. A bit of code on the home page would identify whether the site was being visited by a desktop (or laptop) PC or by a mobile device and the visitor would be seamlessly forwarded to the relevant site. The mobile site would commonly be identified by an m. so the regular site would be www.website.com and the mobile version would be m.website.com.
However, this meant that web developers had to build two different sites, which took time and money so wasn’t an ideal solution.
By 2008 work was well underway developing a technology that would overcome this and allow a single site to be developed. One that would automatically change its size depending on the device being used to access it. Initially these were called by a variety of names, “flexible”, “fluid”, “elastic” and “liquid” being the main terms used. In May 2010 the word “responsive” was used for the first time, by 2012 “Responsive” was #2 in Top web Design Trends by .Net magazine and 2013 became the Year of Responsive Web Design according to Mashable. In the same year Google announced that it was going to reward responsive designs with improved rankings and the flood gates opened.
By 2014 mobile web access exceeded desktop access for the first time and in 2019 Google switched focus from desktop first when evaluating websites to taking a mobile first approach.
Now, barely a website is built unless it’s “responsive” but this brings it’s own set of problems.
In my experience, most companies who request a Responsive site rarely take a detailed look as to how quickly the responsive site loads, how it looks and how easy it is to use. They quickly check on their phones and, provided the site looks OK, they accept the design they have been given.
And that’s where the problems start. It’s very easy to build a Responsive website, especially in WordPress, and even easier to make it slow to load (remember, you have less than 3 seconds to get your site open and just 2/10ths of a second for the visitor to understand what’s on offer)
Lots of sites still use carousels, those scrolling images that feature at the top of web pages (you can read about my dislike of carousels here). This means that all carousel images have to load first and the worst responsive sites with a carousel simply display all the carousel images, stacked one above the other.
Although people can scroll easily on a phone, they have to understand what they are scrolling for and a lot of people simply won’t bother, especially when faced with 2 or more images.
How good is your website when viewed on a smartphone?
How do you know that people don’t like the Responsive version of your website? It simple, log in to your Google Analytics account and look at the initial “quality” metrics for the three device types, desktop/laptop, mobile and tablet.
Three Quality Metrics
For a quick site performance overview I always look at the average length of each visit to a website, at the average number of pages per visit and the Bounce Rate – the number of visitors who reach your website but leave without clicking on anything. By navigating in Google Analytics to Audience/Mobile/Overview you’ll see a chart, similar to the one below,
Remember my simple Bounce Rate scale
0 – 20% = Excellent (and very rare)
21% – 50% = Average
+51% – Investigate
In the above example you can see where the problem lies, Desktop and Tablet Bounce Rates are comfortable, around the 40% mark whereas visits from Mobile devices have a Bounce Rate of nearly 64%. That means that 2/3rds of ALL visits from users using their phones leave without doing anything. Totally wasted opportunity and even if the company increases it’s marketing to attract more visits, this will only continue unless action is taken.
What should the site owner be doing
It’s really simple.
You need to fully understand the goal of your website. I know that sounds simplistic but so many people have a website because they feel they need one but don’t really have any specific goals.
Your site should have clear goals and it should be immediately obvious what those goals are. Do you want visitor to your website to
- Buy Something
- Place an order
- Subscribe to a newsletter
- Make contact to ask a question
Now all you have to do is open your site on your phone and take a good look. How fast does the site open? How quickly can it be used? How obvious is the primary goal? How easy is it for a visitor to carry out the primary goal.
Make notes about the performance and have a conversation with your web designer to sort everything out and if you need help, you can always get in touch for a chat (no cost, no obligation) or you can leap straight in and book a website review – Saving £50 in my autumn 2020 Special Offer.
I can provide advice, help, and support. Just give me a call on 01793 238020 or email firstname.lastname@example.org and we’ll take it from there