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]