Flexible Content: An Introduction to Responsive Design

Nicky Bleiel Watson Information Developer, IBM tcworld 2014 Stuttgart, Germany 13 November, 2014

A Little About Me • 19+ years of experience as a technical

communicator.

• Watson Information Developer, IBM

• Immediate Past 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

What We’ll Discuss • The Power of Responsive Design

• Why the Time is Right for Responsive

• A Responsive Primer

• How Technical Communicators Can Optimize for Responsive

We will look at several examples and resources are included.

Definition

Responsive design is a technique for designing web pages that automatically adjust to the device accessing them.

• No content is lost; the content and page layout adjust by stacking or collapsing.

• There is no horizontal scroll bar. Interactions – such as touch – are also components of responsive design.

THE POWER OF BEING RESPONSIVE

One for All … and All for One With Responsive Design, Technical Communicators can create and deliver one output that will work on thousands of devices – new ones, old ones, even ones that don’t exist yet.

Wikipedia.org open on http://ami.responsivedesign.is/

Progressive Enhancement

A web design philosophy aimed at crafting experiences that serve your users by giving them access to content without technological restrictions.

It is all about context.

From Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron

Gustafson http://easy-readers.net/books/adaptive-web-design/

Embraces Kairos

Correct or opportune moment to say or do the appropriate thing. The “supreme moment.”

H/T Karen Schriver

Chapter 12: “What We Know About Expertise in Professional Communication” by Karen Schriver from Past, Present, and Future Contributions of Cognitive Writing Research to Cognitive Psychology edited by Virginia Wise Berninger

RESPONSIVE EXAMPLES

Responsive Examples

http://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 moves to the bottom)

• http://getbootstrap.com/2.3.2/getting-started.html#download-bootstrap (top menu > collapsing menu)

• http://www.gwtproject.org/doc/latest/DevGuide.html# (???)

• http://www.wikipedia.org/ (search moves to top)

• http://www.westminster-abbey.org/home (menu button) (founded 960!)

• http://forum.camendesign.com/ (uses search as main navigation)

See http://mediaqueri.es/ for a compilation of responsive sites.

WHY THE TIME IS RIGHT FOR RESPONSIVE … A FEW STATISTICS

Tablet shipments > PC Shipments in 2015

Gartner predicts that in 2015:

• Traditional PCs and ultramobile devices will combine to ship 317 million units

• Tablet shipments will top 320 million.

Currently there are 285 million tablets worldwide (18 million in Germany)

http://www.forbes.com/sites/louiscolumbus/2014/07/18/gartner-forecasts-tablet-shipments-will-overtake-pcs-in-2015/

http://www.news-sap.com/what-are-ultra-mobiles/

http://tabtimes.com/resources/the-state-of-the-tablet-market

http://www.nielsen.com/us/en/insights/news/2013/how-the-mobile-

consumer-connects-around-the-globe.html

Smartphone Sales

Gartner estimates

smartphones will make

up 66% of global mobile

phone sales this year,

and jump to 88% by

2018.

http://www.forbes.com/sites/louis

columbus/2014/07/18/gartner-

forecasts-tablet-shipments-will-

overtake-pcs-in-2015/

http://mashable.com/2013/11/22/mobile-internet-subscriptions/

60% of Web Traffic is from Mobile Devices

http://smallbiztrends.com/2014/07/online-traffic-report-mobile.html

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

Responsive web design is Google’s recommended configuration.

Bing also prefers responsive content, referring to it as a “one URL per content item” strategy.

• Having a separate mobile (mdot) site not optimal.

Content Parity – Brad Frost

Mobile users want everything that desktop owners have, they want one web.

• Myth that mobile users don’t want to do everything desktop users do.

• OK to optimize the presentation of content as long as the content remains accessible in some way, shape or form.

In the W3C Mobile Best Practices Specification:

Thematic Consistency of Resource Identified by a URI

http://bradfrostweb.com/blog/mobile/content-parity/

htt

p://s

erv

ice

s.g

oo

gle

.com

/fh/file

s/m

isc/m

ultis

cre

en

wo

rld

_fina

l.p

df

Two more reasons …

• Increase in user task completion

• Savings on translation costs, because there is only one site, not a “traditional” site and an “mdot” site.

http://www.paulolyslager.com/how-responsive-design-improves-user-

task-completion/

A (VERY) SHORT PRIMER ON RESPONSIVE DESIGN

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.

Responsive Primer

• 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, flexible images.

Media Queries

• The HTML media attribute is used to specify which CSS should be called based on the width of the screen.

• One responsive site will use multiple style sheets to transform the presentation of the content.

http://stackoverflow.com/questions/16704243/best-widths-for-apply-media-queries-for-a-responsive-website-

satisfying-portrait

Example

@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 */ }

<link rel="stylesheet" media= "(min-width:320px)" href="css/mobile.css" />

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/

htt

p:/

/de

mosth

enes.info

/blo

g/5

86/C

SS

-Flu

id-I

mage

-Te

chniq

ues-f

or-

Responsiv

e-S

ite

-Desig

n

Flexible Images

Use relative units, rather than absolute pixels.

OPTIMIZING FOR RESPONSIVE DESIGN

Simple > Complex

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

Optimizing for Responsive

Need to think “Mobile First” – what works well on mobile (smaller) screens will work well on tablets, the desktop, and more.

“Mobile First” Optimizations

Large image files increase load time; 74% of mobile users will abandon a site that takes more than 5 seconds to load.

Keep image files sizes small, and consider reducing the number of images.

“Mobile First” Optimizations

Complicated diagrams/technical drawings will be hard to read on smaller devices.

Insert “thumbnail” images that must be clicked to display a larger version.

“Mobile First” Optimizations

Large blocks of text are difficult to navigate on smaller devices.

Write concisely. (Added benefit: Reduces translation costs.)

“Mobile First” Optimizations

Large, multicolumn tables are hard to navigate and read.

Reduce the size and number of tables.

Implement options that hide columns on smaller devices.

“Mobile First” Optimizations

Mobile users need a way to access additional information if they need it.

Use progressive information disclosure. Show them a little and let them choose … collapsible text, inline text, and other dynamic features are options.

“Mobile First” Optimizations

Bulleted and numbered lists with multiple levels (“nested” lists) can be hard to navigate on smaller devices.

Limit the levels of bulleted/numbered lists to fewer than three.

“Mobile First” Optimizations

Links that are clustered together in paragraphs are harder to select.

Avoid embedding multiple links in the same paragraph. Consider putting all links at the bottom and space appropriately.

“Mobile First” Optimizations

Users can accidentally navigate away from your content.

Improve content navigation so users don’t use the device’s ‘back’ button.

“Mobile First” Optimizations

Users can be confused by terms such as “click” or “tap” if they don’t apply on their device.

Do not use device-specific terminology.

Contact information: Nicky Bleiel

nableiel@us.ibm.com nickybleiel.com

@nickybleiel

http://MOB8.honestly.de

Your opinion is important to us! Please tell us what you thought of the lecture. We look forward to your feedback via smartphone or tablet under

http://MOB8.honestly.de or scan the QR code

The feedback tool will be available even after the conference!

References/Further Reading

Adaptive 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/

References/Further Reading Mobile 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/

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

“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 and http://mashable.com/2013/08/20/mobile-web-traffic/

References/Further Reading

How 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/

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/

References/Further Reading

Smartphone Users Worldwide Will Total 1.75 Billion in 2014 (eMarketer.com) http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014/1010536

The State of the Tablet Market (tabtimes.com) http://tabtimes.com/resources/the-state-of-the-tablet-market

Mobile Internet Subscriptions to Triple by 2019 (mashable.com) http://mashable.com/2013/11/22/mobile-internet-subscriptions/

Gartner: Tablet shipments to top PCs by 2015 (usatoday.com) http://www.usatoday.com/story/tech/personal/2014/07/07/gartner-tablets-pcs/12285971/

70 Examples Of Modern Responsive Web Design http://mag.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/