January 24th, 2007 - by Golgotha

I wanted to take a moment to talk about the design of Search-This; its strengths, its weaknesses and get some feedback from you the viewers. What things do you like? What things don’t you like? What would you do differently? Should we add things or remove other things? Please, take a moment and let your opinion be heard.

Search-This

Search-This is currently being displayed in the CSS design gallery of CSS Remix. That’s the good news. The bad news is that it’s not receiving high marks.

The reality is that when John told me he was going to feature Search-This on CSS Remix I had a sneaking suspicion that it wasn’t going to receive high marks. Search-This is not your typical CSS design. When you look at most of the other sites in the CSS Remix gallery they have big beautiful graphic headers and nice images sprinkled throughout their designs. Search-This was never and will never do that. We are a content site first and foremost. Our content is the driving force behind Search-This. We have some wicked-smart people writing for Search-This and I didn’t want to do anything to take away or distract from what they have to say.

In addition, most all the CSS designed sites you have seen are fixed width. I wanted a liquid design that would fill the entire display of the monitor. Wide screen displays are becoming increasingly popular with high resolutions (I am currently at 1280×1024) and I wanted Search-This to be ahead of the curve. With these new wide screen displays a fixed width design just leaves too much wasted space for my liking.

The nice part about a fixed width site is that is makes design real easy to do. You know exactly how wide to make all your images and you know what your site will look like at all resolutions; it’s a safe design. With a liquid design you have a lot of unknowns and so the design becomes challenging. How do I create something that is visually appealing without getting messed up at 800×600 or 1280×1024 or even higher? It’s a real pickle. Thank God that I had someone like Paul O’Brien on board to help me get the CSS just right. I can be a real picky SOB! I want pixel perfection across all browsers at all resolutions!

So what do you think? Go on just say it, I’m a big boy and can take it :)

11 Responses to “The Design of Search-This”

1 cpradio

I personally like it. Sure it has one minor bug (see http://cpradio.org/images/search-this.png) but it looks GREAT on high resolutions like 1600×1280 (what I use at work and home).

Its also not cluttered which speaks volumes. The one thing I dislike about other CSS styles is the non-liquid layout they choose, but also the fact that their images tend to take forever to load (or depend on a cable connection — which I have).

I can say with certainty that Search-This does not take forever and a day no matter what connection you have.

2 Golgotha

cpradio – Yeah, I have seen that bug too. I could not come up with a solution. So I learned to live with it. Doesn’t happen all too often.

1600×1280 Holy screen resolutions Batman!

3 Global Investor

I like the design. The reason I added your feed to google reader was because I’ve never seen this design before.

I like originality, and admire it. Keep up the good stuff.

4 Golgotha

Just for shizzles, I now have my resolution at 1920×1440 (that’s as high as I go). I can barely read what I am typing!

5 cpradio

I can actually go higher than that, but there is no way I could read it, or my font sizes would be a minimum of 16-20 point. But at least that tells me you have a nice graphic card. :) I on the other hand, have a good graphic card (GeForce 7800GT), but I can also force the pc to run whatever resolution I desire (best linux feature ever!).

Back to the topic though. I personally would only like to see a few improvements. One being making the code in my latest article look better. Other than that, everything seems to be working really well. I will always take a fast loading layout over a visually appealing layout any day.

6 Golgotha

cpradio, I use this plugin to automagically format the code for you. I must have forgotten to tell you about it. It works great, just surround your code with square brackets and the language name. Like this,

  1. my code here

Dude, I have 2 GeForce 7800GTX in SLI mode. You should see Oblivion on my rig :)

7 cpradio

I figured you had a plugin for it, but I couldn’t figure out how to get it formatted…

I haven’t bought my second 7800 GT, but I will eventually, as my board supports SLI too. Plus I like the fact then I will be able to run four monitors if I do not want to run SLI :)

8 Paul OB

Mark I gave you a fix to that bug some time ago :) It’s because you haven’t supplied the image dimensions in the html.

On first page load the browser (usually mozilla/firefox) doesn’t know how much space to allocate and gets it wrong and misplaces your bottom corners. Once you refresh the page or visit while the images are still cached then you don’t see the problem for a while.

Solution: Always provide the image dimensions in the html img tag :)

9 Marko Petkovic

I really like it because it is clean, simple and well positioned. IMO only reason for low marks at css remix is lack of colors that would give it more life-everything is so gray in general.

10 TOMAS

Hey Mark, I’m looking a your site on a widescreen (laptop) with a resolution of 1280×800 and it looks great! As for some constructive feedback, here’s my 2 cents (I’m not a graphic designer, I just enjoy simplicity)

- Your rightmost column with the Search Engine Decoder and the Pagerank Decoder etc. seems to be on an island all by it’s lonesome. What if you were to make a header that stretched the entire length of the window and added some nice beefy icons with your Pagerank & Search Engine decoders? That way you could free up a column for additional items, or even expand your center column into this space to make it larger and even more readable? In essence, go from the 3 column layout you have now (or is it 4 column?), and reduce by a column? If you like I can Photoshop something up (roughly, I don’t have Photoshop skills) and send it to you?

Yet I do like how quickly the page loads and how you fill the entire screen!

:)

11 Golgotha

Hey Marko and Tomas, thanks for your feedback; I appreciate it.

I do have some ideas for another theme, but likely won’t do anything major until the summer.

I just have too many other things that need to be done first:
- I have about 6 or 7 articles I want to write
- I still would like to turn the webPod into a WordPress plugin
- I have some minor bug fixes and tweaks I’m working on
- I need to create an authors page that highlights each author
- and last but not least – I need to promote Search-This more

Lots of work to be done, but I think things are going great!

mark

P.S. – 10 Karma points if anyone can tell me the inspiration behind the current theme! Hint, look at the colors and view the source… Another hint, think Big 10 karma points!

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading