Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoach, ClickStart

1.068 Aufrufe

Veröffentlicht am

Designing for mobile, desktop, and print at the same time might initially seem impossible. In this session, we will
discuss your options to make the impossible possible.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Applying Responsive Web Design (RWD) to UA - WritersUA East 2015, Scott DeLoach, ClickStart

  1. 1. Applying Responsive Web Design (RWD) to UA   Scott DeLoach – scott@clickstart.net  ClickStart – www.clickstart.net  Mobile devices are quickly becoming the primary access method for many types of UA. However, adapting content to a small screen can be extremely challenging. Mobile devices also have their own advantages/disadvantages over desktop PCs that need to be considered. As a final challenge, we are often required to (somehow) single source our content for print. Designing for mobile, desktop, and print at the same time might initially seem impossible. In this session, we will discuss your options to make the impossible possible. Overview  Mobile advantages and disadvantages  RWD opportunities and challenges  Responsive elements - Text - Images - Navigation - Tables  Responsive content Mobile advantages  Modern browsers (and up to date)  Fewer browsers  Technology support (CSS, JS, etc)  Users are more willing to scroll Mobile disadvantages  Small screen  Multiple screen sizes  Portrait and landscape RWD opportunities  One site/target to maintain  One URL for users  It adapts! RWD challenges  Margins and text size  Images  Navigation  Tables
  2. 2. RWD – margins and text size  rems  line-height simplefocus.com/flowtype 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 Overlay tympanus.net/Development/FullscreenOverlayStyles Sticky ethercycle.com/stickymenu Grouped rutgerkooijman.nl/navigation/html
  3. 3. 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 RWC opportunities  Condition tags  Snippets and variables  Skins  RWC media queries and style classes RWC challenges  Terminology  Writing style  Information blocks  Navigation and interactivity RWC - the code /* phone */ @media (max-width: 767px) { body .phone { display: block; }
  4. 4. 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.responsivewebcontent.com. RWC – words <span class="desktop">Click</span><span class="phone tablet">Tap</span> Home. 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>
  5. 5. <li>Phone</li> </ul> RWC – items in a list <ol> <li>A - Desktop</li> <li class="phone">B - Phone</li> <li>C - 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>
  6. 6. <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> Single sourcing for mobile, desktop, and print  print media query  PDFs  online vs printed "print" 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.

×