際際滷

際際滷Share a Scribd company logo

BarCamp Nashville Intro to Responsive Design

Download as PPTX, PDF
T
The Engage Group

Responsive design allows websites to automatically adjust their layout depending on the screen size and orientation of the device being used to view the page. It uses fluid grids, flexible images and CSS3 media queries to detect screen size and optimize the design. Key aspects include fluid layouts using percentages instead of fixed widths, flexible images that scale with the page, and media queries that allow different CSS to be applied depending on screen size. Resources for learning responsive design include tutorials, templates, and WordPress plugins.

1 of 24
Download to read offline
Intro to Responsive Design BarCamp Nashville 2012 October 20, 2012 #bcn12responsive @Sue_Anne
About Me Sue 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's All 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 Apps Mobile 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 Design Google 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 ever Some mail servers are iffy about whether or not they support CSS3 Some email service providers are building mobile responsiveness into product
BarCamp Nashville Intro to Responsive Design
BarCamp Nashville Intro to Responsive Design
BarCamp Nashville Intro to Responsive Design
BarCamp Nashville Intro to Responsive Design
BarCamp Nashville Intro to Responsive Design
BarCamp Nashville Intro to Responsive Design
BarCamp Nashville Intro to Responsive Design
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
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 際際滷r http://wordpress.org/extend/plugins/genesis-responsive-slider/ Minimize comments for mobile visitors http://wordpress.org/extend/plugins/minimize-comments-on-mobile/

More Related Content

BarCamp Nashville Intro to Responsive Design

  • 1. Intro to Responsive Design BarCamp Nashville 2012 October 20, 2012 #bcn12responsive @Sue_Anne
  • 2. About Me Sue Anne Reed @Sue_Anne on Twitter aboutme.com/sueannereed The Engage Group
  • 3. More on Mobile @ BCN12 Rise of the Tablets: How Tablets are Changing Mobile - Noon @ WannaB's All Things Mobile - 3:45 @ Rockbar
  • 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. Mobile Development Apps Mobile Web Design Responsive Design
  • 9. Responsive Design Why? What You Need to Know Examples Resources
  • 10. Who is Ethan Marcotte A List Apart Blog Post
  • 11. Why Responsive Design Google LOVES Responsive Design $$$$$$
  • 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. Need to Know Media Inquiries Supported by any device / browser that supports CSS3 Two most important CSS3 Media Tags Media { display: none;}
  • 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
  • 22. 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
  • 23. Resources Templates http://foundation.zurb.com/ - HTML & CSS Templates http://twitter.github.com/bootstrap/ - HTML & CSS Templates
  • 24. 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 際際滷r http://wordpress.org/extend/plugins/genesis-responsive-slider/ Minimize comments for mobile visitors http://wordpress.org/extend/plugins/minimize-comments-on-mobile/