The Creative Curio redesign started the coding phase this week! My wonderful Web wizard husband agreed to take on the challenge. I’m trying to get him to write a post or two about the process (maybe some comments to the tune of “Yes, please!!” will get him to do it!).
I’m hoping to be able to launch the redesign within 2 weeks at the most. Last post I gave you a little tutorial on creating the aged tape look I have for the main navigation, so that gave you a little peek into my process.
And of course, some more screenshots of the details to whet your appetite (check out the last ones, too).
The Devil is in the Details
As the coding continues, there are design details that we realize were left out or not thought out thoroughly enough. There are so many things to think about:
- Sidebar content (and organization! What comes first?)
- Footer content
- Comment style/info
- Photo captions
- Numbered and bulleted list styles
- Post meta/information
- Tags/Categories
- Icons
- Link styles
- Rollovers
- Homepage content (full post, partial, extract, abstract… distract?)
- Archive page organization
- Sitemap
- Navigation structure
I’m sure I haven’t even thought of all the details yet!
I know I keep linking over to two series that Vivien is continuously putting together on Inspiration Bit , but they are so helpful to me in my redesign and I keep going back to these pages. I think you’ll find them useful if you are designing or redesigning your blog or website.
Web Typography Series – breaking down some of the Web’s best examples
- Part 1: A List Apart
- Part 2: Jesus Rodriguez Velasco (designed by Miguel Ripoll)
- Part 3: Jon Tan
Inspiring Details - focused research for her own redesign
- 16 Bits of Blogs with Unconventional Layouts
- When the End is Just the Beginning (footers)
- Meticulous Desing: Dramatic Headlines
and although it’s not part of that series, Focus on Details and Get Inspired is a good source of detailed inspiration, too.
Vivien has assured me that she will also be presenting spotlight features on link styles and bulleted lists (hopefully among many others).
Also check out the Elements of Design Gallery (not the same as the elements of design we recently talked about) and the posts from John at I Love Typography (iLT) on great Web typography (60 site examples in all):
- 15 Great Examples of Web Typography, 2nd Quarter 2008
- 15 Great Examples of Web Typography, 1st Quarter 2008
- 15 Excellent Examples of Web Typography, Part 2
- 15 Excellent Examples of Web Typography, Part 1
Over to You
I want to ask you, my fabulous reader, what you think about these details. Answer anything you have an opinion (or example!) on:
- What kinds of details in a site show you the author/designer really thought out how it would function and how you would use it?
- What do you appreciate seeing or knowing about the post and comments? Is a time-stamp on posts and/or comments important? Permalinks?
- As a commentor, what plugins do you like a blog to use?
- What information do you like to see in the sidebar? If you had to pick one thing, what would be the most important?
- What can get pushed down to the footer?
- What pages do you like to see linked in the main navigation?
- What annoys you the most about link styling (not the URL, but the appearance of links within the site)?
- Tags? Categories? Both?
- When you first come to a blog, if the content you came for is interesting, where do you want to go next? Is a Popular Posts list important or are Related Posts better?
- On the homepage, do you like to see extracts or full posts? (Not talking about feeds here, those will remain full feeds)
- When trying to navigate a blog, what is the most annoying problem you run into?
- Is it easier to read Web body copy set in serif or sans serif font? (I’m talking on the screen, I know for print a serif is easier, but what about for Web? Which is more comfortable for you? This Cutline theme uses Georgia, a serif, for its main text)
- Something I forgot? Other details? Annoyances? Features?
I would love to hear your thoughts! Come on out of that feed reader or email client and please leave a comment! It’s like voting: once it’s all done, if you didn’t have your say, you can’t complain! If you have examples to link to, that would be awesome, too! Just as a warning, if you have four or more links in your comment, it’s automatically flagged as spam. I’ll do my best to catch it for you, though!
The Creative Curio Redesign Process
- Ideas for My Blog Design
- Wire Frames and Experiments
- Researching Alternatives
- Doodles are the Key to Success
- A Return to the Redesign
- Details, Details, Details (current post)
Can’t wait for the redesign to go live? Me either! Keep in touch via the Creative Curio RSS subscription (or email if that’s more your thing) so you’ll be the first to know when it’s up!
Oh boy, looks like you’re going to have an incredibly personal blog design. Looking forward to the launch!
As a commentator, I enjoy the ‘edit comments’, ‘subscribe to comments’ and ‘commentluv’ plugins.
There’s bound to be a ‘live preview’ plugin that would also help, but I’ve yet to find one (to be honest I’ve just been too busy).
As for page footers, I go for a simple approach and simply replicate the top horizontal navigation. That way, the reader doesn’t have to scroll back up to find your most important pages.
re the dropcap behind the text, a background image applied to a paragraph style should work, Shout if you want the CSS. If you want real HTML text, then I guess you’d need to use a layer/div with a different z-index; thinking out loud now. I’m thinking about all the other things you mention. I’ll be back….
David,
Hmm, Live Preview. I had not thought of that before. I’ll look into it. I’m worried about installing too many server-heavy plugins, though, especially because I expect a bit of attention with the redesign launch. Maybe after things settle down I can install something like that if I find it. And good point about having a repeat of the nav at the bottom. I’m sure I can fit that in somewhere!
Johno,
Whoops! You left your comment as I was writing back to David!
Thanks for the idea about the background image. That would probably be easiest, but how do I tell WP which letter to put back there? That’s the part I have absolutely no clue on. I guess somehow I could ask the DB to pull just the first character and put that into a variable that defines the background image… I know the logic, just not the actual coding!
Please do stop by again if you have some opinions on the other questions. I value your feedback (especially on typography!).
wow, I really love those golden touches, the handwriting, the colours, the texture, can’t wait for the official launch.
Re: drop cap. I see you’re planning on styling the first line of the post differently. How are you going to do that? I’m assuming with something like:
p:first-child:first-line?
The same way you can grab the first letter: p:first-child:first-letter. Once you grab the first letter, you replace it with the corresponding image, say I.gif, or I.jpg. Which means you should prepare 26 images in advance.
With the 2nd option that John suggested, it’s less work, but you might end up having cross-browser issues with z-index.
Does it all makes sense?
Regarding comment plugins, I agree with David, though I think having the live comment preview is not vital, and you can bypass that in favour of other more useful plugins.
When visiting someone’s site for the first time, I usually check the Most Popular and Recommended posts first, then check the Recent Posts. If I really like the article, and I read it till the end, then if available I always glance at Related posts, to see what’s else the author wrote on this topic.
As for the footer, it all depends on your design. You can have a small about/photo section there, flickr feed, perhaps Recommended posts, or Recent posts. I also like how some blogs implemented features like ASIDES, posting their SU or Delicious link with comments.
I also came across a blog yesterday where I really liked how community was involved - Noupe. See the Design News section in the sidebar? Anyone can add their news to that section, though all entries get moderated. You can add something like that to your footer. I like it so much, that I’m planning on using this on my blog with the new design.
You’ve got so many questions there. Perhaps I should guest write on your blog, answering them? ;-)
Lauren, looking forward to the release. Just out of interest does your husband do coding for other people? In a few months I will be designing a website (hopefully) for a large client and I have been checking around on prices.
Anyway onto your design…The gold sparkly text is a nice touch, very unique and personal + eyecatching.
I have found this How to blog design style guide a great resource, I think it covers nearly everything.
Commentluv, is great for the comments and are you going to be having advertisements? ie. For the sidebar.
I would go categories not tags. Tags are so messy IMO.
When I first get to a new blog I always look for popular posts or their about page.
I like seeing extracts on the front page and the latest post being full (ie. David’s or Mine) but it always depends on the blog as some blogs post too often to do that.
Re navigating a blog, the most annoying thing would be when you can’t find what you are after. ie. Some peoples contact pages are so hard to find, it just annoys me.
After looking at so many things, I am really not looking forward to redesigning my blog. (It has only been 7 months) but I get so many compliments on it I really don’t want to change. I have even got a job just based on the website itself - and funny thing was that they found me through StumbleUpon and then they lived literally 2 streets away from me in Sydney. Small world eh?
Looking forward to its release :)
So many questions! So much to say! I’m tempted to write about them on my blog, but perhaps I’ll try to quick answer here and then if I want to steal the list for a post idea I might
Post and comment meta – I like seeing dates and tags/categories (one of those two is fine) and comment number/link. I think date is important (read a post from six years ago the other day!), tags can act as a “related posts” thing as well, if you just click the link.
Plugins – agree with David and Vivien, subscribe to comments is a must, edit is very handy, I’ve been apathetic towards comment luv, but I’m clicking those links more often these days (the comment author link is almost as useful though). If you start using the < — more — > tag, or whatever it is, you need to use a full feeds plugin to not truncate the feeds.
Sidebar – essential things are RSS link and search bar (unless they are up in the nav/header area), everything else is optional and can go in footer or another page
I like to use both tags and categories, but you don’t have to show or list both to the readers.
I think recent posts are underrated. I actually like to read back chronologically for a while before getting into popular or related posts. Whether that’s done via a list or just decent page to page navigation, it doesn’t matter.
Not phased by either extracts or full on the front page. Extract needs to be decent length though.
Navigation – some blog conventions are good and some blogs break them by trying to present their best content etc and don’t let you see chronological or topical content easily. E.g. http://freelanceswitch.com/ they give you the front page, popular posts, recent posts, random posts, but what if I want to look at a series like the Freelance Freedom comics? I guess at the category from the URL and find http://freelanceswitch.com/freelance-freedom/. I think perhaps archive pages should at least have an extract of the post.
Prefer sans serif for body text, but it’s obvious lots of folks (Jon Tan, Cameron Moll etc) don’t.
Ooh, that’s gonna be a long comment :S
Oh no, I can’t see Jacob’s comments…
Also meant to say, I suspect some versions of IE might not support pseudo elements properly (re the :first-letter stuff).
Jacob, it’s happened to me before - I think they showed up eventually. Maybe it has something to do with wp-cache, are you using that Lauren?
Vivien,
Heh, I have lots of grand plans for the styles in my design, but I don’t know technically how we’re going to pull them off. I’ve seen the first line in all caps on other sites, so I’m sure there’s resources out there somewhere! I think I understand where you are going with the drop cap, though I’ll have to comb through it a little better. I like the delicious links at the bottom, too. It’s always fun to see what people are researching or finding interesting. That new sideblog is something to consider, too.
Jacob
Yeah, sorry about the comment thing. It was the link you gave me. I don’t know why it does that. But I have it, so thanks for sharing! I am planning to have some advertising, yes. For now it will be the 125x125 ads, but no animation (way too distracting!). I’m getting PayPal squared away, atm. Also collecting some popular posts, though I’m doing what I want people to go see, not necessarily what has the most comments. I am paying attention to analytics data to see what are the most visited ones, too. Why would you redesign your blog? It looks and works fine!
Kris,
You’re welcome to steal your own thoughts for a post on your blog later 
I agree about the chronological thing. And for me, I especially get annoyed when I want to link to a post I read last week or a few weeks ago on a blog and I can’t find it anywhere and have to go into the feed list to get it! Ugh! So I will have recent posts displaying. I just don’t want to overwhelm people with too many links in the sidebar, you know?
I’ve been calling you Kristarella for so long it’s strange to say anything else, but I’ll try it
————To All————-
Here’s what I’m thinking for the tags/categories: I’m going to only display categories in the sidebar. I want to display tags, too, though, because if someone is looking specifically for more InDesign related articles or more Critique articles, they can click on the tag at the bottom of the post, where as for categories, those posts will be the same as they are in this sidebar (very general categories). I don’t want to do a tag cloud or anything like that because, as Jacob noted, it’s pretty messy.
Hehe, I think I need to offer you all a space to guest post your thoughts! Such long comments! But I really appreciate everyone taking a significant amount of time to let me know their thoughts. Thanks guys!
The comment field is the place to guest post our thoughts!
Yeah I agree with the tags however to be honest I don’t think I have ever used tags to navigate a site. I always use search. I use tags only so that my Related Posts feature works.
I don’t want to redesign my blog however but it is a template after all and the time will come one day. - I don’t look forward to it.
Jacob,
I’ll be using Google search because I think it gets better results. Yours is a template? I guess I never noticed. How much did you customize it?
I am using the google search on my site, it is much more accurate and I mean MUCH more.
You can see the original themehere.
So yeah customised quite a bit :)
Tag grid? Or just list them on another page, or the sitemap?
Dropcap: Using images as Johno mentioned or you could make a special paragraph which uses z-index, but you have to apply the html manually, when you write your articles in WYSIWYG.
Footer: I would personally place categories and tags in there, since its a “advanced” navigation.
Sidebar: The best content I’ve ever seen, is iLT, where John got all of he’s articles. I often search or look for articles, both here and at iLT and a complete list helps alot. But you have to take into account that I don’t really like sidebars.
Blogroll, I would give those links its own page or use the footer.
The most annoying navigation issue I can think of? Clicking I think..
Link styling, well I personally gets very annoyed when there are underlines, but then again it also depends on how many links there are on any given articles. Too many and lines pop up and draw attention which decrease readability. I don’t mind if its on :hover. But if you follow my guidelines and you relay on colour, than you have to use colourblind friendly colours. Red and green can be a problem.
About the serif, sans serif issue, I personally would like serifs. Actually I could write a extended article on this issue, but its all about font rendering, which is very different from OS and browsers. But I can mail you a list if you like.
“extracts or full posts”, if you choose extracts then you have to edit some of the older articles, I know that my articles, except the first, was written with that in mind. I don’t have any personal preferences in this regard.
Esben, you get annoyed with underlines?
Wow…
I thought usability arguments about how “users expect links to be underlined” was a little condescending, but I guess it sunk in a bit because I finally left my inline links underlined this time. Mainly only the inline ones, in posts and comments. I really don’t think the sitemap and sidebar need them because they’re expected to be lists of links and you’re right it does decrease readability.
Well for me everything should be about readability and presenting your content without disturbing your reader.
Underline gives ehm.. lines and the draw attention and that confuses me.
I know “usability experts” says that there should be lines under links, but its a old remain from the typewriter times, where you didn’t have oblique and italic.
Yup, I guess in a way links want to have a it more attention drawn to them, otherwise people might not bother clicking on them.
I’m with Kristarella regarding the links — inline, in the post/comments, it’s best to have them underlined, in all other places they don’t have to be underlined, sometimes it’s even better to not have them underlined in places like menu, sidebar. But wherever links are mixed with a text, they need to draw user’s attention to be clicked on. Of course, it’s up to the site’s owner to have links underlined or not, but for usability sake, they should be.
I have a client who insists on adding “Click here” or “Click to…” links in the content, because she says that her audience fails to click on anything until they actually see the invitation to click. Even underlined links for them are not enough.
Just having a link in a different colour/style is not enough, as people might think that it’s just for styling. Regular users don’t go mousing over things checking whether something is a link or not. Of course, if you know that your target audience is more or less tech savvy and will recognize a link without having it underlined, then for sure, go ahead and style links differently.
Usability sake? How useful is a paragraph that have lets say 5 links in it which are underlined and even coloured, it makes it extremely difficult to read and yes it draws attention, the question is, is the links or your content thats important?
I do think most people understand that a coloured word is equal to a link.
“Just having a link in a different colour/style is not enough, as people might think that it’s just for styling” - if that is the case, I think those people in general have a hard time.
colour plus underline is really overdoing it.
and don’t mention that danish fellow, we danes I kind of tired of him and he’s up for adoption.
underlines is merely a leftover from the techsavy html 1.0 dudes from the early 90’s
Well, I think if you have a paragraph with 5 links in it your paragraphs are too long or you’re using too many links. That much linking could be relegated to a reference list at the end or something.
I would never mention that… fellow. ;)
oh thanks Kristarella.
Too much linking http://en.wikipedia.org/wiki/Indiana_Jones_and_the_Kingdom_of_the_Crystal_Skull ?
Imagine if they had underline!
I think a good way to link, could be using links as footnotes, that way the content area really would be clean and easy to get around the problem with link styling.
A note to @Lauren
Getting rid of the image smileys would be a huge improvement :)
Kristarella thanks
and your absolutely right, too many links clutter and I see it constantly.
Sometimes I actually close a page if they use underline and the same goes for full width pages.. the content have to be more than exceptional good, before I hesitate.
I like the idea of using links like footnotes. It would also be more natural and give less clutter to a webdesign.
a short paragraph with 5 links will never be legible, no matter how you style those links - underline them or colour differently. In those cases, footnotes are of course the perfect solution, or go with shorter links.
no but underlines makes it worse
http://en.wikipedia.org/wiki/Indiana_Jones_and_the_Kingdom_of_the_Crystal_Skull
Imagine this with underline
Huh, all those emails came through out of order
Anywho, yeah. Good choice for Wikipedia not to underline!
Aww, I love image smilies
If they didn’t translate to images I’d have to start using a hyphen for a nose or equals for eyes. I don’t like the standard colon parenthesis.
How on earth did you make that one non-image?
Whoa!! You guys sure had a ball while I was gone!
Kris,
Whoops, forgot to say I want to include the tag info in the post meta at the bottom of the post.
Esben,
(and I like graphical smilies, so you’ll just have to put up with them! I try not to use them in the posts, though, only comments)
Thanks for your suggestions re the sidebar and footer contents. It’s always good to have multiple opinions, especially from my most loyal readers
——Underlines and Link Styles——-
It’s easier just to add my own thoughts to this discussion instead of replying to each comment individually.
Unfortunately, the Web as a medium has developed in such a way that underlines are the known and practiced convention. Although people are getting used to links that are just indicated with color, it is still widely recognized that links are blue with an underline; everyone (who uses the internet) knows what that means, without a doubt. I can’t comment on why the original developers of the Web decided to use underlines to indicate links, but it’s become the standard, so arguing the point is useless. Deviating from that (like many designers like to do in their portfolio Websites) can be a real problem.
I have to quote “that Dane” that you dislike so much, Esben. “Users spend most of their time on other websites.” If your site differs too much, people will not care to figure it out and will just leave. Useability > Readability; if they can’t use it, they certainly won’t read it. You can design for the way you wish the world worked, or you can design for the way the world does work.
Vivien and Kristarella, I agree with you about list that are expected to be only links, though if comments about the links are involved (like a SU or Delicious link list), then the links should be underlined and colored.
And the “Click Here” thing: yup, another Web convention that we are trying to overcome. It is very true that people look for that phrase to know when to click. Sad, but true.
Esben, I hope you’ll still read my blog if it has links that are both underlined and blue
(and comments that have graphical smilies).
Oh, and Kris, the comments that end with a smiley don’t get the graphical version put in for some reason. It’s a bug I started noticing a while ago. Not sure why it does that. And the emails came through out of order because Esben’s comments got stuck in Akismet.
Maybe because underlining was a way for typewriters back in the day to Italicise text because they couldn’t set italics?
Jacob,
That’s what Esben suggested, too. I don’t know why that would carry over to the Web, though, when people were used to typing on computers. And why would an underline indicate a link to somewhere else? They obviously didn’t have a designer and they didn’t think through the implications of their decisions!
What’s done is done.
I wondered about that comment, so I made a duplicate, sorry for that.
Well about styling and that dane.. what Im suggestion isn’t exactly new and wild ideas.
You said:
but it’s become the standard, so arguing the point is useless.
Not really.. its many years ago that was a standard and not even then, did everyone use blue and underline, far from it actually. Its just the standard style that browsers renders, if you don’t apply a style to it. So blue underline is perhaps styleless from a standard point of view.
If you can’t make those small basic changes, it would be like saying: “oh png support, thats not a standard from the good old days, why use it then? We still got gif!” And if you are from very old standards, then you wouldn’t use images at all.
The argument can easily turn to: “Why use CSS at all?” CSS is there for precisely style your content and that includes links too.
A little history lesson about blue underlined links.
Back in the old days people used terminals (my best years in front of a computer) and if any of you remember this, then underline makes sense, since bold and oblique didn’t exist.
The reason I think they relayed on blue, is that even colourblind (no matter which type of colourblindness) can clearly see it, which isn’t the case with red and green. I learnt this the hard way!
I general agree that you have to be careful about how you apply links, but wikipedia does use footnotes and alot of bloggers places many links under a final headline in articles, Johno does it in every “sundays types“ article (which I personally read first and bookmark away).
If you can’t make that small changes to a website without confusing people, well then I guess the Internet broke in 1997 with the introduction of CSS.
And that dane character does have a point, but I think its a bit more related to flash sites, not link styling.
Remember your audience Lauren, you write about design and applications, so its not low tech readers you got, on the contrary. They are more than normal experienced and perhaps they even expect it in a beautiful design, like the one you are making.
What I would think about Lauren, is where to place additional content, like tags/categories and blogroll. My question is: is it really nessary to use a sidebar for that options? I really like the idea of using the footer actively for more advanced navigation and sidebars for supporting a article/main content, like in magazines.
I also have to be honest.. iLT really uses a clever sidebar, by listing the articles by date and Im normally skeptical about sidebars. Images from a given article perhaps, so they don’t clutter up the main content?
about the SU and del.icio.us icons.. I don’t understand why they are there?
I question everything, I know but don’t people use bookmarklets for that particular option? The reason I think its not nessary is that many webpages don’t have them, especially older ones. I don’t even see it as a service from your side either 
The design itself will get that little feedburner ticker jump cheerfully upwards. Sad fact but people enjoy a beautiful design, no matter the quality of the content ( I could give examples, but that isn’t polite). Webdesign is like highschool, its the cheerleader that gets the attention, not for her skills but her looks.
Remember your audience! they are tech savy and frowning for tips and tricks, but you know this, because you chose them from the start.
and yes I will still be reading your blog Lauren, no matter what you chose :)
Heh, you don’t have to if you don’t want
I’m not sure which is more sad: people enjoy pretty layouts or it’s so easy to make an ugly.
What you say is true though… Strangely enough, a good layout isn’t enough to make me subscribe without interesting content, but a bad layout is almost enough to prevent me from subscribing to good content. It just occured to me it’s really silly because if I subscribe I won’t have to look at the layout much (except to comment).
An example is Strobist. All photographers and wannabes rave about that blog, but I don’t love it. Maybe partly because some stuff goes way over my head, but a lot because it looks unfriendly. I find the small text on dark background hard to look at. The main nav (for “first timers”!) is a big fat block of links, impossible to scan. I found a great article through Google on there though. I will subscribe and see how it goes, but it’s a bit funny how not liking the look was enough to prevent me from doing so more than once.
I have to admit I don’t use a newsreader, I use jaiku, because.. I don’t know. Perhaps because it works like a ticker and only pulls the title in there.
Anyway I do agree with you Kristarella on strobist.. I can’t read it either. I need black on white and Georgia :p
LOL - you “need” Georgia! Thanks for making me laugh - in a good way, I love Georgia too.
Whoa, seems I’ve open up quite a can of worms here! I apologize for being a bit absent from the comments this weekend. Obviously working on launching the design!
Esben,
Styleless. That is a point I hadn’t considered. Interesting perspective. You do have very good arguments. This is obviously something you’ve thought a lot about! Thanks for the eye-opener, though now that you can see my new design, the blue links (slightly changed in tint) do fit in pretty well, no? I’ll be careful about using 20 links in a 4 sentence paragraph. Just for you
Kris,
Interesting that you mention The Strobist. I know I’ve read a few of his articles and really liked them but I couldn’t find the RSS link! Bad usability all around, I guess. And I agree that unfriendly designs are enough to make me not subscribe, especially for design blogs. If the person can’t show me what good design is, why should I read about it from them?
I second (third?) liking Georgia. I go back and forth on whether I like it for body copy on a website, though. I still think sans serifs are easier to read (screen-only, I know serifs are way better for printed work and I can hardly stand reading brochures and the like set in a wide sans serif font!)
One Trackback
[…] The creative process: details, details, details […]