Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Responsive Web Design Workshop |
Milan March 2014 Waterfall model doesn’t make that much sense in the responsive age. ! That model worked 3/4 years ago when we lived in a different context with different devices It's over

Responsive Web Design Workshop |
Milan March 2014 Single layouts are not relevant anymore. What is important is the overall experience across all the different devices and screens form factor. From templates to the experience

Responsive Web Design Workshop |
Milan March 2014 What is responsive design? It looks different and things jiggle around, scale, re-order, appear, and disappear so it works well in your browser size or whatever device you’re using to view it... A quick and dirty answer:

Responsive Web Design Workshop |
Milan March 2014 What is responsive design? A more formal definition: Responsive web design means designing your website so that it responds to your users environment based on screen- size, platform and orientation.

Responsive Web Design Workshop |
Milan March 2014 Rather than quarantining our content into disparate, device-speciﬁc experiences, we can use media queries to progressively enhance our work within different viewing contexts. Ethan Marcotte

Responsive Web Design Workshop |
Milan March 2014 Content Strategy You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure.

Responsive Web Design Workshop |
Milan March 2014 Content Coreography We can begin to choreograph content proportional to screen size, serving the best possible experience at any width.

Responsive Web Design Workshop |
Milan March 2014 Fluid grids & layouts A fluid grid will still structure the content consistently and predictably but its size and positioning will change depending on the available size of the display. The essence of flexible grids relies on stop thinking in fixed pixels and start considering percentage units (element’s width /grid’s size e.g. 200px/ 960px*100 = 20.83%).

Responsive Web Design Workshop |
Milan March 2014 Fluid grids & layouts If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid. Target : context = results 24 : 16 = 1.5em 700 : 988 = 0.7085 Font style DIV

Responsive Web Design Workshop |
Milan March 2014 “Fluid grids, ﬂexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Ethan Marcotte

Responsive Web Design Workshop |
Milan March 2014 A different way of thinking Work on everything Design for many sizes at once ! Clean design Reduce clutter, essential content only ! Design from the content out Let content decide breakpoints Design is how it works Not how it looks ! Less Graphic files CSS gradients, font icons ! Keep learning Responsive images? Polyfills? 1 2 3 4 5 6

Responsive Web Design Workshop |
Milan March 2014 Should I go responsive or not? Project context Complexity and functionality Skill set of your team Budget and timelines Client expectations It depends. ?

Responsive Web Design Workshop |
Milan March 2014 How can I start? Project Structuring a project is a fundamental step to outline the pillars of the experience of your service applications.

Responsive Web Design Workshop |
Milan March 2014 Discover Design Delivery Designers follow UX Methods that facilitate their workflow from the first insights to the final product delivery. A Design methodology Project

Responsive Web Design Workshop |
Milan March 2014 Discover Design Delivery Insight Benchmark Concept IA/ Ixd VD Prototype Test Document Develop Designing is about aligning the purpose of a product with the user’s needs in a specific context, allowing them to engage with the product more than ever before. A detail view on the process

Responsive Web Design Workshop |
Milan March 2014 Exploring concept ideas by sketching a first content organisation is the first step to define the information architecture. Concept design

Responsive Web Design Workshop |
Milan March 2014 IA & Global patterns Information architecture focuses on the organization and structure of content in a manner in which a user can navigate through it.

Responsive Web Design Workshop |
Milan March 2014 Analyze problems & constrains. Refine ideas and explore all the details to make it possible. Explore the details

Responsive Web Design Workshop |
Milan March 2014 Wireframes & Sketches Wireframing is fundamental because it allows the designer to plan the layout and interaction by sketching UI elements.

Responsive Web Design Workshop |
Milan March 2014 In a responsive website, it is important to stress the concept of modularity of the components, in order to facilitate both the design and the development. Wireframes & Modules Module A (desktop) Module A (Mobile) Module A (variations)

Responsive Web Design Workshop |
Milan March 2014 A template is a key screen/layout which is used as a model for other pages within the application. Wireframes & Templates

Responsive Web Design Workshop |
Milan March 2014 Making responsiveness is about providing readable content for any device, and that means starting with type. It’s already all about typography Responsive will be 99.9% typography

Responsive Web Design Workshop |
Milan March 2014 Why we need design patterns? A design pattern in architecture and computer science is a formal way of documenting a solution to a design problem in a particular field of expertise. An organized collection of design patterns that relate to a particular field is called a pattern language.

Responsive Web Design Workshop |
Milan March 2014 Responsive design patterns As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. Layout Navigation Content

Responsive Web Design Workshop |
Milan March 2014 Tiny Tweaks This technique keeps the structure of the website consistent while scaling, relaying on each block for content adaptation.

Responsive Web Design Workshop |
Milan March 2014 Mostly Fluid It is a technique based on a multi-column layout that relies on fluid grids and images while scaling, and stacks columns vertically in its narrowest width.

Responsive Web Design Workshop |
Milan March 2014 Column drop This technique starts with a multi-column layout and ends up with a single column layout, dropping columns along the way as screen sizes get narrower.

Responsive Web Design Workshop |
Milan March 2014 Column drop v.2 This technique starts with a multi-column layout and ends up with a single column layout, hiding columns along the way as screen sizes get narrower.

Responsive Web Design Workshop |
Milan March 2014 Layout Shifter This technique shifts the left hand navigation column to the top in order to optimize the navigation while scaling to narrower screen width.

Responsive Web Design Workshop |
Milan March 2014 Off Canvas The Off Canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden until either a larger screen size allows it to be visible or a user takes action to expose it.

Responsive Web Design Workshop |
Milan March 2014 Toggle navigation The toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header.

Responsive Web Design Workshop |
Milan March 2014 Footer Navigation This clever solution keeps the nav list at the footer of the site, while the header contains a simple anchor link pointing to the footer nav.

Responsive Web Design Workshop |
Milan March 2014 Stacked top links navigation In this solution all the main navigation is always directly visibile on top and every link use a single row in the mobile version.

Responsive Web Design Workshop |
Milan March 2014 Priority + Navigation When it comes to content priority in certain situations it’s possibile to display less links on the main navigation on top while maintaining the full list in the footer.

Responsive Web Design Workshop |
Milan March 2014 The toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header. Priority + Navigation v.2

Responsive Web Design Workshop |
Milan March 2014 Source order According to the contents it’s possibile to switch the order and the position of specific modules across different breakpoints. 1st in source 2nd in source1st in source 2nd in source

Responsive Web Design Workshop |
Milan March 2014 Grouping contents It’s possibile to collapse multiple contents in a dynamic container (e.g. Carousel) that helps to visualize the same amount of contents on different breakpoints.

Responsive Web Design Workshop |
Milan March 2014 107 Design processElaboration of ideas Reduction of ideas Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Graphic Thinking for architects & designers Design process The goal of the elaboration phase is to generate as many different ideas as possible, while the reduction phase is meant to select one of those ideas and carefully refine it. Frameworks Prototypes

Responsive Web Design Workshop |
Milan March 2014 Frameworks are designed to get you up and running with a functional prototype fast and easy. There are lots of questions around whether you should use a framework in your project, and if so what is the best framework for your particular project. Framework & grid systems

Responsive Web Design Workshop |
Milan March 2014 Design framework Today there are many frameworks on the market: Bootstrap, Foundation, Less Framework. All you need is just start to design!

Responsive Web Design Workshop |
Milan March 2014 113 Design & prototype For every flow identify the key screen of the process. To start prototyping you need to understand what are the fundamental steps to communicate your concept.

Responsive Web Design Workshop |
Milan March 2014 114 Prototypes can have various levels of complexity and details following all the different steps of design development, from a low to high level of fidelity. IA Sketch IXD Wireframe VD Mockup Functional Prototype Prototypes What is the right level of detail? How can I choose the right model?

Responsive Web Design Workshop |
Milan March 2014 Low-fidelity Vs High fidelity prototypes Two different prototype approaches to improve and support the design activity 115 High fidelity Low fidelity Levels of fidelity

Responsive Web Design Workshop |
Milan March 2014 Cons Pro • Low development costs • Easy to evaluate multiple ideas • A good tool to communicate • Start showing UI constrains • Good to identify market requirements • Good to test the proof of concept • Limited functionality • Limited set of requirements for the development • Needs the support of a facilitator • Not really useful once the requirements list is already fixed • Not really useful in case of usability test • Limited capacity of a realistic and fluid navigation A clear advantage of lo-fi prototyping is extremely low cost and non-programmers can actively be part of the idea - crystallization process. Levels of fidelity Low fidelity

Responsive Web Design Workshop |
Milan March 2014 118 High-fidelity prototypes reach from more detailed paper prototypes to fully interactive simulations. According on the detail level of HTML prototypes users can see dialog windows, react on messages and enter form data. Levels of fidelity High fidelity Low fidelity

Responsive Web Design Workshop |
Milan March 2014 Prototypes are high-fidelity, because they show the real system behaviour in an interactive manner rather than just presenting static screens. Detailed prototypes can be built as quick and easy as the low- fidelity ones with the right tools. 119 Levels of fidelity High fidelity Cons Pro • Full functionality • Full interactive • Can be used directly by final users • Clear concept and navigation model • Perfect for usability test • Look & feel of the final product • It works as live examples of the product requirements • Used for marketing and research tests • More expensive to develop • Time consuming to build a functional version • Not efficient to test the proof of concept • Not efficient to define the first user requirements

Responsive Web Design Workshop |
Milan March 2014 120 Vertical prototype Horizontal prototype Horizontal prototypes display a wide range of features but without fully implementing all of them; Vertical prototypes do not attempt to show what will be in a system but they focus on implementing a small set of features in a nearly-complete fashion. High fidelity Low fidelity Levels of fidelity

Responsive Web Design Workshop |
Milan March 2014 More elements and less layouts Responsive design is dynamic and it follows the fluid nature of the web. Don’t think at static layouts but at structured dynamic components. Pure CSS Bootsrap Js

Responsive Web Design Workshop |
Milan March 2014 Think about tablets Today there are still more installed PCs in the world than smartphones or tablets. Next year, that’s likely to change. The post pc era - IDC Forecast Chart

Responsive Web Design Workshop |
Milan March 2014 Test on real devices Test on Real Mobile Devices without breaking the Bank ! Testing on actual devices is now absolutely essential part of the web design. Many crucial aspects of a web can’t be discovered with emulators: true site performance, device capabilities, form pix factor, pixel density and impact on the network Test on real mobile devices without breaking the bank

Responsive Web Design Workshop |
Milan March 2014 The right tool for what! Before choosing a tools it's important to understand the final scope of your prototype. You can use different prototyping tools to develop your concept but it's important to... What is the right tool?

Responsive Web Design Workshop |
Milan March 2014 140 Use prototype to verify all the different aspects of your design with different levels of fidelity according to the stage of the project Release Early Release Often

Responsive Web Design Workshop |
Milan March 2014 141 It's not important to close everything before testing your design concept. Every stage is a possible entry point to verify, discuss, iterate, design. Fail Early Fail Often

Responsive Web Design Workshop |
Milan March 2014 High fidelityLow fidelity Hand Sketch Linked pdf Interac2ve Wireframe Video simula2on Semi func2onal prototype Full func2onal prototype Try and test different tools. This allows you to prototype in different ways, with different levels of fidelity / quality and time consumption for the same goal. Prototype archetype Vs Fidelity

Responsive Web Design Workshop |
Milan March 2014 For mobile application the environment is everything and it is fundamental to understand the overlapping spheres of context. * Design Sketch: The Context of Mobile Interactions - N.Savio J.Braiterman (white paper) * http://www.giantant.com/output/mobile_context_model.pdf The context is fundamental

Responsive Web Design Workshop |
Milan March 2014 High fidelity can waste resources and risk a mediocre path because better options were never given a chance. Low fidelity, on the other hand, means that the details never get filled in, yielding a half-baked result. UX Booth Design & Fidelity | http://www.uxbooth.com/articles/concerning-ﬁdelity-and-design/ Time Fidelity Sketches Wireframes Mockups Prototypes The right level of fidelity

Responsive Web Design Workshop |
Milan March 2014 The life of your prototype is directly connected to the problem it has to solve. More cycles, more refinements: better results! Design Evaluate CommunicateIterateShort cycle Long & progressive The Prototype lifecycle

Responsive Web Design Workshop |
Milan March 2014 The perfect tool is the one that helps you to test and verify your design and communicate your concept in the best way. Communicate it right.