CSS for Touch Devices
•
1 gostou•691 visualizações
Emma Woods (@CodingCockatoo) and James Buchanan from Provoke Solutions, will be sharing their experiences and thoughts on CSS for touch devices. They will go over some solutions to common frustrations such as; hover states, user feedback, zoom, touch keyboards and conflicting gestures. They will also give some helpful hints on how to test for touch device quirks.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (14)
Destaque
Destaque (20)
Semelhante a CSS for Touch Devices
Semelhante a CSS for Touch Devices (20)
Último
Último (20)
CSS for Touch Devices
- 1. PROUDLY BROUGHTTOYOU BY: Css for touch devices James Buchanan Provoke Solutions Wellington Emma woods @CODINGCOCKATOO Provoke Solutions Wellington
- 2. • W hy “A touchscreen is an electronic visual display that the user can control through simple or multi- touch gestures by touching the screen with a special stylus/pen and-or one or more fingers.” - Wikipedia
- 3. HP The earliest commercial touchscreen computer. Microsoft First version of the Surface “PixelSense”. IBM “Simon” The first touch screen phone CERN Developed a transparent touchscreen. Microsoft Released their touch edition of Windows XP. 1973 1983 1993 2002 2007 2007 2014 Microsoft Launched Surface Pro 3 Apple Launched the first IPhone.
- 5. frustrations Hover states Button size Lack of feedback Slow animations Zoom Scrolling Conflicting gestures surveyResults{ } *fist shake *
- 6. Our touch sites are We thi nk ab out responsive a l ot, not so awesome b ut not necessari l y ab out touch .
- 10. Responsive issues Screen resolution Hardware acceleration
- 11. Image resolution
- 12. Image resolution
- 14. Input fields
- 19. zoom
- 21. Zoom on Zoomoff
- 24. Button Size
- 28. From TechEd 2014 talk by Atta Elayyan from LazyWorm.
- 29. From TechEd 2014 talk by Atta Elayyan from LazyWorm.
- 30. From TechEd 2014 talk by Atta Elayyan from LazyWorm.
- 31. Hover
- 36. User input Surface Reaction Upon receiving an input event, the system provides an instantaneous visual confirmation at the point of contact. The core visual mechanism to express this contact is the Touch Ripple. CSS Example: Button
- 37. User input MaterialResponse The material can lift up when touched, indicating an active state. The user can generate new or transform existing material on touch, or directly manipulate sheets of material by dragging or flinging them. CSS Example: Expanding Box Expanding Box (through hover) (this doesn’t work well for touch)
- 38. User input RadialResponse Actions should visually connect to their respective input epicentre. Closer actions occur sooner than more distant ones, creating a ripple of actions (movement occurs from the distance from the epicentre). CSS Example: Input field Rotating Hover Animation (this doesn’t work well for touch)
- 40. From Shotly Windows 8 app
- 41. From TechEd 2014 talk by Atta Elayyan from LazyWorm.
- 43. From TechEd 2014 talk by Atta Elayyan from LazyWorm.
- 44. scrolling
- 49. Map off ( javascript )
- 51. How can we test?When the boss won’t less us buy all of the gadgets.
- 53. Emulator: iOs
- 55. Emulator: VISUAL STUDIO SETTINGS
- 56. EmulatorS
- 57. Remember… 1. Thinking about responsive or mobile sites? Don’t forget about touch. 2. Desktop sized screens are now touch! 3. Touch is not just another thing to test for, you can enhance your work with good touch experiences.
- 58. Venting time* w o l v e r i n e *
- 59. PROUDLY BROUGHTTOYOU BY: Thanks! James Buchanan FED at Provoke Solutions Emma woods @CODINGCOCKATOO FED at Provoke Solutions
Notas do Editor
- In this talk we will invariably talk about UX design. Many of you will touch UX or have an influence over.
- Touch should be a first class citizen alongside a mouse and a keyboard. Go over some solutions to common frustrations such as; hover states, user feedback, zoom, touch keyboards and conflicting gestures. Give some helpful hints on how to test for touch device quirks.
- First talked about in the 60’s. IPhone really made it a household device.
- AUT World Internet Project - http://www.aut.ac.nz/research/research-institutes/icdc/projects/world-internet-project Gartner Says More Than 50 Percent of PCs Purchased for Users Under the Age of 15 Will Have Touchscreens by 2015 However, Fewer Than 10 Percent of PCs Sold to Enterprises in 2015 Will Have Touchscreens. http://www.gartner.com/newsroom/id/1336913 When those kids get to the workforce, the muscle memory will not be to reach for a mouse.
- Even though touch has been around for a while, it won’t become the norm until it becomes something on everyone's work monitor. Emma: Not my experience to get sore arms with a touch desktop monitor. Intel said today that, according to their own tests, 80 percent of PC users prefer touchscreens over other controls when doing everyday tasks such as surfing the Internet. Intel conducts interviews of 220,000 people a year. http://www.neowin.net/news/intel-80-percent-of-pc-users-prefer-touch-screens It is not at enterprise level yet, but those kids will find this normal.
- anz.co.nz Provoke worked on parts of the ANZ existing desktop website, forms and calculators. Plain CSS no LESS or Sass allowed.
- anz.co.nz Separate mobile site. Making it as fun as a form can be. Animated icons. Click through pages instead of dropdowns.
- Image resolution is important – touch devices are ‘new’ = great screens. Hardware acceleration is important – for touch reactions.
- All browsers need it now too…remember desktop monitors are touch.
- Mobile web browsers add 300ms delay. jQuery animation is clunky and slow. Use hardware acceleration + fast click.
- anz.co.nz on IPhone. Numerical keypad pops up. Keyboard input (html 5)
- anz.co.nz: On Windows 8 Surface Pro 3. Didn’t test for this = didn’t work. Keyboard input (html 5)
- Keyboard input (html 5)
- Keyboard input (html 5)
- Zoom – turning off and on. Accessibility issue. Allowing zoom is no2 on the ‘Tips for Touchscreens’ from Microsoft. http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
- provokesolutions.co.nz
- Zoom – turning off and on.
- On Windows 8 and later, IE provides default handling for common touch interactions, including: Panning for scrollable regions Pinch zooming Press-and-hold context menus Text selection Hover (added in IE11) Drag and drop (added in IE11) These features work automatically so that sites and apps have a great touch experience by default. However, you might want to disable them in favour of your own experience. http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
- You can use the touch-action CSS property to control or disable the browser's default behaviour. http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
- More padding around things/size of buttons, check boxes etc.
- anz.co.nz Custom select. Made all areas are clickable except the link.
- Also add padding to links.
- From TechEd 2014 talk by Atta Elayyan from LazyWorm. http://channel9.msdn.com/events/TechEd/NewZealand/2014/WIN210 TradeMe iOS app version. Sea of pins. Couldn’t select the listing.
- From TechEd 2014 talk by Atta Elayyan from LazyWorm. http://channel9.msdn.com/events/TechEd/NewZealand/2014/WIN210 Heat mapping inspiration. Cluster listings which where to close to each other. Wanted the number and the colour to the clusters. Bing map or google map documentation mixed with some maths and back end dev – not necessarily a css issue.
- From TechEd 2014 talk by Atta Elayyan from LazyWorm. http://channel9.msdn.com/events/TechEd/NewZealand/2014/WIN210
- Don't hide content behind a hover function. No1 recommendation from Microsoft on their tips to make sites touch friendly: http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
- Not great.
- Better. Visual Studio Online
- anz.co.nz Perhaps even better? So you could use an on-click JavaScript event to toggle visibility. But that is making things perhaps more complex than they need to be. We see it as more of design issue.
- Touch, voice, mouse and keyboard are all first-class input methods. Responsive interaction builds trust with the user and engages them without being distracting. Visual and motion cues help bridge that gap by immediately acknowledging input and implying direct manipulation. Google Material: http://www.google.com/design/spec/material-design/introduction.html
- Ink splotch idea/pebble. Input tutorial: http://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3
- When a card or separable element is activated, the card should lift to indicate an active state. Surface growth motion should originate from the point of input.
- Note on hover animation: No such thing as “on click”. Active, target, focus does not work. JavaScript has to be added.
- Parallax effect vs toggle.
- Parallax effect vs toggle. From TechEd 2014 talk by Atta Elayyan from LazyWorm. http://channel9.msdn.com/events/TechEd/NewZealand/2014/WIN210
- anz.co.nz
- ANZ.co.nz From TechEd 2014 talk by Atta Elayyan from LazyWorm. http://channel9.msdn.com/events/TechEd/NewZealand/2014/WIN210
- provokesolutions.com
- For smooth moves – don’t use plugins!
- Zoom/Scroll on map
- Zoom – turning off and on. Accessibility issues. Put padding on either side.
- Textarea vs scroll
- The best way to test a website on a mobile device is to load it on a mobile device. Buy, beg, borrow – don’t steal. Go to Dick Smith or Harvey Norman test your site until your unwelcome? Emulators: Better than not testing at all If there is no way for you to get a real device to test on, you can use an emulator. Can be slower than the real device, and they don’t show all the features of the devices. View a touch screen with a touch screen! As long as you have update 3 installed on Visual Studio (windows) 2015 for others. Remember that Visual Studio Express is free. Remember you are only using the browser!
- Also for tablet/desktop sized touch screen.
- Electric Plum plugin for Visual Studio: http://electricplum.com/ Also for ipad.
- Also for larger android tablets. http://blogs.msdn.com/b/visualstudioalm/archive/2014/11/12/introducing-visual-studio-s-emulator-for-android.aspx
- Cool settings for: Accelerometer Location specific app Orientation
- By end of 2016 I think we will be here… All three platforms testing nicely beside each other and able to test through a touch screen.
- Designing for touch and testing gets great results.
- Further References: Statistics: ------------- World Internet Project - Some interesting stats about New Zealand internet usage and comparisons to other countries: http://www.aut.ac.nz/research/research-institutes/icdc/projects/world-internet-project Quotes: ----------- Gartner says "More Than 50 Percent of PCs Purchased for Users Under the Age of 15 Will Have Touchscreens by 2015. However, Fewer Than 10 Percent of PCs Sold to Enterprises in 2015 Will Have Touchscreens." http://www.gartner.com/newsroom/id/1336913 "Intel said today that, according to their own tests, 80 percent of PC users prefer touchscreens over other controls when doing everyday tasks such as surfing the Internet. Intel conducts interviews of 220,000 people a year." http://www.neowin.net/news/intel-80-percent-of-pc-users-prefer-touch-screens CodePen Examples: -------------------------- Surface Reaction Button: http://codepen.io/CodingCockatoo/pen/NPWjgw Expanding Material Box (seems to only work on IE): http://codepen.io/CodingCockatoo/pen/MYWNGo Surface Reaction Input Field: http://codepen.io/CodingCockatoo/pen/gbOmJP Surface Hover Reaction Menu (not great for touch due to hover): http://codepen.io/wifeo/pen/Kxfqr Material Button (not great for touch due to hover): http://codepen.io/wifeo/pen/lbIJB Other Reference Material: ----------------------------------- Atta Elayyan's (LazyWorm) TechEd 2014 talk: http://channel9.msdn.com/events/TechEd/NewZealand/2014/WIN210 Showing the 300ms tap delay: http://www.youtube.com/watch?v=AjUpiwvIa5A Make your sites Touch Ready (Microsoft): http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx Google Material Design: http://www.google.com/design/spec/material-design/introduction.html Visual Studio 2015 Preview of Android Emulator http://blogs.msdn.com/b/visualstudioalm/archive/2014/11/12/introducing-visual-studio-s-emulator-for-android.aspx Electric Plum Emulator for iOS: http://electricplum.com/ How to deal with hover issues: http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/ Touch icons used in the presentation: http://pixelbuddha.net/freebie/touch-gestures-icons Example Websites: ------------------------- anz.co.nz provokesolutions.com Visual Studio Online Bridge WordPress Theme