Pushing around text blocks

I’ve been following along while Frank Chimero redesigns his website in the open. He writes well, and the process of redesigning a website – no matter how simple – is interesting to me.

In a recent post, he wrote (emphasis mine):

I’ve designed for many years, but again and again, I have to relearn where to draw the line. I will strap myself to my desk and push around text blocks until I drive myself crazy. I will waste hours.

And suddenly a dim lightbulb at the back of my mind flickered into life. He’s talking about redesigning a website, but he’s pushing around text blocks? Unless I’m mistaken, I guess he’s talking about prototyping in something like Photoshop.

Of course! It’s all coming back to me now. I remember learning about this method in the web design unit I took in my degree. You figure out how you want your page to look using graphical tools, and then you write and edit the code to make it look that way.

But that’s just not how I’ve ever tinkered with web design.

Let me be honest here: the closest I’ve come to redesigning a website in recent years is picking the least worst WordPress template from a gallery of hundreds. I do occasionally use my c.2002 HTML skillz to tweak a layout or check how something is being presented – the vagaries of my work website’s CMS mean I often have to code HTML tables by hand which is quite a mental workout. But I don’t think I’ve coded a webpage from scratch since about 2013.

Anyway.

What I’m trying to say is, when I have done that, I’ve tended to just create some dummy copy, then tweak the HTML and CSS until it looks roughly how I want it to look. And that tends to mean that every line break or pixel shift is sticking to an invisible grid of defaults – I’m just adding a number to this bit or moving that bit over or down a bit. So my lumps of content just kind of slot into place according to how the code is interpreted by the browser.

This is compounded by the fact (or, indeed, exacerbates the fact) that my knowledge of HTML and CSS is just enough to get by. So I don’t know how to make complex layouts for webpages; I’m just sticking to the web design of the web when I learnt it in 2001/2002 – and that in turn is probably the web design of many years before as it trickled down to mere mortals like me.

But I like this way of working – I guess it’s almost like using a Word processor to style text. It makes me feel like I have control, but I’m only making moderate changes and letting the code/browser slot it into place. It inevitably means the page ends up looking very simple and conforming to some sort of grid – and that’s fine. It appeals to my quest for order. And that’s probably the fundamental difference with how I approach what I would very generously call ‘design’. I’m not being creative and making something from scratch. I certainly wouldn’t be able to use Photoshop to rough out a new design. I’m taking something existing and just moving it around into different slots.

That’s what web design is, to me.

Anyway. This is all to be read alongside a giant flashing banner which reads “Paul hasn’t sat down to design a webpage from scratch since about 2013, so… y’know…”. But with the recent promotion of the personal website and homepage by the likes of Kicks Condor and Matthias Ott, I’m thinking about this stuff a bit more, and crucially I’m browsing and finding myself inspired by scores of other people’s personal websites. Websites made by the kind of people for whom spending a weekend indoors tweaking their layout is time well spent. I love that. And I miss doing the same.

So I’ll probably continue tossing up between WordPress layouts for the time being. But I know that some time soon I will find the temptation too great, and I’ll sit myself down with some digestives and a pot of coffee, and I’ll try and bash out a set of webpages from scratch.

In fact, one box I’d like to tick that I’ve never tried before is handcoding an RSS feed. I’ve read a few tutorials. I get the idea. It doesn’t look difficult at all. I’ve just never actually done it. So that’s on the list. A few different webpages connected by an index page, and some content worthy of presenting in a blog format, tied together with an RSS feed for those of us who still dabble in such things.

Watch this space.

New web project – a beginner’s guide to the Zenit E

20111227-010454.jpg

I made a thing. For the second of our Applied Web Design and Management coursework submissions, we were tasked with creating a small website.

It had to contain a 6-step tutorial for a task of our choosing, and had to incorporate appropriate navigation and layout, along with original images and text. It also obviously had to validate and be accessible.

Finally, the whole project had to be created as a Dreamweaver template file.

I chose to create a tutorial for new users of a Zenit E SLR camera.

From the very start I wanted to have an instruction manual feel to the pages, along with a filmstrip for navigation. The rest of the pages are more traditional layout elements.

I don’t really call myself a web designer, despite doing all of these types of things for years. But I’m pretty happy with the results.

I spent an awful lot of time on it, which I don’t regret one bit. Like other skills and creative pursuits, web design is one of those things where you can spend hours tweaking something which will never be noticed, and where, from the outside, the results can look deceptively simplistic.

All the same, I like my little project, and it’s been a rare example of a piece of university coursework I’ve loved working on. I know several improvements that could be made – most of which would require starting over completely. Such retrospect can be applied to future work.

To view the project, either click the screenshot above, or this link.