I've been engaging in web design in some capacity or another since the <blink> tag was a thing. That was a while ago. It's entirely possible I used that tag myself. (What can I say, it was college, it was an experimental time, everybody was doing it. And, to be fair, that was before I learned anything about good design. Or design at all.) In that time I've concerned myself with the state of the web enough to have actually cared about how things have changed and how they continue to change today and will change tomorrow when this entire post could well wind up feeling like it was written by some pre-web-4.0 neanderthal, what, did they code the web 3.754 by banging bones against rocks, or what?

One of the latest web movements is toward responsive design. That and, like, front-end compilers, but I'll save the really nerdy stuff for when you and I are both drunk, or when I am trying really hard to avoid a much more important project or post. You can skip the rest of this paragraph if you're already up to speed on the technique (or you can read on and have a good laugh over all of my mistakes and hacky explanations). Responsive design is, essentially, a web designer's way of keeping his or her sanity in a world full of web-enabled mobile, tablet, computer, and who-knows-what-other devices. Without it, either we're stuck building separate sites for every device or type of device that might need access to its content, which, gross, or, we're forced into building sites that work swimmingly on one very specific device and then we spend the rest of our days hoping they work at least well enough on other devices. Non-responsive websites built for desktops may or may not look or even work on phones, while websites built for phones will probably look silly on 27-inch monitors. By building a single site, however, that checks the size of the screen or browser window and positions and styles content accordingly, designers can make most all site visitors happy, and still have time to sleep at night, now and then.

It seems kind of like a no-brainer, except, for some reason, back in 2010 or whenever it was I first learned about it, I'm pretty sure I shrugged it off. I don't remember why. Maybe I hadn't slept the night before. Did I have a bad head cold? Had I literally gone sub-no-brainer that day? Don't know. What I do know is that sometime between my initial shrugs and the design and launch of FoldedNoteDesign.com, my misgivings became oh-yes-please-yes-givings, and I created this site using a responsive design.

Which, for a portfolio site, one focused on images, seems a little strange. Of course I want you to look at this site in a browser where you're going to see every image in its 1200-pixel-wide glory. Revel in the details! Behold the depth of the textures! See my work in its best light! But, aside from the pure geek thrill of diving into a big old pile of technical problems just begging to be batted around like cat toys, there was also the realistic desire to get you to look at my stuff, whatever device you've got at hand, quickly, without you having to wait for 27 MB image files to squirrel their ways across the network and onto your screen.

That said, a big concern I had was that I didn't want the site to be about its responsiveness. Its responsiveness was just a means to the end of showing you a thing or two about what I can do with color and hierarchy and paint and stuff. There was a certain "bedazzled factor" at play in the early days of the technique. By which I mean, when you pull up a responsive site on your browser window, and you start changing the size of the window, you can see all the changes happen at different window sizes—in geek speak, "breakpoints." Pull your window out to its full width, you see the site optimized for desktops. As you shrink it down, though, whoa, everything starts moving around and changing and suddenly it's like you're looking at the site's slimmer cousin. It might seem weird to you if you don't expect any portion of your monthly take-home pay to be the result thinking at least a little bit about how good web design works, but, there was, at least for me, something positively hypnotic about those first brushes with responsive design. Swooping the browser in, yanking it back out, hours, days, entire weeks spent watching menus appear and disappear and content panels move and un-move. It was all so fancy and geeky and...and...bedazzly!

Of course, I don't remember a single thing about those sites now, other than the "OMG" factor.

Whoops.

That was something I knew I wanted to avoid with this design portfolio site. I wanted everything to look pretty good based on the size of your screen when you first loaded it, and while the site would respond just fine thank you very much if you were to start playing the browser-sizing game (which you can do with this site, honestly, I won't be offended, it is, after all, only natural, and, if you're thinking about contacting me for web design services, you should probably know that I know how this does work) I didn't want to create a design that would pull you away from the content and toward the frame. I wanted a responsive site that looked great without looking responsive. And so—after a lot of technical implementation details and other design concerns that may or may not be the subjects of future posts—in December 2012 I launched FoldedNoteDesign.com, a responsive portfolio site designed to do just that.

And then I went and wrote this long blog post talking up all that stuff that I designed so specifically not to talk itself up, because, after all, it can be hard sometimes to sell details that don't come wrapped in convenient <blink> tags.

Tags: