Jen Kramer: HTML, CSS, No-Code Technology.

Redesigning jenkramer.org: an exercise

The state of jenkramer.org is pretty horrible.

I redesigned this site in 2014 using Bootstrap 3, LESS for styling, and PHP includes.

You might be wondering why I chose those technologies, of all of the technologies that were out there.

a. Keep in mind that while 2014 was only 7 years minus one week ago, the web has changed radically since then.

  • The initial React release was in mid-2013. Angular was in 2016. We were in a period of "framework flavor of the month" at this point. Every conference seemed to have people desperate to dominate the next big thing in JavaScript. There were a lot of things coming out then.
  • jQuery was still very much a thing in 2014. jQuery Mobile was starting to decline with the availability (and superior responsive design) of Bootstrap. jQuery UI wasn't responsive and was declining as well, plus Bootstrap had its own UI components.
  • Bootstrap was a massive game-changer on the front-end. In 2014, people were only starting to transition to Flexbox for layouts from floats. People don't understand floats for layout. And people definitely don't understand CSS. Responsive design was still a mystery to many people, particularly how to code it by hand. And Bootstrap was HUGE in the bootcamps, which were thriving by this point. Indeed, that's often how CSS was taught: Here's Bootstrap. Use it.
  • Grunt might have been a thing, with Gulp gaining traction. Webpack didn't exist. Node was out there, but only just getting started.
  • This sounds like my web stories from 20 years ago. Keep in mind it's only been SEVEN YEARS.

b. Bootstrap only integrated with LESS at this point. Sass integration was coming, but not for a while.

c. OK, PHP includes were old, even then. But they are super easy to configure, and they gave me some simple moving parts for repeated content on the site to make maintenance easier. Technology doesn’t have to hurt to work, people.

d. It’s only a 10 page website. I wasn’t blogging. I wasn’t trying to sell anything. No one was maintaining the site but me. I could have installed WordPress, but then I’d have to maintain it. There wasn’t any real reason to build anything but a static site.

Redesign time

So why does one need to redesign?

  • The technology driving the site is old and dated. It's too hard to maintain, or it's a security threat.
    Well... yeah, OK, Bootstrap 3 is old, and so are PHP includes. But nothing is a security threat here, and I don't mind writing HTML to update content. Basically, I'm "meh" on my tech stack, as long as the site is telling a good story. Honestly, I don't need to take hours to set up a development environment, or installing things, or figuring out why X in the stack isn't working. I don't have time for that. It's a simple website.
  • The content is dated and needs revising.
    THIS is the reason the site needs a redesign. There's waaaaay too much blah blah on the site. Nothing is focused. It's all over the place, trying to be comprehensive. So time to focus the story.
  • Focusing the story

    I have a lot of writing to do before I’m ready to redesign completely. Honestly, this is a separate post to explain what I’m doing and why.

    But let’s just say it’s this, in a nutshell:

    • Cut the blah blah in half, or three-quarters.
    • More showing, less telling.
    • Use Donald Miller's Storybrand principles to drive layout.
    • Reframe the site to the customer as hero, rather than I'm the hero. (Also Donald Miller.)

    The Plan

    Since I’m pivoting to the no-code world (probably another story elsewhere), I’m going to try out a bunch of no-code tools to see what I can learn and create in those environments.

    I’ll try creating something once a week as possible.

    I’ll post the results here, along with a review.

    These might not be the final versions of my site. Indeed, they’re probably not. But they’re a great way to try out the products, identify positives and negatives of each, and decide what I want to do going forward.

Jen Kramer @jen4web