Hover is dead, wake up! - Faenza CSSDAY 2015
-
Upload
matteo-guidotto -
Category
Technology
-
view
208 -
download
1
Transcript of Hover is dead, wake up! - Faenza CSSDAY 2015
![Page 1: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/1.jpg)
HOVER IS DEAD
27 March 2015 - @j8matteo – CSSDAY - Faenza
![Page 2: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/2.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
HOVER ME
Rollover to read the Bio
![Page 3: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/3.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
HOVER ME
Matteo Guidotto – Twitter: @j8matteo PM, UX & Frontend Developer, Agile Lover
matteoguidotto.com Co-founder of FEVR – frontendersverona – fevr.it
Co-organizer TEDxVerona
![Page 4: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/4.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
THE 90’s and WOW EFFECT
![Page 5: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/5.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
THE 90’s and WOW EFFECT
![Page 6: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/6.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
THE 90’s and WOW EFFECT
![Page 7: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/7.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
IOS AND FLASH
![Page 8: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/8.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
“A third of all smartphone users in the U.K. —or 11 million adults—
check their phone within five minutes of waking. ”
Source: WSJ via @annadahlstrom
today
![Page 9: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/9.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
The fall of flash
![Page 10: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/10.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
HTML/CSS/JS took OWNERSHIP OF WOW EFFECT
![Page 11: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/11.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
TONS OF Library
![Page 12: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/12.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
css animation
![Page 13: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/13.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
css animation
On hover
![Page 14: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/14.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
![Page 15: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/15.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
Use or abuse?
![Page 16: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/16.jpg)
PHIL HAWKSWORTH JSDAY 2013
EXCESSIVE ENHANCEMENT AND
RESPONSIBLE WEB DESIGN Excessive Enhancement Responsible Web Design
@philhawksworth - jsday2013
![Page 17: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/17.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
ARE WE RESPONSible?
![Page 18: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/18.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
ARE WE RESPONSible?
PROBABLY NOT
![Page 19: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/19.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
How can we be RESPONSible?
![Page 20: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/20.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
Keep calm with your wow effect
![Page 21: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/21.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
DEVice center development
![Page 22: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/22.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
ADD HOVER (animation) EFFECT LATELY
![Page 23: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/23.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
USE CONTEXTUAL EFFECT
![Page 24: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/24.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
Provides touch equivalent for hover. DON'T RELY ON HOVER AS THE ONLY WAY TO PERFORM AN ACTION.
https://msdn.microsoft.com/en-us/library/windows/desktop/dn742468(v=vs.85).aspx
![Page 25: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/25.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
WILL BE A TAP IN MOBILE
Open submenu
http://www.starbucks.com/
![Page 26: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/26.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
magnify
http://arasbm.com/return-of-hover-and-the-web/
DURING THE PRESS
![Page 27: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/27.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
Preview content
http://arasbm.com/return-of-hover-and-the-web/
![Page 28: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/28.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
You can win PRIZE AND get GLORY
![Page 29: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/29.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
You can win PRIZE AND get GLORY
BUT WEB DEVELOPEMENT IS NOT MISS ITALIA OR BIG BROTHER
![Page 30: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/30.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
WEBSITE IS A PRODUCT
HAS BUSINESS OBJECTIVES MUST HAVE BEST EXPERIENCE
![Page 31: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/31.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
DO YOU REALLY WANT SPEND 10 DAYS DOING HOVER?
![Page 32: Hover is dead, wake up! - Faenza CSSDAY 2015](https://reader036.fdocuments.in/reader036/viewer/2022062320/55b6b01cbb61ebe5608b472a/html5/thumbnails/32.jpg)
27 March 2015 - @j8matteo – CSSDAY - Faenza
THANKS!