Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart
0 likes833 views
The document outlines best practices for adapting content for mobile, desktop, and print formats, emphasizing the need for responsive design techniques like media queries, condition tags, and variables. It highlights the shift in user behavior towards mobile usage and provides guidance on structuring content for various platforms while maintaining usability and design integrity. Additionally, it includes the author's background and resources for further learning on mobile content development.
Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart
- 1. © 2015 ClickStart – www.clickstart.net Best Practices for Going Mobile Scott DeLoach – scott@clickstart.net 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
- 2. © 2015 ClickStart – www.clickstart.net Why you should go mobile: usage source: www.globalwebindex.net/blog/80-of-internet-users-own-a-smartphone
- 3. © 2015 ClickStart – www.clickstart.net 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
- 4. © 2015 ClickStart – www.clickstart.net 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>
- 5. © 2015 ClickStart – www.clickstart.net 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
- 6. © 2015 ClickStart – www.clickstart.net 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
- 7. © 2015 ClickStart – www.clickstart.net 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
- 8. © 2015 ClickStart – www.clickstart.net 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.