I made a comment on Twitter a while back criticizing an example of media-query transitions that has continued to bug me a little bit. Today I ran across an example of why.
There are some really good reasons to transition state changes in web design.
- They offer richness in the UI that until a couple of years ago was mostly found only in the domain of a native desktop or mobile application.
- Transitions provide brain queues to changes that make us feel good about UI.
My beef with a media-query transition is that you only see them if you are playing accordion with your browser window or maybe when you are sticking a window to the right or left edge of the screen in Windows. The latter might be a valid case for their use, but certainly an edge one. Aside from creating a catchy web page that is supposed to be an actual accordion or maybe a bagpipe simulation, you’ve just got no business expecting that something supple should happen when you re-size your browser window. I’m open to being convinced otherwise, but you are going to have to bring a really good argument. The size of your media viewing is pretty much static on anything other than the desktop and if you like reading things in 420w then you should leave your browser that width IMO.
So back to my point. Today I found a great example of a transition that makes perfect sense on a page state change. You can find it on www.99u.com, where a nicely designed header with tasteful whitespace repositions its site branding and menu when vertically scrolling makes the header dissapear.
The logo an menu transition in a short, sweet, meaningful way to give the experience of saved space and brand reinforcement.
I’m sure there is somebody out there who can convince me why my opinion here in flawed. Please hit me up on Twitter as I would love to hear another side to the story.
—— Annnnnd as expected…
OK. Maybe that is the original reason for them to begin with. My psychologist told me that these asynchronous social interactions might be helpful. I’m starting to believe. It still seems a little fluffy. Anybody else?