Responsive101

01

Responsive Design

PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.

April, 2015

Hi!

02

Responsive Design


April, 2015

Hi!Shank Raval, XDD

Mobile Social Platforms

03

Responsive Design


April, 2015

1 / Theory

2/ Practical

04

Responsive Design


April, 2015

A LITTLE HISTORY

“Responsive web design offers us a way forward, finally allowing us to design for the ebb and flow of things.” - Ethan Marcotte @beep

05

Responsive Design


April, 2015

WHAT

Things move around, scale, appear, disappear so that it looks good and works on whatever device you use.....

06

Responsive Design


April, 2015

WHAT

Responsive web design means designing your website so that the content and layout responds to screen size, orientation of device, platform, and (sometimes)

context.

07

Responsive Design


April, 2015

WHY

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift

in how we’ll build websites for the decade to come.” - Jeffery Veen @veen

08

Responsive Design


April, 2015

WHY

Yesterday / 2009Fixed Width, Mobile Optimized Websites, Desktop Specific Apps

09

Responsive Design


April, 2015

WHY

Today / 2014Smart TV, Web Apps, Game Consoles, Tablets Everywhere, Phablets, Watches!

010

Responsive Design


April, 2015

BUZZWORD ALERT!

PROGRESSIVE ENHANCEMENT

GRACEFUL DEGRADATION

011

Responsive Design


April, 2015

INGREDIENTS

HOW

Fluid GridsResponsive

ImagesMedia

Queries

012

Responsive Design


April, 2015

HOW

http://www.profoundgrid.com/examples/fluid.html


ImagesMedia

Queries

A fluid grid structures your content. The content responds to the size of the display.

013

Responsive Design


April, 2015

HOW

http://www.profoundgrid.com/examples/fluid.html


ImagesMedia

Queries

No more fixed pixels. It’s all proportions & MATH.

TARGET/CONTEXT = RESULT

014

Responsive Design


April, 2015

HOW


ImagesMedia

Queries

No more fixed pixels. It’s all percentage & MATH.

TARGET/CONTEXT = RESULT

960px/1920px = 50%

015

Responsive Design


April, 2015

HOW

http://www.profoundgrid.com/examples


ImagesMedia

Queries

It’s not just a fluid grid anymore. Evolution!

016

Responsive Design


April, 2015

HOW


ImagesMedia

Queries

Fluid images. Images matches the width of the container. Super easy.

017

Responsive Design


April, 2015

HOW


ImagesMedia

Queries

Crop images dynamically. Because fluid does not work for every image.

018

Responsive Design


April, 2015

HOW


ImagesMedia

Queries

Switch images. Really important for slower connections.

019

Responsive Design


April, 2015

#TIP


ImagesMedia

Queries

SVG. Font Icons.

020

Responsive Design


April, 2015

HOW


ImagesMedia

Queries

Media queries are an extension to HTML5 that allows features of a user’s display to determine the CSS delivered to the device.

021

Responsive Design


April, 2015

#TIP


ImagesMedia

Queries

Design from the content out - content decides breakpoints

Design is how it works - not how it looks!

022

Responsive Design


April, 2015

BUZZWORD ALERT!

“Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function).

- Aaron Gustafson @AaronGustafson

http://bradfrost.com/blog/post/the-many-faces-of-adaptive-design/

Adaptive

Responsive

ADAPTIVE VS RESPONSIVE

023

Responsive Design


April, 2015

BUZZWORD ALERT!

MOBILE FIRST

Progressive enhancement won - for now!

PROGRESSIVE ENHANCEMENT

GRACEFUL DEGRADATION

024

Responsive Design


April, 2015

WHEN

CONTEXT

User Project Business

025

Responsive Design


April, 2015

PROCESS

REMEMBER?

026

Responsive Design


April, 2015

PROCESS

NOW

027

Responsive Design


April, 2015

BUZZWORD ALERT!

COPE

Create Once Publish Everywhere!

028

Responsive Design


April, 2015

BUZZWORD ALERT!

ATOMIC DESIGN

We should accept that design and layout can be treated and discussed separately from each other.

-Andy Clarke

029

Responsive Design


April, 2015

FURTHER READING

A LIST APART

030

Responsive Design


April, 2015

1 / Theory

2/ Practical

031

Responsive Design


April, 2015

SKETCHING!

BRIEF #1

A web magazine.

Don’t overthink. Choose three key pages.

032

Responsive Design


April, 2015

SKETCHING!

BRIEF #2

A shopping site.

Don’t overthink. Choose three key pages.

033

Responsive Design


April, 2015

[email protected]

034

Responsive Design


April, 2015

CHECK OUT

sidebar.io

035

Responsive Design


April, 2015

CHECK OUT

http://bradfrost.github.io/this-is-responsive/patterns.html

036

Responsive Design


April, 2015

CHECK OUT

http://patterntap.com/

037

Responsive Design


April, 2015

CHECK OUT

http://www.mobile-patterns.com/

038

Responsive Design


April, 2015

CHECK OUT

http://mediaqueri.es/

039

Responsive Design


April, 2015

CHECK OUT

http://www.pttrns.com/

040

Responsive Design


April, 2015

CHECK OUT

http://responsivenews.co.uk/

041

Responsive Design


April, 2015

CHECK OUT

http://designinstruct.com/web-design/responsive-css-grid/

042

Responsive Design


April, 2015

CHECK OUT

http://responsivedesign.is/resources

043

Responsive Design


April, 2015

CHECK OUT

http://ux.mailchimp.com/patterns/