Exotel’s mobile friendly website — the 5 step design process
This is the first part of the 2 part blog on how making our website compatible to handheld devices helped us improve the performance of our website.
We saw that about 15% of our visitors were coming to our site from a mobile device. And we wanted to make ours a mobile friendly website once our mobile traffic hit 10%.
We live in an age of flat and responsive trend in website design. So, we upgraded our website to a flat design that would be compatible with all handheld devices. This would ensure that the user can access our website on any handheld device and register and they will not have to compromise on the website experience. In this post, I’m going to explain how we made our website responsive step by step and how it impacted on our mobile registrations.
Step 01:
We took screenshots of our old website.
Step 02:
Then we downloaded the Free PSD (Photoshop Document) Grid Template and embeded it with our website screenshot .
What is a Grid System?
A grid system is a structure comprising a series of horizontal and vertical lines which intersect and are then used to arrange content. Look closer at the image below and you’ll see the red and white stripes on it.
Step 03:
We arranged everything on the website according to these grid columns to make our HTML5/CSS3 process easy. We have more than 200 pages in our website and it is not possible to check them all with this grid. If you know the concept of the Grid, you will be able to use your judgement to figure this out for the rest of your site.
Step 04:
We use WordPress for both our website and blog to make updates faster than a static website without needing a designer or a developer. When you design for WordPress, downloading the Starter theme is a good idea. Using an existing theme is not a good idea if you want to have a unique identity for your business. So design your site from scratch using the Starter theme.
Step 05:
We gave our new mobile responsive design a month to start showing results. And like everything else we do, we tracked this like crazy and we were pleasantly surprised at how well the mobile friendly site was working for us.
Part 2 of this post has the results of our mobile friendly site’s responsiveness.
