Copyright ©2021 Hennok Limited. All Rights Reserved.
Contact Us
+44 (0) 333 050 6331
info@hennok.com
152 – 160 City Road London EC1V 2NX
I’ve been meaning to take up meditation for a while and the other day I finally decided to invest in a programme. (Yay me.)
So, I went on this guru’s website - I won’t name names but he is very popular - to purchase one his programmes.
Unfortunately, the experience turned to be more frustrating than blissful.
Why?
Because the site was not optimised for tablet.
Quoi? In this day and age?
Yep. There I was credit card in hand, ready to buy and they were making it difficult for me.
This got me thinking…
How much money do businesses lose everyday by not having a responsive website?
So, I did some digging and what I discovered was shocking:
If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.
https://neilpatel.com/blog/loading-time/
Slow-loading websites cost retailers £1.73 billion ($2.74 billion) in lost sales each year.
https://econsultancy.com/slow-loading-websites-cost-retailers-1-73bn-in-lost-sales-each-year/
88% of online consumers are less likely to return to a site after a bad experience.
http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf
Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead. (MicKinsey & Company)
https://www.mckinsey.com/insights/marketing_sales/why_marketers_should_keep_sending_you_emails
While those sink in, you should read this and do these things – so you don’t miss out on sales from potential customers.
For starters you need the right web design.
Research from Stanford University, shows that over 46 percent of consumers view a website design as a top indicator of credibility
And 57% of users say they won’t recommend a business with a poorly designed mobile site.
https://www.formstack.com/infographics/mobile-marketing-mistakes
Another study found that 94% of negative website feedback was design related.
https://www.researchgate.net/publication/221516871_Trust_and_mistrust_of_online_health_sites
You need responsive web design.
Responsive web design is a term coined by Ethan Marcotte.
https://alistapart.com/article/responsive-web-design/
It means a website that has a fluid foundation, flexible images, and media queries. (A media query allows your website to detect which type of device it is being viewed on.)
Write once and publish everywhere.
“Nearly 8 in 10 of consumers would stop engaging with content that doesn’t display well on their device.” — Adobe
https://www.adobe.com/content/dam/Adobe/en/news-room/pdfs/201512/state-of-content-report.pdf
Responsive design gives you the ability to organise your website in multiple, separate layouts. So that your content and design can be delivered to different devices in the best way possible, no matter the screen size.
You are creating a single source of content to serve across all devices.
Meaning less work for you.
It gets even better.
Responsive web design is also about the user being able to pick and choose what content they want to see.
GIF: Show and hide function in action
Your website can be transformed, just by adding the ability to easily show and hide content.
Video: As the screen gets smaller, rearrange elements to fit different devices.
You can make sure your website looks its best on mobile, tablets, laptops, and desktop screens.
Users can access your website through their preferred browser, from any device. And the layout will be adjusted to give them the best experience based on the screen size of the device they are viewing it on.
When responsive web design is implemented correctly it can improve the user experience.
This improvement in user experience means higher conversions and business growth.
This is a takeover.
51% of worldwide web traffic comes from mobile.
Graphic: A graph showing growth. from 2015 to 2020.
When over half of your potential visitors are using a mobile device to browse the internet, a responsive site is no longer a nice to have – it’s a must have.
But that’s not all. Users on mobile devices also make up the majority of search engine visits.
Getting bang for your buck.
Mobile has become one of the most important advertising channels.
In 2019, mobile advertising spending amounted to $189 billion in 2019 and it is expected to surpass 240 billion dollars by 2022.
https://www.statista.com/statistics/303817/mobile-internet-advertising-revenue-worldwide/
Making it one of the most important advertising channels.
If your website isn’t optimised for mobile, you won’t be able to maximise the ROI of your marketing efforts.
Best practices for mobile environments:
- simpler navigation,
- more focused content,
- lists or rows instead of multiple columns.
Satisfaction guaranteed.
85% of adults think that a company’s website when viewed on a mobile device should be as good or better than its desktop website.
https://www.invisionapp.com/inside-design/statistics-on-user-experience/
One way to guarantee your website is mobile friendly is to adopt a mobile-first approach to your website design.
That means designing your website in mobile view with a single column and smaller font sizes as the basis for your site.
From there you can scale up to larger screen sizes.
You can further simplify things by creating a basic responsive design with just two customisable widths called breakpoints. One for tablets and one for laptops and desktop computers.
The result is a beautiful interface for your content as well consistent branding as screen size increases.
Studies show that consistent branding can increase revenue by up to 23 percent.
https://www.lucidpress.com/pages/resources/report/the-impact-of-brand-consistency
Now you know what responsive web design is and why it is important for your business, it’s time to show you how you can do it.
If you already have a website, use this information to tweak it for responsiveness. And if you are creating a new website, use this a guideline to make a response website from the get-go.
Before you start:
- Make sure you’ve got your website strategy, i.e., why do you want a website in the first place.
- Your web design should be built from the content out. What type of content will your website feature? Can you create it? And do you have the necessary resources to substance it?
- Decide on the content delivery method for your new website.
Let’s begin…
Infographic: Responsive web design in a nutshell. Responsive Layout -> Responsive Images -> Responsive Typography
Step 1: Decide which devices you want to optimise your website for.
Here are the four main ones:
- Mobile
- Tablet
- Laptop
- Desktop
90% of people use multiple screens sequentially.
Set up different sizes for each layout element depending on the device or screen size.
The number of layout elements on your website will depend on the design.
But most websites focus on the following elements:
- Wrapper
- Container for the webpage
- Header
- Logo
- Navigation
- Body
- Content
- Sidebar
- Footer
- Copyright
- Social Links
Step 2: Use responsive images aka flexible images
Example 1: Hiding and Revealing Portions of Images
Example 2: Creating Sliding Composite Images
Example 3: Foreground Images That Scale with the Layout
Start with right file format
- PNG – produces higher quality images, but also has a larger file size
- JPEG – can adjust the quality level for a good balance of quality and file size.
- GIF – best choice for animated images.
Then compression to optimise your images for web and performance.
Ideally, you should use JPEG or JPG for images with lots of colour and PNG for simple images.
For best results use an image optimisation tool or program before uploading your images to your website.
Here are some free options to check out:
- Optimizilla – upload up to 20 images at a time and to set the compression level for each photo separately. https://imagecompressor.com/
- Kraken.io – bulk image optimiser for JPEG, PNG and animated GIF files. https://kraken.io/
- ImageRecycle – compresses your JPEG, PNG, GIF and PDF images. https://www.imagerecycle.com/
- JPEG.io – converts any image format (PNG, GIF, SVG or even PSD) into JPEG, and then compresses them before returning the images to you. https://www.jpeg.io/
- Compressor.io – reduce file sizes by close to 90% without loss of pixels. https://compressor.io/
Step 3: Don’t forget responsive text.
For a truly responsive design, you should also adjust your font-sizes appropriately to match screen size.
Here is a guideline:
- Mobile: 22px
- Tablet: 24px
- Laptop: 34px
- Desktop: 36px
Step 4: Test responsiveness
- Open a new tab in Chrome
- Go to your website
- Press CTRL + Shift + I on Windows computers, or Command + Option + I on Macs
- Select the mobile device or tablet of your choice to test the responsiveness of your design.
Alternatively enter your URL in Google’s mobile-friendly test tool.
https://search.google.com/test/mobile-friendly
Personally, I prefer taking a more physical approach. 😉
Open the site on the various devices to get a real feel for how it works on the different devices.
GIF: Let’s get physical song
When testing for responsiveness, you should answer these 3 questions:
- Does the layout adjust to the correct number of columns?
- Does the content fit well inside the layout elements and containers on different screens?
- Do the font sizes fit each screen?
Congratulations you now have a responsive website.
GIF: High fives and confetti
Want some inspiration?
Fest your eyes on these websites that are smashing it with responsive design.
- Blog: Seth Godin https://www.sethgodin.com/
- Portfolio: Malika Favre https://www.malikafavre.com/
- Corporate: ASOS PLC https://www.asosplc.com/
- E-Commerce: Alibaba https://www.alibaba.com/
In summary…
Your website should respond to the user’s behaviour and environment based on screen size, platform, and orientation.
There are a lot of different elements that go into responsive web design. But by familiarising yourself with the different building blocks, you should be able to create a website design that is responsive without any major issues.
I know running a business is a lot of work, so let me take web design off your plate. Just drop me a line at info@hennok.com. I’ll make sure your website looks stunning across devices. And create a great custom experience for your users.
Infographic: Someone on an old laptop or device (Desktop), someone on a trendy gadget (Apple watch), some on an advanced gadget (VR).
Your website is leaking sales and here’s what you can do about it right now.
