More Related Content
Similar to Responsive101 (20)
Responsive101
- 4. 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
- 5. 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.....
- 6. 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.
- 7. 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
- 8. 08
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
WHY
Yesterday / 2009
Fixed Width, Mobile Optimized Websites, Desktop Specific Apps
- 9. 09
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
WHY
Today / 2014
Smart TV, Web Apps, Game Consoles, Tablets Everywhere, Phablets, Watches!
- 12. 012
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
http://www.profoundgrid.com/examples/fluid.html
Fluid Grids
Responsive
Images
Media
Queries
A fluid grid structures your content. The content responds to the size of the
display.
- 13. 013
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
http://www.profoundgrid.com/examples/fluid.html
Fluid Grids
Responsive
Images
Media
Queries
No more fixed pixels. It’s all proportions & MATH.
TARGET/CONTEXT = RESULT
- 14. 014
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid Grids
Responsive
Images
Media
Queries
No more fixed pixels. It’s all percentage & MATH.
TARGET/CONTEXT = RESULT
960px/1920px = 50%
- 15. 015
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
http://www.profoundgrid.com/examples
Fluid Grids
Responsive
Images
Media
Queries
It’s not just a fluid grid anymore. Evolution!
- 16. 016
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid Grids
Responsive
Images
Media
Queries
Fluid images. Images matches the width of the container. Super easy.
- 17. 017
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid Grids
Responsive
Images
Media
Queries
Crop images dynamically. Because fluid does not work for every image.
- 18. 018
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid Grids
Responsive
Images
Media
Queries
Switch images. Really important for slower connections.
- 20. 020
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
HOW
Fluid Grids
Responsive
Images
Media
Queries
Media queries are an extension to HTML5 that allows features of a user’s
display to determine the CSS delivered to the device.
- 21. 021
Responsive Design
PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.
April, 2015
#TIP
Fluid Grids
Responsive
Images
Media
Queries
Design from the content out - content decides breakpoints
Design is how it works - not how it looks!
- 22. 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
- 23. 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
- 28. 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
- 31. 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.
- 32. 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.
