Ultimate Guide for CSS3 in Newsletters and Emailers

Hi,

Few days back I wrote an article about the HTML5 support for mailers - when we will drop HTML4? And today I got the campaign Monitor e-mailer on CSS and e-mailer for newsletter - for CSS3 and hand phones.I am very excited to see that many nice features of css3 and also of css2 we can use in the newsletters and e-mailers.

Following properties we can use and fully supported in mailers:

- Style tag in head and body section both
- Float
- text-shadow
- HSL

Following properties are not fully supported:-

- Background Image
- Width
- height
- Padding
- Box-shadow


Good news is iphone, ipad and Apple Mail 4 is supporting every css3 and css2 features fully.

You can check and download the guide to css support for mailers from campaign monitor.

All Cheat Sheets Designer and Developers can Need

Hi,

Thanks to Spray Studio.They have posted very useful post in which all the cheat sheet every designer and developer can need is at one place...from Jquery,PHP to simple OS shortcuts, it have almost every cheat sheet at one place.

Which is very useful because many times you are not able to remember every things and then these cheat sheet comes to help you.

Check Out!!

Mozilla Firefox Hacking

We always keep blaming IE for wrong rendering of the XHTML and CSS and keep finding the workaround of that only.But sometime (like is my recent project)everything was working fine but Mozilla was stuck, so I needed a workaround so that my particular style should be visible only in mozilla and after doing research on Google I got the Hack for Mozilla:-

@-moz-document url-prefix(){
.wrapper{
width:500px;
padding:5px;}}


// This will be visible on all browsers but not in Firefox as we have applied
hack for that.
.wrapper{
width:600px;
padding:5px;}}

Thanks,

IE and Designers - Just a thought to share!!

IE is the biggest enemy of all the designers working worldwide.Now after the HTML5 and CSS3 less support on IE6 problem increased a lot.As lot of people advised to drop the IE and use the new technology and features to enhance the website functionality but what about those website whose main traffic is coming from the IE only?

I work in India and main visitors and focus area of traffic is Marjory from India only and here people are not so tech savvy and they wouldn't know about the Firefox,chrome and other browsers which we consider as designer-friendly browsers.

So, for designer like me whose main traffic is still on IE6, dropping IE bug would not be possible.Although lot of fixes and concepts like Progressive Enhancement is there but when you know where your whole audience will be coming to check your product you will be giving 100% there and focusing on that only.So, putting functionality for Modern browsers and keeping your audience away from that functionality wont be a good idea.

I always face this problem whenever projects come to me - to show off new functionality and features I use modern browsers but when come to term of what I am delivering to my audience comes to a simple Sponge Cake!!

What I am expecting from IE?
Many people in India not aware of the Modern Browser or any new improved Version of IE.There should be 100% block and come with more improved versions that support the new features and properties.

Why Every Designer Should Start Loving CSS3?

CSS3 is "Cascading Style Sheet version 3", CSS3 comes with all the latest and best features that can lead any designer and front-end developer to fall in love with it. All though CSS3 is not fully supported by all the browsers but we can start using its features and make our users to move towards the new technology.

Top 4 Property that can convince you to use CSS3 NOW:-

1) Rounded-Corners
All designers’ most lovable effect is to use rounded corners. But when it comes to the SEO-friendly website or number of image restrictions designers have to make the less use of the rounded corners. But thanks to css3 without any image or plug-in by just writing css3 we can achieve the rounded corners in a click.

e.g.:
#box{
border:5px solid red;
-webkit-border-radius:5px;
-moz-border-radius:5px;}

So, now designers don't need to compromise on there creativity any more, without taking worry of the images and SEO issues.

2) Text-Shadow
Designers love to give the shadows to the Heading, Subheading or sometime text to make that standout and then the fight between the SEO and designers starts. As SEO people want the content to be pure text rather than images based as that effect the SEO of page. So, as always designers have to drop the text shadows.

But thanks to CSS3 to understand designer problem and gave us the property “text-shadow” where we can give the shadow without using any image and plug-in

e.g.:
h1{
Color:#000000;
text-shadow:0px 1px 1px #cccccc;}

Syntax text-shadow: x-axis y-axis feathering color

The Best thing about this property is that we can use multiple shadows on one text.

3) Box-Shadow
Same as text-shadow…we can give shadows to the boxes and images too by using CSS3 box-shadow property

e.g.:
#box{
Color:#000000;
-mox-box-shadow:0px 1px 1px #cccccc;
-webkit-box-shadow:0px 1px 1px #cccccc;}

Syntax box-shadow: x-axis y-axis feathering color

4) Gradients
Design is incomplete without using the gradients, weather it’s the button or banner or just a simple background effect. From so many years designers are used to use linear gradient and know all the tricks to handle that. But because of the again seo funds and image restrictions we have to drop it but now CSS 3 comes with gradients that we can achieve purely by css coding no image, no plug-in.

e.g.:
#box{
Background:-moz-linear-gradient(top, #fffff 0%, #000000 100%);
Background:-webkit-linear-gradient(linear, left top, left bottom, from
(#ffffff), to(#000000));
}

E-mailers - when we will drop HTML4?

As the increase in the search engines website and increase of the internet users around the world in such short span of time.The term "Internet Marketing" is catching the attention.Now days successful Internet Marketing is must to have to promote the product and services they are offering.

Internet Marketing is simple term is to promote yourself doing marketing through internet...promoting you and your product/services.

The best way of Internet Marketing is - Email Marketing.All, developer developing the e mailers know the thumb rule of E mailers -"Old way of doing HTML4 and Old inline style-sheet"

As we are adopting HTML5 and CSS3 to our web applications and websites even though the many old-browsers are not supporting 100% HTML5 and CSS3, but all are encouraging designer and developers to use the latest technologies.But what about E mailers? Internet marketing is not any old-fashion's technique nor e mailers are both are the new things and very useful for every company.When we can drop the old fashioned type of coding for the e mailers?When we will have the new latest HTML5 and CSS3 support for our e mailers?

The must to have Features of HTML5 and CSS3 for e mailers:

1) HTML5 have the Semantic Code structure - like header, footer, aside, video, canvas.It would be great if we can use the same elements in our e mailers.To make our e mailer template well structured and easy to read the code

2) No tables, I want my div back,all designers and developers come a long way from tables and in e mailers when we have to do table coding it hurts like hell.We should not be partial with e mailers and we should have the support of DIV

3) CSS3 Rounded corners, because of the blocking images on the e mailers we need to use the lesser images which lead us to avoid the rounded images and buttons.It would be great to get the rounded corners effect by using CSS3 in our e mailers which will make our e mailer eye catching without using images.

4) CSS3 Text-Shadow, all e mailer designers miss the shadow effects on the text because of the restriction of the images on the e mailers.But thanks to css3 text-shadow we can leave the images and by just style-sheet we can give the beautiful shadow to our texts

5)CSS3 Transform, we all play around with the images and graphics by making them rotate etc but again same old problem with the e mailers - No Images.We have to drop them but now CSS3 have the transform features by which we can rotate , scale and transform the images.

6) Background Image support , e mailers don't support the background-image property but we would love to have the support of the background images on e mailers.So, that we designer can take full advantage of the background images.

7) No Inline CSS, Inline Css makes the code clumsy and hard to read.It would be good to have the separate HTML and CSS.CSS external style-sheet support should be given.

This is the high time to change the way we are coding the e mailers as the web technology is moving in new era and user accessibility and interaction is taking the first seat.So, for the e mailers too, we should not make our users and designers feels that they are still working in 90's by using inline style-sheet and old type of HTML4 and table support.

Why HTML5?

HTML5 is the new improved version of HTML4.It comes with lot of happing features and new tags, elements that makes the web face to change forever.HTML5 has moved to the new era of technology by taking all the needs of the designers , web developers and App developers.

HTML5 focus on lot of field with one major agenda to make the the code semantic and easy to do and read.With high concept introduce but focus also kept on the little things too.

But Why HTML5?
- New Doctype declaration - simple and short
- New Elements, semantic code and easy to understand eg- header, footer, nav, aside etc
- New Element Video - To give the experience of using the Videos on page with easy features and less code
- New Element Audio to give the experience of using the audio on page with easy features and less code No third party plugin
- New Element Canvas - To use JS animation on page with the help of the canvas
- Drag and Drop features
- Live content Editing
- On page Form Validation (No JS no Jquery)
- Local Storage feature
- Preload videos
- Output Element
- Sliders
- and many more...

So, just because few browsers are not able to support the these exciting features of the HTML5 that does not mean we should not use it from now.We should make our users and client informed and educated for new browsers and new technology as per the current and future market and technology.

Welcome to Code and Pixels...

Thanks for dropping to the Code and Pixels, as the name loudly saying its all about the CODING(Front end) and every designers favorite PIXELS (all about designing).This blog is an attempt to touch all the related information about the Front end Development and Design concepts - Website, Graphics, Internet Marketing and and design.

What is Front End Development?
It is not a new term in fashion, from many years all designers were working on the design and the Front end development.Front end development is all about converting your PSD - your design to markup languages (xhtml and css) by using the Jquery or javascript. XHTML,CSS,JS are all the front-end languages that give the designers exposure to how there own design will look on the web.

With the new era of HTML 5 and CSS 3 and Javascript framework the job of designers as front end developer is become easy and more interesting.

Pros of Being Front End Developer, also

1) More exposure to the new technologies
2) Able to design and code your own thing
3) Able to come out of colors into real world of code
4) Can design as per the coding standards
5) Can actually know how the website works

Cons of Being Front End Developer

1) You have to play dual role
2) Sometimes keep your creativity aside to meet the coding standards
3) you have to think and apply the BEST of the BOTH WORLD
4) Always keep your hand in both Design and Coding

Overall its good for designer to have knowledge of front end development, so that they can get to know how there design can actually meet the real world requirements.And its always good for IT people to keep there basket full of knowledge of front end and design too.