SlideShare a Scribd company logo
1 of 151
Download to read offline
Responsive
Web Design
Antonio	
  De	
  Pasquale	
  
Senior Interaction Designer at frog	

@myinteraction	

!
!
!
!
My name is Antonio De Pasquale
I'm a Senior Interaction Designer at frog Milan
!
!
!
A little about me
I'm specialized in digital interfaces & user experience
I'm passionate about the "aesthetics" of movement
I'm from Sicily and I love the sea.
!
!
@myinteraction
Responsive Web Design Workshop | Milan March 2014
Concept
Framework
Layout
Grids & Modules
Going in depth with a Top down approach
Pillars
The approach
Responsive Web Design Workshop | Milan March 2014
Design thinking 

in the responsive age
Framework
& UX Principles
Design Challenges
& Opportunities
Grids & Low
Fidelity prototype
Table of contents
Start a responsive 

design project
Theory Practice
Responsive Web Design Workshop | Milan March 2014
Confucius
I hear and I forget. 

I see and I remember. 

I do and I understand.
Responsive Web Design Workshop | Milan March 2014
25’
DESIGN THINKING 

IN THE RESPONSIVE AGE
Responsive Web Design Workshop | Milan March 2014
Perfection is achieved, not
when there is nothing more to add,
but when there is nothing left to take away.
Antonine De Saint Exupéry
Responsive Web Design Workshop | Milan March 2014
What is the User Experience?
User Experience encompasses all aspects of the end-user's
interaction with the company, its services, and its products.
Responsive Web Design Workshop | Milan March 2014
Research Concept Wireframe Visual Develop User testDocument
A typical waterfall UX design process
From concept design to the final product on the market
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
Yesterday
Desktop app, fixed grid, mobile interfaces
Responsive Web Design Workshop | Milan March 2014
Today
Smart Tv, Web App, Mobile, Console, Responsive design
Responsive Web Design Workshop | Milan March 2014
Browser war Vs Technology evolution
An evolving landscape, where new technology are
pushing the boundaries of web experiences
56%
10.2%
Browser Analytics Global - January 2014
Responsive Web Design Workshop | Milan March 2014
A different design workflow
Things are changing.
We need to evolve the process
Research Concept
Wireframe Visual
DevelopPrototypeSketch
User testReview
Responsive Web Design Workshop | Milan March 2014
Responsive Web Design Workshop | Milan March 2014
What is the shape of digital experiences?
The evolution of technology is changing the boundaries of design
Responsive Web Design Workshop | Milan March 2014
Same contents, different shapes
Web sites, applications, digital softwares are not static templates anymore.
They are frames in an extended fluid experience.
Responsive Web Design Workshop | Milan March 2014
1920 px
1440 px
1024 px
320 px
Design for the responsive age
We need to sketch, visualize, test, prototype and understand the dynamic behaviours on different devices
with different proportions & resolutions. Our job now is to create future friendly design ecosystems.
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
When everything started?
Responsive Web Design Workshop | Milan March 2014
Rather than quarantining our content
into disparate, device-specific
experiences, we can use media queries
to progressively enhance our work
within different viewing contexts.
Ethan Marcotte
Responsive Web Design Workshop | Milan March 2014
768
1440
1024
320
1280
Responsive Web Design Workshop | Milan March 2014
What we need to create a
responsive project?
Content strategy
Flexible grid layout
Flexible images and media
Media queries
Ingredients
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
Content Coreography
@media screen and
(max-width: 33.236em) {
#main { display: flex; }
#main > nav,
#main > aside { flex: 1; }
#main > article { flex: 2; }
#main > nav { order: 0; }
#main > article { order: 1; }
#main > aside { order: 2; }
Grid will be perfect to organize the layout structure with high-level elements whereas
Flexbox will be best-suited for some modules that require specific alignments and ordering
< header >
< article >
< footer >
< nav > < aside >
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 images & media
1024
768 320
Fluid images: the image’s width is forced to match the width of its container scaling accordingly.
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
1280 768 320
Crop images: images are cropped dynamically so that they fit into their containers as the containers resize.
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Fluid images Vs Image crop
.responsive-scale{
width:100%;
padding-bottom: 66.666666666667%; /* 960px/1440px */
background-image:url(img/fluid/image-1440x960.jpg);
background-size:cover;
background-position:center; /* IE fix */
}
.responsive-crop{
width:100%;
height:960px;
background-image:url(img/fluid/image-1440x960.jpg);
background-size:cover;
background-position:center; /* IE fix */
}
.responsive-scale .responsive-crop
100% width 100% width
66.6% height
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Fixed aspect ratio vs fluid aspect ratio
div.column {
/* The background image must be 800px wide */
max-width: 800px;
}
!
figure.fluidratio {
padding-top: 10%; /* slope */
height: 120px; /* start height */
!
background-image: url(http://voormedia.com/examples/amsterdam.jpg);
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
}
4:1
2:1
800 px
120 px
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
600x400 px file (7kb)
!
0% JPEG compression
displayed in 600x400
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Images size: images at an high resolution with the maximum compression rate
can be displayed with high quality at a different resolution
300x200 px file (21kb)
!
80% JPEG compression
displayed in 300x200
600x400 px file (7kb)
!
0% JPEG compression
displayed in 300x200
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Deliver pixel perfect images to the latest HiDPI screens and provide your slower internet connected 

users with lightning fast bandwidth efficient images.
Responsive Web Design Workshop | Milan March 2014
Breakpoints & Media queries
Breakpoints: horizontal widths we’ll need to accommodate
in our responsive design.Width: 1024px Width: 1024px Width: 480px Width: 320px
Break point & resolutions

320 (Phone – portrait)
480 (Phone – landscape + portrait)
600 (Small tablet – portrait)
768 (Large Tablet – portrait)
800 (Phone + Small tablet – landscape)
1024 (Large Tablet– landscape)`
1280 (Desktop)
1440> (Wide screen desktop)
Width: 1280pxWidth: 1440px
Responsive Web Design Workshop | Milan March 2014
Breakpoints & Media queries
Examples of different Media Queries
!
Media Queries is a CSS3 module allowing
content rendering to adapt to conditions
such as screen resolution (e.g. smartphone
vs. high definition screen).
Responsive Web Design Workshop | Milan March 2014
“Fluid grids, flexible 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
Example of best responsive web design
Editorial
(e.g. Tech/Cheap News)
eCommerce
(e.g Fashion)
Media
(e.g Video blog)
Portfolio
(e.g Singer)Corporate
(e.g Telco,No Profit )
Responsive Web Design Workshop | Milan March 2014
The Next Web
Editorial
http://thenextweb.com/
Responsive Web Design Workshop | Milan March 2014
The Boston Globe
Editorial
www.bostonglobe.com
Responsive Web Design Workshop | Milan March 2014
Time
Editorial
time.com
Responsive Web Design Workshop | Milan March 2014
Ted Talk
Media
http://thenextweb.com/
Responsive Web Design Workshop | Milan March 2014
A book apart
eCommerce
www.abookapart.com
Responsive Web Design Workshop | Milan March 2014
World Wife Life
Corporate
worldwildlife.org
Responsive Web Design Workshop | Milan March 2014
I’m Jithin
Portfolio
iamjithin.me
Responsive Web Design Workshop | Milan March 2014
Media Queries
Responsive web design repository
mediaqueri.es
Responsive Web Design Workshop | Milan March 2014
START A RESPONSIVE
DESIGN PROJECT
15’
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
Sketch a raw concept to visualise ideas through 

a first draft exploration.
Setting a vision
Responsive Web Design Workshop | Milan March 2014
Analyzing content, user behaviours and competitors 

are fundamental steps to understand your industry.
User needs & website goals
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
Visualize & prototype your concept. 

Get the feel of the real impact in a physical way.
Explore the details
Responsive Web Design Workshop | Milan March 2014
The size of your body text
doesn’t depend on your personal preference.
It depends on reading distance.
Olivier Reichenstein
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
Making responsiveness is about understanding the complexity,
balancing typography and styles across multiple screens.
Typographic approach
Style tile generator
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about building all the UI elements
and components in a consistent and structured way.
Design the details
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about assets independent from resolution.
High pixel density displays prompt us to create future-proof solutions for graphics.
Resolution indipendence
SVGPNG
Icon Font Generator - Fontello
Responsive Web Design Workshop | Milan March 2014
Feel the experience
Making responsiveness is about prototyping with code and testing your
projects on real devices and screen resolutions.
Responsive Web Design Workshop | Milan March 2014
Testing approach
Making responsiveness is about continuous tests & debugging in multiple ways:
Web inspector view, Labels & Character Counters.
Safari Web Inspector Span Character Counter
Responsive Web Design Workshop | Milan March 2014
FRAMEWORK AND 

UX PRINCIPLES
15’
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
Build Windows
Tiny Tweaks
buildwindows.com
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
Five Simple Steps
Mostly Fluid
fivesimplesteps.com
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
The Novel
Column drop
introducingthenovel.com
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
Stop Press
Column drop v.2
stoppress.co.nz
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
Food Sense
Layout shifter
foodsense.is
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
Facebook
Off Canvas
facebook.com
Responsive Web Design Workshop | Milan March 2014
Select Navigation
This technique condenses the main navigation in a simple
dropdown menu when it scales down on mobile devices (old approach)
Responsive Web Design Workshop | Milan March 2014
Viljamis
Select navigation
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
Starbucks
Toggle navigation
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
Contents magazine
Footer navigation
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
Codepen
Stacked top links navigation
Responsive Web Design Workshop | Milan March 2014
Left Nav Flyout
The nav is accessed by a menu icon, which reveals a tray that slides in
from the left and moves the main content over to the right.
Responsive Web Design Workshop | Milan March 2014
Sequence
Left nav Flyout
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
Justmarkup
Priority + Navigation
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
Microsoft
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
Order shift
In responsive design content organization is flexible. It’s possibile to change
the modules order according to different breakpoints.
1 2
3
5
4
5
3
4
1
2
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
GRID SYSTEM & LOW FIDELITY

PROTOTYPES
15’
Responsive Web Design Workshop | Milan March 2014
"If I can't picture it
I can't understand it"
Albert Einstein
Responsive Web Design Workshop | Milan March 2014
106
Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Graphic Thinking for architects & designers
The design process is a cycle of elaboration and reduction.
Design processElaboration of ideas Reduction of ideas
Design process
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
Grid systems
Grid systems help designers and developers to make fully responsive websites, eliminating
the frustration of flicking between browsers looking for alignment errors.
Responsive Web Design Workshop | Milan March 2014
Prototypes help designers to explore interactions patterns,
explain design solutions and communicate and evaluate
the overall user experience.
* Universal Design Principles by William Lidwell
Prototypes
Responsive Web Design Workshop | Milan March 2014
"Now that we can do anything,
what should we do?"
Bill Buxton
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
Low-fidelity (lo-fi) prototyping is characterized by a quick
and easy translation of high-level design concepts into
tangible and testable artifacts.
116
Levels of fidelity
High fidelity
Low 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
High
Horizontal
Final productUsability test
Concept modelThrow away
Vertical
Low
Levels of fidelity
Responsive Web Design Workshop | Milan March 2014
“It’s the little details that are vital.
Little things make big things happen.”
Coach John Wooden
Responsive Web Design Workshop | Milan March 2014
Types of prototypes
Storyboards
Paper mockups
Interactive wireframes
Motion wireframes
UI Walkthrough
Motion prototype
Interactive prototype
Code prototype
Low fidelity
High fidelity
Responsive Web Design Workshop | Milan March 2014
Low fidelity / No interaction
Storyboard
Responsive Web Design Workshop | Milan March 2014
Low fidelity / Low interaction
Paper mockups
iOs Stencil / Protosketch
Responsive Web Design Workshop | Milan March 2014
Medium fidelity / Low interaction
Interactive wireframes
Axure / Proto.io
Responsive Web Design Workshop | Milan March 2014
Medium fidelity / Low interaction
Motion prototype
Keynote / After Effects
Responsive Web Design Workshop | Milan March 2014
Interactive prototype
High fidelity / Medium interaction
inVision / UX Pin / Brief
Responsive Web Design Workshop | Milan March 2014
Code prototype
High fidelity / High interaction
Adobe Edge Reflow / Inspect / Muse / Dreamweaver
Responsive Web Design Workshop | Milan March 2014
Storyboards Paper mockups Interactive wireframes Motion wireframes
Love
Quick and dirty
Easy to do
Fast feedback
Very inclusive
!
!
Hate
Not quick enough
Too dirty
Hard to share
Not self explaining
Love
Detailed and solid
Good for defining
content & explain
behaviours
!
!
Hate
Hard for user testing
Too functional with less
experience of the flow
Love
Emotional
High quality feedback
Testing dynamic behaviours
!
!
!
Hate
Time to build them
Software knowledge
Works better in an
advanced state
Love
High level concept
modelling
Clear concept vision
Easy to do
!
!
Hate
Too high level
Low focus on the
interaction model
Not easy to understand for
non designers
Levels of fidelity
Low fidelity
Responsive Web Design Workshop | Milan March 2014
Love
Easy to do
High quality UI
Fast feedback
Pixel perfect design
!
!
Hate
No interactivity
Not self explaining
No hyperlinks
No animation
Love
High quality UI
Smooth motion design
Clear system dynamics
Cheaper than coding
!
!
Hate
No interactivity
No user flow
No touch feedback
Time consuming
Love
Easy to do
High quality UI
Clear interactions
Flow simulation
!
!
Hate
Time to build them
Basic software knowledge
Work better in an advanced
state
Love
Test interactivity
Perfect for testing process &
flow
Experience in contest
!
!
Hate
Software knowledge
Time for building the
prototype
Limiting the design process
Levels of fidelity
High fidelity
UI Walkthrough Motion prototype Interactive prototype Code prototype
Responsive Web Design Workshop | Milan March 2014
DESIGN CHALLENGES
& OPPORTUNITIES
10’
Responsive Web Design Workshop | Milan March 2014
Next steps
For your next RWD project think about your overall strategy first and then
sketches, wireframes & start design with code.
SketchesConcept
Prototype
Responsive Web Design Workshop | Milan March 2014
No more static layouts
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
Dealing with the past
Find smart solutions to scale down your responsive projects

on old browsers with different degradation techniques.
Nothing or degradation Simplify cross browser/ devices compatibility Browser evolution
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-fidelity-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.
Responsive Web Design Workshop | Milan March 2014
FURTHER 

READINGS
Responsive Web Design Workshop | Milan March 2014
Books
Sketching User Experiences:
Getting the Design Right and
the Right Design
!
Bill Buxton
2007
Responsive Web Design
!
Ethan Marcotte
2011
CSS3 for Web Designers
!
Dan Cederholm
2012
Mobile First
!
Luke Wroblewski
2011
Responsive Web Design Workshop | Milan March 2014
Articles & References
Prototype toolsUX Culture Design Workflow Wireframing
Responsive design workflow on
multiple touchpoints
!
http://viljamis.com/blog/2012/responsive-workflow/
Design process 

in the responsive age
!
http://www.slideshare.net/pkattera/design-
process-for-responsive-web-design
Does form follow function?
!
http://www.smashingmagazine.com/2010/03/23/
does-form-follow-function/
Embracing the UX Spectrum
!
http://uxmag.com/articles/embracing-the-ux-
spectrum
Visualizing
the user experience
!
http://www.slideshare.net/grantrobinson/
visualising-the-user-experience-2261349
Where wireframes
are concerned
!
http://uxmag.com/articles/where-wireframes-are-
concerned
Design better & faster
with rapid prototyping
!
http://www.smashingmagazine.com/2010/06/16/
design-better-faster-with-rapid-prototyping/
Sketching the User Experience
!
http://www.slideshare.net/antoniodepasquale/
sketching-the-user-experience
Responsive design will be 99.9%
typography

http://www.welcomebrand.co.uk/thoughts/the-
responsive-web-will-be-99-9-typography/
Prototyping for Responsive Web
Design
!
http://www.slideshare.net/mrscammels/
prototyping-for-responsive-web-design
Test on real devices: How to?
!
http://bradfrostweb.com/blog/mobile/test-on-real-
mobile-devices-without-breaking-the-bank/
Motion & Gesture Interactions
in the digital age
!
http://www.slideshare.net/antoniodepasquale/
motion-gesture-interactions-in-the-digital-age
Responsive Web Design Workshop | Milan March 2014
Articles & References
Typography & PrototypeInteraction model Media & responsive Icons & sprites
Responsive image solution
!
http://mobile.smashingmagazine.com/2013/07/08/
choosing-a-responsive-image-solution/
Content choreography
!
http://trentwalton.com/2011/07/14/content-
choreography/
Responsive navigation patterns
!
http://bradfrostweb.com/blog/web/responsive-nav-
patterns/
Responsive background images
with fixed or fluid aspect ratio
!
http://voormedia.com/blog/2012/11/responsive-
background-images-with-fixed-or-fluid-aspect-
ratios
Optimizing UX with responsive
web design
!
http://www.slideshare.net/clarissapeterson/
optimizing-user-experience-with-responsive-web-
design
Prototype Responsive
Typography
!
http://viljamis.com/blog/2013/prototyping-
responsive-typography/
Aspect ratio & responsive web
design
!
http://www.sitepoint.com/maintain-image-aspect-
ratios-responsive-web-design/
Complex navigation patterns 

for responsive web design

http://bradfrostweb.com/blog/web/complex-
navigation-patterns-for-responsive-design/
Resolution independence for
responsive web design
!
http://coding.smashingmagazine.com/2012/01/16/
resolution-independence-with-svg/
Flow Type & Responsive
typography
!
http://simplefocus.com/flowtype/!
http://coding.smashingmagazine.com/2013/09/18/
introducing-flowtype-js/
Responsive web design
showcase
!
http://responsiveshowcase.com/!
http://mediaqueri.es/popular/
Responsive web fonts & icons
!
http://webstandardssherpa.com/reviews/
responsive-webfont-icons
Responsive Web Design Workshop | Milan March 2014
Thanks!
@myinteraction
to continue the discussion!
!
!

More Related Content

What's hot

Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic designSylhet IT Academy
 
Graphic Design Proposal PowerPoint Presentation Slides
Graphic Design Proposal PowerPoint Presentation SlidesGraphic Design Proposal PowerPoint Presentation Slides
Graphic Design Proposal PowerPoint Presentation SlidesSlideTeam
 
Adobe Illustrator for beginners
Adobe Illustrator for beginners Adobe Illustrator for beginners
Adobe Illustrator for beginners suniltalekar1
 
Design Thinking is Killing Creativity
Design Thinking is Killing CreativityDesign Thinking is Killing Creativity
Design Thinking is Killing Creativitydesignsojourn
 
Visual Design Thinking Workshop
Visual Design Thinking WorkshopVisual Design Thinking Workshop
Visual Design Thinking WorkshopAlli McKee
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Designeggcellent
 
Introduction To Visual Design
Introduction To Visual DesignIntroduction To Visual Design
Introduction To Visual DesignDiane Leeper
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
 

What's hot (20)

Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic design
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
 
UX design
UX designUX design
UX design
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
Graphic design
Graphic designGraphic design
Graphic design
 
Graphic Design Proposal PowerPoint Presentation Slides
Graphic Design Proposal PowerPoint Presentation SlidesGraphic Design Proposal PowerPoint Presentation Slides
Graphic Design Proposal PowerPoint Presentation Slides
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
UX & UI Design 101
UX & UI Design 101UX & UI Design 101
UX & UI Design 101
 
How to achieve the ux goals
How to achieve the ux goalsHow to achieve the ux goals
How to achieve the ux goals
 
Graphic Design 101
Graphic Design 101Graphic Design 101
Graphic Design 101
 
Adobe Illustrator for beginners
Adobe Illustrator for beginners Adobe Illustrator for beginners
Adobe Illustrator for beginners
 
Principles Of Design 1
Principles Of  Design 1Principles Of  Design 1
Principles Of Design 1
 
UX and UI
UX and UIUX and UI
UX and UI
 
Design Thinking is Killing Creativity
Design Thinking is Killing CreativityDesign Thinking is Killing Creativity
Design Thinking is Killing Creativity
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Visual Design Thinking Workshop
Visual Design Thinking WorkshopVisual Design Thinking Workshop
Visual Design Thinking Workshop
 
Design System & Atomic Design
Design System & Atomic DesignDesign System & Atomic Design
Design System & Atomic Design
 
Introduction To Visual Design
Introduction To Visual DesignIntroduction To Visual Design
Introduction To Visual Design
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 

Similar to Responsive Webdesign

2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-022230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02Natalia Fomina
 
Become a Professional Web Designer
Become a Professional Web DesignerBecome a Professional Web Designer
Become a Professional Web DesignerTekno Point
 
Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...
Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...
Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...Dana Gardner
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Brenna Mickey
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu ZouWenzhu Zou
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Designmartinridgway
 
What are the web design trends for 2022
What are the web design trends for 2022What are the web design trends for 2022
What are the web design trends for 2022Jane Brewer
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: StylingMatthew Gerrior
 
Web Design and Software Development
Web Design and Software DevelopmentWeb Design and Software Development
Web Design and Software DevelopmentAthena Inc, Goa
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive EnhancementDan Sagisser
 
Flagship Creative Presentation Deck
Flagship Creative Presentation DeckFlagship Creative Presentation Deck
Flagship Creative Presentation DeckScott Blatter
 
Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Cammy Bean
 
CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)jahnaveec
 
Design Camp Cologne (Public)
Design Camp Cologne (Public)Design Camp Cologne (Public)
Design Camp Cologne (Public)Martin Koser
 
Design Learnings
Design LearningsDesign Learnings
Design LearningsQuikr
 

Similar to Responsive Webdesign (20)

2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-022230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
 
10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech
 
Become a Professional Web Designer
Become a Professional Web DesignerBecome a Professional Web Designer
Become a Professional Web Designer
 
Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...
Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...
Kony Visualizer Puts Mobile Apps Features Control in Hands of Those Closest t...
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)datenwerk Cookbook: webdesign trends 2014 (en)
datenwerk Cookbook: webdesign trends 2014 (en)
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Design
 
What are the web design trends for 2022
What are the web design trends for 2022What are the web design trends for 2022
What are the web design trends for 2022
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
 
Web Design and Software Development
Web Design and Software DevelopmentWeb Design and Software Development
Web Design and Software Development
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Flagship Creative Presentation Deck
Flagship Creative Presentation DeckFlagship Creative Presentation Deck
Flagship Creative Presentation Deck
 
Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design
 
CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)CV_Jahnavee Chitte (1)
CV_Jahnavee Chitte (1)
 
Design Camp Cologne (Public)
Design Camp Cologne (Public)Design Camp Cologne (Public)
Design Camp Cologne (Public)
 
AbeerNassarResume
AbeerNassarResumeAbeerNassarResume
AbeerNassarResume
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 

More from Antonio De Pasquale

Convey UX: Design for the Future. Creating speculative visions that works.
Convey UX: Design for the Future. Creating speculative visions that works.Convey UX: Design for the Future. Creating speculative visions that works.
Convey UX: Design for the Future. Creating speculative visions that works.Antonio De Pasquale
 
User Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation StrategyUser Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation StrategyAntonio De Pasquale
 
Design in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designDesign in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designAntonio De Pasquale
 
Motion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageMotion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageAntonio De Pasquale
 

More from Antonio De Pasquale (6)

Convey UX: Design for the Future. Creating speculative visions that works.
Convey UX: Design for the Future. Creating speculative visions that works.Convey UX: Design for the Future. Creating speculative visions that works.
Convey UX: Design for the Future. Creating speculative visions that works.
 
Fading Money
Fading MoneyFading Money
Fading Money
 
The age of Augmented Humanity
The age of Augmented Humanity The age of Augmented Humanity
The age of Augmented Humanity
 
User Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation StrategyUser Experience & Mobile Innovation Strategy
User Experience & Mobile Innovation Strategy
 
Design in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction designDesign in motion. The new frontier of interaction design
Design in motion. The new frontier of interaction design
 
Motion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital ageMotion & Gesture Interactions in the digital age
Motion & Gesture Interactions in the digital age
 

Recently uploaded

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Recently uploaded (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

Responsive Webdesign

  • 1. Responsive Web Design Antonio  De  Pasquale   Senior Interaction Designer at frog @myinteraction ! ! ! !
  • 2. My name is Antonio De Pasquale I'm a Senior Interaction Designer at frog Milan ! ! ! A little about me I'm specialized in digital interfaces & user experience I'm passionate about the "aesthetics" of movement I'm from Sicily and I love the sea. ! ! @myinteraction
  • 3. Responsive Web Design Workshop | Milan March 2014 Concept Framework Layout Grids & Modules Going in depth with a Top down approach Pillars The approach
  • 4. Responsive Web Design Workshop | Milan March 2014 Design thinking 
 in the responsive age Framework & UX Principles Design Challenges & Opportunities Grids & Low Fidelity prototype Table of contents Start a responsive 
 design project Theory Practice
  • 5. Responsive Web Design Workshop | Milan March 2014 Confucius I hear and I forget. 
 I see and I remember. 
 I do and I understand.
  • 6. Responsive Web Design Workshop | Milan March 2014 25’ DESIGN THINKING 
 IN THE RESPONSIVE AGE
  • 7. Responsive Web Design Workshop | Milan March 2014 Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. Antonine De Saint Exupéry
  • 8. Responsive Web Design Workshop | Milan March 2014 What is the User Experience? User Experience encompasses all aspects of the end-user's interaction with the company, its services, and its products.
  • 9. Responsive Web Design Workshop | Milan March 2014 Research Concept Wireframe Visual Develop User testDocument A typical waterfall UX design process From concept design to the final product on the market
  • 10. 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
  • 11. Responsive Web Design Workshop | Milan March 2014 Yesterday Desktop app, fixed grid, mobile interfaces
  • 12. Responsive Web Design Workshop | Milan March 2014 Today Smart Tv, Web App, Mobile, Console, Responsive design
  • 13. Responsive Web Design Workshop | Milan March 2014 Browser war Vs Technology evolution An evolving landscape, where new technology are pushing the boundaries of web experiences 56% 10.2% Browser Analytics Global - January 2014
  • 14. Responsive Web Design Workshop | Milan March 2014 A different design workflow Things are changing. We need to evolve the process Research Concept Wireframe Visual DevelopPrototypeSketch User testReview
  • 15. Responsive Web Design Workshop | Milan March 2014
  • 16. Responsive Web Design Workshop | Milan March 2014 What is the shape of digital experiences? The evolution of technology is changing the boundaries of design
  • 17. Responsive Web Design Workshop | Milan March 2014 Same contents, different shapes Web sites, applications, digital softwares are not static templates anymore. They are frames in an extended fluid experience.
  • 18. Responsive Web Design Workshop | Milan March 2014 1920 px 1440 px 1024 px 320 px Design for the responsive age We need to sketch, visualize, test, prototype and understand the dynamic behaviours on different devices with different proportions & resolutions. Our job now is to create future friendly design ecosystems.
  • 19. 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
  • 20. 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:
  • 21. 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.
  • 22. Responsive Web Design Workshop | Milan March 2014 When everything started?
  • 23. Responsive Web Design Workshop | Milan March 2014 Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. Ethan Marcotte
  • 24. Responsive Web Design Workshop | Milan March 2014 768 1440 1024 320 1280
  • 25. Responsive Web Design Workshop | Milan March 2014 What we need to create a responsive project? Content strategy Flexible grid layout Flexible images and media Media queries Ingredients
  • 26. 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.
  • 27. 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.
  • 28. Responsive Web Design Workshop | Milan March 2014 Content Coreography @media screen and (max-width: 33.236em) { #main { display: flex; } #main > nav, #main > aside { flex: 1; } #main > article { flex: 2; } #main > nav { order: 0; } #main > article { order: 1; } #main > aside { order: 2; } Grid will be perfect to organize the layout structure with high-level elements whereas Flexbox will be best-suited for some modules that require specific alignments and ordering < header > < article > < footer > < nav > < aside >
  • 29. 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%).
  • 30. 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
  • 31. Responsive Web Design Workshop | Milan March 2014 Fluid images & media 1024 768 320 Fluid images: the image’s width is forced to match the width of its container scaling accordingly.
  • 32. Responsive Web Design Workshop | Milan March 2014 Fluid images & media 1280 768 320 Crop images: images are cropped dynamically so that they fit into their containers as the containers resize.
  • 33. Responsive Web Design Workshop | Milan March 2014 Fluid images & media Fluid images Vs Image crop .responsive-scale{ width:100%; padding-bottom: 66.666666666667%; /* 960px/1440px */ background-image:url(img/fluid/image-1440x960.jpg); background-size:cover; background-position:center; /* IE fix */ } .responsive-crop{ width:100%; height:960px; background-image:url(img/fluid/image-1440x960.jpg); background-size:cover; background-position:center; /* IE fix */ } .responsive-scale .responsive-crop 100% width 100% width 66.6% height
  • 34. Responsive Web Design Workshop | Milan March 2014 Fluid images & media Fixed aspect ratio vs fluid aspect ratio div.column { /* The background image must be 800px wide */ max-width: 800px; } ! figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ ! background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } 4:1 2:1 800 px 120 px
  • 35. Responsive Web Design Workshop | Milan March 2014 Fluid images & media 600x400 px file (7kb) ! 0% JPEG compression displayed in 600x400
  • 36. Responsive Web Design Workshop | Milan March 2014 Fluid images & media Images size: images at an high resolution with the maximum compression rate can be displayed with high quality at a different resolution 300x200 px file (21kb) ! 80% JPEG compression displayed in 300x200 600x400 px file (7kb) ! 0% JPEG compression displayed in 300x200
  • 37. Responsive Web Design Workshop | Milan March 2014 Fluid images & media Deliver pixel perfect images to the latest HiDPI screens and provide your slower internet connected 
 users with lightning fast bandwidth efficient images.
  • 38. Responsive Web Design Workshop | Milan March 2014 Breakpoints & Media queries Breakpoints: horizontal widths we’ll need to accommodate in our responsive design.Width: 1024px Width: 1024px Width: 480px Width: 320px Break point & resolutions
 320 (Phone – portrait) 480 (Phone – landscape + portrait) 600 (Small tablet – portrait) 768 (Large Tablet – portrait) 800 (Phone + Small tablet – landscape) 1024 (Large Tablet– landscape)` 1280 (Desktop) 1440> (Wide screen desktop) Width: 1280pxWidth: 1440px
  • 39. Responsive Web Design Workshop | Milan March 2014 Breakpoints & Media queries Examples of different Media Queries ! Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen).
  • 40. Responsive Web Design Workshop | Milan March 2014 “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Ethan Marcotte
  • 41. 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
  • 42. 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. ?
  • 43. Responsive Web Design Workshop | Milan March 2014 Example of best responsive web design Editorial (e.g. Tech/Cheap News) eCommerce (e.g Fashion) Media (e.g Video blog) Portfolio (e.g Singer)Corporate (e.g Telco,No Profit )
  • 44. Responsive Web Design Workshop | Milan March 2014 The Next Web Editorial http://thenextweb.com/
  • 45. Responsive Web Design Workshop | Milan March 2014 The Boston Globe Editorial www.bostonglobe.com
  • 46. Responsive Web Design Workshop | Milan March 2014 Time Editorial time.com
  • 47. Responsive Web Design Workshop | Milan March 2014 Ted Talk Media http://thenextweb.com/
  • 48. Responsive Web Design Workshop | Milan March 2014 A book apart eCommerce www.abookapart.com
  • 49. Responsive Web Design Workshop | Milan March 2014 World Wife Life Corporate worldwildlife.org
  • 50. Responsive Web Design Workshop | Milan March 2014 I’m Jithin Portfolio iamjithin.me
  • 51. Responsive Web Design Workshop | Milan March 2014 Media Queries Responsive web design repository mediaqueri.es
  • 52. Responsive Web Design Workshop | Milan March 2014 START A RESPONSIVE DESIGN PROJECT 15’
  • 53. 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.
  • 54. 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
  • 55. 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
  • 56. Responsive Web Design Workshop | Milan March 2014 Sketch a raw concept to visualise ideas through 
 a first draft exploration. Setting a vision
  • 57. Responsive Web Design Workshop | Milan March 2014 Analyzing content, user behaviours and competitors 
 are fundamental steps to understand your industry. User needs & website goals
  • 58. 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
  • 59. 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.
  • 60. Responsive Web Design Workshop | Milan March 2014 Analyze problems & constrains. 
 Refine ideas and explore all the details to make it possible. Explore the details
  • 61. 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.
  • 62. 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)
  • 63. 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
  • 64. Responsive Web Design Workshop | Milan March 2014 Visualize & prototype your concept. 
 Get the feel of the real impact in a physical way. Explore the details
  • 65. Responsive Web Design Workshop | Milan March 2014 The size of your body text doesn’t depend on your personal preference. It depends on reading distance. Olivier Reichenstein
  • 66. 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
  • 67. Responsive Web Design Workshop | Milan March 2014 Making responsiveness is about understanding the complexity, balancing typography and styles across multiple screens. Typographic approach Style tile generator
  • 68. Responsive Web Design Workshop | Milan March 2014 Making responsiveness is about building all the UI elements and components in a consistent and structured way. Design the details
  • 69. Responsive Web Design Workshop | Milan March 2014 Making responsiveness is about assets independent from resolution. High pixel density displays prompt us to create future-proof solutions for graphics. Resolution indipendence SVGPNG Icon Font Generator - Fontello
  • 70. Responsive Web Design Workshop | Milan March 2014 Feel the experience Making responsiveness is about prototyping with code and testing your projects on real devices and screen resolutions.
  • 71. Responsive Web Design Workshop | Milan March 2014 Testing approach Making responsiveness is about continuous tests & debugging in multiple ways: Web inspector view, Labels & Character Counters. Safari Web Inspector Span Character Counter
  • 72. Responsive Web Design Workshop | Milan March 2014 FRAMEWORK AND 
 UX PRINCIPLES 15’
  • 73. 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.
  • 74. 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
  • 75. 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.
  • 76. Responsive Web Design Workshop | Milan March 2014 Build Windows Tiny Tweaks buildwindows.com
  • 77. 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.
  • 78. Responsive Web Design Workshop | Milan March 2014 Five Simple Steps Mostly Fluid fivesimplesteps.com
  • 79. 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.
  • 80. Responsive Web Design Workshop | Milan March 2014 The Novel Column drop introducingthenovel.com
  • 81. 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.
  • 82. Responsive Web Design Workshop | Milan March 2014 Stop Press Column drop v.2 stoppress.co.nz
  • 83. 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.
  • 84. Responsive Web Design Workshop | Milan March 2014 Food Sense Layout shifter foodsense.is
  • 85. 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.
  • 86. Responsive Web Design Workshop | Milan March 2014 Facebook Off Canvas facebook.com
  • 87. Responsive Web Design Workshop | Milan March 2014 Select Navigation This technique condenses the main navigation in a simple dropdown menu when it scales down on mobile devices (old approach)
  • 88. Responsive Web Design Workshop | Milan March 2014 Viljamis Select navigation
  • 89. 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.
  • 90. Responsive Web Design Workshop | Milan March 2014 Starbucks Toggle navigation
  • 91. 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.
  • 92. Responsive Web Design Workshop | Milan March 2014 Contents magazine Footer navigation
  • 93. 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.
  • 94. Responsive Web Design Workshop | Milan March 2014 Codepen Stacked top links navigation
  • 95. Responsive Web Design Workshop | Milan March 2014 Left Nav Flyout The nav is accessed by a menu icon, which reveals a tray that slides in from the left and moves the main content over to the right.
  • 96. Responsive Web Design Workshop | Milan March 2014 Sequence Left nav Flyout
  • 97. 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.
  • 98. Responsive Web Design Workshop | Milan March 2014 Justmarkup Priority + Navigation
  • 99. 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
  • 100. Responsive Web Design Workshop | Milan March 2014 Microsoft Priority + Navigation v.2
  • 101. 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
  • 102. Responsive Web Design Workshop | Milan March 2014 Order shift In responsive design content organization is flexible. It’s possibile to change the modules order according to different breakpoints. 1 2 3 5 4 5 3 4 1 2
  • 103. 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.
  • 104. Responsive Web Design Workshop | Milan March 2014 GRID SYSTEM & LOW FIDELITY
 PROTOTYPES 15’
  • 105. Responsive Web Design Workshop | Milan March 2014 "If I can't picture it I can't understand it" Albert Einstein
  • 106. Responsive Web Design Workshop | Milan March 2014 106 Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Graphic Thinking for architects & designers The design process is a cycle of elaboration and reduction. Design processElaboration of ideas Reduction of ideas Design process
  • 107. 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
  • 108. 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
  • 109. 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!
  • 110. Responsive Web Design Workshop | Milan March 2014 Grid systems Grid systems help designers and developers to make fully responsive websites, eliminating the frustration of flicking between browsers looking for alignment errors.
  • 111. Responsive Web Design Workshop | Milan March 2014 Prototypes help designers to explore interactions patterns, explain design solutions and communicate and evaluate the overall user experience. * Universal Design Principles by William Lidwell Prototypes
  • 112. Responsive Web Design Workshop | Milan March 2014 "Now that we can do anything, what should we do?" Bill Buxton
  • 113. 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.
  • 114. 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?
  • 115. 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
  • 116. Responsive Web Design Workshop | Milan March 2014 Low-fidelity (lo-fi) prototyping is characterized by a quick and easy translation of high-level design concepts into tangible and testable artifacts. 116 Levels of fidelity High fidelity Low fidelity
  • 117. 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
  • 118. 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
  • 119. 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
  • 120. 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
  • 121. Responsive Web Design Workshop | Milan March 2014 High Horizontal Final productUsability test Concept modelThrow away Vertical Low Levels of fidelity
  • 122. Responsive Web Design Workshop | Milan March 2014 “It’s the little details that are vital. Little things make big things happen.” Coach John Wooden
  • 123. Responsive Web Design Workshop | Milan March 2014 Types of prototypes Storyboards Paper mockups Interactive wireframes Motion wireframes UI Walkthrough Motion prototype Interactive prototype Code prototype Low fidelity High fidelity
  • 124. Responsive Web Design Workshop | Milan March 2014 Low fidelity / No interaction Storyboard
  • 125. Responsive Web Design Workshop | Milan March 2014 Low fidelity / Low interaction Paper mockups iOs Stencil / Protosketch
  • 126. Responsive Web Design Workshop | Milan March 2014 Medium fidelity / Low interaction Interactive wireframes Axure / Proto.io
  • 127. Responsive Web Design Workshop | Milan March 2014 Medium fidelity / Low interaction Motion prototype Keynote / After Effects
  • 128. Responsive Web Design Workshop | Milan March 2014 Interactive prototype High fidelity / Medium interaction inVision / UX Pin / Brief
  • 129. Responsive Web Design Workshop | Milan March 2014 Code prototype High fidelity / High interaction Adobe Edge Reflow / Inspect / Muse / Dreamweaver
  • 130. Responsive Web Design Workshop | Milan March 2014 Storyboards Paper mockups Interactive wireframes Motion wireframes Love Quick and dirty Easy to do Fast feedback Very inclusive ! ! Hate Not quick enough Too dirty Hard to share Not self explaining Love Detailed and solid Good for defining content & explain behaviours ! ! Hate Hard for user testing Too functional with less experience of the flow Love Emotional High quality feedback Testing dynamic behaviours ! ! ! Hate Time to build them Software knowledge Works better in an advanced state Love High level concept modelling Clear concept vision Easy to do ! ! Hate Too high level Low focus on the interaction model Not easy to understand for non designers Levels of fidelity Low fidelity
  • 131. Responsive Web Design Workshop | Milan March 2014 Love Easy to do High quality UI Fast feedback Pixel perfect design ! ! Hate No interactivity Not self explaining No hyperlinks No animation Love High quality UI Smooth motion design Clear system dynamics Cheaper than coding ! ! Hate No interactivity No user flow No touch feedback Time consuming Love Easy to do High quality UI Clear interactions Flow simulation ! ! Hate Time to build them Basic software knowledge Work better in an advanced state Love Test interactivity Perfect for testing process & flow Experience in contest ! ! Hate Software knowledge Time for building the prototype Limiting the design process Levels of fidelity High fidelity UI Walkthrough Motion prototype Interactive prototype Code prototype
  • 132. Responsive Web Design Workshop | Milan March 2014 DESIGN CHALLENGES & OPPORTUNITIES 10’
  • 133. Responsive Web Design Workshop | Milan March 2014 Next steps For your next RWD project think about your overall strategy first and then sketches, wireframes & start design with code. SketchesConcept Prototype
  • 134. Responsive Web Design Workshop | Milan March 2014 No more static layouts
  • 135. 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
  • 136. 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
  • 137. Responsive Web Design Workshop | Milan March 2014 Dealing with the past Find smart solutions to scale down your responsive projects
 on old browsers with different degradation techniques. Nothing or degradation Simplify cross browser/ devices compatibility Browser evolution
  • 138. 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
  • 139. 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?
  • 140. 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
  • 141. 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
  • 142. 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
  • 143. 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
  • 144. 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-fidelity-and-design/ Time Fidelity Sketches Wireframes Mockups Prototypes The right level of fidelity
  • 145. 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
  • 146. 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.
  • 147. Responsive Web Design Workshop | Milan March 2014 FURTHER 
 READINGS
  • 148. Responsive Web Design Workshop | Milan March 2014 Books Sketching User Experiences: Getting the Design Right and the Right Design ! Bill Buxton 2007 Responsive Web Design ! Ethan Marcotte 2011 CSS3 for Web Designers ! Dan Cederholm 2012 Mobile First ! Luke Wroblewski 2011
  • 149. Responsive Web Design Workshop | Milan March 2014 Articles & References Prototype toolsUX Culture Design Workflow Wireframing Responsive design workflow on multiple touchpoints ! http://viljamis.com/blog/2012/responsive-workflow/ Design process 
 in the responsive age ! http://www.slideshare.net/pkattera/design- process-for-responsive-web-design Does form follow function? ! http://www.smashingmagazine.com/2010/03/23/ does-form-follow-function/ Embracing the UX Spectrum ! http://uxmag.com/articles/embracing-the-ux- spectrum Visualizing the user experience ! http://www.slideshare.net/grantrobinson/ visualising-the-user-experience-2261349 Where wireframes are concerned ! http://uxmag.com/articles/where-wireframes-are- concerned Design better & faster with rapid prototyping ! http://www.smashingmagazine.com/2010/06/16/ design-better-faster-with-rapid-prototyping/ Sketching the User Experience ! http://www.slideshare.net/antoniodepasquale/ sketching-the-user-experience Responsive design will be 99.9% typography
 http://www.welcomebrand.co.uk/thoughts/the- responsive-web-will-be-99-9-typography/ Prototyping for Responsive Web Design ! http://www.slideshare.net/mrscammels/ prototyping-for-responsive-web-design Test on real devices: How to? ! http://bradfrostweb.com/blog/mobile/test-on-real- mobile-devices-without-breaking-the-bank/ Motion & Gesture Interactions in the digital age ! http://www.slideshare.net/antoniodepasquale/ motion-gesture-interactions-in-the-digital-age
  • 150. Responsive Web Design Workshop | Milan March 2014 Articles & References Typography & PrototypeInteraction model Media & responsive Icons & sprites Responsive image solution ! http://mobile.smashingmagazine.com/2013/07/08/ choosing-a-responsive-image-solution/ Content choreography ! http://trentwalton.com/2011/07/14/content- choreography/ Responsive navigation patterns ! http://bradfrostweb.com/blog/web/responsive-nav- patterns/ Responsive background images with fixed or fluid aspect ratio ! http://voormedia.com/blog/2012/11/responsive- background-images-with-fixed-or-fluid-aspect- ratios Optimizing UX with responsive web design ! http://www.slideshare.net/clarissapeterson/ optimizing-user-experience-with-responsive-web- design Prototype Responsive Typography ! http://viljamis.com/blog/2013/prototyping- responsive-typography/ Aspect ratio & responsive web design ! http://www.sitepoint.com/maintain-image-aspect- ratios-responsive-web-design/ Complex navigation patterns 
 for responsive web design
 http://bradfrostweb.com/blog/web/complex- navigation-patterns-for-responsive-design/ Resolution independence for responsive web design ! http://coding.smashingmagazine.com/2012/01/16/ resolution-independence-with-svg/ Flow Type & Responsive typography ! http://simplefocus.com/flowtype/! http://coding.smashingmagazine.com/2013/09/18/ introducing-flowtype-js/ Responsive web design showcase ! http://responsiveshowcase.com/! http://mediaqueri.es/popular/ Responsive web fonts & icons ! http://webstandardssherpa.com/reviews/ responsive-webfont-icons
  • 151. Responsive Web Design Workshop | Milan March 2014 Thanks! @myinteraction to continue the discussion! ! !