AmberWeinberg.com

CSS3 Animated Buttons

2012-02-03T15:14:56Z

Today I was tasked with creating some wacky CSS3 animated buttons. I started out by looking at one or two tutorials before I was able to come up with something of my own.

The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers. I split the animated parts separately and placed them into spans:

These are styled and formatting quite normally:

#btnVideos .btnSellers, #btnVideos .btnBuyers { background: url('images/btnSellers.jpg') no-repeat; float: left; height: 92px; margin-top: 80px; position: relative; width: 229px; }
#btnVideos span { display: block; position: absolute; }
#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px;  top: -26px; width: 102px; }
#btnVideos a:hover .monitor { top: -36px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; top: -12px; width: 51px; }
#btnVideos .play:active { background-position: bottom; }
 
#btnVideos .btnSellers:hover { background-position: left -91px; }
#btnVideos .btnSellers:active { background-position: left -183px; }
 
#btnVideos .btnBuyers { background-image: url('images/btnBuyers.jpg'); margin-top: 54px; }
#btnVideos .btnBuyers:hover { background-position: left -92px; }
#btnVideos .btnBuyers:active { background-position: 1px -184px; }
#btnVideos .btnBuyers .monitor { background: url('images/iconBuyers.jpg') no-repeat; }

Adding the animation in was really very easy. First, we needed to tell the buttons that we wanted to animate them eventually. You’ll put these in your normal states:

#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; top: -26px; width: 102px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; top: -12px; width: 51px; }

As you can see, I’m using different transition easing – a linear and an ease-in-out. There’s no hard rule for which to use, just experiment until you get an effect you like.

To animate the play button, all we had to do was give it a 360 degree rotate:

#btnVideos a:hover .play { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

To pull the monitor graphic up was even easier, I just adjusted the top value:

#btnVideos a:hover .monitor { top: -36px; }

Definitely much quicker and cleaner than jQuery!

You can see a demo of this here.

January’s 12412: Researching LESS & SASS

2012-01-31T10:57:05Z

My first 12412 project was to research and learn about SASS. After the recommendation from several people, I also decided to check into LESS. I’d been hearing a lot about the two techniques and was quite skeptical – in fact it seems I’m often skeptical of new things out on the web. Most frameworks, shims and other “add-on”s are only a passing faze and tend to do more harm than good – and so with some trepidations I jumped in.

What is SASS & LESS?

Both SASS & LESS are CSS preprocessors, basically they’re created to help you code CSS quicker by allowing the use of basic programming principles. Both allow you to use variables, mixins, nested elements, functions and operators.

You basically put your CSS into a special file, and then when finished, your CSS is run through the preprocessor and it kicks out “normal” CSS. Huh.

I found LESS to be a lot easier to understand and install, although both of them worked pretty much the same way. You’re able to create variables within your CSS so you can reuse certain elements (for example, a hex code), and if it needs changing, you only have to do it in one place. Here’s where my inner-awesome-developer-sense kicks in. You can pretty much already do this with a basic class.

Another major feature in both SASS and LESS is the use of nesting, where you can “save” on repeating code by indenting elements instead of having to retype them, for example, if you indented p {} underneath an id of #header, then the CSS that’s printed out is actually #header p {}

While this seems pretty cool at first, I can easily see this as becoming cumbersome and crazy really quickly. When you’re not paying attention to what’s being outputted, your’re more likely to be lax in your coding.

Important Questions

I had several important questions before and after I read up on the technologies, and most of them really weren’t answered by any of the articles I read:

What happens if another developer needs to edit the CSS and doesn’t know or realize a preprocessor is being used? How do you sync the two?
When no longer writing CSS yourself, how do you control the structure and organization of the code? How do you ensure you’re optimizing it correctly?
What happens if JS is down?
Does it work with one line CSS?

All in all, I don’t think I’ll be using either SASS or LESS. Installation time, upkeep and the fact that it ruins the simplicity of CSS will keep me away. If you’re a developer who’s spent a lot of time optimizing your code and really learning the in’s of CSS (not just top level stuff), then you’ll find this pretty useless, as you already can quickly do the type of code it spits out.

I’m also worried on our recent reliance on Javascript and the trend of forcing languages and browsers to do something they’re not meant to do. It wasn’t even a year ago that everyone was worried about best practices and making sure we didn’t rely on Javascript for anything but the beauty layer. Now this is one more thing that can break.

Some of the features, like mixins and operators actually made the code a lot more convoluted an jumbled, and seemed to take a lot more code than if you were just to type it out correctly in the first place. I also don’t see the point of operators – CSS isn’t a programming language and you can’t dynamically update styles so why not just type in the correct number in the first place?

Final Thoughts

Perhaps I’m wrong and you disagree – maybe you think SASS or LESS is the greatest thing since sliced bread. It’s just not for me. I would love your thoughts on it though!

The (Dis)Advantages of Working From Home

2012-01-25T15:13:35Z

Being a freelancer means you often have complete freedom on where to work. However, we tend to stay at home and work from our beds, dining room tables, a corner in our room, or if we’re lucky enough, a whole room dedicated as an office. What we mostly do not do, is leave our home to work in a separate office or co-working space.

Working from home comes with several advantages after all – no overhead, free range of the kitchen, no dress code and the ability to sleep as late as we want and stroll from the bedroom to our computer.

However, there are also several disadvantages we should be aware of. Distractions from family, children or pets being the biggest issue we come across. Also, walking two feet from our bedroom to our office means we don’t get the exercise we should – and we’re increasingly becoming an unhealthy industry. It also means you lead a distinctly lonely work day - and without a boss breathing down your neck you’re more apt to goof off on the internet.

Even with all of these disadvantages – I still wouldn’t trade it for any other job in the world, nor would I bother with paying the high costs of renting an office space. Instead, I’ve aimed to become more productive and turn these into non-issues. How can you do it?

Distractions From Family & Pets

Our biggest issues normally stem from the distractions caused by loved ones. While it’s true that freelancers have a more flexible schedule and can often take more breaks, that doesn’t mean we don’t have strict deadlines of our own. I’ve found myself stopping work in order to play with my dogs or hang spend time with my husband, only to see the whole day go by without any work getting done.

While it may seem rude or inconsiderate to shut out the loved ones, it’s a necessary evil in order to get stuff done. Here are a few tricks that have worked for me (and some my hubby has used against me!):

Shut the door. If you’re lucky enough to have a whole room dedicated as an office, sometimes it works best to just shut the door and drown out the noise.
Leave the animals outside. Sometimes my doggies can get a little restless and drive me up the wall when I’m trying to concentrate, so if it’s a nice day out (and you have a fenced in yard), I’d leave them outside a little longer than normal so they can run off the energy and let me work.
Put on headphones. Nikita uses this trick on me. When he’s trying to concentrate on work and I’m babbling on about nothing, he’ll put on his headphones. Eventually I realize he’s not listening and get tired of having him take off his headphones and repeat myself. Eventually I leave him alone. Not the nicest, but it works!

Pudgy Developers

Nobody likes a fat developer, and since I’ve gone freelance, I’ve notice a huge weight gain. So what have I done to remedy this? I moved across the world to London, where every day I’ve had to walk at least two miles to get anything accomplished.

Of course, that’s not going to work for the majority, or probably anyone else. But it’s important to make some life changes now before you get to the age where you end up having health problems. I like you guys and fully expect all of us to be coding together well into our triple digits!

Of of the main issues of working from home is grazing – I’ve noticed personally that I tend to stray into the cupboards for snack food quite often. If you do this to, go ahead and get rid of the junk food and stock up on healthy snacks and fruits. That why you’re at least eating healthy.

If you’ve got pets, now’s the time to give them some attention. Take a longer lunch and use it to walk them around the block, or play some sports with your kids. Relocate to the city if you can. I know personally that I could never stick to going to the gym or an exercise plan – I had to force myself to work out but working it into my daily routine. I currently live in the city about a mile from any public transport – so even if I decide to be lazy one day and take the subway, I still get 2 miles of exercise. I’ve already noticed a decrease in appetite, weight and general pudgyness since I got here 3 weeks ago.

Lonely – I’m so Lonely

Another difficult disadvantage of working from home is the loneliness. I tend to be a loner anyways so this didn’t bother me too much until I realized I worked so much and so alone, that I didn’t have many friends! I also lived in the middle of nowhere so it was hard to meet up with the friends I had and even harder to find fellow devs and designers to hang with.

Now, I’m finding I have a ton of friends and contacts in the area and am meeting up with one of them almost every day for lunch or dinner. This forces me to get out of the house AND get some exercise. It also helps networking wise, as we can talk about work much easier. Plus, it’s fun to finally get to put faces to twitter avatars, voices or emails.

If you live in an area with a lot of people, you can also try meeting clients in person. I used to be pretty firmly against this, as I felt it wasted too much of my day for little payoff, but I’ve started looking forward to these outings. I get to be social and get out of the house; plus see parts of the city I’ve never been to.I also often get a free lunch (yum!) and I feel better connected to my clients.

If you’re not in an area with a lot of people or clients, try working some place public, like a library or coffeeshop. Just be careful that you’re not in someplace distracting or you won’t get anything done.

Coworking

Coworking spaces are large offices that allow you to rent a desk, or even a whole space. They’re cheaper than actually renting your own office, plus you get to share space with like-minded individuals. Some of these places let you rent by the hour or day; others let you have an actual short lease.

I’ve never done this personally, but have been contemplating doing it once or twice a week here – just got to find a place close enough to be worth it.

What do you do to stay productive at home?

Why RFPs Are Never Good

2012-01-18T11:47:05Z

I just received my first RFP (request for proposal) from a client today in over two years of being self-employed. Now, I had always heard that these things were mostly junk and you should never pay them any attention, or work with a client who demanded you filled one out, but I never knew why. Now I do.

Let’s take a look at the proposal I got today. Upon reading, several red flags immediately popped up, and I hadn’t even talked to the “potential” client as of yet.

Already we have our first issue. The client doesn’t want any major changes to the IA or content. Basically they want a skin, not something that’s best for their users.

Here’s our second red flag, a list of plugins they’re telling me, the developer, what to use, instead of trusting that they’re paying me to know what should/shouldn’t be used. Also, it looks like they included everything under the sun, I bet dollars to doughnuts they don’t even need half of these.

Also, special prize goes to those who can spot the “special plugin”. After seeing this plugin list, I already decided not to work with this client – but wait! – there’s more.

Deadlines are inevitable and very understandable. But what isn’t is an entire laid out schedule of what the web designer or developer needs to do or abide by. Is two weeks really enough for a full design? Is another two weeks really enough for development of what they’re wanting? Tough cookies if it isn’t, they say.

Here we find an even worse red flag. So they’re not coming to you because they like what you do and want to work with you. No, instead they’re throwing their RFP to anyone and everyone who wants to agree to the ridiculous timeline. You should never, ever go into “competition” for any sort of work. Clients should come to you because they know you can deliver the best.

Moving on:

It’s always best to be open to your clients about those you may be partnering with to finish the project. However, it’s not up to the client about who you work with. It’s your choice. (Of course if they somehow had a terrible experience with that other person, that’s another story).

Ah last, but certainly not least. They acknowledge that RFPs take a lot of time, yet they don’t care that they’re throwing theirs out willy-nilly to everyone. Also, they’re now mandating how YOU will get paid, instead of allowing you to list out payment terms.

Designer & Developer Professionalism

Sometimes it’s tough to remember that you own a business. You’re not anyone’s employee, nor do you have to work with every client who comes your way. The clients you choose to work with reflect on you, and you’ll only end up attracting more of the same.

A person doesn’t walk into a doctor’s or lawyer’s office and demand that they work on their schedule and when(if) they’ll get paid. No – they work on that professional’s schedule and they agree to that professional’s terms of work, or they don’t work with them at all.

There’s no problem with clients checking out a few different companies to see who knows their stuff and is affordable, however, it’s completely wrong to open a “competition” like feel to the process, hoping that we’re so desperate for work, we’ll scramble over each other in order to do it.

You, The Client

I don’t even know who this client really is or what they’re wanting, but they’ve already given me plenty of reasons to turn down work with them. In order for us to give you the best work possible, we need to have conversations with you, learn what and who your company is, as well as invest time into the relationship. No professional designer or developer will compete to get your money.

100 Things Every Designer Needs To Know About People

2012-01-11T10:50:45Z

About 99% of the time I really don’t enjoy industry books. I do my best to read as many as possible, but it’s only to keep up with our industry more than because I enjoy them. Let’s face it – the workings of the web can be a bit dry. So it was quite surprising how much I enjoyed Susan Weinschenk’s book, 100 Things Every Designer Needs to Know About People. I literally couldn’t put the book down and read it quickly in just a day or two. At 244 full colored pages, the book was a look into the psychology of how people read, think, act and socialize. I’ve always been interested in psychology and even pursued a minor in it in college. Psychology is actually very important in the web world, as it literally dictates most of the guidelines and best practices we follow. 100 Things is less about specific techniques and more about they why. I love how the book dispels some of the myths around the web and how people respond to the web. I learned a great many things in the book, but some of my favorite were the studies and research around typography. Some of these were:

Sans serif type is not harder to read than serif.
Capitalized text isn’t harder to read.
The idea of 5-9 nav items is false – while not always practical, it should be more about 4.

This book is definitely a must read for any designer, and I’d even recommend it to developers as well. It never hurts to learn as much as possible about every aspect of our industry. You can get it from Amazon for $17.99

Really Simple Icons Set

2012-01-11T22:04:14Z

A collection of icons I made for a secret project I’m working on, free for you to use! Use as you like, the only thing I ask in return is a nice tweet or share someplace for others to find.
Download the PSD

PSD includes 100x100px icons of:

Codesnippit
Dribbble
Facebook
Foursquare
Github
GoodReads
Instagram
Lanyrd
LinkedIn
Meetup
Pinterest
Ravelry
Tumblr
Twitter
WordPress
Youtube

Want to see other icons or formats? Just leave a comment below and I’ll place some time aside each week to make some