Redesigning text-heavy site


#1

This may be a little too vague to work with, but I am looking for suggestions for examples or resources to look at for a site redesign.

The site in question – https://www.westeros.org – is quite long-running and has a relatively outdated design aesthetic, even though it has been updated to be more or less responsive. But there are limits to what I can manage on my own, so this time we’ll probably be looking at getting some help. However, I am a bit of a control freak so I would prefer having a pretty solid idea of what direction to go in before approaching anyone. So far, I do know we want to have the front page be able to highlight several different recent stories as well as offer easy navigation through to the various distinct subsections.

One issue with moving forward to a more modern design is that the site contains several different kinds of content: news blogs, galleries and what might best be described as information resources. Finding an overall style that suits it all has not been easy. There’s obviously room for variation, but the site still need to appear cohesive. Another complication has been that the content consists of a lot of text, with relatively few images to break things up.


#2

I would be tempted to first validate the webpage:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.westeros.org%2F


#3

I don’t see how that is relevant to my question, especially since none of those errors affect the appearance of the page. I am quite aware of how to validate a page and have chosen to ignore those.


#4

I imagine the type and alt errors should have little to do with display. But IMHO others could affect display.


#5

I disagree about “none of these errors affect the appearance…” because there are well over 30 errors detected. I can’t imagine every browser will guess the same desired output and therefore render the page slightly different.

Most of the errors and warnings are trivial and easily fixed. Once there are no errors and warnings showing it is far easier to make additional changes and if the rendered output is not what was expected there will be very few possible problems to resolve in order to perfect your design.

Rendering speed is also affected because each browser has to guess your requirements and pick a possible solution.

How many browsers and different platforms did you try and were the rendered results all acceptable?


#6

The vast majority concern the incorrect absence or presence of the alt tag. Others come from automatically generated content (ads) or scripts that I have no control over how they are constructed. These issues simply aren’t at all relevant to what I was asking about. The page as it stands right now renders exactly as I expect it to render (including the fact that the menu doesn’t work on mobile because I wasn’t able to figure out how to do it), but since I am looking to rework it entirely, that hardly matters. The only reason I posted the link to the existing site was to exemplify that a) it is outdated and b) what I meant by text-heavy content that more often than not isn’t associated with an image.


#7

Do you mean changing one or more of:
-The page layout?
-The site structure?
-The site style?
-The color scheme?

What are your own thoughts about how the site works now for the users, and what does the site owner want?


#8

Primarily page layout and site style. The structure I would prefer to touch as little as possible to keep existing links working and the colour scheme is also used on our wiki and forum so we’d stick with something along those lines.

The main issues for me are being able to effectively highlight new content on the initial page and also providing navigation to the relatively deep site structure. Navigation in particular has been an issue all along, especially in terms of making it work across a variety of platforms. That’s where it got well beyond my skill level (I am the co-owner of the site and entirely responsible for the layout, with my partner handling the content) and why we’ll probably look at getting some help this time around.

But, like I said, I would want to present a fairly detailed proposal, and when you look around at design resources or existing sites, so much is image focused. I have been considering maybe using a pool of generic related images for each news blog to have as story images, but I am unsure of how that comes across in the long run.


#9

While thinking about the options, one thing that could be improved as it is, is to make the image in the middle adapt to the paragraph width:

.ImageMiddle img{
	width: 100%;
	height: auto;
}

#10

Thank you, good point. I actually thought I had gotten around to fixing that.