As you can tell by this new theme – I’m NOT a designer – and, as a result, on my journey to learn WordPress theme development, I went simple. I like to call it minimalism-reduced. You know … just a little, with a bit of good taste taken away. Anyway, here’s a screenshot in case I decide to abandon it before you read this post.
WARNING: This theme is not yet mobile friendly.
Yes, I realize that means I’m already breaking the golden rule of modern web design (i.e., thinking mobile first), but I needed to start with the basics. And with that, I mean: Do I use px, % or ems?
Letting Go of PXs, Embracing EMs
I used to be a pixel guy.
Back when I was actively in web development, people were building those separate mobile websites that looked like iPhone apps. Responsive design wasn’t yet the thing.
I wasn’t thinking about flexible designs that worked across all devices. Instead, I took pride in being able to replicate a design, exactly, across all browsers. Pixel for pixel, you could lay a Photoshop comp next to the website, in any browser, and it was really hard to tell the difference. It may be hard to believe, but that used to be important.
Obviously, I know those days are long gone and, really … good riddance. I’ve realized for a while that I need to let go of my reliance on pixels (and also an overuse of IDs – did anyone else used to use IDs in every DIV, everywhere?).
Knowing an over-reliance on pixels was no longer copacetic, I read px – em – % – pt – keyword, Why Ems?, and Understanding em Units in CSS. All were good reads, but I found the last one most useful – perhaps because of the writer’s overuse of “em” puns?
Anyway, I had always thought ems were just for font sizes, but I realize now that you can use “em” for a lot more. Still trying to wrap my head around ems, but I’m starting to get a little more comfortable with “em.” 🙂
Let’s Get Responsive
And so, now I need to focus on responsive design. I’ve already read Brad Frost’s 7 Habits of Highly Effective Media Queries and found it very enlightening. I now need to start working through the various resources he includes in that post and work on getting this theme at least a little usable on smaller devices.
I also realize, as I’m working on this post, that I need to spend a little more time on my font sizes and spacing. It’s currently very hard to tell any difference between my H1 and H2’s.
This is a work in-progress.
Follow me on Twitter: @amelungc