Design 2 HTML, E-Mail Template Implementation, WordPress, Joomla, Drupal Professional

One of my latest project involved @font-face which means using a custom font for your web content. It was my first experience working with @font-face as I never heard about it before therefore I thought I will share my experience with my readers.

As you know we cannot use custom fonts in a website as it will not properly display on a computer which doesn’t have these fonts installed, thus it will be replaced by system default fonts, in windows if a font is missing it is normally replaced by Times New Roman, so to avoid this we define font like font-family: Arial, Helvetica, sans-serif, Arial is default for Windows, Helvetica is default for Mac. About Sans-serif I never used Mac personally so I am not sure if it is available on Mac or not but it is surely installed by default in Windows. So this is the normal approach we follow so that we know how our website text will show up in different platforms.

What if we want to use a stylish custom font which is not installed by default in any of the Operating systems, in fact we want to show a specific custom font on all platforms? In normal cases it will be really difficult to do so. So here come’s the use of @font-face, we can achieve this requirement by using @font-face.

It’s not that @font-face is really the only and perfect solution. One of my friends told me to compare my method with cufon. Unlike @font-face cufon is very natural, the output is very delicate with smooth edges, but the only thing that I didn’t liked about it is its JS based. So the problem comes when your visitor is on a secured machine and it won’t let the visitor load JS files, I think most of the firewalls block JavaScript by default. So in my case I didn’t used it. The second disadvantage of cufon is the file I generated through the cufon font generator http://cufon.shoqolate.com/generate/ size is almost 115KB which is really huge compared to the original fonts that I used are of just 52KB, so it made it 52 x 2 + 11 = 115kb, if you expect your site to load quickly within 2 3 seconds then I wont recommend this approach. So let’s look at my best technique that I used in one of my project @font-face.

Read more

I recently launched my newsletter subscription service on my website http://www.webcomers.com to spread my company news more efficiently. Doing so i also needed to first understand how the HTML E-Mail Template works. I am using MailChimp free services for my business; you might be interested in using one of their paid service.

Things to forget
The first thing i want to mention is if you are not a basic HTML coder and you cannot hand code HTML then please first get a few lessons on how to code it. I will appreciate dont ever use any visual editors like DreamWeaver and FrontPage. And please violate the best practices of modern xHTML and try coding the e-mail with inline styles. If you even mistakenly used imported or linked stle sheet you are []sensored. I hope you understand the importance of not using the above mentioned tools and approaches.

Things that will help you
Only a notebook type editor is best suited for your HTML E-Mail. Try using old approach for backgrounds, try using as much help from classic HTML attributes as possible. Keep it in pure tables, that will save you time and headache.

the best practice
Hire me if you think this is difficult for you. as i can assure you that it is as simple as a cup of tea for me. So why taking so much pain, spend a few dollars and you got it working. I will test it for you in all modern email clients so you wont need to test it. What are you waiting for get in touch with me here

AS because of my poor English and random thoughts, and above all my stupid jokes this article might not be the best one for you. So you can find a more detailed and well structured article on similar topic from this MailChimp link, in fact this is the one from where i learned the basics and then moved on towards using and testing it myself. If you need any help feel free to contact me either on posting a reply to this post or you can also follow my facebook page and can post your comments there. I will be waiting for your positive feedback.

I believe you never heard HTML layered approach. Its not new, maybe a few designers are already implementing this in their HTML. This approach is not common in every Design 2 HTML/CSS project as mostly you need very simple kind of html like header, content and footer.
The reason how this article “HTML layered approach” came to my mind is one of my project that is just completed by me http://www.treadfitness.com/ When my client gave me the PSD for this design first thing came into my mind was slice it such that it appears in parts, normally designers and PSD2HTML/CSS conversion experts will slice a layout in smaller images and will then stitch them together making the images lighter as small images appear faster on slow connections. What i believe is that now it doesnt matter if your site images are of higher quality and therefore requires higher bandwidth as using Web 2.0 basic approach never use images in designing your layout remember you can use as many images for content as you want. Wow so if you dont use images how your design is going to be converted in the way it is in PSD. Dont worry friends as now we can call images as background through CSS, and with that strategy your content will first load and then your background images, so your visitors will be able to see the content while your design loads. Now it doesnt mean that you put your whole design into a single image and make it appear in background, try it in a more graceful way. I mean make them appear in layers.
Read more

I believe my relationship with HTML is almost 6-7 years old, while xHTML is fairly a new term for me having around 3-4 years of experience working with it. As most of my fellow web designer and developers i was also not aware of the difference between them and often mixed up both of them, and HTML and xHTML remained a myth for me till recently. So here i will explain what i know about HTML and xHTML and as usual i will try to share a few very useful and information based links to help you better understand them both.

HTML and xHTML are both markup tags. Basically you write HTML Tags which when compiled are visible as a single web document. There isn’t much difference between these two terminologies as both uses Tags

HTML stands for Hyper Text Markup Language
xHTML stands for EXtensible HyperText Markup Language

XHTML is a stricter and cleaner version of HTML. Its the simplest line of text that defines the basics of these two. Basically HTML 4.01 (which some programmers calls HTML5.0 to attract others attention) and xHTML are almost identical.
XHTML is HTML defined as an XML application – This somehow more satisfy the basics of xHTML, i once use to call it xML and HTML when asked in interviews about their difference as it was fairly a new term at that time and believe me i was asked this question “What do you know about xHTML and HTML” or “What is the difference between HTML and xHTML” and every time my answer would be different as to be honest i didn’t know anything about their differences. Even today i am considered an Expert in creating Standards Compliant Code in xHTML/CSS but still if i am asked to have a debate on HTML and xHTML i will have very limited information to share with my listeners.
One other definition just came into my mind it that “

xHTML is the future standard of HTML owned and implemented by W3C (world wide web consortium) and all the browsers in future will 100% support xHTML

“. Read more