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.

HTML and Responsive Design

3,320 views

Published on

An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.

Published in: Education
  • Be the first to comment

HTML and Responsive Design

  1. 1. HTML and Responsive Design Why is this so important for users and content producers?
  2. 2. First, any questions? http://bit.ly/html_css_checklist All is explained herein.
  3. 3. Responsive design • Why? • There are many devices (phones, tablets, laptops, desktops, giant TV screens) • Many delivery applications – Not only Firefox, Chrome, Safari, IE, Opera – Also old browser versions that do not support HTML and some CSS techniques • Orientation: vertical or horizontal?
  4. 4. The viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> • width can be specified in pixels; the value device-width detects the width of whatever device the user is using • initial-scale=1 means no zooming will be applied • Not recommended: Adding maximum-scale=1 means the users cannot zoom (this may be bad for some content) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewportmeta-tag/
  5. 5. thelensnola.org
  6. 6. thelensnola.org
  7. 7. Boston Globe
  8. 8. Boston Globe
  9. 9. Boston Globe
  10. 10. The design is a little less successful when we turn the iPhone sideways (landscape mode). Boston Globe
  11. 11. This information graphic (about hockey brain injuries) is much more successful on the iPhone. Boston Globe
  12. 12. You can even zoom in on individual items in the graphic. Boston Globe
  13. 13. Using multiple CSS stylesheets <link rel="stylesheet" media="screen and (maxdevice-width: 900px)" href="css/mobile.css"> <link rel="stylesheet" media="screen and (-webkitdevice-pixel-ratio: 1.5)" href="css/mobile.css"> • Making a separate stylesheet for mobile devices (anything with a smaller screen) is another option. • “The most important task for the mobile.css … is to reset the website width and main content wrapping from the hardcoded centered column to something spreading across the whole mobile screen width.” http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-mediaqueries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-andhtml5-part-5/
  14. 14. Coding flexible images img { max-width: 100%; padding: 10px 20px; } • However, if you enclose the image in a fixed-width wrapper div, the image will not automatically flex this way. • Web designers have to make choices. • They have to know what their choices are. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ Note this article is from 2011. Always check for latest updates to design best practices.
  15. 15. Frameworks • Choosing and learning a framework takes time • It’s well worth it for people who design lots of websites, or if you have to create a new, large website • Frameworks that have responsive design “baked in” can save the designer from reinventing the wheel • http://webexpedition18.com/articles/responsive-cssframeworks/ • http://www.vermilion.com/news/articles/2012/10/22/compa ring-responsive-css-frameworks-bootstrap-foundation-andskeleton
  16. 16. getskeleton.com
  17. 17. getskeleton.com
  18. 18. getskeleton.com
  19. 19. unsemantic.com
  20. 20. “Django is a framework that makes it easy to build big, robust web applications in the programming language Python.”
  21. 21. Tips and best practices to develop responsive websites http://www.catswhocode.com/blog/tips-and-best-practices-todevelop-responsible-websites (This might be the most helpful article for beginners. And it’s short!)
  22. 22. HTML and Responsive Design Presentation by Mindy McAdams [February 2014]

×