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 -

Comments (6)

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

Review: Logical Media

Logical Media is one of the innovative services that pay for ad placement within blogs. Do you have a blog and are you seeking a way to make additional money from the blog? Are you seeking a way to offset other programs with the use of ads? Through the registration with Logical Media, the blogger [...]
Read on
More Monetization Features
Marketing and Search Optimization

Search Rank Drop and False Alarms

Happy Holidays!
What are the chances of someone being concerned about their blog’s search ranking dropping on Christmas Eve? I have no idea but then again if I’m writing about it right now then there’s probably someone somewhere around the world doing SEO at this very minute.
If you have experienced a sudden drop in ranking, [...]
Read on
More Marketing and SEO Features
Blog Resources