responsive web design

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 john@ahsodesigns.com 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