Your SlideShare is downloading. ×
0
HTML and Responsive Design
Why is this so important
for users and content producers?
First, any questions?

http://bit.ly/html_css_checklist
All is explained herein.
Responsive design
• Why?
• There are many devices (phones, tablets,
laptops, desktops, giant TV screens)
• Many delivery a...
The viewport meta tag
<meta name="viewport"
content="width=device-width,
initial-scale=1">
• width can be specified in pix...
thelensnola.org
thelensnola.org
Boston Globe
Boston Globe
Boston Globe
The design is a little less successful
when we turn the iPhone sideways
(landscape mode).

Boston Globe
This information graphic (about
hockey brain injuries) is much more
successful on the iPhone.

Boston Globe
You can even zoom in on individual items
in the graphic.

Boston Globe
Using multiple CSS stylesheets
<link rel="stylesheet" media="screen and (maxdevice-width: 900px)" href="css/mobile.css">
<...
Coding flexible images
img { max-width: 100%; padding: 10px 20px; }

• However, if you enclose the image in a fixed-width ...
Frameworks
• Choosing and learning a framework takes time
• It’s well worth it for people who design lots of websites, or ...
getskeleton.com
getskeleton.com
getskeleton.com
unsemantic.com
“Django is a framework that makes it easy to build big, robust web
applications in the programming language Python.”
Tips and best practices to develop
responsive websites
http://www.catswhocode.com/blog/tips-and-best-practices-todevelop-r...
HTML and Responsive Design
Presentation by Mindy McAdams
[February 2014]
HTML and Responsive Design
HTML and Responsive Design
HTML and Responsive Design
HTML and Responsive Design
HTML and Responsive Design
HTML and Responsive Design
HTML and Responsive Design
Upcoming SlideShare
Loading in...5
×

HTML and Responsive Design

1,808

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
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,808
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Lecture by Mindy McAdams, University of Florida, February 2013.Updated: February 2014
  • Correctly formatted HEAD for an HTML5 document.
  • Reasons why it is important to understand what responsive design is and what it does.
  • See http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/And http://www.quirksmode.org/mobile/viewports.html
  • From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  • They look the same in a normal Web browser on a laptop computer … From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  • The same two pages, viewed in Safari on an iPhone 5. From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  • This is the result of the viewport meta tag, used intelligently. From http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
  • “The Lens” is anonline-only nonprofit news site coming from New Orleans. It uses responsive design. http://thelensnola.org/
  • The same document, viewed on Chrome on a MacBook. http://thelensnola.org/
  • The Boston Globe recently launched with a new responsive design. Page One.http://bostonglobe.com/
  • The Boston Globe recently launched with a new responsive design. Article page.http://bostonglobe.com/
  • The same two pages, viewed in Safari on an iPhone 3GS. Page One, left. Article page, right. http://bostonglobe.com/
  • The design is a little less successful when we turn the iPhone sideways (landscape mode).http://bostonglobe.com/
  • The design is more successful here (portrait vs. landscape mode). http://bostonglobe.com/
  • You can even zoom in on the individual items in the graphic, on the phone screen. http://bostonglobe.com/
  • This seems to require a lot more work – viewport is probably the superior option. See http://opensourcehacker.com/2012/01/09/including-mobile-specific-css-with-css3-media-queries-setting-mobile-browser-viewport-mobilizing-websites-with-responsive-design-and-html5-part-5/
  • Flexible images
  • Flexible images
  • Being a professional means researching what the best practices are – now. See http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
  • http://webexpedition18.com/articles/responsive-css-frameworks/http://www.vermilion.com/news/articles/2012/10/22/comparing-responsive-css-frameworks-bootstrap-foundation-and-skeleton
  • Skeleton: One example of a framework
  • Skeleton: One example of a framework
  • Skeleton: One example of a framework
  • Unsemantic - a fluid grid system - successor to the 960 Grid System. The 960 Grid was a very popular framework for several years. http://unsemantic.com/
  • The 960 Grid System. Not responsive? http://960.gs/demo_24_col.html
  • Django is a Web framework used by some news operations. https://www.djangoproject.com/ QUOTE FROM:http://skillcrush.com/2012/09/14/django/
  • This might be the most helpful article for beginners.
  • CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida, February 2014.
  • Transcript of "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]
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×