Mobile Sites & Responsive design

By Michael Baxter on 26 August 2013 with tags Upgrade, Innovation

« Back to blog CMS Site E-commerce Design into CMS Utopia Upgrade Bespoke programming Innovation Security Hosting and domain names SEO and marketing Other Web news

Have you been approached about having a responsive or mobile website? The market for smart phones, tablet devices, and personal computers has created an environment where websites need to function on vastly different screen sizes and devices. Now high pixel density displays - like the iPad's retina display - are complicating website design even further.

Your website needs to present users with a good experience, no matter what device they're using. Below are some pointers which will enable you to evaluate the best options for your website:

Mobile sites

A mobile site is built specifically for a mobile device, but with the aim of reflecting a desktop site of the same content. When a user goes to the site on their desktop computer, they are routed to the version of the site that works best for their desktop monitor. Similarly, if a user visits the site on their phone, they will be directed to the mobile version of the site that has been specifically optimized for small devices.

It's a fairly straightforward approach: If you need a site that works on both a desktop and a smart phone, make two sites. Any visitor to the site will be routed to the version that works best on their device. At the same time you can have different content across the versions so what you promote on a large screen can be different to that on a smaller display.

Pros

If the experience that your desktop site provides differs significantly from the experience that you want users to have on their phone, a mobile site is probably a good choice. Because they can both be designed independently, from the ground up. Special considerations can be made for each site that have nothing to do with the other. The site can also be made to look and function more like a smart phone app which gives a professional look to your online offering.

Cons

In a word: duplication. If you build two sites, everything has to be done twice. Sure, both sites can pull information from the same content management system but sometimes you may have to duplicate content. The other issue with a mobile site is that "mobile" is more than just one device. As we talked about at the beginning of this section we have to accommodate dozens of sizes, resolutions, and devices.

Getting a mobile version of your website up and going is a simple exercise. Utopia takes care of all the design so your existing website branding and look and feel are continued. The mobile site works independently from your existing website and content so it can be specifically tailored to your customers. The mobile site could include showcasing specific products, provide driving instructions or "Tap here to call" as an immediate call to action.

Technical implementation is also taken care of so you can easily update the content, change the online offer and track visitors to it. The whole process takes around two weeks and is priced from $700.

Responsive design

Responsive design is a method of combining fluid layouts (which shrink and grow as a browser is resized) with media queries (definitions on how things look) to produce a site that can shift and change depending on the size of the device. Responsive designs allow us to create websites that change to best sit the pixel dimensions of all devices.

For instance, a website would dynamically adapt the size and placement of your logo depending on the size of the device. Perhaps it might even hide certain areas or move them to be below the main content.

Pros

Responsive design is completely screen size independent so your content can be viewed across multiple devices. Careful consideration needs to be given to the content and as always - content is king.

Cons

Responsive design requires a change in approach for designing a website. Because the design has to adapt to multiple devices and screen sizes, we're required to give more consideration and time to the underlining code - or HTML. How do we design a site that can function well on an iPhone yet can scale to wide-screen LCD monitor?

We hope this article gives you some pointers to what options exist for your website and how it can be made available to your customers across all sorts of devices.

Please look over our portfolio which demonstrates the types of solutions that are possible and  contact us to discuss what would work for your business.