« Getting dressed slowly Looking for Testers »

New look, step two

April 9th, 2006 by Nate Steiner

Arturo has put together many different design concepts, some from a while back, others more recently. For now, we’ve picked our favorite to start running with. Since this is a live redesign in progress, I thought you might like to see the design comp with HTML stamps I placed over it: [WGv6_stamped.png](http://web-graphics.com/_media/WGv6_stamped.png) (136 KB).

The [One true layout](http://www.positioniseverything.net/articles/onetruelayout/) has kept things very simple to modify, and with such a straightforward design, the additional CSS needed to layout the type is fairly slim, 4k so far.

We plan to add some site links at the bottom of the layout, and we need to decide how the comments will be styled, but it’s coming along. I’m trying out the idea of having un-visited links underlined, but I think that might be a little confusing. Well anyways, if you keep in mind that I haven’t tested this very thoroughly, and that it’s not done, comments and thoughts are always appreciated.

Posted in Blog, CSS, Design, HTML |

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.


50 Responses to “New look, step two”

  1. patrick h. lauke Says:
    April 9th, 2006 at 9:13 pm

    clean and simple (although the font size seems just a shade too tiny)

  2. Dan Says:
    April 9th, 2006 at 11:54 pm

    It’s looks real tight. Simplicity is a favourite of mine and it looks completely clear of anything that isn’t needed. Lots of room for adaptation and change as well. In contrast to Patrick, I do like the font size. However I do know some people that would agree with him!

    Is the design one that would scale to the width of the browser or sit in a fixed width? If it were to stretch I imagine it may lose some of its shine if someone with a high resolution were to view it… Hard to say without seeing it stretched though!

  3. Emiliano Says:
    April 10th, 2006 at 1:52 am

    Nice and simple. The text box of the comments (I’m writing in it now) doesn’t have an end on the right. I’m using Firefox 1.5 and the resolution of my computer is 800×600. Anything else looks ok. Maybe a bit too much whitespace between date/author of the post and the title.

  4. Arturo Rodriguez Says:
    April 10th, 2006 at 9:52 am

    Hi all - thanks for the comments. Things will get tidied up a bit more as the day progresses. The main goal of the new Web-Graphics is to improve readability. One idea is to show only the latest post on the homepage, with the last five posts populating the right column. This will cut down on the length of each page as well as the amount of visual noise one might encounter.

    In terms of design, Web-Graphics has never been an “experience”. So we wrestled a bit with the idea of making it more form vs less function, but function seems to have out in the end.

    Thanks again for you time & comments.

  5. Chris Wilson Says:
    April 10th, 2006 at 10:59 am

    While I like the idea of readability, I wonder if only showing the latest post on the home page will actually hurt readability/access to content? Part of the nice thing about the format of a blog is you can visit the homepage, and easily skim the recent content. If you haven’t visited in a few days and there are 4 new posts, there’s a lot of clicking involved to access that content versus having it visible on the home page. Just my 2 cents!

  6. nek4life Says:
    April 10th, 2006 at 1:52 pm

    While I like the idea of only showing the latest post on the home page, the links on the right don’t really offer enough infomation about the article. Maybe some slick ajax tool tip with the first paragraph of the article on rollover would be a good idea. Just a thought. Oh and this comment cox is too long in firefox 1.5 My words disappear on the far right. Altogether, I’m diggin’ the redesign and the way you’ve chosen to do it live. Awesome!

  7. Nate Steiner Says:
    April 10th, 2006 at 2:04 pm

    This is really good feedback guys. Although we haven’t really applied the new style to the comments yet, I went ahead and fixed the comment box width. More as time permits. Thanks again for taking your time to leave thoughts.

  8. Darrel Says:
    April 10th, 2006 at 6:51 pm

    “One idea is to show only the latest post on the homepage, with the last five posts populating the right column. This will cut down on the length of each page as well as the amount of visual noise one might encounter.”

    What’s wrong with long pages? Nothing, really. I find it much easier/more readable to be able to quickly scan down a page to see more content than having to hunt and peck through links.

    Visually, the site looks great, but reconsider hiding the content on the home page. We come here for the blog posts…show them! ;o)

  9. Jennifer Kyrnin Says:
    April 10th, 2006 at 7:19 pm

    I’m curious what finalized your switch from MT to WP? I’m running several blogs on both at the moment, and my decision of one over the other changes almost hourly.

    I do like your new simple design - although the lack of graphics does somewhat give lie to your title. :) But perhaps those are coming in Not-so-Naked-Part3?

  10. Nate Steiner Says:
    April 12th, 2006 at 2:39 pm

    @Darrel: Well, the good news is that it’s very easy to switch from single to multiple posts. We’re still debating this.

    @Jennifer: I do like MT in many ways. I prefer the interface design by leaps and bounds over WP. The reason I switched to WP includes - server problems with the rebuild process of MT, WP also does a lot of things the way I’d want them right out of the box (like the way it formats emails I get when someone leaves a comment for example). Ultimately I also just wanted a fresh start, I’ve been using MT for such a long time and, a few years ago I added several plugins and template weirdness to get it to operate the way I wished. It’s nice to drop all that and start clean.

    Definitely there’s a lack of graphics at web-graphics.The logo up top will be a graphic soon, but really this site is more about discussing web stuff (including graphics sometimes), and not so much about showing graphics in the interface. We kind of enjoy the irony.

  11. nek4life Says:
    April 15th, 2006 at 9:31 am

    Nate, I have a question for you. I was looking at the WGv6.png and noticed that you didn’t use H1 on Web Graphics, but on the first blog post headline. I was just wondering what your thoughts were on this as I’ve been told search engines use the tags in order of priority. I’m assuming that the the Blog Headline must be the most important? Just wondering about the thought process that is going into this aspect of the design.

  12. Nate Steiner Says:
    April 17th, 2006 at 11:26 am

    @nek4life: That’s a good question. One of the things I got out of the An Event Apart: Atlanta, two notes from Eric Meyer:

    1. Use just one H1 per page
    2. Make the H1 be the identifying aspect of the page

    Eric didn’t say exactly that, and he was expressing his approach with A List Apart, rather than some sort of mandate, but that’s what I got out of it. My PNG really represents a post page, where the post title, I think, should be the identifying aspect. On the homepage, I think the “Web-Graphics” at the top should hold that spot. So I haven’t wired up the post page template yet, but that’s where it’s headed.

  13. Lon Says:
    April 23rd, 2006 at 5:21 am

    Let’s face it: web-graphics.com is dead.

    I have read this site for years with great pleasure, but it has passed on and so have its visitors, I guess.

    Thanks to all the editors for all the interesting articles over the past years.

  14. Nate Steiner Says:
    April 23rd, 2006 at 11:17 am

    @Lon: The site is not dead. There are no dead links, and I don’t plan to close it down. Of course it’s slowed as of late - like many folks who maintain blogs and websites for fun and without profit, the amount of time I have available to put into it varies greatly. In fact one of the reasons it’s slowed down is because of a couple of upcoming projects that might also be of interest to the web-graphics readership. Anyways, stay tuned - or not - but the WG isn’t going away.

  15. Paul Loy Says:
    May 6th, 2006 at 8:53 am

    The site looks very nice but is this just a blog or will there be some more stuff on here soon?

  16. Nate Steiner Says:
    May 6th, 2006 at 11:47 am

    Paul, web-graphics is mostly a blog, but occasionally there are tutorials, reviews, and other specialized content. There are other authors, who will be invited back in soon, but this is not a formalized publication - it’s a publish-when-we-want-to type arrangement.

  17. Aegir Says:
    May 6th, 2006 at 5:18 pm

    The indentation on the post titles on the home page bothers me. It spoils the consistent left margin you’ve got with all the other text on the page.

  18. Bill Says:
    June 30th, 2006 at 4:29 pm

    I understand your use of h1 for the post title - but I’m confused as to the structural “siblings” that you have made out of the site title (web-graphics) and the subheadings within the story by doing so.

    I tend to view the Hx tags as the bullets in an outline. If you have one h1 and then a variety of h2 tags - to me, structurally, they sit under the h1 tag.

    Personally, I’m not sure I would make the web-graphics text a header at all on the post pages - since it isn’t a header for any of the content on that page based on your logic for using the post title as the primary header.

    I hope I’m not coming off rudely or pushy because I’m not meaning to. I’m really just curious as to the thought process you used to come to that structural design.

  19. Nate Steiner Says:
    June 30th, 2006 at 10:23 pm

    @Bill - No you are certainly not coming off as rude - it’s a completely valid question. My thinking on that choice was based somewhat on what I remember Eric Meyer mentioning during one of his talks at An Event Apart when they were in Atlanta. If I remember correctly, he suggested making the title an H1 on the homepage, where that really is the most “important” heading, but degrading it to an H2 on sub-pages, where it’s really more about the title of that page’s particular content.
    Probably the most important thing here is that there’s no standards for semantic value. I think your suggestion to make the site title some other (non header) element, is completely justifiable.

  20. unwiredbrain Says:
    July 10th, 2006 at 5:22 pm

    Man! I like it sooo much! Gr8 job…

  21. roScripts Says:
    December 22nd, 2006 at 11:04 pm

    Very clean and simple. I like it.

  22. Joel Skotak Says:
    January 5th, 2007 at 3:50 pm

    Very nice. Like others said… pure and simple content, no frills.

  23. loki Says:
    January 28th, 2007 at 6:49 pm

    “One idea is to show only the latest post on the homepage, with the last five posts populating the right column. This will cut down on the length of each page as well as the amount of visual noise one might encounter.�
    torrent
    http:///torrentmania.info
    What’s wrong with long pages? Nothing, really. I find it much easier/more readable to be able to quickly scan down a page to see more content than having to hunt and peck through links.

    Visually, the site looks great, but reconsider hiding the content on the home page. We come here for the blog posts…show them! ;o)

  24. www.webdesigningcompany.net Says:
    April 2nd, 2007 at 1:30 am

    As long as when you added the new fields to the dB via the edit/
    define fields, you got no errors and the system did not crash, it is
    very possible that you have a corrupted Layout.
    To see if that is so, do the following:
    1) Create a new Layout, via File/save-as, give it a new name.
    2) Then check to see if you can see the new fields in the layout
    field list.
    3) Drag a box and add the field to the layout. ( You have to have
    selected the Field option in the tool palette first).
    4) If that works then you have some corruption in the other layout.
    5) Add the fields as need to create a layout that you can use.

  25. Alexender sarin Says:
    April 2nd, 2007 at 1:39 am

    Ok, I haven’t spent much time on it, so this is just the general idea.
    Pretty simple. One thing to note, I thought the font Georgia Times
    appeared more undead file-esque, as opposed to the casual Arial that
    is being used. Most of the links link back to the current site, so to
    navigate, use only the global bar at the top.

  26. Aniketos Says:
    May 21st, 2007 at 1:02 pm

    Cool!

  27. Charalambos Says:
    May 21st, 2007 at 1:49 pm

    Nice…

  28. Andreas Says:
    June 5th, 2007 at 3:31 pm

    Nice

  29. Stavros Says:
    June 6th, 2007 at 4:37 am

    Nice…

  30. Anninos Says:
    June 8th, 2007 at 9:32 am

    Nice

  31. Markos Says:
    June 9th, 2007 at 10:33 am

    Interesting…

  32. Kosmas Says:
    June 10th, 2007 at 12:55 pm

    Nice!

  33. Othon Says:
    June 10th, 2007 at 3:34 pm

    Nice!

  34. Xenophon Says:
    June 13th, 2007 at 7:43 am

    Nice…

  35. Yannis Says:
    June 14th, 2007 at 6:01 pm

    Nice…

  36. Emmanuel Says:
    June 15th, 2007 at 4:23 am

    Nice

  37. JohnSmit Says:
    June 24th, 2007 at 4:10 am

    WdCBN2

  38. Christos Says:
    July 9th, 2007 at 10:30 am

    Cool!

  39. Sebastianos Says:
    July 9th, 2007 at 3:16 pm

    Nice…

  40. Theofanis Says:
    July 9th, 2007 at 3:17 pm

    Nice

  41. Titos Says:
    July 10th, 2007 at 1:29 am

    Nice

  42. Efstathios Says:
    July 10th, 2007 at 2:19 am

    Nice…

  43. Iakovos Says:
    July 10th, 2007 at 11:05 am

    Nice

  44. Orestis Says:
    July 10th, 2007 at 12:20 pm

    interesting

  45. Thanos Says:
    July 10th, 2007 at 7:13 pm

    Nice…

  46. Petros Says:
    July 11th, 2007 at 12:40 am

    interesting

  47. Ioannis Says:
    July 11th, 2007 at 1:14 am

    Interesting…

  48. realperson Says:
    January 7th, 2008 at 2:48 pm

    looks like the Association of Greek-Named Spammers found your post very “interesting”… and “nice.” Guess they didn’t hear about the rel=”nofollow” attribute…

  49. Alexios Says:
    January 20th, 2008 at 12:40 am

    Cool…

  50. Bibingios Alexl Says:
    February 2nd, 2008 at 4:15 am

    Hey! This is really your Work?! Cool! I never earlier did not see sites like this! Tnx!

Leave a Reply