Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
Responsive Web Design Workshop | Milan March 2014
Concept
Framework
Layout
Grids & Modules
Going in depth with a Top down ...
Responsive Web Design Workshop | Milan March 2014
Design thinking 

in the responsive age
Framework
& UX Principles
Design...
Responsive Web Design Workshop | Milan March 2014
Confucius
I hear and I forget. 

I see and I remember. 

I do and I unde...
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 ...
Responsive Web Design Workshop | Milan March 2014
What is the User Experience?
User Experience encompasses all aspects of ...
Responsive Web Design Workshop | Milan March 2014
Research Concept Wireframe Visual Develop User testDocument
A typical wa...
Responsive Web Design Workshop | Milan March 2014
Waterfall model doesn’t make that
much sense in the responsive age.
!
Th...
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 tec...
Responsive Web Design Workshop | Milan March 2014
A different design workflow
Things are changing.
We need to evolve the p...
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...
Responsive Web Design Workshop | Milan March 2014
Same contents, different shapes
Web sites, applications, digital softwar...
Responsive Web Design Workshop | Milan March 2014
1920 px
1440 px
1024 px
320 px
Design for the responsive age
We need to ...
Responsive Web Design Workshop | Milan March 2014
Single layouts are not relevant anymore. What is important is the overal...
Responsive Web Design Workshop | Milan March 2014
What is responsive design?
It looks different and things jiggle around,
...
Responsive Web Design Workshop | Milan March 2014
What is responsive design?
A more formal definition:
Responsive web desi...
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
expe...
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 g...
Responsive Web Design Workshop | Milan March 2014
Content Strategy
You can create good experiences without knowing the con...
Responsive Web Design Workshop | Milan March 2014
Content Coreography
We can begin to choreograph content proportional to ...
Responsive Web Design Workshop | Milan March 2014
Content Coreography
@media screen and
(max-width: 33.236em) {
#main { di...
Responsive Web Design Workshop | Milan March 2014
Fluid grids & layouts
A fluid grid will still structure the content
cons...
Responsive Web Design Workshop | Milan March 2014
Fluid grids & layouts
If we could treat font sizes not as pixels, but as...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
1024
768 320
Fluid images: the image’s width is for...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
1280 768 320
Crop images: images are cropped dynami...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Fluid images Vs Image crop
.responsive-scale{
width...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Fixed aspect ratio vs fluid aspect ratio
div.column...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
600x400 px file (7kb)
!
0% JPEG compression
display...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Images size: images at an high resolution with the ...
Responsive Web Design Workshop | Milan March 2014
Fluid images & media
Deliver pixel perfect images to the latest HiDPI sc...
Responsive Web Design Workshop | Milan March 2014
Breakpoints & Media queries
Breakpoints: horizontal widths we’ll need to...
Responsive Web Design Workshop | Milan March 2014
Breakpoints & Media queries
Examples of different Media Queries
!
Media ...
Responsive Web Design Workshop | Milan March 2014
“Fluid grids, flexible images, and media
queries are the three technical ...
Responsive Web Design Workshop | Milan March 2014
A different way of thinking
Work on everything
Design for many sizes at ...
Responsive Web Design Workshop | Milan March 2014
Should I go responsive or not?
Project context
Complexity and functional...
Responsive Web Design Workshop | Milan March 2014
Example of best responsive web design
Editorial
(e.g. Tech/Cheap News)
e...
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 ...
Responsive Web Design Workshop | Milan March 2014
Discover Design Delivery
Designers follow UX Methods that facilitate the...
Responsive Web Design Workshop | Milan March 2014
Discover Design Delivery
Insight Benchmark Concept IA/ Ixd VD Prototype ...
Responsive Web Design Workshop | Milan March 2014
Sketch a raw concept to visualise ideas through 

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

are fundamental ste...
Responsive Web Design Workshop | Milan March 2014
Exploring concept ideas by sketching a first content organisation is
the...
Responsive Web Design Workshop | Milan March 2014
IA & Global patterns
Information architecture focuses on the organizatio...
Responsive Web Design Workshop | Milan March 2014
Analyze problems & constrains. 

Refine ideas and explore all the detail...
Responsive Web Design Workshop | Milan March 2014
Wireframes & Sketches
Wireframing is fundamental because it allows the d...
Responsive Web Design Workshop | Milan March 2014
In a responsive website, it is important to stress the concept of modula...
Responsive Web Design Workshop | Milan March 2014
A template is a key screen/layout which is used as a model for other
pag...
Responsive Web Design Workshop | Milan March 2014
Visualize & prototype your concept. 

Get the feel of the real impact in...
Responsive Web Design Workshop | Milan March 2014
The size of your body text
doesn’t depend on your personal preference.
I...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about providing readable content for any device...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about understanding the complexity,
balancing t...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about building all the UI elements
and componen...
Responsive Web Design Workshop | Milan March 2014
Making responsiveness is about assets independent from resolution.
High ...
Responsive Web Design Workshop | Milan March 2014
Feel the experience
Making responsiveness is about prototyping with code...
Responsive Web Design Workshop | Milan March 2014
Testing approach
Making responsiveness is about continuous tests & debug...
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 comput...
Responsive Web Design Workshop | Milan March 2014
Responsive design patterns
As more designers embrace this technique, we'...
Responsive Web Design Workshop | Milan March 2014
Tiny Tweaks
This technique keeps the structure of the website consistent...
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 relie...
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...
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 end...
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 ...
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 advantag...
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 simp...
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, b...
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 ...
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...
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...
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 situa...
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 jump...
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 orde...
Responsive Web Design Workshop | Milan March 2014
Order shift
In responsive design content organization is flexible. It’s ...
Responsive Web Design Workshop | Milan March 2014
Grouping contents
It’s possibile to collapse multiple contents in a dyna...
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 Gr...
Responsive Web Design Workshop | Milan March 2014
107
Design processElaboration of ideas Reduction of ideas
Bill Buxton, 2...
Responsive Web Design Workshop | Milan March 2014
Frameworks are designed to get you up and running with a functional
prot...
Responsive Web Design Workshop | Milan March 2014
Design framework
Today there are many frameworks on the market: Bootstra...
Responsive Web Design Workshop | Milan March 2014
Grid systems
Grid systems help designers and developers to make fully re...
Responsive Web Design Workshop | Milan March 2014
Prototypes help designers to explore interactions patterns,
explain desi...
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 pro...
Responsive Web Design Workshop | Milan March 2014
114
Prototypes can have various levels of complexity
and details followi...
Responsive Web Design Workshop | Milan March 2014
Low-fidelity Vs High fidelity prototypes
Two different prototype approac...
Responsive Web Design Workshop | Milan March 2014
Low-fidelity (lo-fi) prototyping is characterized by a quick
and easy tr...
Responsive Web Design Workshop | Milan March 2014
Cons Pro
• Low development costs
• Easy to evaluate multiple ideas
• A g...
Responsive Web Design Workshop | Milan March 2014
118
High-fidelity prototypes reach from more detailed paper prototypes
t...
Responsive Web Design Workshop | Milan March 2014
Prototypes are high-fidelity, because they show the real system
behaviou...
Responsive Web Design Workshop | Milan March 2014
120
Vertical prototype
Horizontal
prototype
Horizontal prototypes displa...
Responsive Web Design Workshop | Milan March 2014
High
Horizontal
Final productUsability test
Concept modelThrow away
Vert...
Responsive Web Design Workshop | Milan March 2014
“It’s the little details that are vital.
Little things make big things h...
Responsive Web Design Workshop | Milan March 2014
Types of prototypes
Storyboards
Paper mockups
Interactive wireframes
Mot...
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 Effec...
Responsive Web Design Workshop | Milan March 2014
Interactive prototype
High fidelity / Medium interaction
inVision / UX P...
Responsive Web Design Workshop | Milan March 2014
Code prototype
High fidelity / High interaction
Adobe Edge Reflow / Insp...
Responsive Web Design Workshop | Milan March 2014
Storyboards Paper mockups Interactive wireframes Motion wireframes
Love
...
Responsive Web Design Workshop | Milan March 2014
Love
Easy to do
High quality UI
Fast feedback
Pixel perfect design
!
!
H...
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 f...
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 follo...
Responsive Web Design Workshop | Milan March 2014
Think about tablets
Today there are still more installed PCs in the worl...
Responsive Web Design Workshop | Milan March 2014
Dealing with the past
Find smart solutions to scale down your responsive...
Responsive Web Design Workshop | Milan March 2014
Test on real devices
Test on Real Mobile Devices without
breaking the Ba...
Responsive Web Design Workshop | Milan March 2014
The right tool for what!
Before choosing a tools it's important to under...
Responsive Web Design Workshop | Milan March 2014
140
Use prototype to verify all the different aspects of
your design wit...
Responsive Web Design Workshop | Milan March 2014
141
It's not important to close everything before testing your design co...
Responsive Web Design Workshop | Milan March 2014
High fidelityLow fidelity
	
  Hand	
  Sketch Linked	
  pdf Interac2ve	
 ...
Responsive Web Design Workshop | Milan March 2014
For mobile application the environment
is everything and it is fundament...
Responsive Web Design Workshop | Milan March 2014
High fidelity can waste resources and risk
a mediocre path because bette...
Responsive Web Design Workshop | Milan March 2014
The life of your prototype is directly connected 

to the problem it has...
Responsive Web Design Workshop | Milan March 2014
The perfect tool is the one that helps you to test and verify your desig...
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...
Responsive Web Design Workshop | Milan March 2014
Articles & References
Prototype toolsUX Culture Design Workflow Wirefram...
Responsive Web Design Workshop | Milan March 2014
Articles & References
Typography & PrototypeInteraction model Media & re...
Responsive Web Design Workshop | Milan March 2014
Thanks!
@myinteraction
to continue the discussion!
!
!
Upcoming SlideShare
Loading in …5
×

Responsive Web Design Workshop | Responsive Webdesign

64,716 views

Published on

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)

Published in: Design, Business
  • Earn Up To $316/day! Social Media Jobs from the comfort of home! ♣♣♣ http://ishbv.com/socialpaid/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Winning the Lottery is Based on This [7 Time Winner Tells All] ♣♣♣ http://t.cn/Airfq84N
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This new site crushes dating! view profiles now! ●●● http://t.cn/AiuWSRdj
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How long does it take for VigRX Plus to start working? ▲▲▲ https://tinyurl.com/yy3nfggr
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I went from getting $3 surveys to $500 surveys every day!! learn more... ♣♣♣ https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×