Internet Marketing, Web Technologies & News - Best Web Ezy

For the ones who have to design HTML emails for clients, you may have been facing this issue.  When you try to cascade some images, you might find gaps at the bottom of the images - only on Windows Live Hotmail opened in Firefox - they just won’t stick together.

Our company has to process a lot of HTML email send-outs every week, and this has been causing us a lot of trouble.

Finally we found what has gone wrong.

Windows Live Hotmail renders HTML in standard mode.  Any inline element (eg. img) in a table cell will be aligned to the text baseline.  This allows space for any descenders that extend below the baseline for some letters.

To fix this is really simple: put style=”display:block;” on the img tags.

When will MS stop giving us problems?

Bookmark to

Recently I was asked to add a web brochure to a website. It typically consists of 8-10 pages, featuring the benefit of employing a business etc.

A traditional method of presenting this is in the “About Us” page, where everything is listed on the same page with some small stock photos on the side.

Or you might have seen this on some member websites which have a virtual tour, and you have to click “next” to continue the tour.

Nowadays internet users require quick, precise information. Therefore, I have designed the brochure to be 10 pages, with bullet pointed features. It is also very important to have strong call-to-action - asking the reader to contact this business for further information. It doesn’t hurt to place 2 on the same page.

Below the main paragraph I have links to other pages. However, instead of “next page”, I have got all the 10 pages listed at the bottom of the page by title. Underneath the title, I have a short paragraph (2 lines max) outlining what the page is about. The title is also link-enabled, making these links keyword-rich.

Doing it this way would increase the number of internal linking and page contents, which are in favour of search engine crawlers. Moreover, this would bring internet users straight to the information that they are looking for, hence increasing usability.

This is indeed not a new trick. But I am surprised to see lots of people still using the old method.

Bookmark to

New standard of the World Wide Web has increased again.  Not many people are familiar with HTML 4 yet, and now HTML 5 is released.

The main difference of HTML 5 from version 4 is as below:

• New parsing rules
• New elements – section, video, progress
• New Input attributes – time, email, url
• New attributes – ping, charset, async
• Global attributes (that can be applied for every element) – id, tabindex, repeat
• Elements no longer compatible with HTML 4 – a, hr, strong (what?  no HR?)
• Elements dropped – center, frame, strike (who use frame anyway)

The HTML 5 project is powered by WHATWG started 2004 (really) and was adopted by W3C in 2007 as the new standard of the markup language.  The standard was originally named Web Applications 1.0. 

Fellow web designers - some more fun stuff to play with

Bookmark to

How many of you are still using nested table to design your website?  Anyone?

Well there is nothing wrong with this - except that it is a lot harder to manage.  Did you ever get mad over a table deformed after you have added a few text and images? 

Now with the use of CSS and defining some divs carefully, you can avoid the hassle.

I am not an expert in this field, but I can outline a few guidelines:

1. Start with a wireframe.  A wireframe is “basic visual guide used to suggest the layout and placement of fundamental design elements in the interface design. Because of this they must be completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. They also allow for the development of variations of a layout to maintain design consistency throughout your site.” (Source: Wikipedia)

2. Use grids.  Define your layout in the CSS file.

3. Fill up the defined divs with text and contents, build menus, plug in flashes

It is just as easy as 1, 2, 3.  Give it a go!

Bookmark to