Don’t Forget the Little Things
source link: https://soffes.blog/dont-forget-the-little-things
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Don’t Forget the Little Things — Hi, I’m Sam
Don’t Forget the Little Things — Hi, I’m Sam
Hi, I’m Sam
This is my blog. I also have a website thing.
Don’t Forget the Little Things
Posted on April 14, 2012
Tonight I spent an hour on a simple animation. Instead of the UI element simply appearing, it now fades in and fades out. To get this right takes time. You wouldn't believe how much nicer it feels with the simple animation. It feels polished and complete instead of jarring and hacked together.
It's funny how a 0.2 second animation can make something feel a million times nicer
The fade in takes 0.3 seconds, moves the element 100 pixels, and scales from 80% to 100%. The fade out takes 0.25 seconds, moves the 45 pixels, and scales from 100% to 90%. (All of these values are relative to the element's size.) The point being, getting all of this right took awhile. It's a lot of trail and error to get it right. When you get it, it will just feel right.
It's worth the time. Take it. Seriously. Do it. At this point in my project, I just need to get stuff done. If I did this with everything, I'll never ship. The plan is to take the time for more important things and leave less important things for later. I'll spend a week once everything is firmed up and just write little animations that are a fractions of a second. Can't wait.
Unjarring The Responsive Web
Posted on April 9, 2012
Responsive web design is what all the cool kids are up to these days. Basically a "responsive" site uses CSS media queries to change the page based on certain parameters. (This article a good place to start if you're new to the topic.) Usually this is width. The designer can change the appearance of the page based on the width of the browser. This allows the same design to be used on iPhone, iPad, and the desktop with minimal work instead of three different designs.
Most responsive sites are really jarring when they jump between media query sizes. Elements start jumping around and if you were reading something, your spot may or may not still be on the screen. I really wish people would take the time to improve this. It's not hard.
Here's a concrete example. Let's say you have a header on a website and want it to be smaller on mobile. This is easy with the following media query:
© 2006-2022 Sam Soffes
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK