Hovers and Sprite Sheets and .js, Oh My! (week 8)

The project we’re working on now has had a longer timeline. I’ve been using that as an excuse to integrate some things we’ve learned about, but I haven’t yet had a chance to apply. I got to put together a sprite sheet for the social icons, including hover states, so that the user would only have 1 file to download for 4 images. I put transitions on my hovers, and tweaked them so they would be the right mix of delightful and subtle. I dappled in keyframes and animation for subtle effects on the company’s tagline. I’m just now implementing the javascript so that as you scroll past the header, it collapses and becomes fixed to the top. This is the first project where I integrated what I learned this week about file compression and responsible web design. We learned tools for compressing images and some guidelines on things we can do for responsive web design that respects peoples data usage. We also covered an awesome technique, put forward by the Responsive Images Group, that allows you to include photos for different screen sizes and resolutions. Then the user only downloads the image that fits their screen size and resolution. This is awesome because it allows you to do editorial crops on your images, and users only download the bytes they need. That’s all been this week!

We’ve also seen two different styles of agencies. Last week we visited a larger (30 person) web shop, where everybody had a very specialized role. Today we visited a 4 person shop. Their focus is on smaller businesses and non-profits, so they don’t have plans to grow in number unless it’s to set up separate branches in other cities. By keeping the staff to 6 or less (their goal numbers), they’re able to keep expenses down. Each person is more of a generalist there. I like the idea of that, because I like the idea of being full-stack. I know it’s hard to be great at everything, but I feel the pull of expanding my knowledge base. Time to get back to coding!