May | 22 | 2007

Lowdown on the technical aspects of design

Posted by Jeff as Design, Design Features, Featured Articles, Tips

Clearly, I’m asking for trouble here by laying down a list of what is regarded as good design.
Hopefully though, this does not turn out like O’Reilly’s Bloggers’ Code of Conduct which he later took back:

Proper use of fonts - as a general rule, no more than three font families are to be used on a single page. Too similar fonts make for a staid feel, while over-using fonts is gaudy. (This one I remember from my elementary Journalism class)
Font families - unlike in print media, the use of serifs (Garamond, Times New Roman, Cambria) and sans-serifs (Arial, Tahoma, Calibri) are reversed: serifs are generally used online for headers and titles, while sans-serifs are used for body text. The general assumption is that serifs when displayed onscreen without sub-pixel font rendering tend to strain the eyes. While OS X and Windows Vista already implement font families optimized for sub-pixel font rendering, this is still a small percentage of your audience.

Writing special symbols - with the proliferation of adaptive WYSIWYG interface, it’s increasingly more difficult to resist writing in Microsoft Word and pasting everything over to your platform’s Visual Editor (in my experience, Wordpress and Blogger are notorious for not filtering Microsoft-proprietary extensions to HTML when copy-pasting). As such, the inevitable appearance of symbols such as Ã© and â‚¬ make the work of future-proofing your code more difficult than it should be. To get on the good side of font substitution between operating systems and browsers, and future extensions to the current HTML/XHTML standards, consider using entity names versus entity numbers.

Use of images - here’s where it gets dicey. Unless you’re running a design site, it is good practice to stick with muted background patterns that tile well - not wallpaper sized images that only add unnecessary loading times to your page. Then again, I have seen well-optimized images used as watermarks that still manifest good practice. Your gut feel would be your best bet.

Formats of choice - JPEG is still de factor photos and PNG for outlined images. Generally, it is best to leave a file in its original format. You almost never have to perform format conversions as this decreases the fidelity of your images. This is especially true for PNG; unless specialized software is employed, converting a GIF does not give the vector-based advantage of PNG because the latter is dependent on distance between image elements (lines, loops, fills), unlike GIF.

In the next installmentâ€¦

Color themes -
Adapting to different screen resolutions -
Cross-browser compatibility -

6 Responses

Geo
23|May|2007

I guess it’s the same with powerpoint presentations, documents, or anything that you wrote that you want to present to people.

They also teach that here in the corporate world.. but it’s more focused on presentations.

Anyway, good post. I’ll wait for the next installment.
ia
23|May|2007

I hate it when people resize their images in HTML, not in a graphics editor. The file size could have been smaller and hence the loading time could have been faster.

I also hate it when people copy-paste from Word to HTML and don’t check if symbols like curly quotes, en/em dashes, and ellipses actually show up as readable text. Even worse is when you copy from Word and you use the HTML generated by it. Nightmares.
Geo
23|May|2007

Lol. Sorry ia-chan I am one of those people.. sometimes.

And speaking of design, I have a problem of putting tables from Word to HTML (especially if its a complex table). Do you have any advise on that, blog-tutors? I usually want to just copy-paste my table to my corporate blog.. you know how big bosses love charts and tables.
ia
23|May|2007

Sorry Geo, I wasn’t trying to hit you with that comment. The second one just happened to me yesterday with a client. It infuriated me for hours.

If it’s a table… Word should be able to export the code as an HTML document and you can just copy the portion where the table appears. That’s the easiest way I can think of.
Geo
24|May|2007

No worries. I understand your point even if it was trying to hit me.

And about the table, yeah I just copy it but the formatting goes away. And if it is a somewhat complex table (like a column will be divided into 2 columns again), it just looks weird. What I usually do then, is just convert the table to an image then put it in the blog. I’m not sure if there’s an easier and better way.
Jeff
24|May|2007

Both Word and FrontPage (now-defunct) have tag cleanup functions

http://articles.techrepublic.com.com/5100-1035_11-5197013.html

http://office.microsoft.com/en-us/frontpage/HA010951391033.aspx

Our Features

Design and Themes

Is Your Blog W3C Compliant?

Last night I checked my personal blog’s code hoping I can proudly display the W3C Validated Button. Since I use Blogger and do not really do anything to clean up the code (beyond adding Alt-tags to the images I embed) I wasn’t surprised at all to find that my blog contained lots of errors - [...]
Read on
More Design and Themes Features
Software and Widgets

Wordpress Plug-ins

If you blog using Wordpress and can’t do something that you want done like adding Sphere-related content at the end of your blog posts you might be surprised to find out that there are already plug-ins available that make it happen.
To find good Wordpress plug-ins all you need to do is search for â€œwordpress [...]
Read on
More Software and Widgets Features
Reviews

A Friend In Need

I’m helping out my friends from the UA&P - IShareHappiness Blog Team.
Whenever you feel pessimistic, angry, troubled, frustrated, and depressed â€“ what have you â€“ you need someone to talk to. Someone who could help you be more optimistic and help make you feel that there is hope. Sometimes itâ€™s hard to talk to someone [...]
Read on
More Blog Reviews
Monetization

Making Money Through Consumer Generated Ads

As I mentioned in my previous post today I will be suggesting some ways you can still profit by joining programs such as Pay Per Post and yet ensure that your readers don’t get turned off.
In my opinion the only way to really do this is by making sure that your blog entries stay [...]
Read on
More Monetization Features
Marketing and Search Optimization

Building your blog brand step by step

Building your blog’s brand does not need to be difficult. However, when it comes to branding you should always remember to exert effort to be consistent with the image you wish to portray or you’ll end up with confused, turned-off, and/or skeptical readers. Branding inconsistencies will make it obvious that the image you’re putting up [...]
Read on
More Marketing and SEO Features
Blog Resources