Whew! Worked just over 10 hours today. Most of it non-stop. Finished up that lead page I was talking about yesterday. Had a couple meetings, and dealt with a particularly finicky server caching issue that’s getting in the way of launching a program that one of my clients really wants to get off the ground.
Sadly, I didn’t get up early enough today to be able to get to the gym, and my dance class this evening was cancelled, and I was too tired to really go anywhere after working 10 hours. What a day.
I haven’t even mentioned the most ridiculous part of today: this morning, I woke up and I was getting a necklace out of my jewellery organizer, but it was stuck. So I tugged at it, and it came out flying and I basically whipped my right eye with the chain. I wear contacts, so it was okay, I think, but my right eye STILL kind of hurts, and I had to take my contacts out and put on my glasses. I mean, how does that even happen?
One of my favourite parts about my work is the creativity. Now, I know most people don’t equate coding with creativity. But honestly? It’s such a creative task. You have your building blocks but you take them and you have to apply them in so many different situations and contexts and have to come at the problem from different angles every time.
For example, the lead page I was coding has what’s called a hero area – this is normally a bold area with a call to action at the top of the page. This particular hero has a call to action inviting the viewer to select one of the four options right below in order to proceed. That’s the design and intention. But here’s the thing, I can implement that design to achieve that intention in multiple ways. So which way do I decide to go with? How can I use code to enhance the design and make it even more persuasive to the viewer?
In my case, I figured that it would be best if the options were almost always clearly visible to the viewer – that is to say, above the fold. But how do you ensure that those options remain above the fold on the multitude of devices that exist? Well, I didn’t go that far – only because in this case, that could have caused a serious modification of the design and way more work than was needed for a mere lead page. But what I COULD do is ensure that the viewer, at worst, wouldn’t have to scroll down too much in order to reach those options. Plus, we ended up adding an extra touch: a bouncing arrow that further entices the viewer to see what the options are.
That’s a broad overview of the initial decision-making process that I went through when deciding how to set up the hero and options. After that, I had so many ways I could implement that in code.
Did I want to use floats? Would I use flexbox? At what points would the design shift in order to be better suited to the different screen sizes it could potentially be viewed at? How should the design shift? Should it abruptly switch things or gradually do so as the screen size is reduced? Should the changes fade in, or should they race to their intended positions? Did I want to accommodate heights of the screens? If so, in what way? Or does the design call for only accommodations in screen widths? Should I space things out with padding, or would margin be a better choice? Should the anchor element have the hover effect, or would the list element nested inside be better suited for the job?
Code is creative. It’s like legos. We all have the same blocks and we may all set out to build a house for our student barbie with a secret life as a firefighter who saves kids from burning nurseries and needs a secret escape route through her closet, but we all do it in different ways.
Except forms. Ask Bobbi – for the life of me, every time I’m left to my own devices to come up with light styling for forms, I swear to god, I just look at the screen blankly. I couldn’t tell you why. So don’t ask me to style forms. Tell Bobbi, and then I will just follow her instructions to the letter.