Help me redesign my website: also, should I convert to Wordpress?

In My Humble Opinion
1

Hi all. I have two separate questions relating to a loooooong-needed redesign of one of my websites. (Web design is one of my freelance areas, but my personal site has been left ignored since 2001! One of those ‘the shoemaker’s children go barefoot’ deals I guess. I don’t have time to redo my own sites.)

This first post contains the question for everyone; the second post below is probably more for people who are either designers or bloggers, or just knowledgable about blogging in general.

**Question #1: The obvious – could you give your opinions on this draft of the possible redesign? **

Current 12-year-old site | Mockup draft of new design

I should mention that this is a site devoted to a webfiction serial – similar to a serialized novel, but open-ended. The serial contains a lot of mystery, melodrama, darkish psychological themes (hence the colors I’ve used, which i think work for the atmosphere). Not great literature, but fun to write and, I’ve been told, pretty addictive (especially once you get past the choppy first season, where the writing is definitely not so hot; I intend to redo that).

I’d love to hear your feelings about the look, whether it’s attractive, whether it seems too crowded, whether the navigation and info for newcomers is obvious enough, and any suggestions about what else could go at the bottom of the page (for example, I’ll have an opening theme video, different from the current one; I could link to my novels; I could link to each season separately; I could have a different reader quote/blurb on each page load; anything, really).

Most important is the clarity and potential interest for new readers. I don’t want anyone getting overwhelmed or lost.

OOH forgot to mention: Obviously you can’t tell from a static image, but for computers, the width of the main content is 1140px; the background (a waterfall) will take up the width for people with super-wide HD screens). For people with smaller resolutions or mobile devices, the site will adapt accordingly.

One major impetus in revamping my site, aside from the fact that the current site is crazy old and fugly (or at least I’m bleedin’ sick of it), is making certain it’s accessible for both computer/wide screens and mobile devices / narrow screens. The same design will adapt to all resolutions, simplifying for the narrower screens, so I won’t have to create two separate sites. But remember the above is just a plain image, so it may look too wide for some of you. The final version won’t require any horizontal scrolling, I promise!

FINAL NOTE: I am not one of those people who asks for advice and then pooh-poohs every critical remark. If a comment is constructive – or hell, even if it isn’t – I’ll consider it and will be grateful to anyone who takes the time to respond. I mean, “It sucks” isn’t hugely helpful, but at least it’s feedback. I’ve been doing this since 1997, both as a hobby and eventually professionally, and I’ve learned to take criticism. Doesn’t mean I might not have reasons why some things are there, and I might defend/explain a choice, but all opinions will absolutely be taken into account.

Whew. Okay I’m going to post the next question immediately below. Don’t want this post looking as long as one of my serial chapters! :slight_smile:

Thanks to anyone who gives a look!

2

Okay, now the second question!

Question #2: To blog or not to blog: should I convert this massive site to Wordpress?

Ever since its launch in 1997(!), my site has been created on static HTML via either a plain text editor or Dreamweaver, or a combo of both. With (deep breath) 1.3 million words and more than 1000 separate pages, this is a massive site to maintain.

Meanwhile, the vast majority of webfiction sites are Wordpress-based blogs. I know there are search engine advantages, and it would make future site redesigns easier, and searching / tagging would help readers too.

However, there are downsides and that’s why I’ve been going back and forth on this decision. The biggest is, well, did I mention 1000+ pages? Copying each of those over to WP seems like it would be a nightmare. Second, there are certain navigation issues that concern me, such as the importance of popup windows (I use these for setting descriptions and character bios, which are currently accessible throughout the text so anyone reading can easily access a character’s profile to refresh one’s memory of who this person is) and giving my readers a choice of having each installment/episode broken up into separate scenes or read as a single printable page, which is what I have now. I know there are some popup plugins that allow the former, and I think there are plugins that will allow the latter.

I also don’t want to cause more work for myself (after the initial changeover). Sometimes I copy my writing from Word to Dreamweaver and the text is automatically formatted correctly (e.g. italics and boldface copy over correctly as EM and STRONG codes). That doesn’t always happen when I’ve done the same with Wordpress.

So the question finally boils down to: for those who are knowledgable about Wordpress / blogging, I guess I’d ask: would such a vast changeover be worth it? What are the advantages of going to Wordpress, bearing in mind that i have no fear of HTML so “easy inputting of text without worrying about code” – so often used as a blog selling point to novices --doesn’t apply here. I know ability to coordinate with social media networks is certainly one; RSS is another (though both can be used without a blog, WP does make them easier); searching/tagging are big plusses.

Do the upsides outweigh the possible downsides (the security maintenance issues, the frequent updates that might break my design, the prospect of copying all those kabillion pages (and re-coding the character popups), and general relearning a methodology I’ve gotten used to for 15 years)?

Thanks again guys!

3

The old is too tight and busy, the new is far better.

Not that I am a fan of social media buttons — or the social media fad — since I think they are barely used on blogs. It used to be the dreaded Digg effect: even before Digg imploded very few blogs were in the slightest danger of a massive rush of traffic.

I’d avoid responsive design myself, a good theme should naturally be adaptable even with fixed widths, at least by now, for the same reason I’d not have infinite scroll ( which is just silly ) or too much JavaScript.
WordPress

I use it and am happy with it, at least until they stuck a sodding toolbar at the top; it’s mandatory, but can be removed so far with plugins. I loathe toolbars. I felt so badly about it I looked into converting the site to another system or even strict html ( about which I know nothing ) — there are converter sites which can for a fee convert one forum to another forum software, or WordPress to Joomla etc., and I’d look into that before personally converting 1000 pages…

The cost would be outweighed by the time and tedium. Writing stuff the first time can be fun: reworking the same stuff is less so.
So I opted out of updates. These are too frequent, but rarely break a site now: with adequate security provided through an array of plugins and a few .htaccess files ( by now I added so much to the latter, I can’t remember what each portion of code is for… ).
Security

Not as bad as it’s painted: my site was down last week due to the may botnet attack, but more because the host servers were overwhelmed and had to be repaired rather than to anything penetrating WordPress. It’s more that hosts on Shared Hosting who have lots of WP sites are going to be targeted rather than the WP sites are insecure.

On the other hand, the changes I made during this, now load the site in 4 - 5 seconds instead of the 30 seconds previously

[ Not that I ever cared about that or any other site being slow: if someone can’t wait more than 2 seconds I’m not caring about them. ]
There are plenty of plugins for most needed things and I would recommend WP with caveats, although the ecostructure is rather too overenthusiastic and self-loving, which combines with as you may expect closed minds and bullying as a reaction to dissent; the official mantra of WordPress is, appallingly ‘Decisions, not Options’, which not only is opposite to the spirit of Open Source, but means you shouldn’t want anything different to whatever craze the developers decide you should want.

That can be ignored easily enough; but I think the main benefit would be having WP’s excellent Admin Panel: since your strengths are in html and old-school coding I’d think you may be better off not going to WordPress.

But if you do, there’s nothing scary there. Good luck.

4

Thank you very much, Claverhouse! That’s extremely helpful.

I’m glad you think the new design is an improvement! You’re so right about the old one, it’s just… ugh. Well, it’s hard to be objective about it, I’ve been staring at the freakin’ thing for 12 years now, so I’ve grown to despise it merely out of boredom (but also because it’s just so old-fashioned and crowded – and so very narrow, though of course resolutions were far lower back then, and IIRC I stuck to below 760px or so). Believe it or not in 2001 this was considered a good-looking site! Anyway it drives me bonkers now.

Heh. Yeah, I hear you. I don’t want the whole menagerie of social media “share” buttons, as I highly doubt I’m going to be flooded by any huge audience. The basics are just linking to my official author Facebook and twitter page, and to Youtube for the videos related to the serial (trailers and so on). Oh, and for an update feed, which will depend on whether I make this a blog or not. Not 100% sure about the Google+ icon; I have an author page there, and I know it’s very good for Google Authority, but really the icon’s just a placeholder; I might exchange it for Pinterest, which is where I’d use some character photos and so on. For fiction authors this stuff is pretty standard, but heaven knows I won’t be going crazy with them; I don’t have the time or effort or delusion to think it’ll be all that necessary.

(Oh, I should probably link to Goodreads too, just remembered that. Not sure if they have an icon; better find out.)

Oh my GOD I hate infinite scroll–that’s Ajax, isn’t it? Or jQuery? Fuck that noise. You’ve piqued my curiosity, though: how would a fixed-width site be adaptable without responsive design (aside from a second mobile-specific version)? Do you have any examples of that? I’ve created a couple of responsive sites, one on Wordpress (really just heavily customizing a theme), one static HTML (converted from an original fixed-width site), and boy, if I could’ve avoided that, I would have been a very happy camper!

Yes yes yes, that drove me crazy when I was developing that WP site for a nonprofit group. I think I used that same plugin if I remember correctly. I understand why they added it, I suppose it’s the least one can do considering this free product is so useful, but I’d rather donate to get rid of it than even have to use a plugin. But people would probably go crazy if any money was involved in the project, so it’s probably never gonna happen.

Oh. My. God. I never even considered that there might be a converter or a plugin for that. That… that could be a total game-changer here. I can’t believe I never thought of this before, I love all sorts of script generators and automated whoosits and so on! If I find something like this you will get my hypothetical first born. Well, okay, I’m 46 so my first born would probably have five legs and six eyes, but nevertheless. Thank you so much for that idea!

That’s always a risk, isn’t it? I did the same to my vBulletin installation. I started out with such perfect intentions, marking up the code, keeping track of every addon and PHP or CSS or javascript tweak… but over ten years I kinda just got lazy, and now aside from security fixes I haven’t updated past vB 3.6.7, because it’s such a kludge. And there’s no way I’m gonna update to the newer versions (vB4 and vB5), they’re awful.

Mmm, good point there. I do have shared hosting, though I don’t think we were affected at all; at least my WP installations (I actually already have an add-on blog for my podcasts and behind-the-scene commentary posts) remained up and running. My hosts rock, I have to say.

That’s pretty bleedin’ good. How fast is your ISP? Mine is slow so sometimes things that seem fast on others’ systems are turtle-like on mine. Is your site in your profile? I’d be really grateful to see it, unless it’s personal, in which case, never mind of course.

LOL! My clients would pitch a fit if I said that to them. :slight_smile: I think it depends on the site. If you’re an art-based site where photographs or other media elements are part of the deal, people are generally happier to wait. For mostly text, or for new sites just starting out? I am very careful to keep things fast-loading. Especially considering mobile devices these days. Speed is pretty important for mobile users.

That’s one of the reasons I’m a fan of responsive design. You can cut out unimportant elements and it sort of forces you to realize what’s important and what’s just frills. That’s mainly if you design for mobile first, then move outward to add things for PC/laptop users. A site like mine, where the text is the star of the show (and with 1.3 million words, that’s a pretty hefty star), means that for the mobile version I’d keep things to bare-bones: navigation, much smaller site logo (swapping it for the larger header you see in this mockup), description for newcomers, and the current episode / episode archive links.

Oh dear, you giveth with one hand and taketh with the other! :slight_smile: I was all set to lean in the WP direction and now this. I don’t keep up with the WP developers’ community, so I didn’t realize that’s how hidebound or restrictive they can be. That does seem rather unusual for open-source. But again… it’s the most popular CMS/blogging platform and it’s free, so I guess one takes the good with the bad.

Anyway I really thank you for your comments, they’ve given me a lot to think about.

But if you do, there’s nothing scary there. Good luck.
[/QUOTE]

5

To call the new version an improvement is an understatement. It’s great, assuming at least a 1280 width. I would just pass on by the current version, but would look into the new version even if I was unsure I’d like that sort of thing.

I would eschew a fixed width, though, if only because your choice becomes either leaving out people with smaller screens or having a skinny column down the middle. The best, in my opinion, is just a little bit of dynamics, combined with variable width. Wider screens get more background, up to a point. Anything lower than 1024 width doesn’t need the background at all. And, of course, mobile should have its own layout that contains only one column instead of two.

Basically, the content should never look more narrow than in your mocked up version. And avoid requiring sideways scrolling like the plague.

6

I think the new design is great - much more modern than the old one.

I vote in favor of responsive design - when it’s done right it’s a pleasure to visit a site that uses it. There are some sites I won’t bother with when I’m on mobile because they are simply impossible to navigate. It’s really just a considerate thing to do for your users and enhances their experience.

We’re currently in the process of converting a 10,000+ page site from an old CMS to WordPress - even though there’s a crew of us to do it, we’re still having an outside company do an automated conversion on the most heavily trafficked sections of the site so it will be ready quickly. If you are one person with 1,000 pages, you might want to consider doing that for at least part of the site.

Smashing Magazine came out with a good article on doing conversions to WP. It’s a good article and there are some solid suggestions in the comments as well.

7

Thanks so much, BigT and romansperson. I’m very glad this seems like an improvement.

Oh I definitely agree, that’s what the responsive design would be for. Basically you create separate rules in one’s stylesheet for different screen widths / devices. So in this case, every screen that’s at least 1140px or above (might be 1160, I’m not at home to check) will get that dual column site, with more or less background depending on how much wider their screen is than 1140 (or 1160, heh). Flexible will be a bit tough here due to the problems of stretching the columns so wide the text becomes hard to read. (Reading lots of text becomes hard on the eyes when paragraphs are too wide. And there’s a lot of text to read on the site!)

If the screen falls below that number, I’ll shrink the content and sidebar columns slightly (there’s space enough to do so) until the screen or device resolution falls below about 1000px, which is the smallest acceptable width for this two-column format. The header and other graphics will all shrink appropriately too.

If the resolution or screen width is below 1000px, the sidebar content will drop below the main content column to create a single column site, although the social media buttons will shift from the sidebar to just below the header image and the “New in Town?” section will shift from the sidebar to the top section–this is so one doesn’t have to scroll to see these elements.

Once the resolution gets to about 468 or below (I haven’t calculated the precise number yet), the header will stop shrinking, and instead will swap to a smaller logo with just the lightning and the name of the site on it. So we’ll lose the character photographs, which are nice but not essential. Also, the graphic for the current episode will shift so it’s on top rather than to the side of the excerpt, and the three most recent episode graphics will turn into a single column as well. This will be what most mobile users with smaller resolutions will see.

The menu will also change from the horizontal width to a single bar that people can tap to access the options via a dropdown menu.

All this prevents anyone from getting a dreaded horizontal scroll bar, while keeping the text readable (I do feel for anyone who has to read one of my episodes with a 300px wide phone as that’ll mean a helluva lot of vertical scrolling – though, hey, more power to 'em if they’re that devoted!).

I think using a flexible width works best (I think) for image- or video-heavy sites, and less so for text-based ones. Of course it depends on how much text we’re talking about. It’s okay for forum sites like the SDMB where you’re looking at smaller chunks of text that are usually relatively short paragraphs – well, unless someone wordy like ME is posting, heh.

But since my installments average about 1500 words a scene (with the entire installment averaging 10K words altogether–yeah, crazy long, I know), I think people’s eyes would go nuts trying to scan a super-wide column. I shudder to imagine reading a lengthy chapter at a width bigger than 900px.

There’s also the header graphic to consider; making it larger than its current 1140px would also make it taller, and just take up too much vertical space that’s wasted. Hmm, unless I make the character photographs an overlay that could shift to the right to show more of the cityscape. (Those character images will be a rotating gallery, by the way – but only on the homepage; on the rest of the site it’ll just stay static. No one wants to see something animated/moving while reading content.) Now I’ll mull over making the max-width wider, maybe up to 1300px or so (again, totally improvising here), if I can pull off that header trick. That gives me something to mull over; thanks for that, BigT.

Anyway, I hope this makes sense. Does this seem like a reasonable plan?

Totally agree. (Obviously! :)) I even like it just for browsing on my regular PC, so I can have multiple windows open side-by-side and the content will adapt accordingly.

Oy veh, yes, I definitely will. After last night and reading Claverhouse’s post, I spent some time looking for either an outside service (they seem to run at $200 for a few hundred pages; not sure how much I’d get charged for the 1000+ pages I have; this is a free site without ads, so there’s kind of a limit to how much I want to spend on it, but something up to $350 might be doable) or a plugin/automated script.

I did find a plugin called HTML Import 2.0 that might do the trick. It lets you select either a content tag ID or a Dreamweaver template element (which is what my site’s based on, yay! I’d just use my “main content” element, which is where my episode text content is placed) and will import the pages to either posts or pages, and keep the directory structure too. If I go that route, it’ll definitely take a lot of practicing and tweaking before such a thing goes live, though. Luckily I have a test site I can use in the meantime.

I’m still not 100% certain I want to go the WP route, since I do need to make sure it’s worth the agita. The facts that 60 million sites use it, and people really are almost expecting one’s site to have the usual blog format/capabilities, are the biggest reasons for me to even consider the switch.

What I may end up doing is revamping the design as a static HTML site this year for the serial’s 16th anniversary (!!!) in November, and then worry about converting to WP later, giving me time to make the switch in the background.

Holy cow, talk about timely! Thank you very very much for that. I do love Smashing Magazine, they’re an amazing resource.

I really appreciate the advice, guys!

8

I’m not big on the Copperplate font (is it Copperplate, or a lookalike?) and I’m having trouble figuring out why. I think it’s just because I’ve seen it too damn much as a default Windows ‘formal’ font.

I’m wondering if your mobile would be part of your target audience. Do you think people are going to read long chunks of text on their phones? I’d also maybe try not including the episode graphics at the top.

Moving to Wordpress would make implementing comments and social media easier, but I don’t think it’s a requirement.

9

I strongly disagree with this. With the advent of mobile, there’s really no way around responsive design, unless you’re okay with your site looking like crap in either mobile or desktop. If it doesn’t look good on their desktop/laptop/iPad/smartphone, the user will not hang around. Why drive away traffic if you can help it?

I like the new design, like the bigger/wider screen. I will note that I have a hard time reading white text on black, especially if it’s small. Maybe fiddle with that a bit.

WordPress: once you’re set up, I think it will save you time when you’re updating, along with the other obvious advantages (SEO, social media, etc.). It does have issues with copy-paste from Word – which can be handled with an adjustment to your work flow (e.g. writing in WordPress instead of Word, and then regular exports/backups if you want an archive, or just copy from WordPress to Word if you want). If you’re really attached to your work flow as it is, then maybe WordPress isn’t the best way to move forward.

I wonder if there’s a way to automate pulling the content from your old static site into WordPress – like some software that “reads” each page and puts it in a separate record in a database, which can then be imported. I doubt you’re the first person to consider this, so try Googling?

10

Oh, well, here you go, instructions how to export static HTML pages from your website, and then import them into WordPress: Donna Cavalier - Living a cavalier life

11

Hi kushiel,

It’s not a standard Windows font, though I can definitely see the similarity with Copperplate, which has more pronounced serifs. It’s Trajan Pro, an open source version of Trajan – a font used on a lot of movie & TV titles, such as Titanic and The West Wing (which is why I originally chose it, I like the cinematic feel).

Actually, I originally used it for all the headings, even the “current episode” and “new in town” text, but it ended up looking way too formal and… what’s the word… remote, I guess? Distancing? The typerwriter font I chose instead better reflects the mystery/noir elements of the first couple of seasons as well as the most recent one, which had a major crime organization at the center of it.

Anyway that’s my reasoning, FWIW. But I certainly don’t want to be too cliched by going with something that looks overused, so I’ll have to mull this one over. Thanks!

I also worry that there are too many fonts; right now there are three: Trajan Pro, um, the typerwriter font (can’t remember the name), and Roboto (a webfont) for the main content and regular text. Don’t want the thing looking too busy.

OMG I know! I don’t get reading big chunks of text on phones either (but then, I’m ancient), but looking at my stats I definitely see an increasing number of Android OS visitors. And definitely people are using tablets more and more, though depending on the size the resolution there can range from 720 - 1200px or so, so luckily there’s not that huge an adjustment.

When I did a survey for the 15th anniversary about six months ago, a good 30% of current readers said they wanted the option of reading on their phones. I guess if you have a long commute and just feel like getting invested in a story rather than browsing, it’s like reading an ebook. (I currently offer a printable / text-only version of each episode, and I think people use those a lot for reading offline or on their phones. Probably good for screen readers too.)

I’ll definitely consider removing the episode graphic for mobile users. It should be much smaller for phones; it’ll likely shrink to about 160px high at the smallest width. But at that proportionate height the graphic may not be all that clear anyway, so there might not be a point to including it at all.

Very true. You wouldn’t believe how long I’ve been angsting about this decision for this very reason; there are pros and cons, and I just can’t fall down on either side yet. Though if it were a piece of cake to convert 1000+ files to WP, it’d be a much easier choice!

Thank you so much for checking out the design and giving your feedback, kushiel. Very helpful thoughts!

12

There are some BIG phones out there now – more like mini tablets that also make phone calls. You can think of them as slightly smaller e-readers. And you ARE offering, essentially, an ebook. You’re what people are reading on the bus on the way home from work.

13

Ooh Kaio slipped in there while I was responding.

That’s my thinking too. I’d love for Claverhouse to expand on his/her comment, as I have the sense there’s more to it than just “to hell with mobile folks.” :smiley: I got the feeling there was another option s/he was suggesting.

Totally get you! I used much less white-on-black in this iteration of the homepage than the current design for this very reason. I’ll probably boost up the font size for the sidebar and the stuff beneath the previous episodes. On the pages with mostly text (the installments/episodes, or character bios / FAQ / setting history and so on) I’ll use the light cream background with a dark charcoal (even pure white BG with black text can be tough on the eyes at times). The white-on-black text would be limited to the sidebar and perhaps the non-linked part of the breadcrumbs (e.g. HOME | EPISODES | Ep. #6.01: “My God When Will This Serial End?” Scene 1).

So yes, the font will likely get bigger. I’ll have to test it live, since fonts on the web do look different than in Photoshop mockups. If I do go with Wp, I think there’s also a plugin that allows users to boost font sizes. I know they can do that with their own browsers, but why not make it easy on them?

Very good points. The idea of writing in Wordpress first makes me break out in hives, if only because I’m afraid of losing material, but mostly 'cause I’m so darn used to Word (did I mention I’ve been doing this for 15 years? :D). But then again, over the past couple of years, during writing marathons–or just attempts to rid myself of writer’s block–I’ve used an excellent productivity program called Write or Die! to create first drafts of scenes, and that has even fewer options than WP’s editor.

So it’s not a dealbreaker and I probably could get used to the different workflow. Of course it’s editing that is the real test, because I edit the hell out of things before I post them. I’ll have to see exactly how problematic it is; maybe I’ll work on the first episodes of my upcoming season in one of my test installations of WP and see if I can get used to it.

Wow, thank you so much for taking the time to search for that! She recommends the importer plugin I mentioned above, too, so it’s good to see a review of how it works. Luckily I’m not using any Includes files for the main content so I wouldn’t have to strip any of that.

I should be so lucky! :smiley: And you’re right, of course. I have a semi-dumb phone so I do no browsing at all on my device, I’m embarrassed to say. But iPhones et al. can have pretty good-sized screens (especially viewed horizontally) and I have seen the bigger phones that are nearly tablets.

This is so very helpful, Kaio. Thanks again!

14

Make it convenient for them and you will be. :wink:

15

WordPress has had autosave and versioning for several years now.

Out of curiosity, what is it about the admin toolbar that you dislike?

16

Thanks, tellyworth! I guess i just meant I like the knowledge that the info is on my own computer, rather than stuck in a database on a server a thousand miles away. But as Kaio mentioned, I can always copy it to Word later (and certainly would).

And I’m sorry, I was very unclear: it’s not the admin toolbar I mind, as that does have its conveniences (letting me easily edit a post or go back to the dashboard, for example). It’s that they stick a version of this toolbar above sites where you’re just a registered user, not an admin. When I go to a webfiction site about death and mystery, it kinda spoils the noirish atmosphere to be greeted with a chirpy “Howdy, Kira!” :slight_smile: