Your SlideShare is downloading. ×
0
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
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 - NYC Webgrrls

412

Published on

Presentation given to NYC Webgrrls on March 11, 2013

Presentation given to NYC Webgrrls on March 11, 2013

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
412
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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
  • It’s a set of techniques, not a magic bullet; still a work in progress, no setbest practices
  • You can't assume know how people will be viewing.
  • Separate mobile site - don't get content
  • It’s not just computer or phone now.
  • Also show live example, changing Starbuck site
  • New, most web designers still learning
  • Also show live example, changing Starbuck site
  • It’s possible that there are things in your current design that don’t need to be in any responsive configuration, because they really aren’t useful to the user.
  • Not finished
  • Go to sites and walk through?
  • Best practices are still in flux, place to watch(Not finished this page…)
  • Just fun side note
  • Just fun side note
  • Think more about this!
  • Transcript

    • 1. Responsive Web DesignWebgrrls Discussion TopicMarch 11, 2013By Amélie WalkerCastle Builder Designwww.castlebuilder.com
    • 2. What is Responsive Design?
    • 3. Responsive Design is:
    • 4. Responsive Design is: Flexible
    • 5. Responsive Design is: Flexible – Margin and image sizes change with width
    • 6. Responsive Design is: Flexible – Margin and image sizes change with width Adjustable
    • 7. Responsive Design is: Flexible – Margin and image sizes change with width Adjustable – Layout changes changes with width
    • 8. Responsive Design is not:
    • 9. Responsive Design is not: Magic
    • 10. Responsive Design…Responsive web design is 1a set of techniques thatallows website designers tocreate a single version ofa website that willseamlessly adapt tophones, tablets, laptopsand desktop computers. flexible, adjustable version
    • 11. Photo by Jeremy Keith, Wikimedia Commons
    • 12. The Old WayMain Website Mobile Website
    • 13. The Old WayMain Website Mobile Website
    • 14. The Old Way = Problems Reduced information on mobile version Two separate websites to update What about other devices?
    • 15. The New Way
    • 16. The New Way
    • 17. Navigation
    • 18. What happens? Logos change size and/or format Menus consolidate or collapse completely Sections reorder, right column often goes to bottom Less important items disappear
    • 19. Examples Boston Globe Emeril’s Restaurant Microsoft Starbucks United Pixel Workers World Wildlife Fund
    • 20. Sign Me Up! Not so fast…If you already have a website, it might be expensive torebuild your website to be responsive. Is it worth it?YES if… You have a significant mobile audience.MAYBE NOT if… You already have a great mobile site, or You have a very small mobile audience.
    • 21. Know Your AudienceGoogle Analyticswww.google.com/analyticsThe best free tool to measure yourwebsite traffic and moreAudience > Mobile > Overview About 25% use this site on mobile.
    • 22. Broken on Mobile If you can’t make it responsive, at least make sure it works. Zooming inexpands menu only, covers content
    • 23. Pros Less expensive to maintain Consistent on all devices Just one URL Improved social sharing Improved SEO (and Google recommends it!)
    • 24. Google recommends using responsive web design because it hasmany good aspects:• Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Googles algorithms assign the indexing properties for the content.• No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your sites user experience.• It saves resources for both your site and Googles crawlers. For responsive web design pages, any Googlebot user agent needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the sites contents and keep it appropriately fresh.See “Building Smartphone-Optimized Websites” by Google.
    • 25. Cons More time consuming to create Involves more testing Not ideal for e-commerce Slower load time Not all devices recognize media queries
    • 26. Responsive Out-of-the-BoxWordpressMany themes are now responsive, including Twenty Twelve,the latest default Wordpress theme.Search for “responsive” at…Self-hosted: wordpress.org/extend/themesWordpress.com: theme.wordpress.com
    • 27. Wordpress: Twenty Twelve Theme
    • 28. Or…Hire a web designer.
    • 29. “I am the designer!How do I do this?”
    • 30. Designing a responsive websiteMethod 1: Mobile First1. Start with minimum amount of content and navigation.2. Focus on core content.3. Add slowly, considering each piece.4. Progressively enhance for larger screen sizes.
    • 31. Designing a responsive websiteMethod 2: Scaling Down1. Start with desktop version.2. Decide what is less important or can be consolidated.3. Reflow or collapse existing content.4. Move non-essentials to bottom or remove.
    • 32. The IngredientsFluid gridsFlexible imagesMedia queries
    • 33. Fluid Grids: Grids That Respond Change container widths host.sonspring.com/yui3_grid Change margins Example: WP 2012 Theme Change layout Disable floats to stack content, as we’ve seen in examples (www.starbucks.com, etc.). Remove/add content...
    • 34. Fluid Grids: Remove/Add ContentHide Content Load ConditionallyUse CSS to hide sections when Use javascript to load contentscreen size is small. only if screen is wider than certain size. Content still loads, even  Improves load time on when hidden. mobile.
    • 35. Fluid Grids: Creating GridsResources for creating grids grids.heroku.com (online) www.960.gs (downloadable) thesquaregrid.com (downloadable)Build a grid for each breakpoint.
    • 36. Fluid Grids: Basic Layout Break
    • 37. Fluid Grids: Example/DownloadProportional Grids builtbyboon.com/blog/proportional-grids
    • 38. Responsive Images Resize images with css One image, resized, no change in file size Serve different versions of images Save on load time www.adaptive-images.comFurther reading: Which Responsive Images Solution ShouldYou Use?
    • 39. HTML Special CharactersHTML entities that can replacesimple graphics, scale nicely ★ ★ ☆ ☆ ♥ ♥ Stars great for ratings: ♣ ♣ ← ← ★★★★☆ ↑ ↑ → → ↓ ↓
    • 40. HTML Special CharactersHTML entities that can replacesimple graphics, scale nicely ★ ★ ♣ ☆ ☆ ♥ ♥ ♣ ♣ ← ← ↑ ↑ → → ↓ ↓
    • 41. Media QueriesComponents of a media query: Media type Query (feature to inspect) Target valuescreen and (max-device-width: 480px)
    • 42. Media QueriesLoad external stylesheets:<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=”smallscreens.css”><link rel="stylesheet" type="text/css" media="screen and (min-device-width: 960px)" href=”largescreens.css”>
    • 43. Media QueriesInclude in CSS as part of @media rule:@media screen and (max-device-width: 480px) { .sidebar { float: none; }}
    • 44. Media QueriesImport at top of css:@import url(”smallscreens.css") screen and (max-device-width:480px);@import url(”largescreens.css") screen and (min-device-width:960px); Import can slow down page load, not recommended.
    • 45. Media Query SupportAll modern browsers support media queries. Chrome 1+ Firefox 3.5+ Internet Explorer 9+ Safari 4+
    • 46. Oh, Internet Explorer…Option #1:Use javascript to help along old browsers ≤ IE8. Respond.js css3-mediaqueries.js Adapt.js
    • 47. Oh, Internet Explorer…Option #2:Use conditional code to load stylesheet for IE less than 9.<!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" type="text/css" href=”IE.css" /><![endif]--> Only solves problem in certain situations.
    • 48. Tools for Building ResponsivelyDownloadable ToolkitsFront-end frameworks for creating responsive websites Foundation: foundation.zurb.com Bootstrap: twitter.github.com/bootstrap
    • 49. Resourceswww.castlebuilder.com/blog/responsive-design• Getting Started• Online & Downloadable Tools Tweet Amélie @castlebuilder• Examples• Further Reading

    ×