Tablets and Hybrids Need Mobile-Optimized Websites, Too!

Slide 1

Slide 1 text

Tablets and Hybrids Need Mobile-Optimized Websites, Too! Andrew Malek @malekontheweb http://malektips.com/

Slide 2

Slide 2 text

Who Uses Tablets?

Slide 3

Slide 3 text

“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/

Slide 4

Slide 4 text

“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

Slide 5

Slide 5 text

•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

Slide 6

Slide 6 text

“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

Slide 7

Slide 7 text

“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/

Slide 8

Slide 8 text

http://www.pewinternet.org/fact-sheet/mobile/

Slide 9

Slide 9 text

So Many Screens…

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Unoptimized experience…

Slide 12

Slide 12 text

No Plugin Support

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

Landscape AND Portrait

Slide 15

Slide 15 text

Fixed Width / Fixed Grid •Shrunken text and images •Manually pan through website, or pinch-and- zoom •Text / images reach outside containers

Slide 16

Slide 16 text

Picture and Text Blocks Don’t Fit Onscreen

Slide 17

Slide 17 text

Notice the “Transportation” Button

Slide 18

Slide 18 text

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/

Slide 19

Slide 19 text

“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/

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Smart App Banner examples

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Fonts and Whitespace

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Font sizes may need to be a little larger. …maybe not that large, but larger.

Slide 28

Slide 28 text

•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/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 text

•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

Slide 32

Slide 32 text

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/

Slide 33

Slide 33 text

•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/

Slide 34

Slide 34 text

Hover Support

Slide 35

Slide 35 text

•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?

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

•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

Slide 38

Slide 38 text

Pressure.js example - http://pressurejs.com/

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Text Entry

Slide 41

Slide 41 text

Show password option (i.e. eBay)

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

•Other input types – date, email, time, week, etc. •Support not universal – but should degrade to •Is particular type supported? http://caniuse.com/ http://www.wufoo.com/html5/

Slide 46

Slide 46 text

•Toggle auto capitalization •Turn off autocorrect for proper noun input •Reduce number of fields •Don’t abuse dropdowns - http://www.lukew.com/ff/entry.asp?1950

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

There are other options besides dropdowns

Slide 50

Slide 50 text

Touch Targets

Slide 51

Slide 51 text

Option1

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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)

Slide 54

Slide 54 text

I’m trying to adjust the brightness…

Slide 55

Slide 55 text

But now I get the volume control instead…

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Color Contrast

Slide 58

Slide 58 text

Cannot Assume Optimum Lighting •Not all tablet use at office or desk •Coffee shop •Hotel room •Kitchen •Outdoors in bright sunlight

Slide 59

Slide 59 text

“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/

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Color Safe - http://colorsafe.co/

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

•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

Slide 65

Slide 65 text

Performance

Slide 66

Slide 66 text

Generally speaking… •Tablets are slower •Tablets have less RAM •Tablets may be older

Slide 67

Slide 67 text

Obvious Performance Tricks… •Minify / Compress JavaScript •Optimize Images •Reduce Background Tasks •Reduce DOM and CSS Complexity •Minimize Repaint and Reflow •Optimize JavaScript

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Perceived Performance •Show button / link down state •May not be visible for small buttons, however •Show spinner for longer operations

Slide 71

Slide 71 text

Conclusion

Slide 72

Slide 72 text

•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

Slide 73

Slide 73 text

•“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

Slide 74

Slide 74 text

“You never know where the next order will come from, the next newsletter signup, the next word-of-mouth recommendation or critical review.” @malekontheweb