Anth's Computer Cave Blog

Mobilizing the Cave

Before and after shots of anthscomputercave.com. Picture: Anthony Hartup.
The non-mobile-friendly desktop view on the left and the new, mobile-friendly desktop view on the right.

If you've ever visited anthscomputercave.com from a smart phone you may have noticed the Cave was not exactly mobile-friendly.

This has changed!

The road to discovery

Like many other webmasters I have really dragged my feet on this, partly because I am not really a "phone person". I do all my work on a laptop or desktop computer.

I received several stern emails from Google in the lead-up to their "mobilize or else" deadline a few months back, warning me they would demote me in their search-rankings if I did not improve things for mobile visitors.

At the time I wondered, "Who is going to read the technical articles on the Cave using a mobile phone?". I blissfully went about my business while hapless mobile-users pinched and zoomed around my site trying to click tiny links and icons.

At one stage I stopped, looked around me, and realized everyone I knew was doing almost everything on their phones and tablets.

A closer look at my server logs showed that around 17% of traffic to the Cave was coming from mobile devices.

It was time to get with the modern era.

Starting small

I decided to start with one of my other sites, Fish Are In.

This was partly because it is a lot smaller and simpler than the Cave, meaning I could learn the ropes of responsive web-design there, without disrupting my main site.

The other reason I started with Fish Are In is that it is a website for fishing, meaning it was more likely to receive mobile traffic.

The first thing I learnt as I tried in vain to wrestle my fishing site into mobile readiness was: Build your site mobile-first.

Build first and foremost to work on a mobile device!

My site was built for the desktop, and in the end I had to completely wipe every page and start again.

Below you can see the before and after pics of the fisharein.com home page.

The old home page on the left, and the new mobile-friendly home page on the right. Picture: Anthony Hartup

I have changed to a dynamic column layout. I found the basic info on using Responsive Grid View at w3schools, a vital resource for web-programming.

This dynamic column layout works almost like the old design on a desktop, but shows each column in full screen on a mobile device. This means the first thing a mobile visitor now sees is the first left-hand column in its entirity.

On a mobile phone they look like this:

The old mobile view on the left, and the new mobile-friendly home page on the right. Picture: Anthony Hartup

As you can see there was a lot displayed in the old mobile view on the left, but it was so, so far away and impossible to use without zooming.

There is not much on the new display on the right, but it is all visitors need when they land on the site.

The can see by the highlighted link they are on the Geelong Fishing Spots page, and that there is a Bellarine Fishing Spot page as well. They can see there is a Map page and Home page, as well as a general locations page. They can scroll down to view the Geelong Locations or they can click a link to go somewhere else.

On to bigger things

With the knowledge gained from mobilizing fisharein.com I now started on the Cave.

The cave has a lot more sections with a wider variety of content, so it required some more learning. I took a couple of days to learn the basics of Jquery, a JavaScript library that makes it easy to create dynamic webpages. I then used Jquery to control which parts of each page would load depending on the device a visitor was using.

Below is the before and after screenshots on a desktop computer.

Before and after shots of anthscomputercave.com. Picture: Anthony Hartup.
The non-mobile-friendly desktop view on the left and the new, mobile-friendly desktop view on the right.

You can see I am actually fitting more content in the initial window now. This is thanks partly to replacing the horizontal navigation panel with a verticle nav panel on the side.

Before and after mobile shots of anthscomputercave.com. Picture: Anthony Hartup.
The non-mobile-friendly mobile view on the left and the new, mobile-friendly mobile view on the right.

Once again, the old home page is a mess on mobile, while the new page is neat.

A visitor can see that there is scroll-able content below, which is links to the latest articles. They can also see the button to show the main menu.

Before and after mobile shots of anthscomputercave.com. Picture: Anthony Hartup.
The new home page with the main menu opened.

Once they click the menu button the can see links to all the main sections in the Cave. There is also a "show more" button below that will show secondary links like contact, search and index pages.

I still need to go over some of the pages again. I have noticed a couple of main section headings are wrong, so I'll give the entire site another proof-read.

I expect after completely rewriting 70 pages there may be the odd mistake.

I also need to reduce the size of the images on some pages.

I have three more websites to mobilize, and they are completely different designs. I suspect by the time I finish those I will have learnt new tricks that I can apply to this site.

Summary

I think the Cave now works well on mobile devices. The bonus is, I think it also works better on the desktop.

Overall, I think it looks more modern, and it is easier to navigate.

Check it out, I would love some feed-back from mobile users.

Cheers

Anth

_____________________________________________

Comments

Leave a comment on this article



About the Author

Anthony Hartup, creator of AAIMI, Estimcad and Anth's Computer Cave.
Anthony Hartup runs the AAIMI Project, a Python machine-interface platform.
He also codes for the Estimcad Project and ControlCadGUI.


Search the Cave with AaimiClip