The top challenges in creating a complex mobile website

Tim

Tim
Writes on 11th June 2014

Websites have a personality that needs to be retained for the mobile version even though a smaller scale, limited space and potentially restricted bandwidth get in the way.

mobile website integration

The mobile responsive website for The Dog's Doodahs website is not a stand-alone version. It interacts with the existing, complex personalisation process, that was developed specifically for The Dog’s Doodahs when it was conceived 5 years ago.

Updates and improvements are continuous but on the day it was conceived a portable version controlled by a touch screen, multi-gesture interface was not at the front of anyone’s mind. One of the biggest challenges has been integrating seamlessly with existing technology, the desktop and mobile versions both interact with a single database, content management system and workflow engine. 

A card started on the mobile site and saved, can be picked up and finished on the desktop version at a later date – and vice versa.

Website design

One of the most noticeable aspects of The Dog’s Doodahs website is the unique and quirky design. The website has a ‘personality’ that needed to be retained for the mobile site. Yet, with a smaller scale, limited space and potentially restricted bandwidth (if used with a mobile data connection) we needed to strip the site back to its bare bones, and build back it’s identify from there. 

Flexibility

Phones and tablets vary so much; in physical size, screen ratio, operating systems and software variants and whether the preference is to hold it Landscape or Portrait. And that’s without taking into account an in custom installed browser. The mobile website needed to respond and adapt to make the user experience as flexible as possible.

Mobile alternative

Stats in general show rapidly (more than anyone would have dared predict) increasing ‘mobile’ browsing. The specific stats for The Dogs Doodah’s tell us it’s not necessarily mobile phones being operated on the go, but instead a large majority of the sites user base opting for a tablet as a quick and easy means to browse the web from the comfort of their sofa, presumably quite often alongside another activity such as watching TV.

Responding to this growing trend was a necessity to ensure the user experience was not compromised at all by using such a device, in fact the opposite is the case, we’ve been able to enhance the mobile website by taking advantage of some of the benefits of touch screen browsing.

iOS and Android do do things differently, but it’s not as simple as that, different versions of iOS need to be catered for as well as retina and non-retina displays, and then there’s the physical size difference; increased available viewing area and different aspect ratios of iPad over an iPhone. Then things get even more complex when you look into Android devices. So many different manufactures with a wide selection of products and a massive variation in screen size, resolution and aspect ratio. Different versions of the operating system, some devices restricted to earlier version due to limitations of the hardware and then individual manufactures customizing the operating system for their own purpose. The Kindle Fire being one device that stood out as ‘a bit different’.

The solution was to get back to basics, you can’t target specific devices or screen sizes so we opted for basically two views, landscape or portrait. The assumption being a tablet you tend to hold landscape, more like a traditional desktop screen, whereas a mobile is more likely to be operated in a portrait view. There was a lot of fiddling around to get a ‘best fit for all’ design but we’re happy with the result.

The most successful part is the thing as a whole! From the years of experience gained with the current desktop website, understanding how the user moves through the process and having an opportunity to review this process and take a new approach to streamlining the process and user journey. 

Tim Jay
Creative Director

Join the conversation

      

4 comments

  1. KevinBrent

    In the third paragraph you said the title tag has no seo value. That is not true. The title tag is one of the most important tags. The title attribute in the image tag really has no value. I thought you made that clear in your first paragraph.

    Webnetism

    Hi Kevin. Of course you are right. I did mean the title attribute in the image tag really has no value.

  2. andrew

    Thanks for sharing this valuble information

  3. Raj

    Superb explanation about alt tags and image titles. Valuable information this is for me.. Thanks

  4. Bodizzle

    Great article, thank you. I'm curious if repeating similar alt attribute descriptions across extremely similar images in an image heavy product portfolio site is an issue with Google? Many of our web images share the same primary characteristics as each other which also happen to be the keywords we are most found for. We'd like to take advantage of these descriptions but don't want to be penalized for keyword stuffing or duplicate data by Google. Any thoughts on this? We have 200 of these images so we want to be safe but of course maximize value as well. Thanks! BD

    Webnetism

    You shouldn't worry too much about the tagging being repeated if the page is "honest". As long as the content is true and provides a good user experience, then you should see no issues with Google.

Let's contribute!

How about you help us a little and share this page with your friends? It’s just a click, we promise!

Want to get in touch?

Then why don't you? Just click the button bellow and secure your place in our office chair (before you ask... yes, spinning is allowed)!

Get in touch