Responsive Webdesign

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

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

Confucius
I hear and I forget.  
I see and I remember.  
I do and I understand.

25’
DESIGN THINKING  
IN THE RESPONSIVE AGE

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

What is the User Experience?
User Experience encompasses all aspects of the end-user's
interaction with the company, its services, and its products.

Research Concept Wireframe Visual Develop User testDocument
A typical waterfall UX design process
From concept design to the final product on the market

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

Yesterday
Desktop app, fixed grid, mobile interfaces

Today
Smart Tv, Web App, Mobile, Console, Responsive design

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

A different design workflow
Things are changing.
We need to evolve the process
Research Concept
Wireframe Visual
DevelopPrototypeSketch
User testReview

What is the shape of digital experiences?
The evolution of technology is changing the boundaries of design

Same contents, different shapes
Web sites, applications, digital softwares are not static templates anymore.
They are frames in an extended fluid experience.

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.

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

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:

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.

When everything started?

Rather than quarantining our content
into disparate, device-speciﬁc
experiences, we can use media queries
to progressively enhance our work
within different viewing contexts.
Ethan Marcotte

768
1440
1024
320
1280

What we need to create a
responsive project?
Content strategy
Flexible grid layout
Flexible images and media
Media queries
Ingredients

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.

Content Coreography
We can begin to choreograph content proportional to screen size,
serving the best possible experience at any width.

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 >

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%).

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

Fluid images & media
1024
768 320
Fluid images: the image’s width is forced to match the width of its container scaling accordingly.

1280 768 320
Crop images: images are cropped dynamically so that they fit into their containers as the containers resize.

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

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

600x400 px file (7kb)
!
0% JPEG compression
displayed in 600x400

Images size: images at an high resolution with the maximum compression rate
can be displayed with high quality at a different resolution
!
80% JPEG compression
!
0% JPEG compression

Deliver pixel perfect images to the latest HiDPI screens and provide your slower internet connected  
users with lightning fast bandwidth efficient images.

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

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).

“Fluid grids, ﬂexible images, and media
queries are the three technical ingredients
for responsive web design, but it also
requires a different way of thinking.
Ethan Marcotte

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

Should I go responsive or not?
Project context
Complexity and functionality
Skill set of your team
Budget and timelines
Client expectations
It depends.
?

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 )

The Next Web
Editorial
http://thenextweb.com/

The Boston Globe
Editorial
www.bostonglobe.com

Time
Editorial
time.com

Ted Talk
Media
http://thenextweb.com/

A book apart
eCommerce
www.abookapart.com

World Wife Life
Corporate
worldwildlife.org

I’m Jithin
Portfolio
iamjithin.me

Media Queries
Responsive web design repository
mediaqueri.es

START A RESPONSIVE
DESIGN PROJECT
15’

How can I start?
Project
Structuring a project is a fundamental step to outline the pillars
of the experience of your service applications.

Discover Design Delivery
Designers follow UX Methods that facilitate their workflow from  
the first insights to the final product delivery.
A Design methodology
Project

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

Sketch a raw concept to visualise ideas through  
a first draft exploration.
Setting a vision

Analyzing content, user behaviours and competitors  
are fundamental steps to understand your industry.
User needs & website goals

Exploring concept ideas by sketching a first content organisation is
the first step to define the information architecture.
Concept design

IA & Global patterns
Information architecture focuses on the organization and structure
of content in a manner in which a user can navigate through it.

Analyze problems & constrains.  
Refine ideas and explore all the details to make it possible.
Explore the details

Wireframes & Sketches
Wireframing is fundamental because it allows the designer to plan the layout
and interaction by sketching UI elements.

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)

A template is a key screen/layout which is used as a model for other
pages within the application.
Wireframes & Templates

Visualize & prototype your concept.  
Get the feel of the real impact in a physical way.
Explore the details

The size of your body text
doesn’t depend on your personal preference.
It depends on reading distance.
Olivier Reichenstein

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

Making responsiveness is about understanding the complexity,
balancing typography and styles across multiple screens.
Typographic approach
Style tile generator

Making responsiveness is about building all the UI elements
and components in a consistent and structured way.
Design the details

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

Feel the experience
Making responsiveness is about prototyping with code and testing your
projects on real devices and screen resolutions.

Testing approach
Making responsiveness is about continuous tests & debugging in multiple ways:
Web inspector view, Labels & Character Counters.
Safari Web Inspector Span Character Counter

FRAMEWORK AND  
UX PRINCIPLES
15’

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 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

Tiny Tweaks
This technique keeps the structure of the website consistent
while scaling, relaying on each block for content adaptation.

Build Windows
Tiny Tweaks
buildwindows.com

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.

Five Simple Steps
Mostly Fluid
fivesimplesteps.com

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.

The Novel
Column drop
introducingthenovel.com

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.

Stop Press
Column drop v.2
stoppress.co.nz

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.

Food Sense
Layout shifter
foodsense.is

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.

Facebook
Off Canvas
facebook.com

Select Navigation
This technique condenses the main navigation in a simple
dropdown menu when it scales down on mobile devices (old approach)

Viljamis
Select navigation

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.

Starbucks
Toggle navigation

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.

Contents magazine
Footer navigation

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.

Codepen
Stacked top links navigation

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.

Sequence
Left nav Flyout

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.

Justmarkup
Priority + 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.
Priority + Navigation v.2

Microsoft
Priority + Navigation v.2

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

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

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.

GRID SYSTEM & LOW FIDELITY 
PROTOTYPES
15’

"If I can't picture it
I can't understand it"
Albert Einstein

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
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

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

Design framework
Today there are many frameworks on the market: Bootstrap, Foundation, Less Framework.
All you need is just start to design!

Grid systems
Grid systems help designers and developers to make fully responsive websites, eliminating
the frustration of flicking between browsers looking for alignment errors.

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

"Now that we can do anything,
what should we do?"
Bill Buxton

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
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?

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

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

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
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

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
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

High
Horizontal
Final productUsability test
Concept modelThrow away
Vertical
Low
Levels of fidelity

“It’s the little details that are vital.
Little things make big things happen.”
Coach John Wooden

Types of prototypes
Storyboards
Paper mockups
Interactive wireframes
Motion wireframes
UI Walkthrough
Motion prototype
Interactive prototype
Code prototype
Low fidelity
High fidelity

Low fidelity / No interaction
Storyboard

Low fidelity / Low interaction
Paper mockups
iOs Stencil / Protosketch

Medium fidelity / Low interaction
Interactive wireframes
Axure / Proto.io

Medium fidelity / Low interaction
Motion prototype
Keynote / After Effects

Interactive prototype
High fidelity / Medium interaction
inVision / UX Pin / Brief

Code prototype
High fidelity / High interaction
Adobe Edge Reflow / Inspect / Muse / Dreamweaver

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

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

DESIGN CHALLENGES
& OPPORTUNITIES
10’

Next steps
For your next RWD project think about your overall strategy first and then
sketches, wireframes & start design with code.
SketchesConcept
Prototype

No more static layouts

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

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

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

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

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
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
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

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

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

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

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

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.

FURTHER  
READINGS

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

Articles & References
Prototype toolsUX Culture Design Workflow Wireframing
Responsive design workflow on
multiple touchpoints
!
http://viljamis.com/blog/2012/responsive-workﬂow/
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

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

Thanks!
@myinteraction
to continue the discussion!
!
!

Responsive Webdesign

More Related Content

What's hot (20)

Similar to Responsive Webdesign (20)

More from Antonio De Pasquale (6)

Recently uploaded (20)

Responsive Webdesign