Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart

© 2015 ClickStart – www.clickstart.net

Best Practices for Going Mobile Scott DeLoach – [email protected] ClickStart – www.clickstart.net

In this presentation, I will focus on writing and designing content to be used for desktop, mobile, and print targets. We will discuss using condition tags, variables, snippets, skins, page layouts, master pages, and other features to efficiently develop and maintain content for numerous targets.

Overview Why go mobile? What are the options? How does it change my content? What about print?

Why you should go mobile: user base

source: www.techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-place-in-mobile-apps


Why you should go mobile: usage

source: www.globalwebindex.net/blog/80-of-internet-users-own-a-smartphone


Why you should go mobile: user goals

source: www.slideshare.net/smobile/the-new-multiscreen-world-by-google-14128722

Options for mobile content HTML5 responsive output WebHelp mobile EPUB and MOBI

How going mobile changes design Everything needs to respond to the screen size Proportion: margins and text size Tables Images Navigation

Best practice for going mobile

Use media queries for phones, tablets, desktops, and print


RWD – margins and text size rems line-height www.simplefocus.com/flowtype

RWD – tables Non-scrolling columns

zurb.com/playground/projects/responsive-tables/index.html

Filter rows

codepen.io/pixelchar/full/rfuqK

Show/hide

jsbin.com/apane6/14

Separate tables

css-tricks.com/examples/ResponsiveTables/responsive.php www.filamentgroup.com/examples/rwd-table-patterns gergeo.se/RWD-Table-Patterns/#demo

Table to paragraphs

codepen.io/aarongustafson/full/ucJGv

Horizontal to vertical

codepen.io/JasonAGross/full/rjmyx

RWD – images Fluid Images

demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

Image Maps

mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Future

<picture> <srcset>


RWD – navigation Breadcrumbs

codepen.io/bradfrost/full/dKulf codepen.io/bradfrost/full/DCgax

Footnotes

codepen.io/johndjameson/full/owstE

Grouped

rutgerkooijman.nl/navigation/html

Overlay

tympanus.net/Development/FullscreenOverlayStyles

Sticky

ethercycle.com/stickymenu

How going mobile changes content Mobile first vs going mobile Writing style

Writing style - example 1. Insert>Image 2. Select General 3. Click 4. Select the image and click Open 5. Click OK

Going mobile with Flare Condition tags Variables Snippets Skins Page Layouts Master Pages


Condition tags Use

Excluding or including content in a target

Best practices

Use condition tags to exclude content from print/online targets Do not use condition tags to exclude content from mobile (will not work with HTML5’s

responsive output)

Variables Use

• Reusing text strings • Customizing text strings for different targets

Best practices

Use variables to exclude content from print/online targets Use variables to customize content for targets Do not use variables to customize content for mobile users (will not work with HTML5’s

responsive output)

Snippets Use

Reusing blocks of content

Best practices

Use style classes inside snippets to modify or show/hide content for mobile, desktop, and print See “Responsive Web Content: A CSS-based Approach”

Skins Use

Designing online targets - header (“banner”), toolbar, and navigation pane

Best practices

Use HTML5’s responsive output option Experiment with Flare v11’s skin components to customize mobile designs


Page Layouts Use

Designing print targets: headers, footers, margins, page size, and page orientation

Best practices

Design for major use: online or print Design for interactive PDFs Remember that they are practically ignored by EPUB and MOBI formats

Master Pages Use

Adding common content to topics in online targets

Best practices

Stack elements for mobile sizes Provide back to top link for mobile sizes Size links and buttons for touch Shrink, resize, move, or remove breadcrumb path

Next steps Mobile First JQuery Responsive web content

Recommended books Developing User Assistance for Mobile Apps - Joe Welinske Implementing Responsive Design - Tim Kadlec Letting Go of the Words - Ginny Redish Mobile First - Luke Wroblewski Responsive Web Design - Ethan Marcotte


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 [email protected].