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.

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

YesterdayDesktop app, fixed grid, mobile interfaces

TodaySmart Tv, Web App, Mobile, Console, Responsive design

Browser war Vs Technology evolutionAn evolving landscape, where new technology are

pushing the boundaries of web experiences

Browser Analytics Global - January 2014

A different design workflowThings 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-specific

experiences, we can use media queries to progressively enhance our work within different viewing contexts.

Ethan Marcotte

What we need to create a responsive project?

Content strategy

Flexible grid layout

Flexible images and media

Media queries

Ingredients

Content StrategyYou can create good experiences without knowing the content.

What you can’t do is create good experiences without knowing your content structure.

Content CoreographyWe 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.5em700 : 988 = 0.7085

Font style

Fluid images & media

1024768 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 & mediaFluid 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

Fluid images & mediaFixed 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 */ }

800 px

120 px

600x400 px file (7kb) !

0% JPEG compression displayed in 600x400

Fluid images & mediaImages 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) !

600x400 px file (7kb) !

Fluid images & mediaDeliver 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, 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

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 learningResponsive images? Polyfills?

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 WebEditorial

http://thenextweb.com/

The Boston GlobeEditorial

www.bostonglobe.com

TimeEditorial

time.com

Ted TalkMedia

http://thenextweb.com/

A book aparteCommerce

www.abookapart.com

World Wife LifeCorporate

worldwildlife.org

I’m JithinPortfolio

iamjithin.me

Media QueriesResponsive web design repository

mediaqueri.es

START A RESPONSIVE DESIGN PROJECT

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 patternsInformation 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 & SketchesWireframing 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 experienceMaking responsiveness is about prototyping with code and testing your

projects on real devices and screen resolutions.

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

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 patternsAs 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 TweaksThis technique keeps the structure of the website consistent while scaling, relaying on each block for content adaptation.

Build WindowsTiny Tweaks

buildwindows.com

Mostly FluidIt 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 StepsMostly Fluid

fivesimplesteps.com

Column dropThis 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 NovelColumn drop

introducingthenovel.com

Column drop v.2This 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 PressColumn drop v.2

stoppress.co.nz

Layout ShifterThis technique shifts the left hand navigation column to the top in order to

optimize the navigation while scaling to narrower screen width.

Food SenseLayout shifter

foodsense.is

Off CanvasThe 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.

FacebookOff Canvas

facebook.com

Select NavigationThis technique condenses the main navigation in a simple

dropdown menu when it scales down on mobile devices (old approach)

ViljamisSelect navigation

Toggle navigationThe 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.

StarbucksToggle navigation

Footer NavigationThis 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 magazineFooter navigation

Stacked top links navigationIn this solution all the main navigation is always directly visibile on top

and every link use a single row in the mobile version.

CodepenStacked top links navigation

Left Nav FlyoutThe 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.

SequenceLeft nav Flyout

Priority + NavigationWhen 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.

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

MicrosoftPriority + Navigation v.2

Source orderAccording 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 shiftIn responsive design content organization is flexible. It’s possibile to change

the modules order according to different breakpoints.

Grouping contentsIt’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 FIDELITYPROTOTYPES

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

Albert Einstein

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

Design processElaboration of ideas Reduction of ideas

Bill Buxton, 2007 - Sketching user experiences: Paul Laseau, 1980 Graphic Thinking for architects & designers

Design processThe 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 frameworkToday there are many frameworks on the market: Bootstrap, Foundation, Less Framework.

All you need is just start to design!

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

Design & prototypeFor 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.

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

PrototypesWhat 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

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.

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

118High-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.

Levels of fidelityHigh 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

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

Horizontal

Final productUsability test

Concept modelThrow away

Vertical

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 prototypeHigh fidelity / Medium interaction

inVision / UX Pin / Brief

Code prototypeHigh 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 fidelityLow 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

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

UI Walkthrough Motion prototype Interactive prototype Code prototype

DESIGN CHALLENGES & OPPORTUNITIES

Next stepsFor 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 layoutsResponsive 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 tabletsToday 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 pastFind 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?

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

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-fidelity-and-design/

Fidelity

Sketches

Wireframes

Mockups

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

responsive webdesign

Design

dlrdesign responsive webdesign

responsive webdesign für grafiker & entscheider

responsive webdesign process

responsive webdesign: prozess, dialog, qualität

€¦ · webdesign rummel . studiowerbung. werbeagentur...

responsive webdesign testing using galen

leseprobe christoph zillgens responsive...

responsive webdesign infograph

responsive webdesign

responsive webdesign for digital agencies

responsive webdesign sydeny

responsive webdesign mit bootstrap

typo3 congres 2012 - responsive webdesign

présentation responsive webdesign

testing responsive webdesign

workshop responsive webdesign 2015

optimisation mobile - responsive webdesign - 2013

responsive webdesign performant

responsive webdesign - barcamp hamburg 2012

responsive webdesign mobil optimierte website