Quick Fixes for Modifying a Website for Mobile Access

July 16, 2012 Dennis D. McDonald

Luna Moth (Actias luna)I recently modified my professional website to provide a better experience for users accessing it from smartphones and tablet computers. Even though my vendor Squarespace reports less than 10% of my hits originating from Android, iOS, or WinMobile devices, there are also 59% of my hits where the source OS is unknown, so I suspect that there are more smartphone accesses buried in there as well.

I’ve also noticed an increasing number of news sites, accessed via my own iPhone news apps, are linking to articles optimized for small screen access. I like this practice and decided I wanted to move towards a better mobile experience for my own site. Since I often email links to new blog posts to friends and colleagues as a way to promote my own consulting practice, I wanted to make sure people can read the articles I link to in my emails.

With that in mind I opened up my web site’s Squarespace administrative controls to see how I could further simplify the website.

The first thing I did was to increase the size of the main navigational links to make them easier to tap with a fingertip. I also increased the space between the text links to make it easier to tap individual links. Finally, I increased the size of the tags at the bottom of each article to make them more finger-tappable.

Next, I looked at the overall structure and decided to move from a 2-column to a 1-column default orientation. The reasoning was simple: moving to one column enables a default view of an article on either a PC or a mobile device to spread across the screen. This improves readability without excessive zooming.

The Squarespace controls made it simple to do this by clicking on a single control from within “structure” editing. I did it and went back to admire the results.

This is where I did run into somewhat of a problem. The navigational elements I had originally displayed in the narrow left hand column were no longer visible. Since these elements had been previously visible from anywhere within the web site in the left-hand column, I needed to make them available. A temporary glitch was lack of access to the “search” box that had been available to all from the left hand links column; I had been counting on this search function to track down needed pages to link to and it took a bit of time to find it again from the single-column view.

Once I did that I had to decide where to put the links that had been in the left-hand column. The Squarespace “structure” commands easily solved that since I was able to add individual links to the horizontal banner below the web site’s title. To the existing row of links HOME, MOBILITY, COLLABORATION, PROJECT MANAGEMENT, EGOVERNMENT, and MEDIA I simply added the following: SEARCH THIS SITE, TOP TEN, DOCUMENT DOWNLOADS, REVIEWS, and ABOUT ME.

That summarizes my “quick fixes” for making my site easier to use on a mobile device. Granted, I haven’t done anything really “exotic.” Nor have I done anything to take advantage of the inherent features of mobile devices such as the ability to take advantage of location information. (Even if I knew how to do that I’m not sure I would know what to do with it!)

Do you have some more ideas for “quick fixes” for making a web site more accessible to mobile devices?