Responsive Web Design Workflow Timo Laak University of Tampere School of Information Sciences Interactive Technology M.Sc. thesis Supervisor: Timo Poranen December 2013 University of Tampere School of Information Sciences Interactive Technology Timo Laak: Responsive Web Design Workflow M.Sc. thesis, 43 pages December 2013 Responsive Web Design Workflow is a literature review about Responsive Web Design, a web standards based modern web design paradigm. The goals of this research were to define what responsive web design is, determine its im- portance in building modern websites and describe a workflow for responsive web design projects. Responsive web design is a paradigm to create adaptive websites, which re- spond to the properties of the media that is used to render them. The three key elements of responsive web design are fluid layout, flexible media and media queries. As the numbers of mobile device users are constantly increasing, responsive web design has become an important method to improve mobile device user experience and accessibility in browsing the web. The workflow to build responsive websites consists of eight cumulative and iterative steps, which are discovery, planning, content design, sketching, proto- typing, visual design, testing and discussion. As each web design project is unique and has different content, audience and goals, it is difficult to create a perfect workflow model. The responsive web design workflow described in this thesis is a recommendation and a collection of best practices for building responsive websites. Keywords: responsive web design, web design, workflow, progressive en- hancement, mobile first, mobile web, adaptive design, content first ii Preface As a web developer and designer, I have often wondered how difficult it is to work on a web development project and try to keep in mind the best known practices, while keeping to the schedule, staying within budget and making both the client and the management satisfied in the outcome of the project. The goal of this thesis is to collect many well-known modern web design guide- lines and practices into a responsive web design project workflow model, or rather guidelines, which is a good fit for responsive web design projects and helps us developers and designers to build a better user experience for the web. Helsinki, 10 December 2013 Timo Laak iii Table of Contents 1 INTRODUCTION ..................................................................................................... 1 2 WHAT IS RESPONSIVE WEB DESIGN? .............................................................. 3 2.1 Why Websites Should Be Responsive? ....................................................... 3 2.2 Elements of Responsive Web Design .......................................................... 5 2.3 Adaptive Design ............................................................................................. 6 3 MOBILE WEB ........................................................................................................... 9 3.1 Accessing Desktop Websites from a Mobile Device ................................. 9 3.1.1 Early Solutions .................................................................................... 9 3.1.2 Modern Proxy Based Browsers ...................................................... 10 3.2 Mobile Web Revolution ............................................................................... 11 3.3 Multi-Screening Context ............................................................................. 12 4 MODERN WEB DESIGN PARADIGMS ............................................................ 13 4.1 Mobile First ................................................................................................... 13 4.2 Graceful Degradation and Progressive Enhancement ............................ 16 4.3 Content First .................................................................................................. 17 5 RESPONSIVE WEB DESIGN WORKFLOW ...................................................... 19 5.1 Abandon The Waterfall ............................................................................... 19 5.2 Discovery ....................................................................................................... 20 5.3 Planning ......................................................................................................... 22 5.4 Content Design ............................................................................................. 23 5.5 Sketch Design ................................................................................................ 24 5.6 Prototyping .................................................................................................... 27 5.7 Problems Revealed by Prototyping ........................................................... 29 5.8 Visual Design ................................................................................................ 34 5.9 Testing & Feedback ...................................................................................... 36 5.10 Iteration .......................................................................................................... 37 6 DISCUSSION .......................................................................................................... 38 REFERENCES ............................................................................................................... 40 iv 1 INTRODUCTION The primary design principle of the World Wide Web, by Tim Berners-Lee, is universality. (Lloyd, 2012) The Web is open by nature and it should be accessi- ble from any browser and hardware that can connect to the Internet. It should be accessible also to people with disabilities and work with any form of infor- mation. (Berners-Lee, 2010) Early web pages were simple HTML files, which automatically adapted to fit the width of the browser when opened. This means that the web is responsive by default and it’s the designers that have been breaking this paradigm by plac- ing content in non-flexible fixed-width containers. (Hume, 2011) The very first web page in the world was mobile ready and responsive, long before smartphones, tablets and the concept of responsive web design. It was repub- lished in 2003 to celebrate the 20th anniversary of the World Wide Web. (Epstein, 2013) The page consisted of structured plain text with hyperlinks, which makes it incredibly simple to view in different devices. (Hay, 2013, p. 51) The most common web design layouts we see every day when browsing the web, be it on a desktop or on a mobile device, are based on typographic grids, popularized by graphic designers of the mid-1900s. A typographic grid is a ra- tional system of rows and columns, which create modules where content can be placed. Although the typographic grids were originally designed for printed media, they have been the foundation of web designs and used even today as the basis of modern web designs. (Marcotte, 2011) The flexibility of the web and inflexibility of typographic grids in fixed-width designs led to problems, when small screen devices started to gain popularity. Content could not be fitted on the screen anymore. The solution for this is re- sponsive web design, which makes the typographic grid flexible and adaptive. Responsive web design is problematic in traditional waterfall projects, which sets demand for a different workflow. (Boulton, 2012) It is necessary to understand the concept of responsive web design and why its importance has increased during the recent years to be able to conduct a suc- cessful responsive web design project. This literature review opens the different elements and provides background information about the paradigms and fac- 1 tors behind responsive web design. The concept of responsive web design and its three main elements are explained in Chapter 2. The cause for rising im- portance of responsive web design, the evolution of mobile web is discussed in Chapter 3 and the modern web design paradigms that make up the grounds for responsive web design workflow are discussed in Chapter 4. The Responsive Web Design Workflow showcased in Chapter 5 is based on eight different phases by Salminen (2013) and each of these phases is based on the tools and work- flows of Hay (2013). I have included my own remarks on working in responsive web design projects in these phases and the surprising problems there some- times may appear. I have also introduced a few typical responsive web design issues that can be detected and fixed with the help of prototyping in Chapter 5.7. Finally the summary in Chapter 6 lists many issues that may arise in re- sponsive web design projects preventing the successful outcome. 2 2 WHAT IS RESPONSIVE WEB DESIGN? Responsive Web Design, often abbreviated as RWD, is a web design and devel- opment paradigm, which uses web standards to create designs, which are flexi- ble and adaptive to media that is used to render them. (Marcotte, 2010) Roots of the term Responsive Web Design are in discipline called Responsive Architecture (Marcotte, 2010), introduced by Nicholas Negroponte in 1970s. A responsive architecture is the natural product of integrating computing into spaces and structures and thus embedding ubiquitous technology in buildings, which respond to data received via sensors and user input. (Sterk, 2005, pp. 225-227) 2.1 Why Websites Should Be Responsive? User interfaces in the digital world are filled with analogies and metaphors to the physical world. There’s a desktop on our computer