MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable...
Transcript of MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable...
![Page 1: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/1.jpg)
MULTITOUCH FIREFOXInternship project at Mozilla, Felipe Gomes
Moz Chile 09
![Page 2: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/2.jpg)
Multitouch projectImprove our support for touchscreens
How usable is Firefox on a touchscreen
How consistent
What new things can be done
![Page 3: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/3.jpg)
Multitouch projectVarious sub projects
Make everything scrollable work
Resolve ambiguities
Customizations mockups
Investigate usable sizes in the UI
Multitouch on web pages
![Page 4: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/4.jpg)
Scroll
![Page 5: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/5.jpg)
Scroll PanPhysical movement
More natural
Inertia
Feedback
![Page 6: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/6.jpg)
Scroll PanPan in Firefox - current status
Vertical webpages, horizontal webpages
Drop down boxes, lists, trees
Menus
Tab bar
Scrollbars
![Page 7: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/7.jpg)
MoreResolving ambiguities
Select text
Vertical / Horizontal movement
Drag tabs
Drag elements
![Page 8: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/8.jpg)
GesturesTwo-finger panning
Pinch / Spread for zoom
Two-finger tap
Swipe Left / Right
Rotate
![Page 9: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/9.jpg)
Customization MockupsUI for customizing gestures
How to choose gesture and action
Usable interface for touch
Free-form gestures
![Page 10: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/10.jpg)
![Page 11: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/11.jpg)
![Page 12: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/12.jpg)
![Page 13: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/13.jpg)
![Page 14: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/14.jpg)
![Page 15: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/15.jpg)
UI SizesDefault size of elements made for mouse pointer
very good pixel precision
Guidelines for Finger UIs
diameter of finger: 0.6” to 0.8” (1.6cm to 2.0cm)
pad of finger: 0.4” to 0.55” (1.0cm to 1.4cm)
fingertip: 0.31” to 0.39” (0.8cm to 0.99cm)
![Page 16: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/16.jpg)
UI SizesClose button
Drop down markers
Tab bar
New Tab button
Awesome bar icons
![Page 17: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/17.jpg)
UI SizesDon’t change current theme
CSS pseudo-selector
:-moz-system-metric(touch-enabled)
![Page 18: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/18.jpg)
UI Sizes.tab-close.button:-moz-system-metric(touch-enabled) {
-moz-transform: scale(1.3);
}
.tabs-newtab-button:-moz-system-metric(touch-enabled) {
min-width: 1cm;
}
![Page 19: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/19.jpg)
Multitouch on webpagesMake it available for web pages
Web apps
Provide developers with easier access to multitouch
creativity
![Page 20: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/20.jpg)
Multitouch on webpagesDOM Events
MozTouchDown
MozTouchMove
MozTouchRelease
![Page 21: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/21.jpg)
Multitouch on webpagesOne event for each finger
event.streamId
Pushing discussion for web standards
![Page 22: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/22.jpg)
Multitouch on webpagesDemos
![Page 23: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/23.jpg)
Next goalsCreate more demos
increase awareness and visibility
Advance the API
Make it a standard
Implement on other operating systems
![Page 24: MULTITOUCH FIREFOX - Mozilla · Multitouch project Improve our support for touchscreens How usable is Firefox on a touchscreen How consistent What new things can be done. Multitouch](https://reader034.fdocuments.net/reader034/viewer/2022042804/5f56a678c33fe63ecf36272d/html5/thumbnails/24.jpg)
Thanks!Questions?
felipe.wordpress.com