barcamp nashville intro to responsive design
Post on 01-Sep-2014
482 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
top related