How to Approach Mobile and Responsive Web Design, Part 1

It seems like responsive web design it is on everyone’s lips this year. Already back in May 2010 Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. Referring to print design, he noted "We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility".

It is not a coincidence that responsive became such a hot topic; there are several advantages about using responsive layouts in web design, but as you may already know it is not the holy grail either.

For years clients have been used to a linear web design process leading up to a pixel perfect design they could approve before the costly implementation process was started. The process typically involved alignment of the design to a few specific screen resolutions, that once implemented would be tested on a predefined list of browsers and operating systems. Even with a short list this was not easy and the differences between how browsers implemented the web standards made front end development a hardcore specialist area.

You may wonder if the web industry has finally matured and if the complexity is under control. The simple answer is NO. A lot have happened, and while tools and standards matured the availability of mobile Internet exploded. Today, nearly every client, want a mobile friendly version of their website which indeed makes sense. For web designers and developers, this is exciting and challenging at the same time. Creating a web design specifically targeted to every model of iPhone, iPad, Android phones and tablets, BlackBerry, netbooks etc. is not feasible. Unfortunately, it gets even more complicated. There are some quite crucial decisions to be made regarding the application architecture, and they will have a significant impact on what is possible, on time to market and the implementation cost.

Is responsive web design right for your project? Web vs. native apps

Responsive web design is just one of many application architectures you can choose from; however, it is not always the right choice.

Fig. 1: comparison of mobile app architectures, source: Worklight

Native apps are developed for the individual mobile platform in programming languages they support e.g. Java for Android, ObjectiveC for iOS. New features arrive in new models, and this may break compatibility and increase the maintenance. However, native apps have great performance, and they have access to device functions such as camera, navigation etc. Development cost is usually high; especially when there is a requirement for supporting multiple devices.

Hybrid apps could be said to take the best from both worlds. They rely in development frameworks where the native implementation across multiple device architectures becomes less a headache. Hybrid apps main content is typically delivered using standard web standards (HTML, CSS, JavaScript) to keep the cost down, but they can still access the device functions e.g. camera.

Frameworks worth checking out: PhoneGap, Sencha, Titanium, Rhomobile, Mosync, Worklight (IBM), Corona, backelite

Dedicated mobile web apps are simply websites optimized specifically to be rendered on mobile devices. This is useful for giving users access to web based information and transactions via mobile devices. However, maintenance of both a traditional and a mobile website may be the consequence of this model. Keep in mind that web apps and websites will not have access to device features.

Device specific web apps, it is possible to create web apps that are optimized for specific devices; such as iPhone and Android.

Responsive websites are websites that rely on recent development in CSS3 e.g. media queries to adapt the page layouts to the actual screen sizes. This model allows organizations to maintain one website and still provide pages that look great for users on computers, tablets and smartphones.

The tricky part here is that there is not always an obvious solution. If you just serve content (text, images, videos) you should not consider building a native app. However, the hybrid model could be interesting if you are likely to add more advanced features in the future or if your strategy is to market your app through the appstore. Responsive websites, however, are great for optimal reach at a low cost, and therefore great as the initial mobile investment. Using the popular publishing platform WordPress it is even possible to get a fully responsive and mobile friendly website at a low cost by installing a responsive WordPress theme or some responsive layout plugins. Even if you plan on or already have developed native or hybrid apps a responsive website may be a great marketing platform. Users where a native app is available, could be asked to opt-in for the optimal experience through a mobile friendly interface.

What responsive design means to the design process

The responsive web design process is different and it is not about perfecting a single layout to the last pixel. It is on the other hand also a lot more than simply adjusting width on elements and resizing images.

Responsive Web design requires a component based and abstract way of thinking. It is about making the right content easily available to users no matter what device they are using.

Clients may find this hard to understand and may not be comfortable about not running after signing off a single target. Setting expectations right and getting the same understanding of concepts is critical to success.

Visualize the dynamics of responsiveness

A good way to start this process is to show it in a dynamic and visual way what responsive web design is and how it works - you may do it on a whiteboard with postIT notes and it is much better than talking about technicalities like media queries, view ports, flexible images etc. If the client have an existing website it may be used as input to have elements that can be easily recognizes.

Fig. 2: Illustrating responsive layout on a whiteboard

Demonstrate using existing best practice sites

You can also use existing responsive websites to demostrate how it works and show best practice. I created an article back in June on "Examples of Great Responsive Website Design" and you may check it out for inspiration. If possible you can also use smartphones and tablets in your demonstration. Make sure you have a clear plan about what design principles each demo need to illustrate. Fore example the various ways main navigation could be handled in a responsive layout. If you don't have the devices available for the demo there are online responsive tools available as for PCs.

Fig. 3: Responsive websites to show good examples of what responsive layout means

Define and show typical patterns

Another effective way to introduce the concepts and dynamics of responsive design is to use responsive patterns. Joshua Johnson posted an excellentexample of how this can be used in "5 Really Useful Responsive Web Design Patterns". The article also introduces 5 useful patterns you can be inspired by, and, at best, use yourself.

This approach further helps to develop a common language, which can be extremely valuable in the project.

Fig. 4: Using responsive patterns and simple to understand models

Please stay tuned for the next parts of this article where I dive deeper into the mechanics of responsive web design.

Group discussion

Have you or your organization started to use responsive web design? If so what is your experience related to this both seen from the web designer and the client side? Any problems you would like to highlight and get covered?