I don’t always pretend to be a developer, but when I do it’s because there’s a hard deadline to hit. UpBuild is in the middle of helping a client get a website pop-up created for a big campaign that kicks off on Monday. We originally offered to find a 3rd-party developer to have this work done – translating an InDesign file into responsive HTML, CSS, and JS – but, unfortunately, we were completely unable to find a developer on such short notice who could do in within budget. So I’m going to try my hand at it. It’s either this, or it’s not getting done.
Time to put on my trusty coding playlist, pull on my PowerGlove (I wish), and get started.
Ready Player One
2016-11-22T09:38:37
Okay, the first thing I need to do is get a copy of InDesign. All I have is Photoshop. Better log into my Adobe Creative Cloud account.
2016-11-22T09:39:44
Thank you LastPass. It’s so great to never have to remember what my logins are.
2016-11-22T09:43:45
Navigating this mess of plan and subscription options. “Should we have someone look at the UX of our plan upgrade process? Nah, probably not.”
2016-11-22T09:50:25
Ah, yes. To actually get this InDesign file, I need to find and accept that Box invite.
2016-11-22T09:52:09
Wow, I haven’t actually used Box since before UpBuild existed. Time to create a new account.
2016-11-22T09:55:10
Got the InDesign file, but wait, I need it install these fonts. Four of them? That seems a bit much.
P.S. It actually wasn’t that much; there were three versions/weights of Lato.
2016-11-22T10:03:086
InDesign has as HTML Export option?! It can’t be that easy, can it?
2016-11-22T10:15:45
Of course it’s not that easy. Let’s do this the old fashioned way. Codepen.io. Create new Pen.
2016-11-22T10:20:31
Fortunately, there’s existing functionality from a previous project that’s reasonably similar. I can copy that and work from there. First order of businesses is trying to understand how this one works.
I think I need to add some line breaks.
2016-11-22T10:24:06
When did CSS become so fancy?
2016-11-22T10:25:29
And, of course, right when I’m starting to get into a flow and feel some momentum starting (all I’m doing is reading the CSS I copied at this point), I have a call in four minutes.
Most of my job is answering emails and talking on the phone. Maybe that’s why jumping into this was so incredibly appealing.
2016-11-22T10:31:18
Kicking off this call. Back in 30 minutes or less.
2016-11-22T11:01:33
Better grab a snack before I hop back into this.
2016-11-22T11:36:16
I ended up getting that snack and taking the dogs for a walk. It was a crisp fall day out. Makes me appreciate working from home and being able to just take off for 30 minutes. Back to it.
2016-11-22T11:50:12
This is starting to feel possible. I have the CSS formatted so that I can read it and I can see where the responsive breakpoints are. Cool! I’m glad I spent all that time a few years ago geeking out on responsive web design (well, as much as an SEO who doesn’t code for a living can geek out about it).
I’ve started making modifications and am starting by trying to put in a background image in this pop-up.
2016-11-22T11:56:46
Rad. I have the background image, attachment, size, and position nailed. What next?
2016-11-22T12:01:36
I decided to start working on updating the HTML structure of the thing, After that’s done, I can hop back into the styling.
2016-11-22T12:05:32
This is my first code-heavy thing I’ve really done since switching to typing the Dvorak layout. I wonder if I should switch to programmer Dvorak before I get too used to this. Something to ponder over the long weekend.
2016-11-22T12:13:18
Damn, I love this playlist. I’ve been listening to it nearly non-stop for well over a month now. Anyhow, just finished updating the HTML structure and text content. Let’s see if I can get these divs to align properly.
This is the part that concerns me the most. I think there must still be some fundamental thing I’m missing about aligning elements with CSS. Remember when you could just build out everything with a hundred nested tables? That was pretty great, right?
No. I can’t even joke about that. It was a waking nightmare the whole time.
2016-11-22T12:43:37
Alright, this isn’t looking that shabby. Google search and StackOverflow save the day again! I have the two divs side-by-side with all the text set to the appropriate color. This is going great, except for the fact that I have another client call in 15 minutes.
2016-11-22T12:58:15
Time for a few calls. I could use a break.
2016-11-22T14:07:07
(…and then the rest of the day happened. I was able to get a few more alignment and spacing issues sorted out and fix the overall size of the pop-up, which I realized I’d had all wrong from the beginning. The last thing I did for the day was Slack the CodePen link to Will in order to see if there were any show-stopping issues I was missing. Turns out, it’s pretty close.)
2016-11-23T08:01:35
Okay, time to get cracking and hopefully wrap this up before lunch time today. I think the first order of business is fine-tuning it on desktop and then writing the @media styles to get it responsive.
P.S., I had a dream last night that I’d decided to switch from ANSI Dvorak to Programer Dvorak. The dream was just the experience of clumsily typing for an hour. Something is wrong with me. 😉
2016-11-23T08:17:16
OMG, do people know about using calc() in CSS properties?!
2016-11-23T08:25:46
I have to change this. I realized that I’d been using heading tags for styling rather than structure. I tell developers not to do this all the time; better take my own medicine. Another upside is that it’ll clear out the CSS lint errors about qualifying heading styles.
2016-11-23T08:36:32
Bam. This looks niiiiice on desktop screens. Time to move on to mobile and tablet screen widths. This is either going to be a cakewalk for me or my utter downfall.
2016-11-23T08:41:55
Going to use the Device Toolbar in the Chrome dev tools to test mobile layouts. Wow, this looks like a train wreck at 360px (Galaxy S5).
2016-11-23T08:49:46
Ooh, this is exciting – I may be able to get by with a single @media break-point.
I’m already seeing the payoff from giving my text elements meaningful class names rather than classifying them as headings.
2016-11-23T09:19:25
Okay, this isn’t as hair-pulling as I feared. It’s actually pretty fun, and this Dev Tools devices feature really makes debugging a breeze. The bad news is that I definitely need to have a third set of styles for tablets. I’ll live.
2016-11-23T09:31:23
After brushing up on some of the guidelines for using min/max device width in @media queries, I think I got this. This looks good everywhere. I can’t believe it’s done. Well, I better send this around to the team before I get cocky.
2016-11-23T10:30:51
The beta has been circulated around and I think it’s good enough for primetime. I did end up making a minor padding tweak, but otherwise it looks good!
Signing off for now. Once it’s approved and live, I may post a link to it in production (because, LINK JUICE).
Discussions