The default theme I had on v5 was nice…and generic, so I figured it’s about time I revealed my own JPEG-heavy, pixel-aligned theme after a few weeks spent putting it together. It’s obviously far from being finished; beyond the main blog interface, other areas need tweaking (lack of comments) to complete revamping (pictures).
In light of my decision to use WordPress, I forget why designing a site was supposed to be more fun than coding the backend. The graphical nature of designing a website is certainly appealing, but all the pain of tweaking margins and paddings to make pixels align perfectly and looking up hacks to get around issues specific to a browser (hi Internet Explorer) came flooding back with a vengeance.
Alright, this post is going to be a bit of a rant. Ye who hateth technical details on website construction, pass not this mark.
A webpage usually starts its life as a sketch or a Photoshop mockup. There’s no real magic or process that will guarantee a good-looking and well-functioning design, beyond experience and artistic talent (1). I was looking at this list of 45 Excellent Blog Designs for inspiration. I also tried to keep auxiliary factors like colors, typography, freedom of layout, and usability in mind.
In this case I went for the rounded-corners look, with elements very close to one another, and reusing some old 3D model renders I had sitting on my hard drive from back in college days in UCBUGG. The lamp “shining” on the page gave me an excuse to use a subtle gradient in the background and to add a reflective effect to every box on the page; I’m calling the theme illuminate for now.
After the initial cut, go back and edit your design. I tweaked the space between elements, took out stuff that I found out HTML had no way to support, changed buttons and banners on the page which I didn’t think fit the overall theme and feel.
Next comes the tedious process of transferring a pretty static picture into dynamic container dressing around text and image content. Elements like title banners and text containers are sliced up into separate images, imported puzzle-like onto an HTML page and shifted around with CSS until a rough resemblance to the original vision emerges. CSS also has support for drawing simple lines and colors, helpful in making the page more usable (for example, it’s really good at hyperlinks).
A lot of the frustration and painful hacks stem from browsers treating the CSS language/syntax as more of a recommendation than an actual standard; they’re free to interpret its instructions however they want and most do so inconsistently. I use Firefox for development, but I spend a good amount of time making sure Internet Explorer doesn’t destroy the design and even mucked around with my iPhone to verify it looks okay on Apple’s Safari browser.
Then it’s just a matter of publishing your design and making the most out of the nine seconds of attention your site will receive.
- I have scant quantities of either quality (↩)
Yea, web design is tough. Took days just to get this comment box looking the way it does…