Redesign Season

It was a little over a year ago now when we launched this version of LoGroNo.org. It’s summer again, and it’s time for a new design! So over the month of June, Tracy and I have been working on a new design for the site. The layout is similar, but the look is a bit bolder, and the text is more readable. It also has some special functions built in to tidily present the Representative Journalism stories.

We want your feedback! Take a look at the beta site at http://new.locallygrownnorthfield.org and leave your thoughts below. Note that there are two rusty areas that are not final: speed and comments. The site will load slowly for the time being, and the comment layout needs some more formatting. But let us know what you’d like to see.

25 thoughts on “Redesign Season”

  1. Nice Job Sean…

    Any chance the platform allows the design to have adjustable width, so those of us with wide monitors will not have so much whitespace on the left and right?

    I like the new fonts and style. I am not so sure about the “highlighted” headlines though. 😎 I do like the highlighted mouseover on the links.

    One thing that the current design suffers from is “too much” stuff on the homepage. I know the twitter stuff is “cool” but does it really need to be on the home page?

    I would also wonder about lowering the number of articles on the homepage to 5 or so? Do we really need to have FIFTEEEN articles on the homepage?

    The the current homepage loads slowly… I primarily skim the first few articles to see what is new, then primarily access everything by the active discussion links. I also see the new content and comments via the e-mails, so seeing 15 articles on the homepage is overkill.

    The only way that 15 articles on the homepage should be viable, is if you are putting 15 articles up in a 3 day period. Most users of the site visit almost daily (if not a couple times a day), so anything over 3 days… is old news. Keep the homepage fresh, and fast, and leverage the archives more.

    Long running articles, with active comments can be keep alive with the Active Discussions Links.

    Please be sure to keep the active discussion links, so they go right to the individual’s comments.

    How about a date time stamp next to the headline in the Active Discussion post, so that you can see the time of the last comment posted to it?

    How about keeping the main body text centered, move the tags, cats, and search to a left column, and leave the comments on the right? Something different with some balance perhaps?

    A link to the homepage on the deeper pages is also important. It is not intuitive to beginners that clicking on the locallygrown image will take them to the homepage. (Web geeks know this, but not the average user)

    SPEED, SPEED, SPEED…. Optimize for page load times…

    Also, I know its beta, but mixed case titles… drive me nuts. Use one style or the other. Use real titles where the first letter is capped across the board, or use titles that only have the first letter of the title. Mixing them gives a hodge-podge “we don’t care” feel.

    With RepJ coming in, it is important to have a solid sense of journalistic style for the site.

    I love how Bonnie is captioning her photos. That is awesome!

    On the “level 2” article pages, can the active discussions be removed, so the text is the full width? You have already picked what you want to read and comment on, so it might be nice to consider full width there. This would also allow a wider comment form.

    Just my $0.02, but it looks really good. You have a good eye for this stuff. I hope that Tracy, Griff, and Ross are treating you well. Getting 3 people to agree on anything can sometimes be tough. 😎

  2. Sean and Tracy -RepJ page is stunning! One little thing though. Photo credits must have copyright symbol and year with them. If you want to be really fancy, then credit line can be smaller font and placed verticle left or right of the image, so as not to interfere with the text. Captioning in the same text font is fine though. Me..I’d place credit line at bottom but on top of the the image in small font. Thanks for asking and for everything.
    Mo

  3. The banner up top is great, but I’d nix the highlighted headlines.

    Also, I think the nice dark sidebars (on the existing site) are a good thing – you’ve got way too much insanely bright white staring you in the face with the current proposed design.

    I’m also not a big fan of the wide-narrow-narrow column format you’ve got. Either get rid of half of the content in the narrow columns so you only need one, or figure out a better way to organize it (like the Archives drop down that you’ve got on the new design). Rather than showing the first bit of each new comment, you could, for example, say something like:

    New Comments
    Redesign Season: Nick Benson, Mona Obremski, John Thomas

    In short, I’d like to see the new banner on top, with dark side/background, and a layout consisting of one wide and one narrow column. Get rid of the headline highlighting – the concept makes sense, but it looks hideous.

  4. How about a deep brown or brick color for the sidebars, something other than the black grey… a nice warm color… 😎

  5. I understand the difference between this site and “pure”journalism, but I think the “recent comments” feature is less than notable. It seems to place too much emphasis on WHO is saying what … as opposed to WHAT is being said.

    Gossipy, as opposed to content/issue oriented…

  6. John and Nick:
    I’m thinking over some of your feedback — I’m probably not going to change my mind on the highlights, but I think I may implement the dark outline.

    I would personally love to reduce the number of articles on the home page, but the Triumvirate have strong opinions on this, so I’ll need to talk it over with them.

    On the sidebars, I like the idea of getting to one, but what would you suggest we cut? We could probably get rid of Recent Commenters, but even without that, this amount of content would be excessive in one sidebar. What would you guys (or anybody else who wants to join the discussion) get rid of?

    Mona, in the past, LoGro has not had a strict copyright on things (instead using the Creative Commons attribution license). This may not apply to RepJ posts, and with or without a copyright notice, I agree captions are a good thing. I will look into this for the template.

  7. You really need to think out the highlighted headlines… what point does it serve? There’s no intuitive reason to do it, and frankly, all it does it make it look cluttered and inconsistent. For example, yellow and green highlighted text has no universally accepted meaning asides from “hey, look at me, I’m important!” There’s no convention saying that green means “faux news” – that’s what tags are for.

    With regards to slimming down the columns… nix the commenters list. Change the recent activity log per my suggestion above. Impliment a Twitter button that’s uselessly big. Reduce the number of events on the calendar to 3 or 4. How about one headline / blogger instead of 3?

  8. I like the new design. I’d add a vodpod widget to the sidebar– that way important videos stay for a while even when a video in a post is far down the page.

    I like the three column idea.

    More aggregates, and nix the N.org events. Nix the recent commenters list. Keep the categories, and put the text box about LGrnoNo at the top for the new viewer.

    Keep the active discussions list to three stories per heavy post, as that is interesting.

    Highlighted titles looks like ’98 Word. Icky. What’s the purpose?

    Search box currently overlaps some of the page names. Move search box and rss link to the sidebars.

    It’s not the sidebars that should be brown, but the menu bar in the header. If we liked brown. Depends on your rotating header images– will they conflict with brown?

    Good job, good stuff, and good php editing. I leave the original author’s name, even if I mess with the php and css a lot– What the heck.

  9. Nick,
    I’ll be the first to admit that the highlights are mostly decorative, but they do serve a somewhat informational purpose. Chartreuse is an article headline, yellow is a RepJ headline, and turquoise is a secondary headline. Something that I will consider is making a more logical progression between these: say, the further down the headlines are, the darker the color becomes.

    I like your idea about sliming down recent comments, but we’re limited by the WP plugin we use to make this happen.

    Holly:

    Search box currently overlaps some of the page names. Move search box and rss link to the sidebars.

    I think you’re talking about the current site, not the beta. I’m aware of this problem, but with the new site so close, it’s not worth dealing with.

    “I leave the original author’s name, even if I mess with the php and css a lot”

    The theme I used is called Sandbox, and it’s really a theme framework. The actual theme itself has no design to it. The idea is that you build your own design of Sandbox’s gorgeously organized HTML — so the intention is that you still attach your own design and name to the theme.

  10. I understand the headline highlighting serves a purpose, the problem is that it doesn’t make a lick of sense. Nobody’s going to see a headline highlighted in yellow and intuitively think “RepJ.” Changing the colors as they get older is even worse – that just adds more color that doesn’t mean anything. The idea of indicating which headline is which is good, but the implementation is terrible. Keep it clean – make headlines larger and bolder (as everyone would expect to see with a headline) and indicate which category it falls under with a subheading.

  11. “Nobody’s going to see a headline highlighted in yellow and intuitively think ‘RepJ.'”

    There is a logic to the yellow. Have you seen the RepJ logo?

    “Changing the colors as they get older is even worse”

    Age isn’t what I was referring to. By “secondary headlines,” I meant the sidebar headlines.

    Look, I officially acknowledge your opposition to the highlighted headlines. And Holly’s. And John’s. I understand why you dislike the headlines, and I will consider getting rid of them, but I don’t want to discuss it any further here.

    There’s a whole website out there beyond the headlines — I would love to hear more suggestions on that site.

  12. Pardon me for offering to discuss my opinion (as a professional web developer) with you when you asked for it 😉

    I think the rest of the design is pretty solid – I dig the graphic on the top – the new font is great. I’d like it better if its width was 100%.

    I’d also like to see a “Help / Tutorial” page that lays out all of the rules for showing quoted text, inserting links, etc. for folks leaving comments.

    The green underline / yellow highlight for links is a bit odd too – the green underline color is kind of unnerving.

  13. Sean,
    Overall, a very nice facelift.

    One nit to pick: The new “Recent Comments” section is not as useful as the current one. Currently, the comments are collected under the appropriate title, and it is therefore possible to skim the right sidebar and see what kind of conversations are going on on various topics.

    Without that title, it is very hard to figure out what a post like

    “Charlene Coulombe- Fiore: I see… Howard, thanks so much for explaining. Sounds like a good fit. Oh well, I am…”

    is about.

  14. Oh, and since the elimination of the “recent comments” section has been proposed, I’d just like to state that I think this is the most important feature the site has for fostering an ongoing conversation.

  15. Ok, I would have to agree with Nick on this one as well… You asked for an opinion, and we gave you several, mine coming from someone who has been doing websites since Netscape was on one floppy and installed with one disk with Trumpet WinSock as the dialer.

    I think I will just give you the “Hey Sean, Great Job, Looks Great” that you were looking for then… and move on. Discussion closed.

  16. That came out all wrong, now that I re-read it.

    What I am trying to say is that we all have differences of opinion. No one is better than the other.

    You have objectives and goals on this project, many of which are not public, and the readers of this site are not privy to.

    What I am saying, is you are looking for feedback, but you are so close to launch, that many things will not change, and be put off to a phase II.

    I would just urge you to not remove functionality, only make it better.

    I know from seeing your work that your brilliant and bright. Don’t lose that. I am only concerned that you keep doing these sites to keep yourself current and fresh, but continue to do business sites when you can get those gigs. (I did look at your site and portfolio.) Keep those fast and light. A blog such as this is a different animal, with different rules and objectives, than a business site, but some of the basic rules such as speed and usability still apply.

    You have to ask yourself this. (as you state you do standards compliant websites). Is the site ADA compliant and viewable by various devices? The highlight may be one of those that may not work well in this regard.

    To analyze a Web site simply access Bobby (www.cast.org/bobby), enter the URL of the Web site you want to examine and click on Submit. In a few moments Bobby will display a report indicating any accessibility or browser compatibility errors it finds on those pages. Bobby compares the Web Accessibility Initiative’s (WAI) Page Authoring Guidelines (www.w3.org/WAI/GL) with what is presented on the Web pages in question.

    Give it a shot. It is enlightening, and will give you a new perspective. We just spent the last 18 months making sure all of our corporate sites are compliant.

    Keep up the good work, and feel free to contact me off line if you wish. I am always willing to give a perspective from the corporate side.

    -J

  17. CAST no longer supports the Bobby accessiblity testing software. Bobby was sold to Watchfire in 2004 which, in turn, was acquired by IBM in 2007.

    We are using Watchfire/IBM at work. I will see if there is another freeware scanner available.

  18. Patrick,
    Fear not — the comments function on the new site is just there to show where it will go. The organization within the comments area will be the same as it is now when the site is actually launched. I agree that this is an important element to keep, especially if we may get rid of the Recent Commenters list.

    John,
    There is a difference between expressing your opinion and arguing endlessly over something. I did not want this to be The Great Debate on the Merits of Highlights. This was one element that I realize some of you dislike, but I think it’s a fundamental aesthetic divide and going round and round wasn’t helpful for anyone.

    Thanks for your advice on content accessibility. Most every site I do meets at least Section 508 (the federal gov’t’s standard for accessibility) and most also meet the stricter WCAG (W3C’s guidelines). However, because this is a blog, it often does not remain accessible because you have three (now four) different people posting their content to it.

  19. Thank you, everyone, for the comments, and thank you to Sean both for his excellent work on the new prototype, and for moderating the discussion here.

    I agree with Sean that going round and round endlessly on individual aesthetic preferences is less than productive. Please keep in mind that though Sean’s very good at explaining the rationale behind his choices, but he still has to deal with Griff and Ross and me, and we often just say “tough shit, Sean, we want it this way and not that”.

  20. Ha ha, funny Tracy.

    Sean, you’re cool. But we already knew that!

    Just for me: Does Sandbox let you pick three column or two, depending? I like variety. None of my sites look like the original theme at all, but I like the php improvements some of the themes have included in them. Secretly, I leave the linked theme so I can watch for security updates (and then I don’t do that, really. I end up doing that when I upgrade WordPress. Speaking of that, I’m not up to 2.6, yet).

    Anyway, those were my suggestions. Vodpod widget, and maybe even your favorite Youtubes via Daikos, and more aggregates. I’d like to even be able to suggest aggregates (like MPR’s Polinaut, etc.)

    Have fun.
    Holly

  21. Holly,
    The PHP in Sandbox is set up for three columns, but you can easily use two if you don’t need the third one. It’s all in the CSS, and Sandbox ships with some starter CSS to get the columns in the right place.

    A task for anyone interested: we need new pics for the rotating header! That is, unless we want to look at The Crossing every time we visit the site. Anything in Griff’s photo library is up for grabs, but higher-contrast photos are best. Just post the link in your comment.

  22. Ah, yes. Sidebar width etc. Nice. Php editing.

    You haven’t commented on the video widget (vodpod, videos that might not be on youtube) and the video widget (youtube, via Daikos). Do we have interest in that? I’d like to see it.

    Vodpod creator is a Carleton grad. An example of the widget can be seen on davidbly.com in the sidebar…

  23. Holly,
    RIght now we use Hipcast for our videos, and I don’t think that’s compatible with VodPod. We may switch to a different service like YouTube down the road, but even then I’m not sure adding another sidebar widget is the right move. It might be better, for example, for us to have a link on the top navigation as we did for the photo gallery.

  24. Oh, okay. Well…

    Vodpod might work for you, though, since it does allow for storage of video, but mostly it is for code gleaming. It organizes the code into the widget. So, if your videos have an embed code, it would work. I like that the video can be opened in the same page, it stays constantly on the right no matter where you are in the site, the widget can be stacked vertically, and important videos are not buried in old archived posts.

    The daikos youtube widget would be just for fun. You put in code for your favorites and they rotate– you can see an example of this youtube widget on my blog northfieldweb.com/wordpress Just excuse the mess if you see one as I sometimes use my site as an example for how a theme might look before someone has really signed on to have a blog (they want to see what I am talking about but don’t have a url).

Leave a Reply