Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Project-Manage and Implement a Responsive Website

3,560 views

Published on

How to Project-Manage and Implement a Responsive Website
Marcos Corro, Designer & Developer Balboa Park Online Collaborative
Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts

Published in: Technology, Business
  • Be the first to comment

How to Project-Manage and Implement a Responsive Website

  1. 1. How to Project-Manage and Implement a Responsive Website
  2. 2. Statistics - 2.1 billion mobile broadband subscribers - In the US 87% of American adults have cell phones
  3. 3. Statistics - 45% of American adults have a smartphone. 90% use their phone to go online. - 55% use their cell phones to go online. 31% of which go online mostly using their phones rather than a computer.
  4. 4. Statistics - 37% of cell phone owners and 64% of smartphone owners use their phone to get news online. - 74% of mobile visitors will abandon a site if it takes more than 5 seconds to load.
  5. 5. What is responsive design Responsive web design (RWD) is the combination of flexible grids, flexible images and media queries. It allows you to write once, publish everywhere
  6. 6. Key Benefits of Responsive Design - Save time and cost on mobile development - Save time and cost on site management
  7. 7. Key Benefits of Responsive Design - Increase your reach to tablet and mobile audiences - Increase sales
  8. 8. Key Benefits of Responsive Design - Consolidate your analytics and reporting - Increase your visibility in search engines
  9. 9. When to consider a separate Mobile Site? - You find yourself creating duplicate pages for mobile users on the same website
  10. 10. When to consider a separate Mobile Site? - Short pages that look great on mobile phones don’t take advantage of large screens;
  11. 11. When to consider a separate Mobile Site? - You plan to phase out the widescreen layout in favor of a more streamlined user experience.
  12. 12. Project Management 1- Responsive levels the playing field design, content, and development happen at the same time. All producers and stakeholders working in these areas must work together in tandem.
  13. 13. Project Management 2- Make sure you designate a project manager to coordinate collaboration and communication.
  14. 14. Project Management 3- Create a project team ● Meet weekly ● Research the technology together ● Create wireframes together ● Make decisions together
  15. 15. Project Management ● Test and iterate together, make sure everyone has access to mobile devices. It’s called mobile first - not homepage first
  16. 16. Project Management 4. Everyone will want to design for the laptop/desktop focusing on the homepage. Your job is to focus on how it looks on mobile. Mobile first. This takes discipline when you do it for the first time.
  17. 17. Project Management 4. Everyone will want to design for the laptop/desktop focusing on the homepage. Your job is to focus on how it looks on mobile. Mobile first. This takes discipline when you do it for the first time.
  18. 18. Project Management 4. Everyone will want to design for the laptop/desktop focusing on the homepage. Your job is to focus on how it looks on mobile. Mobile first. This takes discipline when you do it for the first time.
  19. 19. Design & Development - The Goal ● Define objectives for your design. What’s the goal of this site? Who’s the hero? Where do you want people to look first?
  20. 20. Design & Development - The Goal ● Define audience and user needs. ● Aim for device-perfect, not pixelperfect
  21. 21. Design & Development - The Grid ● Use a flexible grid. You must use a flexible grid for a responsive design. ● Think in proportions and percentages, not definite widths or heights.
  22. 22. Design & Development - The Grid ● Be prepared to change those proportions depending on the screen width. (addressed using CSS and media-queries)
  23. 23. Design & Development - The Sketch ● Focus on the content, not the container. ● Be loose with your sketches; the purpose is to get ideas out and see how they work together.
  24. 24. Design & Development - The Flow Allow for content to flow in a logical manner as the screen gets bigger/smaller. [e.g., you normally wouldn’t want the header to flow under main content, so you need to set up your columns so as they collapse or expand, the page makes sense from top to bottom as you scroll].
  25. 25. Design & Development - The Reveal Since screen width will be changing, think about what content you may have to hide or remove (or more appropriately to add or enhance) to make the current screen width the best experience and which makes the most sense for that device. This would include things like animation, large video, or background images.
  26. 26. Design & Development - The Face A hallmark of Responsive Design is FLEXIBILITY. This means that not only does the structure need to be flexible, you images, video and type should be flexible as well.
  27. 27. Design & Development - The Face Make sure typography is proportional to the screen it’s on. You can do this using ems and percentages instead of absolute pixel sizes. There are plugins such as FitText.js and Lettering.js that can offer you even finer control of your typography.
  28. 28. Design & Development - The Face Make sure your images will do this as well. A good default is to set the default max-width of an image to be 100% of it’s container and auto height. If you’ re ok with it scaling, use only width:100%. If you have to limit the width, limit the container, not the image. img { max-width: 100%; }
  29. 29. Design & Development - The Face Another alternative is to use the picturefill.js script, which uses the HTML5 data attribute to feed different images to different sizes.
  30. 30. Design & Development - The Face For video, you can use a server-side solution to serve up device-appropriate sizes, or shoot for a median size and use a plugin like FitVids.js to make it responsive. Since YouTube has it pretty much figured out which size video to send based on bandwidths; hosting your videos on there and using FitVids to get them into your site is a great way to go.
  31. 31. Design & Development - Media Queries This is where the magic happens. @media all and (min-width: 500px) {/*css rules here*/} @media screen and (max-width: 800px) {/*css rules here*/} @media screen and (max-width: 50em) {/*css rules here*/}
  32. 32. Design & Development - Media Queries ● W3C: “Media queries extend the functionality of media types by allowing more precise labeling of style sheets. “ ● Be device-agnostic: use ems instead of set pixel widths; Or, start out with pixel widths, and then write for ems to display correctly for the non-conformists.
  33. 33. Design & Development - Media Queries Test, test, test on as many devices as possible! RWD Bookmarklet: http://responsive.victorcoulon.fr/
  34. 34. Design & Development - Breakpoints ● Breakpoints should be determined by content, not just device-width ● Start out small (280-300px) and slowly bring up the browser width and watch as the content re-adjusts. Make your breakpoints accordingly.
  35. 35. Design & Development - Performance ● Minify your scripts and CSS to make page load quicker. If you use a preprocessor like Sass you may need to make extra accommodations for the media-queries [e.g., you can’t use a variable as a breakpoint].
  36. 36. Design & Development - Performance ● Use CSS and web type whenever possible. Google fonts is your friend and has many free, nice looking fonts.
  37. 37. Design & Development - Performance ● Use SVG when you can to speed things up. ● Use icon fonts for unlimited scaling and speed.
  38. 38. Design & Development - Performance ● For byte-size appropriate images, use a server-side solution like Adaptive-Images, or a DOM manipulator like Mobify.js, or a cloud-based service like ReSRC.
  39. 39. Responsive Frameworks Twitter Bootstrap Zurb Foundation Jetstrap Cascade Less 4 (to name but a few) http://bradfrost.github.io/this-is-responsive/resources.html
  40. 40. Responsive Frameworks Framework Pros ● ● ● ● Usually very robust Good for rapid prototyping Bundled plugins work well together Good for inexperienced developers; can get something up quickly
  41. 41. Responsive Frameworks Framework Cons ● ● ● ● You may end up overwriting a lot of css May be more complexity than needed Can be a crutch Can look the generic without a lot of customization
  42. 42. Drupal and Foundation Go to: drupal.org/project/zurb-foundation
  43. 43. Drupal and Foundation Copy gz or tar link:
  44. 44. Drupal and Foundation Install new Theme: yoursite.com/admin/appearance/install
  45. 45. Drupal and Foundation Set as Default; so you can start prototyping
  46. 46. Drupal and Foundation Creating a Subtheme with Drush: The command to do this is simply: drush fst [THEMENAME] [Description ! Optional]
  47. 47. Drupal and Foundation Creating a Subtheme Manually
  48. 48. Drupal and Foundation Creating a Subtheme Manually
  49. 49. Drupal and Foundation Create a media-queries.css file
  50. 50. Drupal and Foundation add the media-queries.css into the info file
  51. 51. Wordpress and Responsive Themes Wordpress conveniently comes prepackaged with a responsive theme called Twenty Thirteen. http://wordpress.org/themes/twentythirteen
  52. 52. Wordpress and Foundation Installing a responsive theme in Wordpress is fairly simple. You can either do it though the Wordpress interface, or manually through FTP.
  53. 53. Wordpress and Foundation—FTP 1) Dowload the Foundation Wordpress theme from https://github. com/drewsymo/Foundation (a quick google search for “foundation wordpress theme” bring this up as the first result.)
  54. 54. Wordpress and Foundation—FTP 2) Unzip the file and place the folder in /wpcontent/themes 3) Login to the WP environment as admin and activate the theme. 4) To customize the theme, you should create a WordPress Child Theme. http://codex.wordpress.org/Child_Themes
  55. 55. Wordpress and Foundation—WordPress To add the theme though WordPress: 1. Log in to the WordPress Administration Panels. 2. Select the Appearance panel, then Themes. 3. Select Install Themes. 4. Use the sub-menu or the Search or Filter options to locate a Theme you would like to use. 5. Click on the Preview link to preview the Theme or the Install link to upload the Theme to your blog. 6. Use the Upload link in the top sub-menu to upload a zipped copy of a Theme that you have previously downloaded to your machine. http://codex.wordpress.org/Using_Themes
  56. 56. Thank You! Marcos Corro, Designer & Developer Balboa Park Online Collaborative Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts

×