information everywhere: flexible content with responsive design
DESCRIPTION
Responsive design "frees our content" to work anywhere, anytime. Adopting responsive design means that technical communicators no longer need to spend time designing and creating deliverables for different devices. Instead, we can focus on developing and delivering quality content – where and when our customers need it. Technically, responsive design is "Responsive WEB design", so we must deliver our help to the web to take advantage of all that RWD has to offer. But this is nothing new for technical communicators, since many of us have been delivering web based help systems for many years, and mobile help for a shorter time. Providing a single responsive output gives us the opportunity to create once and deliver to thousands of devices: new ones, older ones – and ones that don’t even exist yet. In this talk, you’ll learn: What responsive design is. * How responsive design works; a short primer. (Content stacking and the technology behind it —media queries, fluid layouts, flexible images ― so everyone is familiar with the terminology and technologies.) * Five reasons to consider responsive design (besides the flexibility). * Nine “mobile first” content development best practices for technical communicators. (Because when you write/make other changes for mobile, then the content will work well on tablets, the desktop, etc.) * Where to find examples of responsive designs, as well as responsive design resources.TRANSCRIPT
www.doctohelp.com
Nicky BleielSTC Technical Communication SummitMay 19, 2014
brou
ght t
o yo
u by
Information Everywhere: Flexible Content with Responsive Design
www.doctohelp.com
A Little About Me• 19+ years of experience as a technical
communicator.• President, Society for Technical
Communication.• Written and designed documentation for
software products in a variety of industries.• Speaker at STC, WritersUA, tcworld, LavaCon,
and CIDM.• Published in STC Intercom, tcworld magazine,
TechCom Manager, WritersUA website, and the Content Wrangler.
• Learn more about me at nickybleiel.com.
www.doctohelp.com
What We’ll Discuss• The Power of Responsive Design
• Examples
• Why the Time is Right for Responsive
• A Responsive Primer
• Adapting for Responsive
• Responsive Resources
www.doctohelp.com
The Power of Being Responsive
www.doctohelp.com
One for All … and All for OneWith Responsive Design, Tech Comms can create and deliver one responsive output that will work on thousands of devices – new ones, old ones, even ones that don’t exist yet.
www.doctohelp.com
It’s All About Context
Progressive enhancement is a philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions.
Steve Champeon, Web Standards Project
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson http://easy-readers.net/books/adaptive-web-design/
www.doctohelp.com
Going “Beyond the Tri-Pane”
www.doctohelp.com
Responsive Examples
www.doctohelp.com
Responsive Exampleshttp://www.microsoft.com/
• How does it work? http://moz.com/blog/seo-of-responsive-web-design
• http://docs.couchdb.org/en/latest/intro/why.html (TOC)
• http://www.lycos.com/ (menus on top/bottom)
• http://getbootstrap.com/2.3.2/getting-started.html#download-bootstrap (top menu > collapsing menu)
• http://www.westminster-abbey.org/home (menu stays at top and bottom. Includes breadcrumbs) (founded 960!)
• http://forum.camendesign.com/ (uses search as main navigation … includes an index)
• http://showme.doctohelp.com/WidgetExplorer/ (collapses)
• http://showme.doctohelp.com/wpghres1/
www.doctohelp.com
Why the Time is Right for Responsive
www.doctohelp.com
A Few Stats
• 2013 marked the first year mobile devices outsold PCs.
• Web traffic on mobile devices continues to grow.
• Phones account for 17% of web use.
www.doctohelp.com
www.doctohelp.com
www.doctohelp.com
Being Responsive = Better SEO
http://www.smartinsights.com/search-engine-optimisation-seo/mobile-seo/googles-changing-recommendations-on-seo-for-mobile/ http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html http://www.bing.com/blogs/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-desktop-mobile-etc.aspx
Google SEO ranking preferences:1. Responsive web design is Google’s
preferred configuration.2. Sites that use one URL, but dynamically
serves different HTML and CSS depending on the device.
3. Sites that have separate mobile and desktop sites (different URLs).
Bing also prefers responsive content, referring to it as a “one URL per content item” strategy.
www.doctohelp.com
Content Parity – Brad Frost
Mobile users want everything that desktop owners have, they want one web.
In the W3C Mobile Best Practices Spec: Thematic Consistency of Resource Identified by a URI
http://bradfrostweb.com/blog/mobile/content-parity/
www.doctohelp.com http
://s
ervi
ces.
goo
gle.
com
/fh/
file
s/m
isc/
mul
tiscr
eenw
orld
_fin
al.p
df90%
66%
www.doctohelp.com
But there’s more …
• Increase in user task completion
• Continuous Publishing - No longer need to build and maintain “web” and “mobile web” versions
www.doctohelp.com
A (Very) Short Primer on Responsive Design
www.doctohelp.com
Responsive Primer
• Technique for designing web pages that automatically adjust to the device accessing them.
• HTML doesn’t change, the presentation adjusts based on CSS rules specified for the device/browser
• Elements size, shape, and place themselves based on the width of the browser screen.
www.doctohelp.com
Responsive Primer
• No content is lost; the content and page layout adjust by stacking or collapsing.
• Interactions are part of responsive design−Small screens can incorporate touch
interaction, while large screen can interact with mouse/keyboard, as well as touch.
• Core technologies: media queries, fluid layouts, fluid images.
www.doctohelp.com
Media Queries@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
http://stackoverflow.com/questions/16704243/best-widths-for-apply-media-queries-for-a-responsive-website-satisfying-portrait
<link rel="stylesheet" media= "(min-width:320px)" href="css/mobile.css" />
www.doctohelp.com
Fluid Grids
• Use percentages, not pixels.• Grid is divided into a specific number of
columns. • When the device or screen size is changed,
elements will adjust their widths and heights proportionally.
http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/
www.doctohelp.com
www.doctohelp.com
htt
p:/
/de
mo
sth
en
es.
info
/blo
g/5
86
/CS
S-F
luid
-Im
ag
e-T
ech
niq
ue
s-fo
r-R
esp
on
sive
-Site
-De
sig
n
www.doctohelp.com
Adapting for Responsive Design
www.doctohelp.com
Responsive Best Practices
Need to think “Mobile First” – what works well on mobile (smaller) screens will work well on tablets, the desktop, and more.
www.doctohelp.com
Simple > Complex
www.doctohelp.com
On Writing Well
The baseline experience is always in the form of text. No specific technology shapes this layer, instead its success or failure relies entirely on the skills of the copywriter. Clear, well-written copy has universal device support and does wonders to improve the accessibility of the content to users.
From Adaptive Web Design: Crafting Rich Experiences
with Progressive Enhancement by Aaron Gustafson
www.doctohelp.com
UX Perspective
People don’t want to work or think more than they have to.
• They will do the least work to accomplish the task• Progressive disclosure• Affordance
People have limitations• Easy-to-scan• Short blocks of text/short line lengths
People crave information• Learning is dopaminergic
Visual systems• Use grouping• Make fonts large enough
The Psychologist’s View of UX Design: http://uxmag.com/print/32025
www.doctohelp.com
Best Practices for “Mobile First”
• Keep image files small. Large files increase load time; 74% of mobile users will abandon a site that takes more than 5 seconds to load.
• Write concisely. Mobile users are less likely to wade through content (also reduces translation costs).
• Use progressive information disclosure. Show them a little and let them choose …collapsible text, inline text, and other dynamic features are options.
www.doctohelp.com
Best Practices for “Mobile First”
• Improve navigation so users don’t use the device’s ‘back’ button and navigate away from your content.
• Make links easier to use. Consider making some of them buttons. Separate them.
• Streamline your Table of Contents and numbered/bulleted lists.
• Clean up device-specific terminology.
www.doctohelp.com
Questions?Contact information:Nicky BleielComponentOnePittsburgh, [email protected]
Twitter: @DocToHelp
@nickybleiel
www.doctohelp.com
References/Further ReadingAdaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson http://easy-readers.net/books/adaptive-web-design/
Responsive Web Design by Ethan Marcotte http://www.abookapart.com/products/responsive-web-design
Implementing Responsive Design by Tim Kadlec http://www.implementingresponsivedesign.com/
Compilation of Responsive Sites: http://mediaqueri.es/
Creating a Mobile-First Responsive Web Design by Brad Frost http://www.html5rocks.com/en/mobile/responsivedesign/
Responsive Patterns (a collection) http://codepen.io/bradfrost/full/xkcBn
Beyond Squishy: The Principles of Adaptive Design http://bradfrostweb.com/blog/post/beyond-squishy-the-principles-of-adaptive-design/
Twenty Best Responsive Web Design Examples of 2012 (Get with the Future blog): http://socialdriver.com/2012/07/20-best-responsive-websites/
Responsive Design Newsletter: http://responsivedesignweekly.com/
www.doctohelp.com
References/Further ReadingMobile Responsive Design 101: http://www.copyblogger.com/mobile-responsive-design-101/
Common Responsive Web Design Pitfalls: http://www.sitepoint.com/4-common-responsive-web-design-pitfalls/
Unified Device Design by Luke Wroblewski http://static.lukew.com/unified_device_design.png
Google developer guidelines for building mobile optimized websites https://developers.google.com/webmasters/smartphone-sites/
Demonstration of content stacking http://www.jordanm.co.uk/lab/contentchoreography
“A List Apart” Responsive Web Design by Ethan Marcotte http://alistapart.com/article/responsive-web-design
Stats on mobile device web traffic http://www.marketingprofs.com/charts/2013/11010/web-traffic-from-mobile-devices-up-78-year-over-year andhttp://mashable.com/2013/08/20/mobile-web-traffic/
www.doctohelp.com
References/Further ReadingHow Does Responsive Design Ensure Audience Response on Mobile Devices? Business to Community Blog http://www.business2community.com/marketing/responsive-design-ensure-audience-response-mobile-devices-0758181#M5izPOSuPQzBBiK2.99
The Limits of Responsive Design http://www.paulolyslager.com/limits-of-responsive-design/
Why 2013 is the Year of Responsive Web Design http://mashable.com/2012/12/11/responsive-web-design/
What a Surprise: 2013 a Lousy Year for PC Sales http://www.zdnet.com/what-a-surprise-2013-was-a-lousy-year-for-pc-sales-7000025002/
Gartner Analysts on PC Slump (ZDnet) http://www.zdnet.com/gartner-analysts-suspect-pc-slump-has-bottomed-out-despite-q4-decline-7000024993/
How Responsive Design Improves User Task Completion http://www.paulolyslager.com/how-responsive-design-improves-user-task-completion/
The Psychologist’s View of UX Design http://uxmag.com/articles/the-psychologists-view-of-ux-design
Am I Responsive? http://ami.responsivedesign.is/
Building Websites Optimized for all Platforms (Bing Webmaster Blog) http://www.bing.com/blogs/site_blogs/b/webmaster/archive/2012/03/07/building-websites-optimized-for-all-platforms-desktop-mobile-etc.aspx