Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tablets and Hybrids Need Mobile-Optimized Websites, Too!

Tablets and Hybrids Need Mobile-Optimized Websites, Too!

It takes extra work to deliver a truly responsive website. Since larger tablets and hybrids such as iPad Pros and Windows Surface devices can fit the full size of a standard laptop/desktop website, a tempting thought is to deliver to them the exact same experience. Why spend extra effort providing different navigation or content since their screen resolutions equal, or exceed, that of many monitors?

D3e97d0de2acd41a96bbdb7cf15ea860?s=128

Andrew Malek

March 11, 2018
Tweet

Transcript

  1. Tablets and Hybrids Need Mobile-Optimized Websites, Too! Andrew Malek @malekontheweb

    http://malektips.com/
  2. Who Uses Tablets?

  3. “As a real estate agent, I am expected to have

    a lot of information in my head, and I do but I have a constant need to look things up, especially when I am out with clients. The screen on my phone just isn’t big enough to poke through tax records and other information on websites that are still not optimized for mobile devices.” - Teresa Boardman, Inman http://www.inman.com/2015/05/01/ipads-are-5-years-old- heres-how-i-learned-to-use-mine-for-real-estate/
  4. “We needed to connect mothers to their babies’ care when

    they couldn’t physically be there. This technology proved the best solution,” Caceres said. “When doctors and nurses are treating a newborn in the NICU, mom now can be right there asking questions and getting updates, even if she’s on a different floor.” - https://www.cedars-sinai.edu/About-Us/HH-Landing- Pages/iPads-Help-New-Moms-Connect-With-Their-Infants- in-the-Neonatal-Intensive-Care-Unit.aspx
  5. •Maximizing the Effectiveness of the iPad for People with Autism

    •“Using Your iPad for Encouraging Communication” •“Using Your iPad for Daily Activities” •“Using Your iPad as a Reward” -Autism Speaks https://www.autismspeaks.org/family- services/technology/maximizing-use-ipad
  6. “The fourth quarter of 2016 (4Q16) marked the ninth consecutive

    quarter that tablet shipments have declined.” Vendors “shipped 52.9 million tablets in the fourth quarter, which was a decline of 20.1% from the same quarter one year ago.” - IDC Research http://www.idc.com/getdoc.jsp?containerId=prUS42272117
  7. “The iPad 2 is still in use today,” IDC Senior

    Analyst Jitesh Ubrani tells TechCrunch. “The [original] iPad Minis and Air are all still in use today. They were being supported by Apple until very recently. People have been hanging onto these devices and they’re finding that they work just as well as they did when they were released.” - Brian Heater, TechCrunch https://techcrunch.com/2017/03/21/what-happened-to- tablet-sales/
  8. http://www.pewinternet.org/fact-sheet/mobile/

  9. So Many Screens…

  10. Just Use the Desktop Website? •Tablet resolutions usually >=1024 pixel

    width (with a catch…) •More room for text & graphics than cell phones; sites designed for those may result in too much whitespace on tablets •Reduce development time – concentrate on desktop/laptop and cell phone users
  11. Unoptimized experience…

  12. No Plugin Support

  13. Desktop / Laptop Websites, Too… “Microsoft's Windows 10 Edge browser

    automatically pauses Flash content not central to a webpage. Google's Chrome browser will block Flash on virtually all websites. And Mozilla's Firefox blocks any old and potentially unsecure version of Flash and offers a "click to play" option that requires you to manually activate Flash should you need it.” - Lance Whitney, CNET http://www.cnet.com/news/apple-to-neutralize-adobe-flash-by-default- in-next-version-of-safari/
  14. Landscape AND Portrait

  15. Fixed Width / Fixed Grid •Shrunken text and images •Manually

    pan through website, or pinch-and- zoom •Text / images reach outside containers
  16. Picture and Text Blocks Don’t Fit Onscreen

  17. Notice the “Transportation” Button

  18. Responsive Grids •Unsemantic http://unsemantic.com/ •Pure.css, supporting regular and responsive grids

    https://purecss.io/ •Bootstrap framework, supporting a 12-column grid system (columns can stack on tablets and below) http://getbootstrap.com/
  19. “Illusion of Completeness” •User cannot tell there is more to

    scroll •Often due to whitespace between elements (but whitespace is good?) •Two different tablet orientations to test - Kim Flaherty, Nielsen Norman Group https://www.nngroup.com/articles/illusion-of- completeness/
  20. None
  21. None
  22. Smart App Banner examples

  23. None
  24. Fonts and Whitespace

  25. None
  26. None
  27. Font sizes may need to be a little larger. …maybe

    not that large, but larger.
  28. •Example: Gill Sans MT vs. Gill Sans MT Condensed •“Avoid

    horizontally-condensed fonts, especially in small sizes” http://ux.stackexchange.com/questions/56125/ •“As a general rule, condensed fonts do not lend themselves to readability.” http://tympanus.net/codrops/2012/03/20/conde nsed-fonts-the-good-the-bad-the-ugly/
  29. The Serif vs. Sans Serif Debate “Letterforms that are too

    intricate and thin are not only hard to read, especially for those with dyslexia or visual disabilities but also tend to break down at smaller sizes… To avoid this problem, many designers have opted to use sans-serif fonts… The simple, straightforward letterforms of sans-serifs tend to scale better and make for a more readable presentation…” http://www.creativebloq.com/web-design/how-choose-right-fonts- small-screens-91516966
  30. The Serif vs. Sans Serif Debate “While the average reading

    speed was 9% faster for the group that read the sans serif passage, that difference was not statistically significant.” “The only notable difference between the two groups was that the serif group complained about the text twice as often as the sans serif group.“ - Hannah Alvarez https://www.usertesting.com/blog/2014/08/06/choosing-the-right- font-a-guide-to-typography-and-user-experience/
  31. •1 Ill ocean (Bauhaus 93) •1 Ill ocean (Rockwell) •1

    Ill ocean (Gill Sans® Monotype) •1 Ill ocean (Source Sans Pro) - ‘5 Faces for UI Design’ - Dan Eden http://typecast.com/blog/type-on-screen-5-faces-for- ui-design
  32. Consider using device system font in Safari for iOS body

    { font-family: -apple-system, "Arial", sans-serif } - Using the System Font in Web Content https://webkit.org/blog/3709/using-the-system- font-in-web-content/
  33. •For other devices, call out system font names: •“Segoe UI”

    - Surface/Edge •“Roboto” then “Droid Sans” - Android -Marcin Wichary, Smashing Magazine https://www.smashingmagazine.com/2015/11/usi ng-system-ui-fonts-practical-guide/
  34. Hover Support

  35. •Cannot guarantee reliable hover support •Animation on hover? •Popup text

    or details on hover? •Is a finger press meant to activate the hover event, or the click event?
  36. None
  37. •Long press works on some devices / browsers to show

    alt text – if people know… •Could recognize a tap as a press / click and a long press to show “hover” details •Pressure.js to perform other actions on long press or support Apple’s Force Touch / 3D Touch
  38. Pressure.js example - http://pressurejs.com/

  39. Tocca.JS - http://gianlucaguarini.github.io/Tocca.js/

  40. Text Entry

  41. Show password option (i.e. eBay)

  42. Toggle Password JavaScript •Bootstrap Show Password https://github.com/wenzhixin/bootstrap-show- password •hideShowPassword -

    jQuery https://github.com/cloudfour/hideShowPassword
  43. <input type="number">

  44. <input type="url">

  45. •Other input types – date, email, time, week, etc. •Support

    not universal – but should degrade to <input type="text"> •Is particular type supported? http://caniuse.com/ http://www.wufoo.com/html5/
  46. •Toggle auto capitalization <input type="text" autocapitalize="on/off" ... > •Turn off

    autocorrect for proper noun input <input type="text" autocorrect="off" ... > •Reduce number of fields •Don’t abuse dropdowns - http://www.lukew.com/ff/entry.asp?1950
  47. None
  48. None
  49. There are other options besides dropdowns

  50. Touch Targets

  51. <label><input type="checkbox" name="checkbox" value="value"> Option1</label>

  52. None
  53. Higher Precision with Mice •Whitespace separation between touch points to

    prevent accidental press of wrong touchpoint •Avoid UI interfering with swiping motions (i.e. sliders)
  54. I’m trying to adjust the brightness…

  55. But now I get the volume control instead…

  56. How Large Should Touch Points Be? •“Give tappable controls a

    hit target of about 44 x 44 points.” - iOS Human Interface Guidelines •“[T]ouch targets should be at least 48 x 48 dp. In most cases, there should be 8dp or more space between them.” - Google Material Design guidelines
  57. Color Contrast

  58. Cannot Assume Optimum Lighting •Not all tablet use at office

    or desk •Coffee shop •Hotel room •Kitchen •Outdoors in bright sunlight
  59. “Imagine trying to read low-contrast text on a mobile device

    while walking in bright sun. Even high-contrast text is hard to read when there is glare, but low-contrast text is nearly impossible.” -Katie Sherwin, Nielsen Norman Group https://www.nngroup.com/articles/low-contrast/
  60. None
  61. Increase Color Contrast for Tablets •Increases legibility – don’t do

    this •Focuses user attention •Color contrast between pressable and non- pressable areas to determine what is a button Popup
  62. Color Safe - http://colorsafe.co/

  63. WebAIM - http://webaim.org/resources/contrastchecker/

  64. •Higher color contrast may make website easier to use for

    everyone, not just for those with disabilities… •Good practice for desktop / laptop websites too, not just sites dedicated for tablet or smartphone users
  65. Performance

  66. Generally speaking… •Tablets are slower •Tablets have less RAM •Tablets

    may be older
  67. Obvious Performance Tricks… •Minify / Compress JavaScript •Optimize Images •Reduce

    Background Tasks •Reduce DOM and CSS Complexity •Minimize Repaint and Reflow •Optimize JavaScript
  68. Repaint and Reflow •Sitepoint - 10 Ways to Minimize Reflows

    and Improve Performance https://www.sitepoint.com/10-ways-minimize- reflows-improve-performance/ •Google PageSpeed - Minimizing Browser Reflow https://developers.google.com/speed/articles/reflow
  69. JavaScript Optimization • Google - https://developers.google.com/speed/articles/optimizing- javascript • Cubiq (maker

    of iScroll component) – Performance tricks “First of all. Don’t believe “performance tricks” posts. Yes, including this one.” http://cubiq.org/performance-tricks-for-mobile-web- development
  70. Perceived Performance •Show button / link down state •May not

    be visible for small buttons, however •Show spinner for longer operations
  71. Conclusion

  72. •Avoid plugins •Landscape and portrait •Easy-to-read fonts •Handle hover actions

    •Ease text entry •Mobile-optimized touch targets •High color contrast •Focus on performance
  73. •“You’re designing a product for people, and it doesn’t matter

    if it’s on Android or iPhone or Windows Phone.” -Joey Flynn, former product designer, Facebook
  74. “You never know where the next order will come from,

    the next newsletter signup, the next word-of-mouth recommendation or critical review.” @malekontheweb