Okay, so the purpose of this post has evolved to the point where a lot of the information it contained has been rendered superfluous. As you can tell, I have used some magical internet… stuff… to redesign the page a bit. The main sidebar is on the left (a more prominent placement) if you’re reading this on the site’s main feed, i.e. you’re at https://www.talesofmu.com/story. It’s on the right (less prominently placed) if you’re on an individual story. Right now I’m abusing HTML tables to achieve this effect on the main page due to some glitchiness that wasn’t present when I tested the concept on Fantasy In Miniature, so you may intermittently encounter a situation where the page is basically blank below the header until everything has finished loading, but that’s a minor and occasional glitch and it goes away after a second.
The Twitter badge has been expanded to a proper feed, to the right of the main page. It’s not currently visible in any form when you’re reading an entry. I don’t see that as a downside, necessarily… I could stick the old Twitter badge in the sidebar or something but it doesn’t really seem necessary.
In the meantime, please let me know if the new layout causes any problems for you or if anything looks weird/wrong. Please tell me your resolution and browser (i.e., Firefox, Chrome, or, in fact, “i.e.”.) if you’re reporting a problem.
Original Post, with Edits:
I’m working on de-cluttering the site design a bit. While a lot of the things in the sidebars were added due to specific requests, the overall effect has been to make it hard for people to notice any one particular thing over there. People have emailed me who missed the search box, the ad for The Gift of the Bad Guy, the feed for Fantasy In Miniature, etc.
I think I’m going to cut it down to a single sidebar again.
So, here are a few questions:
1. What should I do with the extra space? Choices are: shrink the “parchment page” down by the width of the second bar so that the story and remaining bar are the same width as they are now, increase the width of the story/content column, or sort of split the difference… make the story a little wider, maybe increase the buffer on either side of the bar a little bit.
2. Any objections to putting the sidebar on the left-hand side? I’ve got some anecdata from people that this is “confusing” as the content isn’t the first thing on the page, reading from left-to-right, but I’m not sure how widespread that impression actually is… my instinct is that maybe things like the search box will prove less evasive on the “near” side of the page than the “far” side.
Please Note: This is part of a general ongoing site improvement/overhaul thing… improving navigation and organization is already on the menu here. Please don’t feel like you need to voice support or suggestions for things dealing with that.
Edit To Add: Just so I don’t get a bunch of the same suggestions, let me add the following:
- There’s only going to be one sidebar. A sidebar on either side, even with everything the same width it is now, makes the story look “squished-in”. I experimented with that before making a double-width sidebar in the first place.
- I’m really not looking for advice as to the order and placement of things within the sidebar, as the contents are going to be changed and pared and some of the things currently in the sidebar are going to find a different home. Also, I have certain obligations with things like the placement of the BlogAds block. The fact that it needs to be up top is one of the reasons I split the bar in the first place.
To sum up: what I’m really looking for here is reader preferences for what to do with the extra space I’ll get from dropping one sidebar. As an example, here’s something I mocked up on Fantasy In Miniature, which used the same layout as Tales of MU before I just edited it. The sidebar is now a single bar, it’s on the left instead of the right, and the story content has been widened. I specifically set it so that on a 960 pixel wide screen you can view all actual content (the bar and the story) without scrolling and on an 800 pixel wide screen (apparently, some people still use those) you can fit the whole story on the screen from left-to-right. Does that look good? Does the bar on the left break things for anyone?
Son Of Edit: Ooh. I just noticed that because there’s a different php file for looking at the main page (the list of most recent updates) and an indivdual story, and I only changed the HTML for the former, the sidebar flips sides on Fantasy In Miniature depending on whether you’re looking at an individual story.
It’s not the prettiest effect in the world because it was unintentional… but I think it might solve some of the dilemma here. The sidebar on the left on the main page feed so it will be more prominent, on the right when you’re reading a chapter. How’s that sound?
Revenge Of Son Of Edit: Okay, after seeing how it works in Fantasy In Miniature, I’m almost certain that I like that set-up… I’m going to be getting it in place here and this post can be for feedback about the change.
What I would do:
Put the blogads block horizontal under the Project Wonderful bar.
Put the Book Archive in the “menu bar” between “About the story” and “Alumni association.”
Put the Contact Me link after “Email Updates.”
Then put the outside bar on top of the site search and search cloud.
Give the left margin somewhat more space.
Honestly, I like that the story updates aren’t sandwiched between two sidebars. It makes the site different and IMO better looking than most others these days.
Edit: Whoops, that might have been a little too strong. The above are just suggestions, and one way or another, I’ll still keep reading and supporting. 🙂
Honestly, I like that the story updates aren’t sandwiched between two sidebars. It makes the site different and IMO better looking than most others these days.
There’s only going to be one sidebar. Take a look at Fantasy In Miniature for a quick-and-dirty mock-up of what I’m talking about… not so much the content of the sidebar or the order of its contents but its placement.
The sidebar or menu to the left of the page is a little more confusing because you have to train yourself to skip over it while reading the text. However, each of us is pretty much trained to read in columns as the majority of websites do have their menu to the left, and newspapers write text in narrow columns (though they are very narrow for a reason to make it easier for the eye and brain to track to the start of the next line). It is one of the reasons why I typically have the width of the browser window to half the screen, so the columns of text do not get too wide for comfortable reading.
The easiest thing, for the reader, to do is to give the menu a different background colour. That way it is immediately obvious where the main text ends and the side menu starts. Then it does not matter if the menu is to the left or right either.
The sidebar or menu to the left of the page is a little more confusing because you have to train yourself to skip over it while reading the text
Seriously?
You’re saying it so I guess it must be true for you, but I just can’t wrap my head around how it can possibly be an issue… or if it is an issue, what mechanism stops you from “reading through” when it’s on the right.
The different background color isn’t a bad idea, though I might pass on it if it doesn’t look good with the parchmenty background. After playing around with the basic idea on Fantasy In Miniature, I’ve already added a border.
Leaving my curiosity/disbelief over the “train to skip” thing aside, check out what I’ve got going on now… prominent placement for the sidebar when you’re viewing the main page, easily-ignored righthand placement when you’re reading a story.
Works?
You could split the difference in other ways also, while keeping the three column setup. By placing anything MU related on the left, then the story, then your links for flash fiction, ads, blog feed and twitter feed on the right. Personally, I’d put “first time here read from the beginning” at the top on the left, then recent, then archive of books with the search bar beneath with the cloud below it. It could be possible to instead move the search to its own page with the cloud and put that in the top menu as a link. I would also move contact info there (top bar below the heading), potentially as a static ‘about the author’ page with contact, personal blog and a page for other projects (and then link the other stories and FIM from that page with blurbs about each project’s status). Setting things up that way could basically free up the right hand side for the twitter feed and ads. Everything “Immediate MU related would be on the left and be like a ‘classic’ table of contents, story would still be central to the page.
I like erianaiel’s suggestion of a different color for the menu(s) to help break up the page.
Personally I’m a large print kind of gal so where the columns are don’t matter. I’ve got my screen zoomed out to where the story is the only thing in my field of vision no matter how things are set up.
I’m definitely not putting bars on both sides… tried that when I was experimenting with the current set-up and it makes the story look squished.
that makes sense. As I said, with how I have my screen set for comfortable reading, I don’t see the columns unless I scroll anyway so my view is a bit skewed to the regular readership.
What about expandable sections? Obviously on ads this isn’t possible, and for twitter it wouldn’t be useful either but some sections it might help with; default it to compressed might be best.
If you do go with a left hand column rather than staying with the right, some sort of visual aid would help matters.
(Edit) Just read your edit that you made while I was posting my response – Love it!)
Using SeaMonkey, the site is unreadable. The text is shifted to the right and chopped off – the first line only has “Okay, so the purpose of this post has evolved to th” on it, the rest is chopped off.
I thought the old design was good. 🙂
I cannot reproduce this error. What version of SeaMonkey are you using?
Here is a screenshot of what the webpage looks like in Chrome/webkit in 1600×900 resolution. http://dl.dropbox.com/u/7262825/talesofmuscreen.jpg
It leaves a big stretch of unused manila page space on the right in story mode, which does not look intentional.
Weird. You can tell something’s wrong because if you look closely, you’ll notice the sidebar’s covering part of the Project Wonderful ad.
But strangely, I’m using Chrome and I can’t reproduce that at any resolution. Is it still doing it? Between 5 and 6 there were some server problems with the site that may have resulted in some components not loading correctly.
It no longer does this. I was looking at it right before an outage, so that may be why. Here is what it looks like now.
http://dl.dropbox.com/u/7262825/talesofmuscreen2.jpg
It it still not quite using all of the manila page space, but the gap is not quite as big as it was before.
Main page looks fine in Opera. So does the story page, though it could use a little more space on the left margin, in my opinion. Like, an eighth of an inch or something. Then again, it may just be Opera.
As an occasional reader-on-my-phone (and other non-desktop browsers), having the content on the left is much more accessible.
I think it’s intentional not an error, but I’m using Firefox 3.6.17, and the sidebar doesn’t have any “newest stories” info, (and I miss your twitter feed).
The newest stories links are important to me for two big reasons:
1) I always load up the “Three Interviews and a Coffee” page, in hopes for an update. Without a link to the newest, I’m lost (almost didn’t find this page).
2) Sometimes life intervenes, and I have to catch up – the last 3-4 entries makes it very easy to see where I was last and rejoin the thread of the story.
Can the text of the story/post/what have you spread to fill the page below the sidebar? Currently, once I’m down past the ads/items in the side bar the entire page looks lopsided.
Not really, no. There are ways to make it inset, but trying to make the text expand intelligently doesn’t work very well. Some people with wide screens will end up turning their heads back and forth like they’re watching a tennis match. In any case, it has always had that “lopsidedness” when you got past the sidebars.
Your post assures us that there is only one side bar on the “/story” page and that the twitter feed will return.
In light of those assurances I feel I should let you know that, when viewing that page with Firefox 4, there are in fact 2 sidebars and the twitter feed is still visible in the right hand bar. Everything else is in the side bar to the left.
It’s probably just a case of me being late to the party and you’re preparing another edit as I type this, but if Firefox is magically displaying a feed you removed from the site I figured you might find it relevant
My main problem with this site is that I can never find a table of contents for the story, and don’t even know if there is one. Just a list of chapter numbers and titles (and their dates), with a link to each one, and perhaps headings for the major sections. It’s always a problem when I come back after many months and want to try to find where I last left off so I can catch up a bunch.
Where did “recent comments” go? I rather liked that feature…
yeah that was pretty cool, gave more discussion/community.
I’m thinking your Site Search, Boook Archive, and Contact Me should be placed ABOVE the advertisement.
Other than that, it looks fine to me.
Having the content sidebar and a separate twitter feed sidebar on the other side seems cramped to me.. #justsayin’
It only does that on the “table of contents”, though.
suggestion for the left sidebar – maybe replace the ‘book archive’ with links to the 5 most recent chapters for the main page, and the 5 previous chapters (or 3 previous chapters and 2 next chapters, or 5 next chapters, or wherever, depending on what point in the story a reader is at) for an individual chapter page.
The “books 1-5” thing seems a bit outdated since the most recent “book” is from 4 years ago and everything after that is just uncategorized.
I’d also get rid of the character cloud, the huge “Mackenzie” right in the middle is distracting, maybe just make a search box for tags (characters) with a caption to find stories about your favorite characters.
Not really looking for suggestions about the sidebar content, it’s not anything like final right now.
oh and have you considered changing the color scheme at all? a crisp black/white or black/light blue is easier to read than shades of beige and brown that remind me of 70’s home decor.
If I make it black/white or white/black, I’ll get a load of complaints. Some people just can’t read/look at that kind of high contrast for very long.
Whoa something has gone nuts in the last couple hours… I’ve got blue lines at random on the story page and the text is squished up weirdly and hard to read. New since 5 hours ago, definitely. I use google chrome. The individual story pages all appear to be fine, just the main feed has gone odd.
Hi, I’m reading the story using Safari as my browser. Individual chapters look fine, but the main page looks like this: http://www.facebook.com/media/set/?set=a.10150186805243952.315075.627013951&saved#!/photo.php?fbid=10150186805448952&set=a.10150186805243952.315075.627013951&type=1&theater
Just to let you know, I don’t know if you all ready knew about this problem. 🙂
Thanks for writing MU, keep up the good work. 🙂