Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, ClickStart

Responsive Content: A CSS-based Approach
Scott DeLoach – scott@clickstart.net ClickStart – www.clickstart.net
In this session, I will present a CSS-based approach for providing responsive content. This method
can be used with HTML5’s responsive output option to adapt topic content for desktops, tablets,
and phones. We will discuss how to use this approach to show/hide, redesign, and
reword/replace content based on the device. I will share working examples that attendees can
apply to their own projects, and we will explore options for extending this method for complex
situations.
Overview
 Why responsive content is important
 Design challenges and the solution
 Content challenges and the solution
 Responsive content examples
Why mobile?
source: techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-place-in-
mobile-apps

The problems
 Content
 Design
How going mobile changes design
Everything needs respond to screen size
 Text
 Tables
 Images
 Navigational elements
The design solution - responsive web design (RWD)
Ethan Marcotte 2010
Examples
www.bostonglobe.com
www.change.org
www.foodsense.is
How going mobile changes content
Everything needs to respond to screen size
 Terminology
 Writing style
 Information blocks
 Navigation and interactivity
The content solution - responsive web content (RWC)
 RWC media queries and style classes
 display property (plus visibility and height for <li>)
RWC - the code
/* phone */
@media (max-width: 767px) {
body .phone { display: block; }
body span.phone { display: inline; }
body img.phone { display: inline; }
body li.phone { display: list-item; height: auto; visibility: visible; }
body table.phone { display: table; }
body tr.phone { display: table-row; }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1279px) {
body .tablet { display: block; }
body span.tablet { display: inline; }
body img.tablet { display: inline; }
body li.tablet { display: list-item; height: auto; visibility: visible; }
body table.tablet { display: table; }
body tr.tablet { display: table-row; }
}
/* desktop */
@media (min-width: 1280px) {
body .desktop { display: block; }
body span.desktop { display: inline; }
body img.desktop { display: inline; }
body li.desktop { display: list-item; height: auto; visibility: visible; }
body table.desktop { display: table; }
body tr.desktop { display: table-row; }
}
.phone { display: none; }
.tablet { display: none; }
.desktop { display: none; }
li.phone { display: block; height: 0; visibility: hidden; }
li.tablet { display: block; height: 0; visibility: hidden; }
li.desktop { display: block; height: 0; visibility: hidden; }
For the latest version of the code, see www.clickstart.net and www.responsivewebcontent.com
(coming soon).
RWC - words
<span class="desktop">Click</span><span class="phone tablet">Tap</span> Home.
RWC - paragraphs
<p class="desktop">This sentence is for desktops.</p>
<p class="tablet">This sentence is for tablets.</p>
<p class="phone">This sentence is for phones.</p>
RWC - lists
<ul class="desktop">
<li>Desktop</li>
<li>Desktop</li>
<li>Desktop</li>
</ul>
<ul class="tablet">
<li>Tablet</li>
<li>Tablet</li>
<li>Tablet</li>
</ul>
<ul class="phone">

<li>Phone</li>
<li>Phone</li>
<li>Phone</li>
</ul>
RWC - items in a list
<ol>
<li>A - Desktop</li>
<li>B - Desktop</li>
<li class="phone">C - Phone</li>
<li>D - Desktop</li>
</ol>
RWC - images
<p><img src="img_desktop.png" class=”desktop” /></p>
RWC - tables
<table class="phone">
<col />
<col />
<thead>
<tr>
<th>Phone</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>phone</td>
<td>phone</td>
</tr>
<tr>
<td>phone</td>
<td>phone</td>
</tr>
</tbody>
</table>
RWC - rows in a table
<table>
<col />
<col />
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>

<tbody>
<tr class="desktop">
<td>desktop</td>
<td>desktop</td>
</tr>
<tr class="tablet">
<td>tablet</td>
<td>tablet</td>
</tr>
<tr class="phone">
<td>phone</td>
<td>phone</td>
</tr>
</tbody>
</table>
RWC – sample files
See www.clickstart.net and www.responsivecontent.com (coming soon) for sample files.
About the presenter
Scott DeLoach is the Founder of ClickStart, where he provides training and consulting for
MadCap Flare, Adobe Captivate, embedded user assistance, CSS, and HTML5. He has
been developing browser-based help systems since 1997, and he has received four Best
in Show awards for his work from STC.
Scott is a certified Flare and Captivate instructor, and he is the author of MadCap Flare
Developer's Guide, CSS to the Point, HTML5 to the Point, and Word 2013 to the Point. For
more information about Scott's books see www.lulu.com/clickstart.
You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.

Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, ClickStart

Recommended

More Related Content

What's hot (15)

Similar to Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, ClickStart (20)

More from Scott DeLoach (20)

Responsive Content: A CSS-based Approach - MadWorld 2015, Scott DeLoach, ClickStart