Your SlideShare is downloading. ×
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design

1,860

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,860
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVE DESIGN
    • Let’s talk user experience and content
    #bcnresponsive @ahsodesigns
  • 2. TODAY WE WILL DISCUSS
    • why responsive design
    • what is responsive design
    • when you use it
    • benefits to businesses and consumers
    • resources
    #bcnresponsive @ahsodesigns
  • 3.
    • questions at the end
    • our talk will be 20 minutes with 15 minutes for questions
    #bcnresponsive @ahsodesigns #bcnresponsive @ahsodesigns
  • 4. Who we are John Housholder @ahsodesigns Joel Norris #bcnresponsive @ahsodesigns
  • 5. WHO ARE YOU?
    • Designer
    • Developer
    • Business owner
    • Marketer
    • Someone looking to kill an hour before the after party begins?
    @canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  • 6. 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
  • 7. WHAT IS THE WEB TODAY?
  • 8.
    • Your site no longer sits on a desktop
    @canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  • 9. 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
  • 10. CONTENT DISTRIBUTION @canthemes @ahsodesigns #bcnresponsive @ahsodesigns
  • 11. 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
  • 12. ARCHITECTURE: andersonwisde.com Notice: higher ranking content moves up!
  • 13. ECOMMERCE: teegallery.com Notice: images are still large enough to touch
  • 14. NEWS: bostonglobe.com Text Notice: easy to use pull down menus
  • 15. PRODUCTS: ILLY ISSIMO Notice: content flows below, but is prioritized
  • 16. NON PROFIT: dolectures.com Notice: personalization
  • 17. RESTAURANT: foodsense.is Notice: content is redistributed
  • 18. HOW DO USERS GET THEIR CONTENT?
  • 19. OUR SITE: Essential Notice: content is redistributed and aligned
  • 20. HOW do you make a site responsive? #bcnresponsive @ahsodesigns
  • 21. 4 THINGS YOU MUST KNOW
    • Media Queries
    • Flexible Images
    • Elastic Fonts
    • Fluid Interior
    #bcnresponsive @ahsodesigns
  • 22. MEDIA QUERIES
    • PROBLEM: many different screen resolutions
    • OLD SOLUTION: style sheets for mobile and other devices
    • SOLUTION: CSS3
    • HOW?:
    #bcnresponsive @ahsodesigns
  • 23. 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
  • 24. 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
  • 25. FLUID INTERIOR
    • PROBLEM: many different screen sizes and resolutions.
    • SOLUTION:
    • HOW:
    #bcnresponsive @ahsodesigns
  • 26. 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
  • 27. WHY NOT RESPONSIVE?
    • http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu (responsive is not accessible)
    #bcnresponsive @ahsodesigns
  • 28. INTERESTED IN LEARNING MORE?
    • email me at [email_address] 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

×