In our survey called Tourism Website Trends 50% of the participants said so far that they didn’t know if their website was responsive or not. This is a huge number – knowing that for about 5-6 years now everything in the webdesign industry is about responsiveness.
I’ll tell you, dear Website Owner, it’s not your fault. It’s mainly the fault of us – website designers and developers – that we didn’t warn you: if you don’t make your website responsive, you can lose about 50% of your visitors.
So what the heck is this responsive thing?
Back in the old days (before 2010) an average website looked like this:
- about 1000 pixels wide
- had a menu in its header, maybe with some drop-down effects for the sub-menu items
- had fixed size images
The reason for why it was the trend was that the regular device used for surfing the internet was a PC with:
- a monitor with 1024×768 or higher resolution
- a keyboard and a mouse for navigating
- wired internet connection
In 2010 about 98% of people were using exclusively desktop/laptop computers for going online – a number that has since then declined to under 50%.
Why wasn’t it important before 2010 to optimize websites for other devices?
It was really scarce in 2010 to see someone use the internet mainly from handheld devices, like smart phones and tablets. The early versions of these devices had been there, but they had some obvious limits:
- smart phones weren’t that wide-spread like they are today
- mobile internet was slow and expensive
- mobile browsers were quite dumb compared to their desktop counterparts (well, this is still true today, but the constraints manly come from the mobile screens’ smaller sizes, not their CPU’s limits)
What happened in the last 7 years that has completely changed the world of web design?
While in 2010 the thing to go online was a desktop PC or a laptop, today in 2017 most of the people use the internet with a handheld touchscreen device (mobile phone or tablet).
Mobile vs Tablet vs Desktop usage (source: statcounter.com)
This phenomenon has invoked a creative answer from the web design industry: designers and developers started to make their websites responsive. It means that the site is coded and designed in a way that it works naturally well on all device types. If you view a responsive site on a mobile phone, it will look a bit different than on your laptop. It adapts to the device’s screen, making it sure that everything is viewable and usable.
For example our site is responsive. If you are reading this article on your laptop, try loading it on your mobile. The header and the menu will look differently, the sidebar will be placed under the article, etc. All these changes are done to make your reading experience the best possible – depending on what you use for reading.
What are the key points to consider when you make your design responsive?
1. Screen size
While desktop computers have plenty of real estate on their displays to put lot of information on, mobile screens are much smaller. On an average laptop monitor you have 1366×768 pixels, while a mobile phone’s screen is often as small as 320×480.
If your website is not responsive, the letters on the mobile screen will be too small for reading (as the mobile browser will zoom your site out in order to show you everything). So your users will have to zoom in to read the articles. They also won’t be able to see the full width of your website after they did zoom in. It makes the usage of the site less comfortable that can lead to decline in sales.
The smaller size of the screen needs a much more refined content strategy from you. You’ll need to think over more times what the most important information is on your site. Then the next step is to make sure you show this information to your users as early as possible – independently of the device they are using.
2. Touchscreens
What you need to watch out for when thinking about responsive design is that on touchscreens you can’t use hover effects. Hover effects are all the stuff that happen when you move your mouse pointer over an element and it changes shape, opens a hidden element, etc. A typical hover effect is when you move your mouse over a menu item in the site header and a list of sub-menu elements become visible.
This stuff doesn’t work on touchscreens. If you try to e.g. open a dropdown menu created for desktops on a touchscreen device, instead of opening the sub-menu, it will lead you directly to the main menu link. On touchscreen devices a tap event is like a mouse click on a desktop computer.
So you’ll have to pay attention to this: on touchscreens everything needs to be reachable with click/tap events. On our sites we are using the “hamburger menu” solution for the mobile version, which is kind of an industry best practice.
3. Slower internet connection
Desktop computers usually use fast landline internet, but mobiles are often connected via mobile net, which is a slower and more unstable connection. Because of that, you have to make sure that you optimize your website’s speed better than before.
You might need to show the list below to your web developer and ask them if your site is speed optimized:
- use a super-fast server to make it sure that server-side won’t be a bottleneck in the story
- use responsive images to make sure you don’t load the huge versions of image files on the site’s mobile version
- don’t load unnecessary scripts and plugins
- optimizations using Google PageSpeed Insights and Pingdom Tools can be a good starting point
- use both server-side and browser-side cache
If your site loads in 2 seconds on your laptop, it can easily take 5-10s for it to load on mobile. So if you can’t speed the site up significantly, a good approach can be to show the most essential information first to the visitors. Then the site can load the remaining, non-essential parts while they start reading.
