SlideShare a Scribd company logo
1 of 74
Download to read offline
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 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/
“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
•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
“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
“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/
http://www.pewinternet.org/fact-sheet/mobile/
So Many Screens…
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
Unoptimized experience…
No Plugin Support
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/
Landscape AND Portrait
Fixed Width / Fixed Grid
•Shrunken text and images
•Manually pan through website, or pinch-and-
zoom
•Text / images reach outside containers
Picture and Text Blocks Don’t Fit Onscreen
Notice the “Transportation” Button
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/
“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/
Smart App Banner examples
Fonts and Whitespace
Font sizes may need to
be a little larger.
…maybe not that large, but larger.
•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/
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
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/
•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
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/
•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/
Hover Support
•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?
•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
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
•hideShowPassword - jQuery
https://github.com/cloudfour/hideShowPassword
<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 particular type supported?
http://caniuse.com/
http://www.wufoo.com/html5/
•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
There are other options besides dropdowns
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
•Avoid UI interfering with swiping motions (i.e.
sliders)
I’m trying to adjust the brightness…
But now I get the volume control instead…
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
Color Contrast
Cannot Assume Optimum Lighting
•Not all tablet use at office or desk
•Coffee shop
•Hotel room
•Kitchen
•Outdoors in bright sunlight
“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/
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
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 for desktop / laptop websites too,
not just sites dedicated for tablet or smartphone
users
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 Complexity
•Minimize Repaint and Reflow
•Optimize JavaScript
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
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
Perceived Performance
•Show button / link down state
•May not be visible for small buttons, however
•Show spinner for longer operations
Conclusion
•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
•“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
“You never know where the next order
will come from, the next newsletter
signup, the next word-of-mouth
recommendation or critical review.”
@malekontheweb

More Related Content

More from Andrew Malek

Developers: Why Care About the User? (September 2021)
Developers: Why Care About the User? (September 2021)Developers: Why Care About the User? (September 2021)
Developers: Why Care About the User? (September 2021)Andrew Malek
 
Developers: Why Care About the User? (February 2020)
Developers: Why Care About the User? (February 2020)Developers: Why Care About the User? (February 2020)
Developers: Why Care About the User? (February 2020)Andrew Malek
 
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)Andrew Malek
 
Cognitive Biases and the User Experience
Cognitive Biases and the User ExperienceCognitive Biases and the User Experience
Cognitive Biases and the User ExperienceAndrew Malek
 
Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.Andrew Malek
 
Icons Behaving Badly (Updated)
Icons Behaving Badly (Updated)Icons Behaving Badly (Updated)
Icons Behaving Badly (Updated)Andrew Malek
 
Why Nobody Fills Out My Forms 2 - Electric Boogalo
Why Nobody Fills Out My Forms 2 - Electric BoogaloWhy Nobody Fills Out My Forms 2 - Electric Boogalo
Why Nobody Fills Out My Forms 2 - Electric BoogaloAndrew Malek
 
Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)Andrew Malek
 
Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)Andrew Malek
 
Icons Behaving Badly
Icons Behaving BadlyIcons Behaving Badly
Icons Behaving BadlyAndrew Malek
 
Why Nobody Fills Out My Forms
Why Nobody Fills Out My FormsWhy Nobody Fills Out My Forms
Why Nobody Fills Out My FormsAndrew Malek
 
Responsive Design and Development "Gotchas"
Responsive Design and Development "Gotchas"Responsive Design and Development "Gotchas"
Responsive Design and Development "Gotchas"Andrew Malek
 
When the Developer Must Design
When the Developer Must DesignWhen the Developer Must Design
When the Developer Must DesignAndrew Malek
 

More from Andrew Malek (13)

Developers: Why Care About the User? (September 2021)
Developers: Why Care About the User? (September 2021)Developers: Why Care About the User? (September 2021)
Developers: Why Care About the User? (September 2021)
 
Developers: Why Care About the User? (February 2020)
Developers: Why Care About the User? (February 2020)Developers: Why Care About the User? (February 2020)
Developers: Why Care About the User? (February 2020)
 
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)
 
Cognitive Biases and the User Experience
Cognitive Biases and the User ExperienceCognitive Biases and the User Experience
Cognitive Biases and the User Experience
 
Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.Is This a Button? A Question Your Users Should Never Ask.
Is This a Button? A Question Your Users Should Never Ask.
 
Icons Behaving Badly (Updated)
Icons Behaving Badly (Updated)Icons Behaving Badly (Updated)
Icons Behaving Badly (Updated)
 
Why Nobody Fills Out My Forms 2 - Electric Boogalo
Why Nobody Fills Out My Forms 2 - Electric BoogaloWhy Nobody Fills Out My Forms 2 - Electric Boogalo
Why Nobody Fills Out My Forms 2 - Electric Boogalo
 
Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)Why Nobody Fills Out My Forms (Updated)
Why Nobody Fills Out My Forms (Updated)
 
Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)Developers: Why Care About the User? (2017)
Developers: Why Care About the User? (2017)
 
Icons Behaving Badly
Icons Behaving BadlyIcons Behaving Badly
Icons Behaving Badly
 
Why Nobody Fills Out My Forms
Why Nobody Fills Out My FormsWhy Nobody Fills Out My Forms
Why Nobody Fills Out My Forms
 
Responsive Design and Development "Gotchas"
Responsive Design and Development "Gotchas"Responsive Design and Development "Gotchas"
Responsive Design and Development "Gotchas"
 
When the Developer Must Design
When the Developer Must DesignWhen the Developer Must Design
When the Developer Must Design
 

Recently uploaded

The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 

Recently uploaded (20)

The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVA
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 

Tablets and Hybrids Need Mobile-Optimized Websites, Too!

  • 1. Tablets and Hybrids Need Mobile-Optimized Websites, Too! Andrew Malek @malekontheweb http://malektips.com/
  • 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/
  • 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
  • 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/
  • 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
  • 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.
  • 21.
  • 22. Smart App Banner examples
  • 23.
  • 25.
  • 26.
  • 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/
  • 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.
  • 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/
  • 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
  • 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.
  • 48.
  • 49. There are other options besides dropdowns
  • 51. <label><input type="checkbox" name="checkbox" value="value"> Option1</label>
  • 52.
  • 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
  • 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.
  • 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/
  • 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
  • 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
  • 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