BarCamp Nashville Intro to Responsive Design

617 views

Published on

BarCamp Nashville
October 20, 2012
Sue Anne Reed
The Engage Group
Intro to Responsive Design

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
617
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

BarCamp Nashville Intro to Responsive Design

  1. 1. Intro to Responsive DesignBarCamp Nashville 2012 October 20, 2012 #bcn12responsive @Sue_Anne
  2. 2. About Me Sue Anne Reed @Sue_Anne on Twitteraboutme.com/sueannereed The Engage Group
  3. 3. More on Mobile @ BCN12 Rise of the Tablets: How Tablets are Changing Mobile - Noon @ WannaBsAll Things Mobile - 3:45 @ Rockbar
  4. 4. Quick Poll
  5. 5. Why?Email opens on smartphones & tablets have increased 80% in the past year - HubSpotMobile now driving 36% of email opens - KnoticeMobile is now over 16% of web traffic ... an increase of over 25% in the past year – Shareaholic
  6. 6. MobileDevelopment AppsMobile Web DesignResponsive Design
  7. 7. Apps
  8. 8. Mobile Development
  9. 9. Responsive Design Why?What You Need to Know Examples Resources
  10. 10. Who is Ethan MarcotteA List Apart Blog Post
  11. 11. Why Responsive DesignGoogle LOVES Responsive Design$$$$$$
  12. 12. Need to Know – Fluid Design Also referred to as the “Flexible Grid” Stop thinking hard-coded dimensions & start thinking percentages / ratios Even fonts are “flexible” – <body> font sets the standard and all other sizes refer back to the body font Images should also be tagged with responsive sizes (http://adaptive-images.com/)
  13. 13. Need to Know – MediaInquiries Supported by any device / browser that supports CSS3 Two most important CSS3 Media Tags  Media  { display: none;}
  14. 14. What About Email?Same rules apply{display: none;} will be more important than everSome mail servers are iffy about whether or not they support CSS3Some email service providers are building mobile responsiveness into product
  15. 15. Resources – Tutorials Smashing Magazine - http://www.smashingmagazine.com/responsive -web-design-guidelines-tutorials/ Treehouse Blog – http://blog.teamtreehouse.com/beginners- guide-to-responsive-web-design Campaign Monitor - http://www.campaignmonitor.com/blog/post/3 764/new-guide-responsive-email-design
  16. 16. Resources – Templates http://foundation.zurb.com/ - HTML & CSS Templates http://twitter.github.com/bootstrap/ - HTML & CSS Templates
  17. 17. Resources - WordPress MUST HAVE – WPTouch Pro Responsive Themes  ResponsiveTwentyTen - http://wordpress.org/extend/plugins/responsive- twentyten/  http://www.responsiveplugin.com/ Responsive Plugins – Carousel  http://wordpress.org/extend/plugins/genesis-bootstrap-carousel/ Plugins – Slider  http://wordpress.org/extend/plugins/genesis-responsive-slider/ Minimize comments for mobile visitors  http://wordpress.org/extend/plugins/minimize-comments-on-mobile/

×