responsive web design
DESCRIPTION
TRANSCRIPT
RESPONSIVE DESIGN
Let’s talk user experience and content
#bcnresponsive@ahsodesigns
TODAY WE WILL DISCUSS
• why responsive design
• what is responsive design
• when you use it
• benefits to businesses and consumers
• resources
#bcnresponsive@ahsodesigns
• questions at the end
• our talk will be 20 minutes with 15 minutes for questions
#bcnresponsive@ahsodesigns #bcnresponsive@ahsodesigns
Who we areJohn Housholder@ahsodesigns
Joel Norris
#bcnresponsive@ahsodesigns
WHO ARE YOU?• Designer• Developer• Business owner• Marketer• Someone looking to kill an hour
before the after party begins?
@canthemes@ahsodesigns #bcnresponsive@ahsodesigns
WHY RESPONSIVE WEB DESIGN?
• Our story• Local Taco mobile• WordPress Meetup: Plugins? are you
serious?• WordPress Ecommerce sites• Mobile sites URLs
@canthemes@ahsodesigns #bcnresponsive@ahsodesigns
WHAT IS THE WEB TODAY?
• Your site no longer sits on a desktop
@canthemes@ahsodesigns #bcnresponsive@ahsodesigns
WHAT IS RESPONSIVE?
• The approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.
@canthemes@ahsodesigns #bcnresponsive@ahsodesigns
CONTENT DISTRIBUTION
@canthemes@ahsodesigns #bcnresponsive@ahsodesigns
QUESTIONS TO THINK ABOUT
• What is the purpose of the site?
• Why are visitors coming to the site?
• How easily can users access the information?
#bcnresponsive@ahsodesigns
ARCHITECTURE: andersonwisde.com
Notice: higher ranking content moves up!
ECOMMERCE: teegallery.com
Notice: images are still large enough to touch
NEWS:bostonglobe.com
Text
Notice: easy to use pull down menus
PRODUCTS:ILLY ISSIMO
Notice: content flows below, but is prioritized
NON PROFIT:dolectures.com
Notice: personalization
RESTAURANT:foodsense.is
Notice: content is redistributed
HOW DO USERS GET THEIR CONTENT?
OUR SITE:Essential
Notice: content is redistributed and aligned
HOW do you make a site responsive?
#bcnresponsive@ahsodesigns
4 THINGS YOU MUST KNOW
• Media Queries
• Flexible Images
• Elastic Fonts
• Fluid Interior
#bcnresponsive@ahsodesigns
MEDIA QUERIES
• PROBLEM: many different screen resolutions
• OLD SOLUTION: style sheets for mobile and other devices
• SOLUTION: CSS3
• HOW?:
#bcnresponsive@ahsodesigns
FLEXIBLE IMAGES
• PROBLEM: fixed sized images don’t scale as the size of the screen changes
• SOLUTION: max width and overflow hidden
• HOW?
#bcnresponsive@ahsodesigns
ELASTIC FONTS
• PROBLEM: users browsers font size are set differently
• SOLUTION: code in ems based on percentage
• HOW: show pixel to ems calculator
#bcnresponsive@ahsodesigns
FLUID INTERIOR
• PROBLEM: many different screen sizes and resolutions.
• SOLUTION:
• HOW:
#bcnresponsive@ahsodesigns
RESOURCES• Article that started it all:
http://www.alistapart.com/articles/responsive-web-design/
• Smashing Magazine Tools and Techniques: http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
• 21 tools for responsive design: http://www.netmagazine.com/features/21-top-tools-responsive-web-design
#bcnresponsive@ahsodesigns
WHY NOT RESPONSIVE?
• http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu (responsive is not accessible)
#bcnresponsive@ahsodesigns
INTERESTED IN LEARNING MORE?
• email me at [email protected] and I’ll send you a code snippet reference document on responsive design and a link to today’s slides
• CanThemes.com
• Ahsodesigns.com
• @ahsodesigns
• @canthemes
#bcnresponsive@ahsodesigns