As a front-end designer (*see below), I spend my time concentrating on appearance and how it best cooperates with functionality. As anyone worth their design salt will tell you, there are two challenges faced by front-end web designers. The first, and ultimate challenge, in my opinion, is the ability to design with white space representing the primary plane. In truth, the anchorless realities of white space make it one of the most difficult web design mediums to work with. As Dale has often said - “less is more, but less is also more difficult”. It’s a maxim with which I totally agree and, besides the fact that I am drawn to clean layouts, have become wholly enamored with the repeated challenge of designing white space based sites.
One factor to take into consideration regarding white space designs is that not all websites are geared towards them and that site identity should be taken into consideration. I have found, over the years, that websites that are text content heavy tend to benefit more from the implementation of white space designs, which would be why most major news sites, for the most part, employ them.
White space designs also offer other challenges, the most difficult of which is that any addition to them is usually very noticeable, making the structure of their initial design platform crucial with regards to the addition of a variety of content - specifically images, hyperlinks, and so forth.
The second challenge is content clutter. As web pages have become more diversified and complex, it is not uncommon to encounter pages that are rammed full of content that, while resourceful, is presented in an entirely confusing fashion. While a specific website might be an unbelievable web resource, if its layout is choked to death by confused content it will only detract from the ability of visitors to quickly and enjoyably explore it. That’s not to say that the diversity of content isn’t important, just that when it comes to how it’s presented there are ways to go about it that don’t automatically confuse visitors and, ultimately, turn them off visiting a site.
Dale and I have repeatedly dealt with this issue in the past given the volume of content that this website has and have struggled with how best to simplify it so that it remains inviting while still providing the ability for visitors to access its depth of content. In truth, it is a process that consumes us on a weekly basis, even though we do not implement those ideas that we frequently discuss. Today we are currently in the midst of implementing new changes that will further help to address a variety of accessibility issue, adding a simple yet comprehensive drop down menu for every header link, while at the same time generalizing them and thus reducing their number, and a more accessible and powerful search feature.
So what do I mean by confusion? Well, not to pick on a specific website, especially being that I find it a fantastic resource, Smashing Magazine provides a good example. Below is a screenshot of the Smashing Magazine website. While a clear and concise top menu is employed, the layout of the site’s content is confusing and, in my opinion, detracts from the desire of visitors to explore what it has to offer. Adverts consume the top of the site’s sidebar, detracting from the list of resources presented below them. While I understand that revenues generated by adverts are important for various sites, their dominance of a design often convolutes the website’s initial impact with regards to content.
Search Utilization
Most websites offer a dedicated search feature that, depending on its parameters, will produce in-depth results. Ironically, site based searches are commonly underused, something that I have never understood.
When it comes to website content, especially with regards to blogs, dedicated site search features are invaluable and far more affective when searching for specific content – even more so than archive features given that most sites employ dynamic categorization methods that are automatically included in dedicated site searches. That said; the dedicated site search is an invaluable tool and should be easily accessible.
As I mentioned a little earlier in this post, we are currently implementing a new search feature that will be far more predominant on the site. But the issue of content clutter can also not be overlooked when it comes to how search results are presented and how they form the beginning of the informational chain that will ultimately lead site visitors to the content that they are seeking in a quick and clutter-free way.
Here again is a screen shot from Smashing Magazine that shows how its search results are displayed. The site employs an embedded Google Search, which isn’t uncommon as many sites use it to increase their standings in broader Google searches with regards to various topics that relate to them. My focus is on how the results are ultimately displayed with regards to clarity and ease of usability…
Notice how the search result text is cut off by the sidebar, as indicated by the red arrow. Also notice that the search results are confusingly preceded by the inclusion of adverts as well.
Hey! It’s My Day Off!
Anyway, back to enjoying my day off. We’ll be working on implementing the changes I mentioned earlier this evening, and, over the next few days, will make sure to post an entry outlining all of them.
Report
maybe you should let Raymi do your site’s front end
Report
Quoting D. Lilly:
I don’t think pink little bunnies are Matt’s Style Dan… but then again.. you never know!!! :P
Report
Haha, maybe you should both get out more (you and Dale, that is).
Report
I don’t care how much work is being done. I will cut no freaking slack. No slack will be freaking cut by me.
Report
Seriously, you and Dale do some amazing front-end designs, stuff you should both be really proud of. And I hope you guys are at least drinking beer on your day off while you code away.
Report
Holy crap, that’s a lot of ads.
White space is highly underrated. Lots of people approach empty space in design the same way they deal with pauses in a conversation: it must be FILLED! Here’s to comfortable silences… and visual breathing space.
Report
I appreciate that you don’t have a ton of adverts on your page, especially the animated gif types that slow up page load time. I can constantly here my processor fan kicking on when on heavily adverted sites and it’s annoying.
Report
I enjoy the simplicity of the page design. It’s sleek and clean and I don’t have to rummage through a bunch of garbage to find what I need. It’s all about the content anyways.
Report
Quoting D. Lilly:
This is quite possibly the funniest thing you have ever written here, Mr. Lilly.
(the New No Politics Robert)
Report
I wish I could laugh. But I can’t. Because Raymi’s site won’t open completely on my computer… wtf.
p.s. How was your day off? I have a funny feeling you were on the computer all day and that is why you never really told us what you did today, because that was I.T. er…. IT.. :o(
Report
I love this newer set up, simple, clean and not offensive to the eyes.. keep up the great work!
Report
Love it when you talk nerdy. :D
Hobbyist? Oh c’mon… you guys are the minimalist *masters*. I’ve got a blog with an okay layout, but it’s not near as crowded as Smashing mag and similarly laid-out sites. Two right sidebars for the win.
Also, if you write about typography, I think I will die. :D
Report
Quoting T-Lee:
My workplace blocks Raymi’s site. Apparently it is porn. (When I tried to visit The Onion, they said that was porn, too. I think they have a loose definition.)
Report
I see and hear a lot of what Dale and Matt experience in a week, trying to constantly improve the site. I believe their commitment to keeping the site fresh and constantly creating a better incarnation than the last is something we as readers are very lucky to see.
Report
I, for one, would like to see less white space. Let’s get some corporate ads in here! And banners where I can win a PS3 if I click the monkey!
Report
Hey Hey :-)
My gf is huge fan of Matt and pointed me to this story… (I’m a computer programmer here in Montreal…)
I do agree that designing with white space in mind is a difficult task. It’s easy to just throw everything on a page and hope people will be interested enough to read everything…
That said…. Appearance is everything… A well designed website will attract visitors because it looks professional. Once they’ve reached the site, you need to keep them there. White space allows them to “breath”. However…….. There’s another key aspect to a good website. That’s font size and font style. Once they’ve reached your site, you need to “tell“ your visitors what to read first. For example, to instruct the reader to read the title first, you simply have a larger font than the content. In your case, you have a great site, primarily because you have a 1 column design. From there, you have a title in a large 16 pixel font size. This tells the reader right away where to start.
This holds the same weight for large multi-column websites. You must use larger darker fonts to denote where to have to readers eyes move first. Once they’ve read the title, their eyes need to be guided. They obviously know that if it’s a title, below should be the story, thus the story goes below, however in a slightly lighter font color, and in a standard font size. The key to the story is that it cannot have too much content initially. For example, your main page has only a part of the story to allow the reader to view the other titles since not everyone will be interested in (WEB 2.0 ;-) Askmen.com is another example where they have a simple format where each story is only 3 pages long. This keeps the reader interested just long enough to breeze through the story and move on. It’s divided up into pages to allow the reader to decide if they want to keep going.
Actually….
If anyone is interested, this is a website that talks about eye tracking heat maps: http://www.useit.com/alertbox/reading_pattern.html
I believe this should be the website that performs the study: http://eyetrack.poynter.org/index.html
(It’s been a while since I last looked it up)
Heatmaps are conducted on certain sites to determine where and what people are reading first. This tell the web designer exactly how the text on the page should look, where it’ll fit, what size to use, etc…
A quick note to the heatmap links above……. The study shows that in a picture of a baseball player… Women will look at the baseball players face. Men will look at the guys face and bat, and also…. His crotch….
Finally…..You said:
“Most websites offer a dedicated search feature that, depending on its parameters, will produce in-depth results. Ironically, site based searches are commonly underused, something that I have never understood.”
My answer (After being on the internet since 1993):
The search feature is not used because people don’t believe it will find the data they are looking for. People use google search because they know in advance it’s a general search that simply searches web pages. The problem with site searches is that it’s not standard. Some will only search titles, others the content… This simply turns the reader off of doing a search on a site…. To correct this… you could always put a popup or a message beside the search that says: “This will search all titles and content on this site.” this will reassure the user that the search is “doing all it can” to find what they are looking for.
As an example, before heading to your Kingston show this weekend, my gf wanted to know the set list…. She used your search and couldn’t find it. I told her to try google search with these parameters: “Site:www.matthewgood.org Kingston setlist 2008” I believe that this had returned the proper results… (As a sidenote, you should probably have a dedicated section for your setlist as I’ve seen great interest from people wanting to know in advance what you will play at each show… )
To transition to an almost similar topic:
Something should be said about our inbox’s… When’s the last time we deleted something? I read an article recently on how people refuse to delete stuff from their inbox, or categorize it badly (creating folders with peoples names, instead of using “Search Folders”). There’s a technique out where you only need 4 folders. If you would like to learn more, let me know
Suggestion: Your site looks great, but I would consider useing a width of 620 instead of 570. 570 personally feels like it’s not wide enough. If it could just be a touch wider, it would be great… Just a suggestion though
Dale/Matt: I believe Dale is the site designer? I think, Dale, you were the one i asked if Matt would sign a cd before you got on the bus in Kingston… hehe… Good work guys keeping upto date with site design and layouts… :-)
I will stop now as I’ve written too much… However if people want to know more, or disagree, just let me know in your replies…
Frank
Report
Corporate ads… hmmmm, I have been told you could make money for that….. is that true? I got the strangest email from some company not even telling me their company name asking me to advertise their logo on my blog… was that bizarre or what? If it’s a legit company, would I get paid for advertising their stuff on my blog?
Report
I love the white based design. Too many sites are “noisy” to my eyes and turn me off revisiting, just as you said.
Report
I think you guys do a great job with the design (although at the moment I miss the Flickr thumbnails…don’t know if that’s a temporary glitch or if y’all decided to remove them).
Might I suggest, if it’s not already on the agenda, alt tags for the little icons at the top (you know, the RSS feed, Flickr, etc.)?
Looking forward to the search function. :)
Report
“Register for an account” seems to be screwing your navbar – but I’m sure you already know that and are working on it.
As a graphic designer myself I too am an advocate of white space. Less is more as they say (think Apple v Microshaft…). But it sure is tricky translating static paper designs to the web. And then, just when you think you’ve got it looking OK you’ll see it doesn’t work in such-and-such browser. Tip: even though I loathe the things it is worth testing your spanking, shiny new designs on a PC…though I’m sure you’re also one step ahead on that one too…:0)
Report
Quoting foresthouse:
It might be related to your browser. I see them using Safari on a Mac.
Report
Hey Hey :-)
My gf is huge fan of Matt and pointed me to this story… (I’m a computer programmer here in Montreal…)
I do agree that designing with white space in mind is a difficult task. It’s easy to just throw everything on a page and hope people will be interested enough to read everything…
That said…. Appearance is everything… A well designed website will attract visitors because it looks professional. Once they’ve reached the site, you need to keep them there. White space allows them to “breath”. However…….. There’s another key aspect to a good website. That’s font size and font style. Once they’ve reached your site, you need to “tell“ your visitors what to read first. For example, to instruct the reader to read the title first, you simply have a larger font than the content. In your case, you have a great site, primarily because you have a 1 column design. From there, you have a title in a large 16 pixel font size. This tells the reader right away where to start.
This holds the same weight for large multi-column websites. You must use larger darker fonts to denote where to have to readers eyes move first. Once they’ve read the title, their eyes need to be guided. They obviously know that if it’s a title, below should be the story, thus the story goes below, however in a slightly lighter font color, and in a standard font size. The key to the story is that it cannot have too much content initially. For example, your main page has only a part of the story to allow the reader to view the other titles since not everyone will be interested in (WEB 2.0 ;-) Askmen.com is another example where they have a simple format where each story is only 3 pages long. This keeps the reader interested just long enough to breeze through the story and move on. It’s divided up into pages to allow the reader to decide if they want to keep going.
Report
Actually….
If anyone is interested, this is a website that talks about eye tracking heat maps: http://www.useit.com/alertbox/reading_pattern.html
I believe this should be the website that performs the study: http://eyetrack.poynter.org/index.html
(It’s been a while since I last looked it up)
Heatmaps are conducted on certain sites to determine where and what people are reading first. This tell the web designer exactly how the text on the page should look, where it’ll fit, what size to use, etc…
A quick note to the heatmap links above……. The study shows that in a picture of a baseball player… Women will look at the baseball players face. Men will look at the guys face and bat, and also…. His crotch….
Finally…..You said:
“Most websites offer a dedicated search feature that, depending on its parameters, will produce in-depth results. Ironically, site based searches are commonly underused, something that I have never understood.”
My answer (After being on the internet since 1993):
The search feature is not used because people don’t believe it will find the data they are looking for. People use google search because they know in advance it’s a general search that simply searches web pages. The problem with site searches is that it’s not standard. Some will only search titles, others the content… This simply turns the reader off of doing a search on a site…. To correct this… you could always put a popup or a message beside the search that says: “This will search all titles and content on this site.” this will reassure the user that the search is “doing all it can” to find what they are looking for.
As an example, before heading to your Kingston show this weekend, my gf wanted to know the set list…. She used your search and couldn’t find it. I told her to try google search with these parameters: “Site:www.matthewgood.org Kingston setlist 2008” I believe that this had returned the proper results… (As a sidenote, you should probably have a dedicated section for your setlist as I’ve seen great interest from people wanting to know in advance what you will play at each show… )
To transition to an almost similar topic:
Something should be said about our inbox’s… When’s the last time we deleted something? I read an article recently on how people refuse to delete stuff from their inbox, or categorize it badly (creating folders with peoples names, instead of using “Search Folders”). There’s a technique out where you only need 4 folders. If you would like to learn more, let me know
Suggestion: Your site looks great, but I would consider useing a width of 620 instead of 570. 570 personally feels like it’s not wide enough. If it could just be a touch wider, it would be great… Just a suggestion though
Dale/Matt: I believe Dale is the site designer? I think, Dale, you were the one i asked if Matt would sign a cd before you got on the bus in Kingston… hehe… Good work guys keeping upto date with site design and layouts… :-)
I will stop now as I’ve written too much… However if people want to know more, or disagree, just let me know in your replies…
Frank
Report
I’ll take the simple life with the white space. Less is best. No grids please. That would really be torture to the eyes! I’m sure you two get plenty of that when you play battleship all night.
Report
Hahahhaha, to the last little Hobbit poke…
I have a photo I would like to post that has to do with a special Hobbit place I found a while back..Does anyone know if there is a way to post it?
Report
To quote the brilliant: White Space = “forthright and to the point” = sexy
nice work
tina
Report
No media player?
Report
Hope you were able to enjoy your day off!
On a side note, I appreciate the design of this website - it doesn’t give me a headache!
Report
Oooh! I just noticed a few things….
I love how you can search the archives by date like that. Very cool. I’m also diggin the new “Music” tab - very organized fellas. =)
Report
Wow,
I don’t know how you could improve on this site. Easy on the eyes & everything is easy to find…… I can’t wait to see what you guys come up with.
Simulcast maybe????hint hint :)
Report
I mean webcast….Doh!
Report
I really appreciate the design work you guys do on this site. Half the time when I’m on other sites I feel like I’ve got my head stuck in a plastic bag.
Report
(BruiseViolet:
http://www.flickr.com/groups/thecooperation/pool/)
Report
Thanks for the Kingston show Matt! Fantastic as always, great setlist, always a pleasure after the show, and the new band rocks! So happy for the backup vocals.
Report
I bet the traffic to the MG website would triple if more websites would block it as porn.
Report
Err… “companies” not “websites.”
(How’s that “edit” function coming along?)