Tablets and Hybrids
Need Mobile-Optimized
Websites, Too!
Andrew Malek
@malekontheweb
http://malektips.com/
Who Uses Tablets?
“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 loo...
“North Shore Hospital is launching the country's first
iPad ward.”
“iPads, provided free to the hospital, are being
instal...
•Maximizing the Effectiveness of the iPad for
People with Autism
•“Using Your iPad for Encouraging Communication”
•“Using ...
“Worldwide tablet shipments, inclusive of slates and
detachables, reached 38.7 million in the second
quarter of 2016”
“Gro...
“Tablets may have ushered in the post-PC age, but
the only ones posting a growth in sales are
detachables — the ones that ...
“Here's the iPad's real growth problem: If you
bought one in the last two and a half years, you
have no reason [to] buy an...
“Perhaps this is unintuitive, but Apple’s incredible
build quality coupled with genuine efforts to
update old iPads to the...
Mixpanel - https://mixpanel.com/trends/#report/ipad_models/
Not all Doom and Gloom…
•“10 million units sold in the quarter was far above analysts'
projected sales of 9.2 million unit...
So Many Screens…
Just Use the Desktop Website?
•Tablet resolutions usually >=1024 pixel width
•More room for text & graphics than cell phon...
Unoptimized experience…
No Plugin Support
“In general, Safari on iOS does not support any
third-party plug-ins or features that require access
to the file system.”
...
Desktop / Laptop Websites, Too…
“Microsoft's Windows 10 Edge browser automatically pauses Flash
content not central to a w...
Landscape AND Portrait
Fixed Width / Fixed Grid
•Shrunken text and images
•Manually pan through website, or pinch-and-
zoom
•Text / images reach ...
Picture and Text Blocks Don’t Fit Onscreen
Notice the “Transportation” Button
“Illusion of Completeness”
•User cannot tell there is more to scroll
•Two different tablet orientations to test
- Kim Flah...
Smart App Banner examples
Fonts and Whitespace
“What you don’t want, from a user experience perspective,
is anything jarring or that subconsciously influences a user
to ...
Font sizes may need to
be a little larger.
…maybe not that large, but larger.
•“Avoid horizontally-condensed fonts, especially in
small sizes”
http://ux.stackexchange.com/questions/56125/
•“As a gener...
Consider using device system font in Safari for iOS
body {
font-family: -apple-system, "Arial", sans-serif
}
- Using the S...
•For other devices, call out system font names:
•“Segoe UI” - Surface/Edge
•“Roboto” then “Droid Sans” - Android
-Marcin W...
Hover Support
•Cannot guarantee reliable hover support
•Animation on hover
•Popup text or details on hover
•Is a finger press meant to a...
•onclick="void(0)" with CSS :hover rule?
•Touchstart, touchend, JS and CSS…
•Ex: http://www.pmob.co.uk/temp2/touch-hover.h...
http://www.pmob.co.uk/temp2/touch-hover.html
•Long press works on some devices / browsers to
show alt text – if people know…
•Could recognize a tap as a press / click ...
Pressure.js example - http://pressurejs.com/
Tocca.JS - http://gianlucaguarini.github.io/Tocca.js/
Text Entry
Show password option (i.e. eBay)
Toggle Password JavaScript
•Bootstrap Show Password
https://github.com/wenzhixin/bootstrap-show-
password
•hideShowPasswor...
<input type="number">
<input type="url">
•Other input types – date, email, time, week, etc.
•Support not universal – but should degrade to
<input type="text">
•Is ...
•Toggle auto capitalization
<input type="text" autocapitalize="on/off" ... >
•Turn off autocorrect for proper noun input
<...
Touch Targets
<label><input type="checkbox" name="checkbox" value="value">
Option1</label>
Higher Precision with Mice
•Whitespace separation between touch points to
prevent accidental press of wrong touchpoint
•Av...
How Large Should Touch Points Be?
•“Give tappable controls a hit target of about 44 x 44
points.”
- iOS Human Interface Gu...
Color Contrast
Cannot Assume Optimum Lighting
•Not all tablet use at office or desk
•Coffee shop
•Hotel room
•Kitchen
•Outdoors in bright...
“Imagine trying to read low-contrast text on a
mobile device while walking in bright sun. Even
high-contrast text is hard ...
Increase Color Contrast for Tablets
•Increases legibility – don’t do this
•Focuses user attention
•Color contrast between ...
Color Safe - http://colorsafe.co/
WebAIM - http://webaim.org/resources/contrastchecker/
•Higher color contrast may make website easier to
use for everyone, not just for those with
disabilities…
•Good practice f...
Performance
Generally speaking…
•Tablets are slower
•Tablets have less RAM
•Tablets may be older
Obvious Performance Tricks…
•Minify / Compress JavaScript
•Optimize Images
•Reduce Background Tasks
•Reduce DOM and CSS Co...
Repaint and Reflow
•Sitepoint - 10 Ways to Minimize Reflows and Improve
Performance
https://www.sitepoint.com/10-ways-mini...
JavaScript Optimization
• Google -
https://developers.google.com/speed/articles/optimizing-
javascript
• Cubiq (maker of i...
Perceived Performance
•Show button / link down state
•May not be visible for small buttons, however
•Show spinner for long...
Conclusion
•Avoid plugins
•Landscape and portrait
•Easy-to-read fonts
•Handle hover actions
•Ease text entry
•Mobile-optimized touch ...
•“You’re designing a product for people, and it
doesn’t matter if it’s on Android or iPhone or
Windows Phone.”
-Joey Flynn...
“You never know where the next order
will come from, the next newsletter
signup, the next word-of-mouth
recommendation or ...
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Tablets and Hybrids Need Mobile-Optimized Websites, Too!
Upcoming SlideShare
Loading in …5
×

Tablets and Hybrids Need Mobile-Optimized Websites, Too!

564 views

Published on

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?

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
564
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tablets and Hybrids Need Mobile-Optimized Websites, Too!

  1. 1. Tablets and Hybrids Need Mobile-Optimized Websites, Too! Andrew Malek @malekontheweb http://malektips.com/
  2. 2. Who Uses Tablets?
  3. 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. 4. “North Shore Hospital is launching the country's first iPad ward.” “iPads, provided free to the hospital, are being installed on 28 beds in this general medical ward, helping patients pass the time.” -Lucy Warhurst, Newshub - New Zealand http://www.newshub.co.nz/nznews/nzs-first-ipad- hospital-ward-2016031318
  5. 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. 6. “Worldwide tablet shipments, inclusive of slates and detachables, reached 38.7 million in the second quarter of 2016” “Growth continues to decline with the market receding 12.3% year over year” -IDC Research http://www.idc.com/getdoc.jsp?containerId=prUS416 32416
  7. 7. “Tablets may have ushered in the post-PC age, but the only ones posting a growth in sales are detachables — the ones that are most like PCs.” -PCWorld http://www.pcworld.com/article/3028557/
  8. 8. “Here's the iPad's real growth problem: If you bought one in the last two and a half years, you have no reason [to] buy another one. None whatsoever.” -Brian Barrett, Gizmodo http://gizmodo.com/no-ones-buying-ipads- because-ipads-are-forever-1648615480
  9. 9. “Perhaps this is unintuitive, but Apple’s incredible build quality coupled with genuine efforts to update old iPads to the latest version of iOS has made the decision to purchase a new iPad a difficult one. My old iPads still look, feel and work great.” -Seth Weintraub, 9to5Mac http://9to5mac.com/2015/03/26/ipad-decline/
  10. 10. Mixpanel - https://mixpanel.com/trends/#report/ipad_models/
  11. 11. Not all Doom and Gloom… •“10 million units sold in the quarter was far above analysts' projected sales of 9.2 million units” •“Revenue showed a rare increase, rising 7 percent from a year ago to $4.88 billion” - Roger Cheng, CNET (6 / 26 / 2016) http://www.cnet.com/news/apple-ipad-shows-faint-signs- of-life/
  12. 12. So Many Screens…
  13. 13. Just Use the Desktop Website? •Tablet resolutions usually >=1024 pixel width •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
  14. 14. Unoptimized experience…
  15. 15. No Plugin Support
  16. 16. “In general, Safari on iOS does not support any third-party plug-ins or features that require access to the file system.” -Safari Web Content Guide – Creating Compatible Web Content https://developer.apple.com/library/ios/documentation /AppleApplications/Reference/SafariWebContent/
  17. 17. 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/
  18. 18. Landscape AND Portrait
  19. 19. Fixed Width / Fixed Grid •Shrunken text and images •Manually pan through website, or pinch-and- zoom •Text / images reach outside containers
  20. 20. Picture and Text Blocks Don’t Fit Onscreen
  21. 21. Notice the “Transportation” Button
  22. 22. “Illusion of Completeness” •User cannot tell there is more to scroll •Two different tablet orientations to test - Kim Flaherty, Nielsen Norman Group https://www.nngroup.com/articles/illusion-of- completeness/
  23. 23. Smart App Banner examples
  24. 24. Fonts and Whitespace
  25. 25. “What you don’t want, from a user experience perspective, is anything jarring or that subconsciously influences a user to avoid reading it. Some extreme examples would include Courier or any other monospace font. Slab serifs (block-like serifs) are also particularly notorious for being unreadable outside of headlines.” - John Newman, Axial (digital agency) http://axial.agency/best-and-worst-fonts-to-use-for-mobile- design/
  26. 26. Font sizes may need to be a little larger. …maybe not that large, but larger.
  27. 27. •“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/ •Example: Gill Sans MT vs. Gill Sans MT Condensed
  28. 28. 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/
  29. 29. •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/
  30. 30. Hover Support
  31. 31. •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?
  32. 32. •onclick="void(0)" with CSS :hover rule? •Touchstart, touchend, JS and CSS… •Ex: http://www.pmob.co.uk/temp2/touch-hover.html
  33. 33. http://www.pmob.co.uk/temp2/touch-hover.html
  34. 34. •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
  35. 35. Pressure.js example - http://pressurejs.com/
  36. 36. Tocca.JS - http://gianlucaguarini.github.io/Tocca.js/
  37. 37. Text Entry
  38. 38. Show password option (i.e. eBay)
  39. 39. Toggle Password JavaScript •Bootstrap Show Password https://github.com/wenzhixin/bootstrap-show- password •hideShowPassword - jQuery https://github.com/cloudfour/hideShowPassword
  40. 40. <input type="number">
  41. 41. <input type="url">
  42. 42. •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/
  43. 43. •Toggle auto capitalization <input type="text" autocapitalize="on/off" ... > •Turn off autocorrect for proper noun input <input type="text" autocorrect="off" ... > •Don’t abuse dropdowns - http://www.lukew.com/ff/entry.asp?1950 •Reduce number of fields
  44. 44. Touch Targets
  45. 45. <label><input type="checkbox" name="checkbox" value="value"> Option1</label>
  46. 46. 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)
  47. 47. 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
  48. 48. Color Contrast
  49. 49. Cannot Assume Optimum Lighting •Not all tablet use at office or desk •Coffee shop •Hotel room •Kitchen •Outdoors in bright sunlight
  50. 50. “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/
  51. 51. 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
  52. 52. Color Safe - http://colorsafe.co/
  53. 53. WebAIM - http://webaim.org/resources/contrastchecker/
  54. 54. •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
  55. 55. Performance
  56. 56. Generally speaking… •Tablets are slower •Tablets have less RAM •Tablets may be older
  57. 57. Obvious Performance Tricks… •Minify / Compress JavaScript •Optimize Images •Reduce Background Tasks •Reduce DOM and CSS Complexity •Minimize Repaint and Reflow •Optimize JavaScript
  58. 58. 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
  59. 59. 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
  60. 60. Perceived Performance •Show button / link down state •May not be visible for small buttons, however •Show spinner for longer operations
  61. 61. Conclusion
  62. 62. •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
  63. 63. •“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
  64. 64. “You never know where the next order will come from, the next newsletter signup, the next word-of-mouth recommendation or critical review.” @malekontheweb

×