Lots of compatibility issues occur when HTML developers deal with HTML-formatted emails generated using server side languages like PHP, PERL, JAVA, etc. in their projects.

From time to time you’ll find the odd gobbledygooked message in your Web-based email app, but generally speaking HTML-formatted messages render flawlessly on the Web.  On the other hand, desktop mail clients such as Outlook on Windows, Mail.app on OS X, and the rainbow flavors of desktop Linux (Ubuntu, Centos, and so on) routinely have rendering issues with HTML-based email.

Despite the incredible advances in modern software, why does this continue to happen?

The answer is quite simple: certain mail clients ignore certain HTML tags.  Now there’s no universal rule as to which ignores what, but the more you code the more you’ll learn, so for now let’s take a look at one case with Outlook.

For many users, email ‘stationery’ conjures up late 90s memories of Incredimail and a general, unsavory n00bishness.  But for marketing purposes a well-designed mail template, consisting of a stylish background image, thoughtful font selection, layout and copy equates to sales.  Perhaps thousands of people – from prospective clients to the media – will view mail on this template and associate it with your corporate brand, so perfection is key.

Now let’s focus on the background image.  Many HTML developers will begin by putting CSS styles in the header of the HTML email directly, or when that fails try working around the problem using div tags and inline CSS.  But either way the results are borked.  Why?  Because Outlook ignores the CSS property “background-image”.

After so much trial and error, the solution we finally decided on was a pure table-based layout with inline CSS – with the CSS being restricted to each individual table cell since Outlook does not ignore those.  We’ve found this not only renders properly in Outlook, but all the other major desktop and Web clients, too.

And here’s how good it can look.

For your reference, here are few examples of HTML tags that are compatible with almost all desktop and Web-based mail clients.

<table cellspacing="0" cellpadding="0" bgcolor="#6b6f7a">
    <tr>
        <td width="55" height="53" valign="top">
            <img src="http://domainname/media/mail/header_01.jpg" alt="" width="78" height="53" />
        </td>
        <td style="font-family: Arial,sans-serif;" width="546" bgcolor="#ffffff"></td>
        <td style="border-bottom: 1px solid #ffffff; padding: 0pt 15px; background-color: #b6d354; color: #ffffff; text-transform: uppercase; height: 43px; vertical-align: middle; font-size: 12px;"></td>
    </tr>
</table>

CSS style property -

word-wrap: break-all;

With the absence of a background tag, images can be used inside the

<table>

and

<td>

tags.

Happy HTML email  coding!!

The new website looks more attractive and organized. 10 minutes tour of new website can be found here. In contrast with the previous version, this new website uses rich content presentation, including JavaScript.

The website uses jQuery 1.3.2, a very known and popular JavaScript library, instead of pure JavaScript. This is very good news and a big leap towards streamlining the use of JavaScript frameworks, specially in case of jQuery. In addition of core jQuery framework, beta.w3.org also uses jQuery plugins (e.g.: http://malsup.com/jquery/cycle/), to enhance the user experience.

The biggest news of the day is w3.org beta website doesn’t render correctly in IE6. It’s supposed to be a strong argument for web developers in order to inspire and take initiative towards to stop exclusive coding to render their websites correctly in IE6.

:

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in  in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources

:

• Make your markup clean
• Don’t fear to java script RIA is future. Jquery might be good place to start (and possibly end of search).
• Keep a tab on latest, fresh and trust worthy tips, tricks, trends, news etc related to web development.
• Get benefit and give benefit by being active part of revolution in web development. Join the wiki maintained by web developers for web developer from Google.
• Know more about standards, stick to them and force them upon you, make web development your passion and web standards your religion.

Here I am with second part of 3-part CSS primer.

In my previous post, I briefly described importance of planning and resetting CSS, some possible ‘Do’s and ‘Don’t’ s. I believe in outlining thing and let your mind fly in free space. My outline for CSS primer can be visualized by connecting following dots.

Object Oriented approach:

Adopting object-oriented philosophy is always beneficial for development…and CSS is no exception. How? I tell you. Object oriented approach in terms of CSS translates as knowing and taking advantage of parent-child relation in DOM and inheriting CSS rules, by designing CSS optimized way, less repeated and multiple times used code indicates more object oriented CSS.

Progressive Enhancement AKA Graceful degradation:

There is a term progressive enhancement, that is “incremental addition of elements”. Which means we should categorize content and content containers, parametrized by accessibility of content, covering target audience.

We should first care about, any content should not be missing which our target audience must get, by keeping in mind what would be possible access terminal for navigating the web page. e.g. PC, PDA etc. It includes low configured and not up to date browsers. Afterward one can enhance page by adding CSS and Javascript cylinders.

Categorization, flexibility and re-usability:

By thinking this way we can get mostly auto categorized content. From here we can start implementing re-usability. We can aaply progressive enhancement with CSS by dividing one big-fat-utf8 CSS into multiple CSS files. e.g. IE specific CSS and print CSS and also CSS responsible for particulars like color and typography css.

If project demands we can keep ‘themes’ too in mind. CSSZenGarden is extreme example of this. To implement this we should deeply think about DOM structure, basic skeleton X/HTML and naming of class/ids. naming of class/id should be content dependent, not on how its going to render or where its going to positioned.

Always try to minimize the unnecessary  tags. e.g. wrapping everything in a div or adding extra wrappers for display purpose only. I suggest to add extra divs to stylize things by Javascript in run time, e.g. rounded corners, or multiple background images, or its not always required to wrap ul and set of inks or img tags into any box level container like div…since CSS rules can be applied on any X/HTML element.

Use multiple class and loosely coupled classes massively.  Multiple classes help to increase re-usability.

example:
<span class="block fs20">Multiple class</span>

use of ‘!important’ keyword is very useful in case of using multiple class, where we might need to override few css rules. but ‘!important’ should be used carefully. Personally I prefer to use ‘!important’ with loosely coupled classes declared against inherited property.
e.g.: following will always work disregarding its position in CSS file against inherited bold property of font.

font-weight:normal !important;

Code Management:

Organize your code in properly commented grouped sections…e.g. header, body, navigation, footer etc.

here we know the importance of neutral class names. If naming of CSS classes will be accoring common template not according page wise us its easy to group related CSS.

example:

What if we name common right panel of web page ‘homecol’ without thinking too much? either we have to rename it on every page its appearing and duplicating same css to render it identicaly, or we have to use ‘homecol’ even in contact page.

After all…

Always try to understand any rendering issue, before throwing some random code to increase vertical length of your CSS file. Every browser supports CSS (If I am not wrong 90% identically) if application of CSS is pure and CSS rules are plugged in right socket. So think twice before re-searching on Google for some hacks to override something which might fill dirt on your accessible web page. Ya of course there are many of known bugs (e.g. IE6 PNG) but id doesn’t mean every issue, you are facing is a bug and you can’t overcome them until import some hack from Venus.

The last word before I end this second post from 3 part series on CSS, I want to say is…

Not every validated web page is accessible or ideal but every invalid web page is bad. So always try to validate. First by validating from validators and then by common sense, because technically a page with thousands of nested DIVs are valid. button stimulated out of div is valid. But question is… Is it really?

Think on it, till I am cooking third post CSS Go

• It’s not how much and what you know; but what you can do with what you know, which’s important.

• Ability to implement Polymorphism, Inheritance, private, public namespaces, static methods etc is no guarantee you are a good OO developer.

• OOP is useless if you don’t use it to create good software design (architecture).

• Using packages, classes, etc does not guarantee good software design.

• When designing your software, think of it as an electronic device you are designing.

• Sketch out the ‘electronic device’. Label the different components, list their functionalities.

• Stay hungry, stay foolish.

That’s it for today. I hope you are blessed with more knowledge, and the ability to make the best use of them.  Adios!

In order to extract maximum pulp from CSS fruit there are few things needs to keep in mind. Although rule of thumb is efficiency is directly proportional to experience but I’ll point out few options 3-part post series See, Yes! Yes! – READY,  See, Yes! Yes! – STEADY and See, Yes! Yes! – GO. which can help novice CSS developers to take right diversions.

All of following points are optional and one can modify them according to needs and/or simply drop the idea.

Big Picture:

Planning is a must for mid or big projects…for small projects one can instantly start coding.

While coding for new design, web designer must analyze the design mock-up and slice the design by keeping in mind the facts which are resultant of observation and guideline of website/blog/web application.

e.g.

• What portion of design mock can be translated by using CSS rules instead of image?
• Whether background is repeating? Design is fixed width or liquid?
• What element of design is going to change dimension dynamically?
• Re-usability issues needs to be addressed so back-end developer (if any) don’t face any difficulty to plug reusable components.
• Sliced images need to save as optimized for  web, as PNG if element is using alpha transparency and if it uses square shape without tranparency JPG images work better in most cases.

CSS Reset:

Purpose of using CSS Reset is to neutralize default rendering of browser, in order to equalize rendering of web page across different browsers.

Its entirly optional for web developers whether to use one or not. Even if Web Designer is very keen to use one, s/he must consider the big picture where the CSS is going to be used (including some future prediction).

In few cases i prefer not to use CSS reset as in Blogs where content is generated by user and web designer don’t have exact control over X/HTML tags.
Following is my reset.css. I have cooked this starter dish by borrowing some spices from here and few from experience.

/* Common CSS and CSS reset Start */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/*links*/
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/*List*/
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* Common Display Rules*/
.block{
display:block;
}
.none{
display:none;
}
.inline{
display:inline;
}
.clear{
clear:both;
}
.relative{
position:relative;
}
.absolute{
position:absolute;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}
.center_div{
margin:0 auto;
}
.bold{
font-weight:700;
}
.normal{
font-weight:normal !important;
}
.underline, .underline:hover{
text-decoration:underline;
}
/* Headings*/
h1, h2, h3, h4, h5, h6{
font-family:Arial, HelveticaNeue, Helvetica, sans-serif;
font-weight:700;
}
h1{
font-size:18px;
}
h2{
font-size:17px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5{
font-size:15px;
}
h6{
font-size:13px;
}
/* Font Size */
.fs8{
font-size:8px;
}
.fs9{
font-size:9px;
}
.fs10{
font-size:10px;
}
.fs11{
font-size:11px;
}
.fs12{
font-size:12px;
}
.fs13{
font-size:13px;
}
.fs14{
font-size:14px;
}
.fs15{
font-size:15px;
}
.fs16{
font-size:16px;
}
.fs17{
font-size:17px;
}
.fs18{
font-size:18px;
}
.fs19{
font-size:19px;
}
.fs20{
font-size:20px;
}
.fs21{
font-size:21px;
}
.fs22{
font-size:22px;
}
.fs23{
font-size:23px;
}
.fs24{
font-size:24px;
}
.fs25{
font-size:25px;
}
.fs26{
font-size:26px;
}
.fs27{
font-size:27px;
}
.fs28{
font-size:28px;
}
.fs29{
font-size:29px;
}
.fs30{
font-size:30px;
}
/* Remove Inherited Style*/
.no_margin{
margin:0 !important;
}
.no_padding{
padding:0 !important;
}
.no_border{
border:none !important;
}
.no_dec{
text-decoration:none !important;
}
/* Common CSS and CSS reset End */

Hmm…I think its a good breakfast.

So guys allow me to take a break…I’ll be digging further into CSS mine very soon on my next post See, Yes! Yes! – STEADY .

What is SSL?

SSL (Secure Socket Layer) is a protocol used for secure data transfer. This is done by using private keys and certificates. A private key is used to encrypt the data which you are sending and the server can only decrypt this data with the private key available with it, A certificate is used to authentic yourself before proceeding.

So we need two things to make our website secure for online transactions. In this article i will explain how to generate a private key with open-ssl and apache, how to generate a certificate request from CA (Certificate Authority). How to configure your server to respond for ssl requests.

We use Apache 2, Debian Linux, Openssl for this article.

First step is to install Apache:

Go to console mode

aptitude install apache2

next install openssl to generate keys and certificates or certificate requests

aptitude install openssl


next generate certificate request and key using openssl

openssl req -new -nodes -keyout myserver.key -out myserver.csr

Here you want to fill up some details like Country code, State, City, Company name, the most important thing is common name, it must be same as your website name (suppose you website is www.sourcebits.com then the common name must be sourcebits.com)

this will generate two files in your directory one is a private key file (myserver.key) and another one is certificate request file (myserver.csr)

Now you need to get a certificate from some certificate vendors most popular vendors are verisign and comodo.
Comodo is providing a free trail certificate which is valid for 3 months. (Comodo Free Trail)
After getting the certificates you want to enable ssl module in apache and configure it

a2enmod ssl
vi /etc/apache2/sites-available/default

<VirtualHost *:443>
ServerName policeagenda
DocumentRoot /var/www/
SSLEngine On
SSLCertificateFile /etc/apache2/ssl/sourcebits.cert
SSLCertificateKeyFile /etc/apache2/ssl/sourcebits.key

<Directory />
Options Indexes FollowSymLinks
AllowOverride All
Order deny,allow
Allow from all
</Directory>
</VirtualHost>

Then restart your server /etc/init.d/apache2 restart

We all know that a default http request will be sent port 80, in the same way a default https request will be forwarded to 443 so we are configuring the server for 443 port.

You are done now access your website with https://myserver.com

If you face any problems you want to check this things first

Whether the server is hearing port 443 or not to find this type lsof -i tcp:443

Next check whether your port 443 is forwarded or not. If you face any new problems other than this please post a comment and we will try to solve it.