Custom Fonts using @font-face in HTML/CSS

Using Custom Fonts @font-face

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

960 Grid System

A few days back one of my client asked me to get in touch with 960 Grid System. At first when i did some initial research on this grid system my conclusion was “total waste of time” because for a normal size page you need almost 8-12 hours to convert a Photoshop layered document into valid and cross browser compatible xHTML/CSS. Using 960 Grid System will take at-least 20-25 hours. Even for this kind of Grid System to implement your Photoshop document must also follow their rules by starting your design in a grid manner. Basically the main difference is that once implemented HTML in a 960 Grid System you have complete control over the layout, you can add columns remove them easily and can move data here and there in a page without any issue.
I dont have much space here to show the implementation or screen-shots so i will rather redirect you to the original website demo page 960 Grid System Demo, here they are showing 12 and 16 columns grid, you can have other number of columns as well, depends on your needs, you can easily customize it.
If you are working on a large web2.0 kind of project then you must go for this grid system, i think they also provide the CSS for the same result they showed in their demo. You must be well aware to use exactly the same dimensions for the columns, overflowing may cause serious damage to your layout. In this kind of Grid i am not yet aware if they have the functionality of float right or not but you should test it. if not try adding a few extra lines of CSS code yourself :)

I will most likely work on this Grid System in near future on my projects and i will keep you informed about any new improvements in this system.
Thanks to 960 Grid system, we are going towards more standardized HTML/CSS code and we should adopt to these standards in the future.

How to HTML E-Mail Template

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.

CSS – Cross Browser Compatibility Issue

Rather then using different CSS files for different browsers you can also achieve the same results using a single CSS file. If you keep your style strict by defining every attribute of the tag, specially i encourage redefining every tag to your own as mostly different browsers render them differently, let say Paragraph tag normally add margin and padding to top and bottom, which is rendered differently in different browsers.

At WebComers we try to provide similar services, keeping my code simple to a single CSS file, don’t add extra code specially JS as due to security reasons firewalls tend to block it. I disagree with the concept of using extra CSS files.

90% of the people are not computer techie. There are few people who don’t even know anything except clicking on IE icons as it comes pre-installed with Windows. The second reason might be that we Web Developers/Designers mostly work on e-commerce or business promoting sites for general public, and they are geographically dispersed around all the world may be there is someone who is also accessing internet from Mars.

This post is written in response to http://www.smashingmagazine.com/2009/12/01/how-to-support-internet-explorer-and-still-be-cutting-edge/comment-page-1/#comment-421052 on Smashing Magazine

Web 2.0 "HTML layered Approach"

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

JavaScript and Cross Browser Compatibility

I promised my readers that i will be writing an article on JS and cross browser compatibility issues. JS is one of the major cause of cross browser compatibility issues. You must be thinking that why in the world there are any issues with JS as now even mobile phones are JS compatible and runs JavaScript smoothly. Well the main problem is not with your JS the main issue is with your firewall and/or your antivirus, as they will block any JS that want to run its services on your local machine. For those who dont know already “JS runs and compiles on client machine” means it is compiled on your local machine not like other server side languages those are compiled on the web server and thus it is the main injection point for Viruses and Worms to enter your computer and affects your normal computer use. I myself am looking for a FF plugin that will when installed on your local machine will inject CSS files through JS in your computer and will let me style my own FaceBook page wow… great idea :) but this means that through JS anything can happen, it can do good to the webpages you visit and can also harm your computer at the same time. Well 90% of the times JS is used for forms validation, like in an email field you might enter your name by mistake and once you click submit it will display that your imput is not valid, if JS is not used the whole procedure gets too troublsome, like it will first send the email to website server where it might be checked for the correct input and once it is rejected will be then sent back to your computer so that you can retype it. So in that case its better to use JS rather than using server side validation. If your website layout is dependent on your JS then that might lead you into trouble, so avoid using JS and try to use CSS which is the cleaner way of applying style to your data.
Read more

The myth of HTML – xHTML (Part 1)

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