Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Thursday, December 6, 10:15 a.m.
Hub Tag: #tech12 LK2
Thomas Kugler, John Mills
Being Responsive
to Responsive
Web Design
• Thomas Kugler: Website Administrator,
ASAE(1/11–present, with prior contract assignment 9/10–1/11)
• Work with team on W...
• John Mills: Web Manager for PMMI
– (8 years in the association world overall)
• Design, content, video, narration, socia...
What is Responsive Web
Design (RWD)?
In a nutshell…An approach where
a site is optimized for easy
reading and navigation a...
You Are
Designing
For…?
Source: http://blog.nielsen.com/nielsenwire/wp-content/uploads/2012/11/Holiday-Devices-K6-12.png
• Keeping your
focus on your
current
audience
The Balancing Act
• Planning for the
future: audience,
membership, devices
R...
Apps Do It All !
The Myth of Apps
Apps Don’t Do It All !
The Truth of Apps
They are part of a digital ecosystem, all things
interdependent and playing a par...
Apps do one thing (or set of things) very well
Apps are often for a pre-existing audience
(Esp. in case of associations)
T...
• They’re not exciting
• People don’t expect much
• Apps are more important
• Less important than social
• HTML5 the wonde...
• The Universal Portal
• Draw people in – Your Web audience is the World
• Sell yourself to potential members
– Your knowl...
The Truths of the Web
• So Why Responsive and not “M”?
– The dreaded “M dot subdomain”
• Technical:
– Device detection red...
• So Why Responsive and not “M”?
• Practical:
– A parallel site is not good for SEO
– Give people ONE URL as a resource
– ...
– Two upstart search engines recommend it:
• recommends responsive...
– http://googlewebmastercentral.blogspot.com/2012/06...
• We’ve been in a mobile world long enough to
start making real content strategy changes
• Obama and Romney campaigns both...
• Boston Globe
• http://www.bostonglobe.com/
• Mobile-first thinking
• Drag and resize the window to see RWD in “action”
T...
• The Information
Accessibility Revolution
• Your site and your content
should be equally accessible
to all devices
• Resp...
What is Responsive Web
Design (RWD)?
An approach to web design in which a site is
crafted to provide an optimal viewing ex...
ASAE Technology Conference 2012 Website
The 3 Building Blocks of
Responsive Web Design
(RWD):
• Fluid Grids
• Flexible Images
• Media Queries
Fluid Grids: Ta r g e t ÷ C o n t e x t = R e s u l t
# c o n t a i n e r { w i d t h : 9 9 0 p x } = 1 0 0 %
# l e f t2 5...
Fluid Grids (p.2)
Ta r g e t ÷ C o n t e x t = R e s u l t ( p . 2 )
Type—Ems vs. Pixels 16px = default cross-browser font...
Fluid Grids (p.3)
S c r e e n D i m e n s i o n s — w i d t h s a r e b r e a k p o i n t s f o r M e d i a Q u e r i e s
...
Flexible Images
img {max-width: 100%;
height: auto;}
Prevents images from exceeding the width of their container.
The cont...
Media Queries
Desktop / Laptop 1200 x 1024
• Declare Desktop/Laptop (standard) styles first
• Declare Responsive Styles la...
Mobile Fir s t & R es pons ive Web D es ign Bundle,
fr om A Bo o k Ap a r t
C ontent Str ategy for Mobile ,
fr om A Book Apar t
• A Book Apart http://www.abookapart.com/
• Luke Wroblewski (@lukew on Twitter,
http://www.lukew.com)
• Don’t Make Me Thin...
What did we miss?
What else do you want to know?
Are you as excited as we are for the future?
Questions
John Mills
john@pmmi.org
@kesseljunkie
Thank You
Thomas Kugler
tkugler@asaecenter.org
@tom8gem
Upcoming SlideShare
Loading in …5
×

Being Responsive to Responsive Web Design

561 views

Published on

What is responsive web design and programming, and why is it critically important for your association to adopt this relatively new approach when building your website? With the rise in online access through various mobile devices, association web designers and developers must embrace the concept of planning for mobile first. Learn how!

Published in: Design
  • Be the first to comment

Being Responsive to Responsive Web Design

  1. 1. Thursday, December 6, 10:15 a.m. Hub Tag: #tech12 LK2 Thomas Kugler, John Mills Being Responsive to Responsive Web Design
  2. 2. • Thomas Kugler: Website Administrator, ASAE(1/11–present, with prior contract assignment 9/10–1/11) • Work with team on Web Strategies, Information Architecture, Content Planning, Social Media; Design & Develop; Innovate • Former ASAE web colleague of John Mills, co-Technology Idea Labs leader “Good design is problem-solving” Who We Are #TECH12 LK2
  3. 3. • John Mills: Web Manager for PMMI – (8 years in the association world overall) • Design, content, video, narration, social spaces are how and where I live. • Off-hours: Occasionally pretending I'm a Jedi. Who We Are #TECH12 LK2
  4. 4. What is Responsive Web Design (RWD)? In a nutshell…An approach where a site is optimized for easy reading and navigation across a wide range of devices In other words—one website, delivered differently for different media
  5. 5. You Are Designing For…? Source: http://blog.nielsen.com/nielsenwire/wp-content/uploads/2012/11/Holiday-Devices-K6-12.png
  6. 6. • Keeping your focus on your current audience The Balancing Act • Planning for the future: audience, membership, devices Responsive Design is the Means to Accomplish Both
  7. 7. Apps Do It All ! The Myth of Apps
  8. 8. Apps Don’t Do It All ! The Truth of Apps They are part of a digital ecosystem, all things interdependent and playing a part in a bigger picture.
  9. 9. Apps do one thing (or set of things) very well Apps are often for a pre-existing audience (Esp. in case of associations) The Truth of Apps Apps involve effort, updates, multi-platform iOS, Android, Blackberry, Windows—all separate apps
  10. 10. • They’re not exciting • People don’t expect much • Apps are more important • Less important than social • HTML5 the wonder tool The Myths of the Web
  11. 11. • The Universal Portal • Draw people in – Your Web audience is the World • Sell yourself to potential members – Your knowledge and value examples are “out there” – No need to download – SEO » People find things through Google, Social Media – they don’t send links to apps The Truths of the Web
  12. 12. The Truths of the Web • So Why Responsive and not “M”? – The dreaded “M dot subdomain” • Technical: – Device detection redirects can have unwanted consequences – Performance lag for redirects – Redirects and subdomains - device handlers - add a layer of unnecessary work and maintenance
  13. 13. • So Why Responsive and not “M”? • Practical: – A parallel site is not good for SEO – Give people ONE URL as a resource – Cost. Why develop twice what you can develop once? – A funny little story about a big misunderstanding: When someone left a responsive site directly to a site with “mobile detect.” Why Responsive Design Matters
  14. 14. – Two upstart search engines recommend it: • recommends responsive... – http://googlewebmastercentral.blogspot.com/2012/06/rec ommendations-for-building-smartphone.html • ...and so does – http://www.bing.com/community/site_blogs/b/webmaster/ archive/2012/03/07/building-websites-optimized-for-all- platforms-desktop-mobile-etc.aspx Why Responsive Design Matters
  15. 15. • We’ve been in a mobile world long enough to start making real content strategy changes • Obama and Romney campaigns both struggled with mobile content delivery: http://mobile.smashingmagazine.com/2012/08/22/separat e-mobile-responsive-website-presidential-smackdown/ • Attention Adjustments Responsive Design and Content Strategy And now… Icons source: http://www.iconarchive.com/
  16. 16. • Boston Globe • http://www.bostonglobe.com/ • Mobile-first thinking • Drag and resize the window to see RWD in “action” The Future is Now
  17. 17. • The Information Accessibility Revolution • Your site and your content should be equally accessible to all devices • Responsive is a part of this. • Congress.gov – Note that this is a Beta site – it’s OK to be iterative! Even Congress Is On Board…
  18. 18. What is Responsive Web Design (RWD)? An approach to web design in which a site is crafted to provide an optimal viewing experience— easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) Wikipedia http://en.wikipedia.org/wiki/Responsive_web_design
  19. 19. ASAE Technology Conference 2012 Website
  20. 20. The 3 Building Blocks of Responsive Web Design (RWD): • Fluid Grids • Flexible Images • Media Queries
  21. 21. Fluid Grids: Ta r g e t ÷ C o n t e x t = R e s u l t # c o n t a i n e r { w i d t h : 9 9 0 p x } = 1 0 0 % # l e f t2 5 5 p x ÷ 9 9 0 p x = 25.7575757575758% # r i g h t 7 0 0 p x ÷ 9 9 0 p x = 70.7070707070707% # s o c i a l 2 0 5 p x ÷ 7 0 0 p x = 29.2857142857143% # c o n t e n t4 1 0 p x ÷ 7 0 0 p x = 58.5714285714286% Margins are also expressed in percentages: #left { margin-left: 03.030303030303% } /* 30px ÷ 990px */ (Percentages are relative, #social { margin-right: 0.021428571428571% } /* 15px ÷ 700px */ pixels are absolute.)
  22. 22. Fluid Grids (p.2) Ta r g e t ÷ C o n t e x t = R e s u l t ( p . 2 ) Type—Ems vs. Pixels 16px = default cross-browser font-size h3 { font-size: 1.25em; /* 20px ÷16px */ margin-bottom: 0.9em; } /* 18px ÷ 20px */ h4 { font-size: 0.875em; /* 14px ÷ 16px */ margin-bottom: 0.857142857142857em;} /* 12px ÷ 14px */ p, li {font-size: 0.75em; /* 12px ÷ 16px */ line-height: 1.5em; /* 18px ÷ 12px */ margin-bottom: 1.5em;} /* 18px ÷ 12px */ Type will scale proportionately within various device sizes Ems are relative, pixels are absolute
  23. 23. Fluid Grids (p.3) S c r e e n D i m e n s i o n s — w i d t h s a r e b r e a k p o i n t s f o r M e d i a Q u e r i e s Desktop / Laptop 1200 x 1024 iPad Landscape 1024 x 768 Small Laptop 800 x 600 iPad Portrait 768 x 1024 iPod Touch 640 x 960 Kindle 600 x 800 iPhone Landscape 480 x 320 iPhone Portrait 320 x 480 (note—these are only the most-used screens; there are many other devices with many different dimensions)
  24. 24. Flexible Images img {max-width: 100%; height: auto;} Prevents images from exceeding the width of their container. The container’s width must therefore be clearly defined. There are many more parameters involved in advanced image preparation, but this CSS declaration covers a lot.
  25. 25. Media Queries Desktop / Laptop 1200 x 1024 • Declare Desktop/Laptop (standard) styles first • Declare Responsive Styles last, from largest to smallest screen size Examples: @media screen and (max-width: 600px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 560px; } } @media screen and (max-width: 480px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 440px; } } @media screen and (max-width: 320px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 280px; } #content p { clear: both; } }
  26. 26. Mobile Fir s t & R es pons ive Web D es ign Bundle, fr om A Bo o k Ap a r t
  27. 27. C ontent Str ategy for Mobile , fr om A Book Apar t
  28. 28. • A Book Apart http://www.abookapart.com/ • Luke Wroblewski (@lukew on Twitter, http://www.lukew.com) • Don’t Make Me Think (A “Classic”) • Revisit your own assumptions • Treehouse http://teamtreehouse.com/ • Your members – Site analytics, Feedback, ASK them Important Resources
  29. 29. What did we miss? What else do you want to know? Are you as excited as we are for the future? Questions
  30. 30. John Mills john@pmmi.org @kesseljunkie Thank You Thomas Kugler tkugler@asaecenter.org @tom8gem

×