Website design -- any suggestions?

We’ve got a website for our business that I haven’t really changed in six years. It’s not really that crucial for what we do, but all the same I’d like to whip it into better shape and pare it down. I was hoping I could get some suggestions from the experts here. Some questions:

  1. I’m somewhat handy with HTML, and designed the site (okay, actually copied the design from another website, I admit it) using the bare HTML text in Notepad. I also make updates this way, too, and it’s cumbersome. What’s the nicest free/cheap program out there for designing and updating websites?

  2. We don’t want or need anything elaborate in a site, as it’s really just a means of parking our credentials and something of a portfolio on the web for potential clients to look at if they so choose. Actually, I’ll forego my anonymity in this one tiny corner of Forumosa and link to the current site here so you can see what I mean. I figure this should be a job I can do myself, but what do you think? Would it be worth approaching website designers for quotes? What are the charges like?

Thanks for any suggestions.

A simple text editor is still by far the best way. On Windows I really like Textpad … it’s fast, it does syntax highlighting and regexp replace and such, and you can use it forever for free, if you don’t mind being reminded about registration once in a while.

The best way to make editing less cumbersome is to use CSS-based layout … it greatly reduces the number of tags you need, and makes it easier to move things around and tweak them.

Your site already looks way better than most such sites. I think it could look much better yet with some very simple changes:

  • Improve your colour scheme. There are sites on the web that give you sets of colors that complement each other nicely.
  • Get better photos of yourselves.
  • Change the width or color of that huge black bar across the top, which really dominates the page.
  • Put in some cheap stock photos (istockphoto has good ones for US$3 each) to break up the text.

Charges for web work vary wildly and have no real correlation to quality. My suggestion would be to browse around the web and find a designer whose style you like, and ask them to do just a template for you, which you can put all the content into yourself.

We (Ming Island) do quite a lot of such templates on the cheap because we like to help out foreign-run startups. The price usually ranges from NT$5k to $20k … a cleanup / facelift to your current site would fall near the bottom of that range.

Here are some basic guidelines for Web sites. They’re about three years old and aimed at the Taiwan gov’t rather than small businesses; but most of the principles are universal. You may find them useful in thinking about your project.

As for your site specifically, here are a few reactions:
[ul][li]Like Brendon said, stripping out all that extra coding and using CSS would greatly simplify things and make it much easier for you to redesign your site. [/li]
[li]The navigation is not ideal. I’d put it on the left. And the font is way too small for the navigation, esp. in the Mandarin pages. [/li]
[li]Actually, in lots of places the font is too small. And it would be much better to define it in your CSS in terms of ems, not points. [/li]
[li]An out-of-focus photo does not convey professionalism. [/li]
[li]Kill the date script. I have never understood the appeal of those. Is someone really going to visit your site to find out what today is? [/li]
[li]I don’t understand the usefulness of listing your reference works. I’d drop all that and replace it with some more marketing-speak about your qualifications and the specialist works you have personally compiled through your many years of experience in the field…[/li]
[li]On your contact page, use italic not underline. (It’s not a link.) [/li]
[li]Your header image has some weird anti-aliasing or something. The text just isn’t crisp, esp. just below the baseline of the English text. (But it should be redone regardless – in a different color, I think.)[/li][/ul]
You might find WordPress will do what you want; and it offers lots of designs that can be tweaked.

If you do choose to farm the work out, I would strongly advise you to hire only someone who can promise to submit a site that uses valid (X)HTML and valid CSS.

Notepad++ is a good, free text editor that’s great for web code.

Thanks very much for these useful ideas and constructive criticism, I really appreciate it! I will certainly be referring back to this thread often over the next while as I attempt to make changes to the site.

I think I will need to find a CSS primer somewhere so that I can figure out how that works.

Oh, one more question: I’ve set the character sets for the respective languages like this: . Is that still the way things are done these days? Or is it a Unicode world now? If so, how does it work for web pages in terms of different languages?

Yes, it’s a Unicode world now. Even so, you could keep your traditional Hanzi pages in Big5 and your simplified Hanzi pages in GB. Those aren’t really a problem – unless switching back and forth is more mafan for you when writing them.

What you really need to change in terms of encoding are your English pages, which are in windows-1252. It would be better to get rid of the GIF images of Hanzi (for switching to either of the Mandarin versions) and use real text instead. But for that you should use UTF-8 (Unicode).

I originally did that back in 1999 when I first started putting together a website because most non-Chinese people browsing websites would have seen gibberish if I hadn’t used GIFs. So you’re saying that these days your average non-Chinese-speaking Joe will see Chinese characters instead of strange gibberish when they browse to a page with Chinese text?

Why might it be urgent or desirable to forego the GIFs for actual text, anyway? What difference does it make, aside from an extra nanosecond downloading a 1 KB image?

They can be copied and pasted, they can be resized by people who have poor eyesight (or screens with huge resolutions … I scale a lot of pages up so I don’t have to squint). They obey stylesheets, can be read by screenreaders for the blind, work with translator plugins, and so on.

But no, lots of people have no Chinese fonts installed and so will just see blocks with numbers in them. You can of course put in a note about installing Chinese fonts, and in any case I’m guessing most people who need Chinese translation will have the fonts.

Still, it’s a tradeoff.

Ah, I see. Though, in actual fact, most people requiring translation between Chinese and English on this side of the pond don’t know anything about Chinese whatsoever, much less do they know anything about installing Chinese fonts. My hesitation would be those boxes showing up on a web page.

It’s a tough call on this one, I’m going to have to give it much thought. Thanks!

I’m starting to work on this, and have encountered a problem. I have the following in the “head” of a test page:

but the simplified Chinese text in my test page shows up as boxes in both Internet Explorer and Firefox unless I specifically change the encoding in both browsers to GB2312. Viewing the page in Unicode does not work for the Chinese. This has me stumped. Would anyone happen to know what the problem is?

It’s important to keep in mind that putting “charset=utf-8” in the head doesn’t change the encoding of the text of the page; it tells browsers which encoding they should use when trying to render the page.

Your text is probably still encoded in GB, which when rendered as Unicode yields garbage. You’ll need to convert your text in Hanzi into Unicode – or at least Unicode numerical character references (NCRs) – for UTF-8 to work properly.

Ah, okay, I get it. So could one assume that very few websites in Chinese use Unicode because of how cumbersome editing text would be due to having to run it through a converter?

No, you’ll only have to run it through a converter to convert your old Chinese text to Unicode. Afterwards you can add new Chinese text directly in to your text editor as you would for a normal document - no conversion necessary.

Not really.

Most people who make Web pages – I won’t call them webmasters – don’t [know to] go beyond the default settings of whatever program they use to create their site. If their program is old, the default setting is probably for an older-style encoding (e.g., GB, Big5, ASCII). But if their program is relatively new its default is often Unicode. So older Web pages tend to be in GB, Big5, etc., while newer ones tend to be in UTF-8. Thus, there is a definite trend toward Unicode, as shown in the blog post I linked to earlier.

Those Unicode programs simply write in Unicode from the start. They don’t write in GB (or whatever) and then convert. Thus, Unicode is no more cumbersome than GB or Big5; it’s just different.

Whether it’s worth the trouble of converting to Unicode is up to you. But it probably wouldn’t take you significantly more time to do that for your relatively small site than it has taken me to write this post.

Something like EmEditor would work, if you have a Windows system.

[quote=“cranky laowai”]It’s important to keep in mind that putting “charset=utf-8” in the head doesn’t change the encoding of the text of the page; it tells browsers which encoding they should use when trying to render the page.

Your text is probably still encoded in GB, which when rendered as Unicode yields garbage. You’ll need to convert your text in Hanzi into Unicode – or at least Unicode numerical character references (NCRs) – for UTF-8 to work properly.[/quote]
For an example of how even a large site can get this wrong, see the Taipei Times Web site, which recently started encoding things in UTF-8 but which still declares the charset to be Big5, rendering Hanzi and other “special” marks as garbage (e.g., this article: Taipei to add English to doorplates).

I’ve started working on my site. Here’s a test page: billionbridges.com/test/index1.html.

EDIT: And another: http:www.billionbridges.com/test/index2.html.

(EDIT on June 23: It’s done! billionbridges.com)

Questions:

  1. Never mind the colours, I just slapped them up. What do you do when you want some kind of graphic for the left margin but you want it to reach to the bottom of the page no matter how much content you have? Could I set a background color for that DIV and then do a background image overtop (I’m learning about Z-index) with a clever pattern that will keep on going down to infinity and look good? Did I just answer my own question?

  2. The main body of the text is set at 600 px in width and I’ve left a blank right margin as a means of avoiding the stretched out look. Would you change the width?

  3. How do you set padding for an image so that the text doesn’t butt right up against it? I’ve searched the online tutorials but I can’t figure it out.

  4. How do you push the Tel and Email section at the bottom down? Without all that text it ends up to the right of the photo, but I want to “set” it below the photos definitively. Another thing: Is there a way that part could be in a separate file, kinda like a frame (but I don’t want frames), so that each year I would only have to change the dates in the copyright statement in one file? Just curious.

  5. How shitty does the whole thing look?

Thanks very much for any feedback, I really appreciate it.

  1. Yes, for instance do an image 1 pixel high and as wide as required (it needs to be as wide as possible otherwise you will tile both ways, which you don’t want).

  2. For a server side include you should be able to use the following:

or

Why don’t you download and use Wordpress? Also, should you decide to, there are thousands of Wordpress templates on the Internet
for free.

[quote=“Connel”]1. Yes, for instance do an image 1 pixel high and as wide as required (it needs to be as wide as possible otherwise you will tile both ways, which you don’t want).

  1. For a server side include you should be able to use the following:
or [/quote]

Wow, thanks for those insights! I had no idea. I don’t know enough about webby stuff, and sometimes I feel like I’m in over my head.

I’m not sure about Wordpress. Isn’t that for blogs?

there are plenty of free CMS solutions out there that will make your website look way more professional and convenient to manage. i’d recommend XOOPS, it isnt the easiest, nor the most common but it is highly customizable. don’t go for a blog system, i see absolutely no advantage in doing that…

in its current state, your site looks like a thing from another age… sorry to say to that!!! :smiley: