Upload
mindy-mcadams
View
1.682
Download
4
Embed Size (px)
DESCRIPTION
An introduction to responsive design and Web frameworks -- for journalism students. Shows various examples. Includes links to resources. Updated February 2014.
Citation preview
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 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?
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-viewport-meta-tag/
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
<link rel="stylesheet" media="screen and (max-device-width: 900px)" href="css/mobile.css"><link rel="stylesheet" media="screen and (-webkit-device-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.”
Using multiple CSS stylesheets
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/
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.
Coding flexible images
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.
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-css-framewo
rks/• http://www.vermilion.com/news/articles/2012/10/22/compa
ring-responsive-css-frameworks-bootstrap-foundation-and-skeleton
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-to-develop-responsible-websites
(This might be the most helpful article for beginners.
And it’s short!)
HTML and Responsive Design
Presentation by Mindy McAdams[February 2014]