barcamp nashville intro to responsive design
DESCRIPTION
BarCamp Nashville October 20, 2012 Sue Anne Reed The Engage Group Intro to Responsive DesignTRANSCRIPT
Intro to Responsive
DesignBarCamp Nashville 2012
October 20, 2012 #bcn12responsive
@Sue_Anne
About MeSue Anne Reed
@Sue_Anne on Twitter aboutme.com/sueannereed
The Engage Group
More on Mobile @ BCN12
Rise of the Tablets: How Tablets are Changing Mobile - Noon @
WannaB'sAll Things Mobile - 3:45 @
Rockbar
Quick Poll
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
Mobile Development
AppsMobile Web Design Responsive Design
Apps
Mobile Development
Responsive Design
Why?What You Need to Know
Examples Resources
Who is Ethan Marcotte A List Apart Blog Post
Why Responsive DesignGoogle LOVES Responsive Design $$$$$$
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/)
Need to Know – Media Inquiries Supported by any device / browser that
supports CSS3 Two most important CSS3 Media Tags
Media
{ display: none;}
What About Email? Same rules apply {display: none;} will be more
important than everSome mail servers are iffy about
whether or not they support CSS3Some email service providers are
building mobile responsiveness into product
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/3764/new-guide-responsive-email-design
Resources – Templates http://foundation.zurb.com/ - HTML & CSS
Templates http://twitter.github.com/bootstrap/ - HTML & CSS
Templates
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/