responsive101
TRANSCRIPT
02
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
Hi!Shank Raval, XDD
Mobile Social Platforms
03
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
1 / Theory
2/ Practical
04
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
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
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
WHAT
Things move around, scale, appear, disappear so that it looks good and works on whatever device you use.....
06
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
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
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
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
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
WHY
Yesterday / 2009Fixed Width, Mobile Optimized Websites, Desktop Specific Apps
09
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
WHY
Today / 2014Smart TV, Web Apps, Game Consoles, Tablets Everywhere, Phablets, Watches!
010
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
BUZZWORD ALERT!
PROGRESSIVE ENHANCEMENT
GRACEFUL DEGRADATION
011
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
INGREDIENTS
HOW
Fluid GridsResponsive
ImagesMedia
Queries
012
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
http://www.profoundgrid.com/examples/fluid.html
Fluid GridsResponsive
ImagesMedia
Queries
A fluid grid structures your content. The content responds to the size of the display.
013
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
http://www.profoundgrid.com/examples/fluid.html
Fluid GridsResponsive
ImagesMedia
Queries
No more fixed pixels. It’s all proportions & MATH.
TARGET/CONTEXT = RESULT
014
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid GridsResponsive
ImagesMedia
Queries
No more fixed pixels. It’s all percentage & MATH.
TARGET/CONTEXT = RESULT
960px/1920px = 50%
015
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
http://www.profoundgrid.com/examples
Fluid GridsResponsive
ImagesMedia
Queries
It’s not just a fluid grid anymore. Evolution!
016
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid GridsResponsive
ImagesMedia
Queries
Fluid images. Images matches the width of the container. Super easy.
017
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid GridsResponsive
ImagesMedia
Queries
Crop images dynamically. Because fluid does not work for every image.
018
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid GridsResponsive
ImagesMedia
Queries
Switch images. Really important for slower connections.
019
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
#TIP
Fluid GridsResponsive
ImagesMedia
Queries
SVG. Font Icons.
020
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid GridsResponsive
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
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
#TIP
Fluid GridsResponsive
ImagesMedia
Queries
Design from the content out - content decides breakpoints
Design is how it works - not how it looks!
022
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
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
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
BUZZWORD ALERT!
MOBILE FIRST
Progressive enhancement won - for now!
PROGRESSIVE ENHANCEMENT
GRACEFUL DEGRADATION
024
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
WHEN
CONTEXT
User Project Business
025
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
PROCESS
REMEMBER?
026
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
PROCESS
NOW
027
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
BUZZWORD ALERT!
COPE
Create Once Publish Everywhere!
028
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
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
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
FURTHER READING
A LIST APART
030
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
1 / Theory
2/ Practical
031
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
SKETCHING!
BRIEF #1
A web magazine.
Don’t overthink. Choose three key pages.
032
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
SKETCHING!
BRIEF #2
A shopping site.
Don’t overthink. Choose three key pages.
033
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
034
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
sidebar.io
035
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://bradfrost.github.io/this-is-responsive/patterns.html
036
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://patterntap.com/
037
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://www.mobile-patterns.com/
038
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://mediaqueri.es/
039
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://www.pttrns.com/
040
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://responsivenews.co.uk/
041
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://designinstruct.com/web-design/responsive-css-grid/
042
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
CHECK OUT
http://responsivedesign.is/resources