The Mobile Dilemma: How Can You Make Your Existing Site Mobile?

This post was originally published on Ektron's blog, and we are republishing it here because of the insights it provides about mobile web design.

It's everywhere. You can't get away from it. It has its own language, its own culture, and it seems as if everyone you pass on the street is part of it. It's an unstoppable force in the online world. And it's tiny.

I am of course talking about mobile, and if you have a website, chances are you are talking about it too. Almost everywhere you turn in the online world today, you are bombarded with information on how fast the mobile market is growing and how pervasive and commonplace smart phones have become. Mobile is not something that we can ignore.

For me, mobile can probably be best described by Robin Williams as the Genie in the Disney film Aladdin: "PHENOMENAL COSMIC POWERS! Itty bitty living space."

Mobile is indeed phenomenally powerful. Many of us now carry around a tiny computer with us wherever we go. One that also happens to make telephone calls. How cool is that? And mobile devices can be itty bitty, which leads to a number of challenges with providing a good user experience when using a website on a mobile device.

When building a website that works well on mobile, there are two main ways of going about it. (There are actually several, but these two seem to be the most common right now.)

Adaptive Web Design

Adaptive Web Design is an approach that allows the webpage's layout to change based on the device's display size. One of most the popular, and powerful, techniques for adaptive web design is a methodology called Responsive Web Design. Responsive web design uses fluid grids, images, and CSS3 media queries to produce an adaptive display. This approach has gained a lot of momentum recently, and it is an approach that Ektron has been strongly supporting this year. It's a great approach, but not right for every site.

Building a separate site for mobile

This approach can come in many flavors, but when using a CMS system, this most commonly means setting up separate mobile templates and style sheets, and using some kind of device detection to direct the user to the correct site. This method has some issues. One of the big ones is that you have your site (http://yourdomain.com), and then the mobile site (http://m.yourdomain.com). This can have a negative impact on your SEO, and links sent from a mobile device are to the mobile site, which usually looks a little odd on a full-size desktop.

Both approaches can be very effective, and each should be evaluated for your particular project to see if one will be a better fit for your long-term goals.

I am just finishing up a project where we decided to go with the second method, building new mobile templates for their website. Their full desktop site is very nice, well organized, and provides a ton of information to their users, but they realized that it also needed to work well on mobile devices.

The client asked us to design new mobile templates, based on their desktop design, and build functionality to redirect users to the new templates, if they are on a mobile device.

Simple right? Well, we ran into a few challenges along the way.

New templates

No problem. The design folks came up with a great layout that was easy to use on a small, mobile device. Never underestimate the value of good front-end design.

Redirection

The client wanted to direct all mobile traffic to the new mobile templates, but updating the links wouldn't work. Using the Ektron CMS meant that they were reusing the content, not recreating it. (This is really the only sane solution. No one wants to have to maintain multiple versions of content. That is what a CMS is for, after all.)

To handle this, we set up an HTTP Module to handle the actual redirection. Mobile users see the mobile site, and desktop users see the desktop site. The advantage of using an HTTP module is that it gets run very early in the page life cycle, so we find out quickly if we need to go to the mobile templates or not, before a lot of processing and page loading is done.

View the Full Site

It's weird, but some people actually want to see the full desktop site on their mobile devices. Often it is because they are very familiar with the full site, and the mobile site might be different enough that they don't want to use it. For whatever the reasons, we had to come up with a way to bypass the mobile redirect functionality, so if a user chooses to see the full desktop site, they could. (Note: While I am a big fan of Responsive Web Design, this is one of the areas where it just doesn't work. Since you are using the same templates, but applying different styles based on browser view size, you can't easily change the view. [I said easily. There is always a way. It just may not be a good one.])

The easiest solution turned out to be setting a session cookie when a link button was clicked. In the HTTP module, we check for the cookie, and if it exists, we stop the redirect process, and let the page load normally.

But I want to go there!

One particular challenge that we had, came about because the client had a lot of content. I mean a LOT of content, and sometimes the old didn't always match up with what they wanted to display on the mobile site. So we had to come up with a way to cross-reference the old with the new. And it had to be easy for the client to maintain.

To do this, we set up a cross-reference smart form, which captured the old destination, and paired it up with the new. Since this was a smart form content item, the client can easily make updates in the Workarea whenever they need.

In the HTTP module, after we determine that they are on a mobile device, we check against that list, get the new ID, and redirect them to the new page. Since this was a smart form, the list was stored as XML, so we could use XPath to run the check against the list for a match. To help with performance, we cached everything that we could, so each lookup didn't require a trip to the CMS database.

Tables

Let's not beat around the bush, tables are hard on a mobile device. Tables have gotten a bad rap over the last few years in the realm of web development, but if they are used correctly, tables are great. (If you don't think so, try displaying a bunch of tabular data using only divs. The last time I tried that, the computer almost went out the window.) They are especially great if you have a large screen to read them. On a mobile device, a lot of scrolling is necessary.

Still, there are a few ways to deal with tables on a mobile device, and the super-smart folks at CSS-Tricks.com have come up with a number of ideas (Responsive Data Table Roundup). That article looks at everything from making each cell its own line, with pseudo elements for the labels, to using charts, to hiding a big table, and showing a much smaller mock table. I highly recommend that you take a look at some of the solutions, and see if one will work for you.

Redesign

If you are very lucky, you might be in the position to completely redesign your website. If that is the case, then the best piece of advice I can give you is to have a clear vision of what you want to accomplish, and a clear plan on how to make it happen. I know that planning is no fun, and no plan will cover every issue that you will encounter, but a little bit of planning up front can save you a lot of frustration later on, and a lot of planning can keep you sane.

Adding mobile functionality on top of an existing website can be very difficult, and time consuming but the payoff is pretty great. Having your site work well on mobile devices means that you can reach and interact with a much larger audience, one that is technically savvy, and looking at your site any time, and any place. That often can have a direct impact on the bottom line.

You won't regret making the mobile experience a good one.

Do you have any questions about implementing a mobile website? Please contact us to find out how we can help you go mobile.

Image credit: Deposit Photos