Many organizations have 2013 marketing initiatives to make their web sites “mobile optimized”, but what does this really mean? We often receive inquiries by clients who want to make their current websites accessible via smart phones and tablet devices, but are not sure where to start. In the first part of this series, we will discuss some available options, along with the pros and cons.
“Mobile Web Optimization” usually means taking an existing website or application that has been designed for viewing in a desktop browser, and making it so that it can be viewed (and function) well in a mobile browser. The challenge here is how to adapt your website to work well in a wide range of screen sizes and browser types. Usually this process will involve some user interface/user experience (UI/UX) design, HTML development, and multi-platform, multi-browser testing. There are typically three approaches: a) develop the website using “responsive design”, b) develop a mobile specific website, or c) utilize a mobile web framework.
Responsive design
Responsive design involves creating a single set of HTML that “responds” to different browser types by serving different CSS based on the type of the browser that is being used by the end user. In this approach, there is technically one website which is served from a single domain/URL. The site is able to interpret which browser type (mobile, tablet, or desktop) and then serves up the proper CSS/style sheet based on the device. The layout of the UI is flexible enough so that it can utilize a CSS for mobile devices, a CSS for desktop browsers, and a CSS for tablet browsers. The “size” and elements within the site’s layout will change to accommodate the browser/screen size. On the surface, the main benefit to responsive design is being able to maintain a single set of code for both desktop and mobile. This can save you time and money, and you would typically work with a single vendor to implement it. There are also benefits to SEO since the site would reside on a single URL. The downside is that you will typically sacrifice creativity on both ends of the spectrum in order to create a single site that can serve both and as a result, you may end-up with a watered-down desktop website as well as watered-down mobile experiences – neither serving 100% of your goals. You would still need to QA your site in a multitude of devices and browsers to make sure that your design works as intended in the devices that you decide to support.
Mobile Specific Website
In this case, a separate website is created specifically for mobile devices which contains its own HTML and is running on a separate URL domain (often a sub domain such as mobile.websitename.com or something similar). The advantage here is that your desktop design can stay separate from your mobile design which will enable you to be less constrained when designing for desktop use and more specific when designing for mobile devices. For example, a desktop website might contain design elements and functionality that appears great on a wide screen monitor and your designer is free to create the site without needing to limit the design for mobile. This approach also allows you to create a mobile site that has fewer features than the desktop site, and focus only on features that would be used by mobile customers. The disadvantages are that you will need to maintain two (or more) separate websites which may contain some overlapping content. There may also be some ramifications with respect to SEO that would need to be considered. Another issue is that designers and developers will need to decide which devices and screen sizes will need to be supported and design their mobile sites appropriately. This usually translates into a lot of testing on multiple devices and browser types.
Mobile Web Frameworks
Mobile web frameworks are usually a variation of the mobile specific website, except designers and developers are using the framework as a tool which takes a lot of the guesswork out of testing the layouts in multiple devices. This is because the frameworks provide templates which have already been tested to work in many different mobile browsers and screen sizes. One template can handle the display of your site in both tablet and smart phone browsers. This saves time, frustration, and ultimately, money. Two popular frameworks are jQuery Mobile and Sencha Touch. These are open source platforms and for the most part, free to license and use in your mobile projects. The downside here is that in order to benefit from their universal templates, you will need to create designs that adhere to their template layouts. This may stifle creativity a bit for some, but this may be a welcome trade-off. The sites built on a mobile framework will also need to be hosted on their own URL/sub-domain. Another advantage is that the mobile frameworks will keep up (in theory) with the changing environment and will release new updates as the landscape evolves.
So, which is the best way to go? Well, it depends on a number of factors such as your mobile strategy, your appetite and resources for testing and maintenance, and your desire for creativity vs. utility. In Part 2 of this series will discuss some of the key decision making factors and approaches to creating your mobile website.
