iPhone websites

The iPhone is the perfect platform for companies that wants to get “friendly” with their customers that are on the move! We are increasingly being asked to advise on iPhone friendly websites and how they work.

Most websites are still viewable (but are NOT “friendly”) on the iPhone, because the user can zoom in so that text is legible, however this is not ideal for the user when they have to scroll across the screen a great deal more. You have to build your site specifically for mobile media. It is best not to exceed 320x480 pixels, which is one reason for having a separate website specifically for the iPhone.

The main reason for adopting a website dedicated to the iPhone is if your current site is purely flash based, or contains any Flash elements, such as Flash banners or embedded videos it will not be viewable on the iPhone or any other mobile devise. Also users are now wanting information on the move and companies need to be seen to be technologically savvy.
At EC Design we have tackled the issue of mobile friendly websites and believe companies should be seen as “early adopters’ to this new technology. If you are thinking of becoming an early adopter of an iPhone site, here are some useful tips:

• The iPhone site should mirror your main site visually for design consistency
• Design no larger than 320x480
• Correct page size code - add a meta tag (<meta id="viewport" name="viewport" content="width=320;">) in the header section of your website code, makes your webpage compatible and friendly with iPhone browser
• Minimize the code to as much extent as you can
• Remember less is more
• Prioritise key information
• Contact details should be prominent

HTML emails

It could be said that one of the hardest jobs in web design at the moment is the task of creating HTML emails (or e-Flyers, EDMs and so on) in which the design and build works perfectly across all browsers, web-based email clients, computer-based email clients and operating systems. I will outline a couple of the more unknown problems I have found and possible workarounds for these problems.

Cellspacing in web-based email clients in Firefox for PC

So you've managed to build a HTML email using tables, even though you feel like you are leaping back towards the late 90s. It looks great in Outlook 2007 (a mammoth task just on its own) and seemingly on all of the popular email clients (Yahoo! Mail, Windows Live Mail, Windows Live Hotmail, Google Mail, Outlook, Outlook Express, Thunderbird, Entourage). And yet, viewing it on Hotmail and Gmail in Firefox 3.0 on a PC completely strips all of the cellspacing with no explanation.

So there isn't full support for margin, padding or now cellspacing (cellpadding seems to work perfectly).

The workaround?

The only way I found to make this work was to use a spacer.gif (a 1x1 pixel transparent GIF image) and increase the width and height of the image to force table cells to create the illusion of cellspacing. I remember doing this kind of workaround 7-8 years ago!

Background images or floating images in Outlook 2007

For some unknown reason, instead of Microsoft using the Internet Explorer engine to parse HTML emails as they did in Outlook 2003, when it came to Outlook 2007 they decided to switch to an MS Word engine. This means very little support for HTML (and almost no CSS); the main problem being how you can get the most out of images in your designs.

Background-image is not supported. Background (the non-validating bygone property for tables or tds) is not even supported. And you definitely cannot float text around an image. What does this mean? Very structured tabular designs with structured tabular images.

There isn't one. Just make sure that every image can be in its exact place without overlapping text or other images, and you can work it into a table structure without the need for text to float around it. Good luck!