Web Design is a P.I.T.A.

I’m looking at my assorted sites and their designs and have reluctantly reached the conclusion that there is a lot of room for improvement. Nothing matches, there’s no consistency and — perhaps worst of all — I haven’t done any of my own designs. Humbling.

Oh sure, I’ve done tons of modifying and hackering of other peoples’ fine efforts, but I can’t point to anything and say, “I did that.”

I suggest that I am what might be best described as a “web mechanic”. I’m comfortable with (x)html, I’m even passably tolerable with CSS. I can take someone’s design and modify, tweak and adjust it. I can even convert it to a WordPress theme (or, for that matter, I’ve also converted from WordPress themes back to a XHTML/CSS template).

I’ve done quite a few client sites over the years, but they’ve all started with the client handing me a design or picking something they liked from Open Web Design or Open Source Web Design.

The notion of designing my own web theme gives me what I can only describe as the worst sort of writer’s block. Every time I decide to give it another shot, I freeze up or fall deeply into analysis paralysis.

Here’s my first hang-up: I can’t decide if I want to go with a fluid or fixed design. Looking at other sites and researching usability (in other words, searching the web) has consumed hours and I still haven’t made up my mind!

I think I’m leaning towards a somewhat wide fixed layout with a main content area and 1 (or two) right sidebars. But then maybe that content area should be flexible… and the circle begins anew.

Then I start scouring the web, figuring that smarter people than I have solved the big challenges… surely there are some nice basic CSS layouts to get me started? That causes me to get bogged down comparing and contrasting what I find. For instance, “Why does this one use negative margins and that one doesn’t?”

Or I find what seems almost perfect for the layout I’m after, but the CSS is chock full of hacks, redundancy — or perhaps worse, stuff I’ve never seen before and don’t understand!

I also (of course) want it to be standards-based and validate.

Arghh!

I need a “Web Design for Dummies” book. I already know the stinkin’ markup, I need to know how to design.

In the meantime, any good CSS template suggestions?

Possibly Related posts:

  1. Face Lift: Phase 1 almost complete
  2. Post Facelift Notes
  3. A List Apart’s Web Design Survey
  4. Facelift and Tools
  5. Face Lift: Phase 2


16 comments to Web Design is a P.I.T.A.

  • What’s your site look like on paper?
    Have you sketched it out on paper yet?
    Just old spreadsheet design thing. If I can’t draw it I couldn’t code it.

    The main purpose of a site is to be landing strip friendly for those search engine folks we all hope become feed readers. The rest of the world reads feeds now so all the angst on blog appearance is only for the search engine folks and the odd commenter.

    So long as I can find the “Comment” link that’s all I care about. I couldn’t tell you if orange or black is the color of your header. I get points for knowing it’s one of those, but seriously, don’t get too wound up about it. It’s all rss :)

    I change my theme for the holidays, but doubt anybody notices due to rss feeds.

  • Yeah, it’s sketched on paper. I just haven’t sketched it on many sizes of paper to decide how to handle resolution scaling.

    I generally agree with what you’re saying here… but statistically I definitely have more folks hitting the site via a browser vs. a feed reader.

    Brings up the point that I definitely want to make the Feed buttons and comment links easy and obvious to find. :-)

  • Vox

    I am a firm believer that the user should be able to see the site any size s/he may well want…which means fluid design.

    Fixed size is, IMNSHO, always the wrong choice, because what looks good at 800×600 absolutely sucks at 1600×1200 (and the reverse is also true). Let the design move according to the size of the browser window…just look at how the theme I use on my blog behaves as you go from 1600×1200 to 800×600 (and smaller)…that is, IMNSHO, the way all sites should behave…milo (the theme’s designer) rocks.

  • I read a lot of blogs. On average I probably drop in at 50-100 per day, and I read a lot of them on my feeds as well. The most important thing when it comes to a blog design, for me, is that it has to look different to everyone else’s blog. So many people use identical templates and it confuses the heck out of me.

    Your blog is one of the easily recognizable ones. I know where I am when I get here. The orange title text, eyecatching against the black.

    One thing I will mention is that Helium ad you have on the blog – on first glance from a new blogger, people could assume (wrongly) that it is a picture of you. I’m totally associating that ad with your blog now, whether that is good or bad I’m not sure. :)

    So I think customizing is important. I also think the time it might take to create a design from scratch could be better spent on blogging, or commenting, or getting out there and meeting new bloggers.. ;) At least that’s a fairly high priority for me.

    Snoskred
    http://snoskred.blogspot.com/

  • @Vox – I tend to agree, but I’ve noticed that stuff can get pretty “unreadable” if the reading area becomes too wide, ya know?

    I like your theme, but haven’t experimented with the width of it. Unfortunately, your host seems down right now, so I can’t play. :-\

    @Snoskred – Thanks for all the feedback! Glad to know my header is perhaps working as desired…

    The ad thing though. Yikes! I’m going to have to reassess that placement since Google really really wants to show that ad on most of my pages. Glad you brought that up, I never would’ve made the association.

    To some extent, you and Rich are on the same page with (paraphrased) saying not to get too carried away with the design. And I agree.

    But this isn’t just a skill vs. will thing. I honestly do want to learn a bit more… but I’ll dabble a bit before going all rainman on the topic. :-D

  • You need skill and will to get a good site out

  • @Designer – so very true. I forgot to finish my earlier statement: It’s not a skill vs. will thing — it’s a skill and will thing!

    And I’m not 100% on either (yet).

  • RE: People with wide screens and unreadable…
    Don’t you think wey’re used to it? We’ve got the wide screen after all. Maybe we have a sidebar open in firefox so the screen isn’t that wide after all? Maybe we don’t run IE in full screen (or whatever their browser of choice is). I have a widescreen laptop and a taller than wide desktop at home, and both annoy me for different reasons and I’ve modified my browser window to accommodate the screen size so it fits. Fixed width sites on a widescreen bug me with empty space. Obviously folks are different all over. Google though, arguably, one of the most successful and visited sites out there, it uses fluid width. I’m guessing it does what it thinks is best and I trust them. :) If I knew how to make my width fluid in my theme I would. I don’t know how so it’s fixed. When I look for new templates I look for fluid ones.

    PS: Agree about the helium ad lol. I thought you’d picked it yourself.

    PPS: I also agree that sometimes it’s hard to scan a widescreen line of text back and forth, but I almost never notice it any more, and I do find that the widescreen allows me to use sidebars on this and I don’t on my desktop. *shrug*

  • Great points Rich (as always!)

    Only nit I’d pick is the Google bit — yeah, they’re fluid… but the focus of the site isn’t quite on reading articles. ;-)

    But, you guys definitely have me leaning back towards the fluid side. I guess if someone is running 1680×1050 with their browser full screen, they won’t be startled.

  • lol

    Google is not just a search engine.

    Google Reader (empty white space but formatting I think, window is full sized)
    Gmail, Google Groups, Google docs/Spreadsheets, picasa web, youtube. Google is SO Much more than google.com. :)

  • Oof – consider me properly smacked down!

  • The Sandbox theme is a good place to start, so I hear. I somehow had a hard time figuring it out. Also, you can try the Yahoo Grid Builder. Developing a theme that lots of people download is great for rankings- I’m curious to see how my two themes will impact my page rank in the next update. Looking forward to seeing what you finally come up with!

  • Vox

    Consider me one of those 1600×1200 fullscreen people…I only open one window at a time…on each virtual desktop :) I run tons of apps at the same time, as you may remember from all those old ps ax threads on a.r.t. but I run them full screen on separate vdesks…and, for instance, I could fit your blog’s comments column about 4 more times on this browser window…which means I could have read all the comments in a single page instead of having to pgdn four or five times.

    And what Randa said is true…Sandbox has become a very popular starting point for themers, for some reason.

    Oh, Rich…if you like fluid templates, take a look at the themes designed by milo…she rocks :)

    Oh, and Chris, yes, my host is down…again….that’s the trouble with free hosting from friends…one can’t yell at them too much when it happens

  • @Vox: Thanks for the heads up on Milo. I’ll give those a look tomorrow.

    Gotta go to bed early and get up early. Silly inventories and confused time zones.

  • @Randa – Sandbox is intriguing… I may play with that some more. I dabbled with Yahoo Grid Builder saturday night but have yet to figure out how to convince it I want more than 1 sidebar.

    @Vox – thanks for more on the fluid thing. Good point on the comments. And hey, if you ever want some hosting, drop me a line.

    @All – maybe we’ll have some new ads up there at the top now. Geeze. :-)

  • Referencement

    Hello, Well i do not agree! I did a lot of design too, and most of the time, I start out from sratch. Then the times i use some kinda templates, I turn is so much it looks like I made it hehe.
    Well good luck

    Alex.

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>