BarCamp Nashville Intro to Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

BarCamp Nashville Intro to Responsive Design

on

  • 503 views

BarCamp Nashville

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

Statistics

Views

Total Views
503
Views on SlideShare
503
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

BarCamp Nashville Intro to Responsive Design Presentation Transcript

  • 1. Intro to Responsive DesignBarCamp Nashville 2012 October 20, 2012 #bcn12responsive @Sue_Anne
  • 2. About Me Sue Anne Reed @Sue_Anne on Twitteraboutme.com/sueannereed The Engage Group
  • 3. More on Mobile @ BCN12 Rise of the Tablets: How Tablets are Changing Mobile - Noon @ WannaBsAll Things Mobile - 3:45 @ Rockbar
  • 4. Quick Poll
  • 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. MobileDevelopment AppsMobile Web DesignResponsive Design
  • 7. Apps
  • 8. Mobile Development
  • 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 – MediaInquiries 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
  • 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. Resources – Templates http://foundation.zurb.com/ - HTML & CSS Templates http://twitter.github.com/bootstrap/ - HTML & CSS Templates
  • 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/