32
HOVER IS DEAD 27 March 2015 - @j8matteo – CSSDAY - Faenza

Hover is dead, wake up! - Faenza CSSDAY 2015

Embed Size (px)

Citation preview

Page 1: Hover is dead, wake up! - Faenza CSSDAY 2015

HOVER IS DEAD

27 March 2015 - @j8matteo – CSSDAY - Faenza

Page 2: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

HOVER ME

Rollover to read the Bio

Page 3: Hover is dead, wake up! - Faenza CSSDAY 2015

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

27 March 2015 - @j8matteo – CSSDAY - Faenza

THE 90’s and WOW EFFECT

Page 5: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

THE 90’s and WOW EFFECT

Page 6: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

THE 90’s and WOW EFFECT

Page 7: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

IOS AND FLASH

Page 8: Hover is dead, wake up! - Faenza CSSDAY 2015

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

27 March 2015 - @j8matteo – CSSDAY - Faenza

The fall of flash

Page 10: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

HTML/CSS/JS took OWNERSHIP OF WOW EFFECT

Page 11: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

TONS OF Library

Page 12: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

css animation

Page 13: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

css animation

On hover

Page 14: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

Page 15: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

Use or abuse?

Page 16: Hover is dead, wake up! - Faenza CSSDAY 2015

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

27 March 2015 - @j8matteo – CSSDAY - Faenza

ARE WE RESPONSible?

Page 18: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

ARE WE RESPONSible?

PROBABLY NOT

Page 19: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

How can we be RESPONSible?

Page 20: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

Keep calm with your wow effect

Page 21: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

DEVice center development

Page 22: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

ADD HOVER (animation) EFFECT LATELY

Page 23: Hover is dead, wake up! - Faenza CSSDAY 2015

27 March 2015 - @j8matteo – CSSDAY - Faenza

USE CONTEXTUAL EFFECT

Page 24: Hover is dead, wake up! - Faenza CSSDAY 2015

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

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

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

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

27 March 2015 - @j8matteo – CSSDAY - Faenza

You can win PRIZE AND get GLORY

Page 29: Hover is dead, wake up! - Faenza CSSDAY 2015

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

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

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

27 March 2015 - @j8matteo – CSSDAY - Faenza

THANKS!