Let’s gather our knowledge

I’m having a strange issue with Yahoo, where my email is not centered and goes way to the left.

yahoo-mail-template-not-center-position

 

 

 

 

 

 

Where other Mail services is doing good with centered position as my expectation.

However, Finally I have worked out a neat little fix to ensure the email is centered okay. To set up that, I add the following style to the main “table 100% width & height, align – center, table-layout: fixed”  that able wraps around my content:

<table height="100%" width="100%" cellpadding="0" cellspacing="0" 
border="0" align="center" style="table-layout:fixed;">


yahoo-mail-template-center-position

 

 

 

 

 

 

 

Thanks! for reading. Good Day :)

There are a few ways to remove that space, thous are as following:

Solution 1: No Space Between Elements

The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
Of course this is a mess to maintain but it's practical, logical, and most importantly...reliable.

Solution 2:  font-size: 0 on Parent

The best white-space solution is to set a font-size of 0 on the parent to the inline block elements.  So if you had a <UL> with inline-block <LI>'s, you'd do this:

.inline-block-list { /* ul or ol with this class */
	font-size: 0;
}

.inline-block-list li {
	font-size: 14px; /* put the font-size back */
}

To counteract the parent font-size setting, you must set a font-size for the list items, but that's usually fairly simple.   The only time it wouldn't be simple is if you're in a wicked cascade of relative units you can't easily calculate.  In most cases, however, this will be exactly what you need. Update: unless you care to support Android WebKit.

Solution 3:  HTML Comments

This solution is a bit gangsta but also works.  Using HTML comments as spacers between the elements works just as placing no space between elements would:

<ul>
   <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

In a word...gross.  In two words...really gross.  In three words...well, you get it.  But it works!

Solution 4:  Negative Margin

Much like solution two, this is regrettable.  You can take advantage of inline-block's flexibility to use a negative margin to negate the space:

.inline-block-list li {
	margin-left: -4px;
}

This is the worst solution because you have to account for variable, sometimes unpredictable spacing.  Avoid at all costs.

Solution 5:  Dropping Closing Angle

Another HTML-based hack solution is to simply place the closing > next to the start of the next tag:

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

Not as ugly as the HTML comment hack but I know I'd probably remove that whitespace and not think about why it was there originally.

good day :)

Source: http://davidwalsh.name/remove-whitespace-inline-block

Instead of using the IE-based HTML rendering engine, Outlook 2007/2010 use the MS Word HTML rendering engine.

Following things won’t work in Outlook 2007/2010:

  1. No background images in DIV tags and TABLE cells.
  2. No nested background colors. A background color in a DIV or TABLE cell displays fine. However, if you nest another TABLE or DIV within the element, the background color vanishes.
  3. No FLOAT or POSITION attribute in DIV tags. In other words, CSS-based layouts won’t work in Outlook 2007. (As far as possible, avoid DIV tags in your html; use TABLE instead)
  4. No animated .gif files or Flash content. Animated .gif files just won’t animate. With Flash, you’ll just get a big red X.
  5. Text alignment will be justified to the left
  6. Text will have double spacing
  7. Forms will not work in the emails sent to Outlook 2007 and Outlook 2010
    Email clients consider email forms to be a security risk. While some email clients simply warn you of potential danger, others like Outlook 2007 outright disable the forms. Given the sporadic support for forms in emails, we recommend linking to a form on a website rather than embedding it in the email.

    Copy right from (http://www.benchmarkemail.com/help-FAQ/answer/what-are-common-issue-with-outlook-2007) :)

Following are some points that should think to use image in Email Template

Avoid background images
Outlook will not recognize background images. Instead, use a background color, and use images in other ways in your email.

Use absolute image paths
If you upload an image to an individual email using the HubSpot image library, this automatically happens for you. If including an image in an email template, host the image on your website. You could upload the image to your HubSpot file manager. Then make your image paths point to the full URL, such as: http://www.yoursite.com/yourimage.jpg.

Declare image width and height
This will ensure that your email design will maintain its structure when images are turned off by email clients.

Use ALT text
Some email clients block images by default, so each image should have compelling ALT text that is compelling.

using-images-in-emails

 

 

 

 

Optimize image size
Make your image file sizes as small as possible without losing their visual integrity. This will prevent long email load times.

Avoid using PNG images 
Lotus Notes does not support PNG image formats. Use a format such as JPG or GIF instead.

Avoid using image maps
Hotmail will not recognize image maps.

Use Gmail and Hotmail glitch fix 
When using multiple images, this insline CSS property eliminates a white gap in between adjacent images.

<img src="http://www.yoursite.com/yourimage" width:"10px" height: "10px" style="display:block">


 copy right from (http://help.hubspot.com/articles/Best_Practice/email-templates-design-code:)

The best practices of designing and coding email templates. Following are the basic tips and tricks:

Keep it simple

Email campaigns should focus more on message, not the look and feel of email.  Just like it is with website, content will always be king. Though Email design is not always easy, but if you stick with a basic table layout and pretend that you’re designing an older web page, you should have a much greater degree of success. Try to maintain a higher text-to-image ratio, because email programs look for that and you don’t want your email to end up in spam due to too many images. They also look at the overall HTML character count, so try to limit the template to a few articles, and don’t throw in a bunch of span tags or spaces that just add unnecessary characters.

Use in-line styles

In-line styling is a must when it comes to designing HTML emails. Of course, adding external CSS is way more efficient and time-saving, but since there’s such limited support for that in the different email programs, styling your elements in-line is the best way ensure that your intended design will display correctly. If you want to see what types of CSS are currently supported in the popular email programs, take a look at the Email Standards Project website, as they have a comprehensive list of which CSS (Cascading Style Sheets) properties work reliably and which ones don’t. Bottom-line though – code your emails like you would an old webpage from the ’90s. This means using basic HTML tags and in-line styling.

7a675edf-b139-42bd-9688-a1f359abaa2b
 

 

 

Keep email width under 650 pixels

This ensures that users of email clients such as Outlook can view your email in their vertical preview pane. Hubspot’s default email templates are already within this max width, so feel free to duplicate one of those templates as a starting point.

Abide by CAN-SPAM rules
You must include an unsubscribe option in every email, as well as your company name and address. In HubSpot, you cannot save an email template unless it includes this element.

Use code-friendly software
When editng your template code, use software like Sublime Text 2, Dreamweaver, or Notepad, or even HubSpot’s email template creator. Word and other WYSIWYG editors typically add extra code that will cause your email to display poorly in certain email clients.

Design with tables
While it’s no longer best practices to design web pages with tables, they’re essential when designing emails. It’s the only way to have your design render correctly across multiple email clients.

Avoid complex colspans and rowspans
These will make revisions a nightmare as you try to reuse templates. Use these very sparingly, and never together on the same table unless you know that the content itself will be consistent in future emails.

Avoid body attributes
Some email clients ignore body attributes. If, for example, you want to make your email background blue, use a 100% width table with a blue background and next your content in the table.

Avoid CSS shorthand

  • An example of CSS shorthand: <p style=”font: italic 14px Verdana; color: #000”></p>

  • An example of correct CSS:  <p style=”font-style: italic; font-size: 14px; font-family: Verdana; color: #000000”></p>

Avoid external or internal CSS classes or IDs
Anything that starts with <style> will have mixed results across email clients. Instead, use inline CSS.

Avoid Javascript or other dynamic scripts
Even if a SPAM filter allows your email through, most email clients will not allow these scripts to function.

Avoid Flash or video embeds
The ability to view rich media in email is turned off by default in most email clients. Instead, include an image of your video player (with a play button) that links to the rich media on a website page.

Use plain text-style bullet points
In addition to images, another element that tends to break in HTML email renderings are HTML-style bullets. To avoid the recipient seeing invisible or wonky bullets, use a plain text alternative such as asterisks (*) or dashes (—) that are more likely to show up no matter what.

Use Hotmail glitch fix
If you want to center an email on a solid colored background, Hotmail will not render this properly unless you include the following code:

.ReadMsgBody {width: 100%}
.ExternalClass {width: 100%}

 copy right from (http://help.hubspot.com/articles/Best_Practice/email-templates-design-code) :)

5 tips for writing better CSS

True, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours.

In this article I want to talk about 10 different tips you can write proper and clean css code as well as to start improving yours, as quickly and efficiently as possible.

1. Start with a CSS Reset

Seriously, always use a reset of some sort. Whether you are using the Eric Meyer Reset, the YUI Reset, or your own custom reset, or my reset css ;) just use something. It can be as simple as removing the margin and padding from all elements:

* { margin: 0; padding: 0; } 
html, body, div, span, p, form, label, fieldset, legend, table, caption, tbody, tfoot, thead, tr, th, td h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, a, applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, strong, em, {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
text-align: left;
vertical-align: baseline;
font:Tahoma, Times, serif;
}
body {line-height:1.5;}
ol, ul {list-style: none;}

2. Comments your CSS block

You should keeping organize your stylesheet clean and easy to read, comments are going to be a great way for you to keep things structured and clean. By commenting out blocks of code. For example, this is how I structure my stylesheets:


/*****Reset*****/  
Remove margin and padding from elements  
  
/*****Basic Elements*****/  
Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.  
  
/*****Generic Classes*****/  
Define styles for simple things like floating to the sides, removing a bottombottom margin on elements, etc  
Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently   
  
/*****Basic Layout*****/  
Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site  
  
/*****Header*****/  
Define all elements in the header  
  
/*****Content*****/  
Define all elements in the content area  
  
/*****Footer*****/  
Define all elements in the footer  
  
/*****Etc*****/  
Continue to define the other sections one by one  

3. Use Useful Naming Conventions

Name your elements based on what they are, not what they look like. For example, .xyzPart is much less versatile than .commentPart, and .postContent is more limiting than .header.

4.Stay consistant

Whatever way you decide to code, stick with it. I am sick and tired of the whole 1 line vs. multiple lines for your CSS debate. There is no debate! Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet. Personally, I use a combination of both. If a selector is going to have more than 3 properties, I break it to multiple lines:

div.header { float: left; width: 100%; }  
div.header div.column { border-right: 1px solid #ccc; float: rightright; margin-right: 50px; padding: 10px; width: 300px; }  
div.header h1 { float: left; position: relative; width: 250px; } 

It works for me because 3 properties is about what fits on 1 line in my text editor before wrapping to another line. So just figure out what works for you and be consistent.

5. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.
This:

h1, h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

much moreefficient than this

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

h2{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
color: #FFFFFF;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

You should also make use of shortcuts whenever possible. Always be on the lookout for opportunities to group elements and use declaration shortcuts.
You can accomplish all of this:

h1{
margin-top: 10px; 
margin-right: 30px;
margin-bottom: 14px; 
margin-left: 15px;
font-family: Arial;
font-size: 12px;
font-weight: bold; 
} 

with only this

h1{
margin: 10px 30px 15px 15px; 
font: bold 12px Arial;
} 

It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.

1. It’s critical when working with CSS to be aware of the various properties at your disposal and how to use them correctly.

2. Using a good editor can increase productivity. Syntax highlighting and auto-complete functionality (plus validation and code references) make life easy. Check out Notepad++, Coda, and don’t discount Dreamweaver CS’s code view until you try it.

3. In many ways, experimentation is the mother of innovation. Give yourself time to play; trial and error will help you learn and memorize techniques quickly. Check out these CSS3 experiments, for inspiration: How to Create Inset Typography with CSS3, Semantic CSS3 Lightboxes, and 10 Interesting CSS3 Experiments and Demos.

4. Enable Gzip compression server-side whenever possible; it shrinks the size of files such as CSS and JavaScript without removing any of the content.

5. Caching will conserve bandwidth for visitors and account for much faster speeds. Take advantage of it whenever you can. Learn about optimizing browser caching.

6. Whitespace is important for CSS readability. Using whitespace to format your stylesheet adds bytes to the file size, but it’s made up for in increased readability.

7. Avoid using inline code (in either elements using the style attribute or in the HTML document within <style> tags), and put them instead in your external stylesheets. It’ll be easier to maintain and also takes advantage of browser caching.

8. Whatever method you use to lay code out, be consistent. You’ll avoid potential problems such as misinterpretation.

9. Conditional comments can help you target versions of Internet Explorer for style. Filtering vendor-specific code isn’t ideal, and comments are safer than ugly hacks.

10. This tip is slightly controversial, but I recommend using a single stylesheet rather than multiple ones. It reduces the number of HTTP requests and improves maintainability, giving your site a performance gain. This is a tip supported by Google Page Speed guidelines.

11. When there are conflicting style rules, style rules that are later down the stylesheet supersedes the ones that come before it. Thus, put mission-critical declarations at the end, where they won’t be in danger of being overridden by other styles.

12. If you encounter a bug and can’t determine its cause, disable CSS (using something like Firebug or the Web Developer add-on) or simply comment out all of the styles, and then bring selectors back one by one until the fault is replicated (and thus identified).

13. Make sure your code works in various browsers. Check it against the latest versions of the top five: Internet Explorer, Firefox, Chrome, Safari and Opera.

14. Additionally, ensure that your code will degrade gracefully when CSS is disabled in the user’s browser. To test this, either turn styles off in every browser or use a text browser such as Lynx.

15. Ensuring that your code degrades gracefully is obviously important, but many people forget that some visitors will have a dodgy browser or have styles turned off, so check that your fallbacks work.

16. Every browser has a built-in debugger. In IE and Firefox you can get to the inspector by hitting F12; for Chrome, Safari and Opera, press Ctrl + Shift + I.

17. Browser emulators can’t replace the real thing, so use a real or virtualized edition of a browser or device.

18. Did you know that PHP code can create dynamic CSS files? Here’s a tutorial on that. Just give the file a .php extension and ensure that the file declares the document header with a text/css content type.

19. Naming CSS files can be tricky. One of the best ways to approach the task is to keep file names short and descriptive, like screen.css, styles.css or print.css.

20. Any code or process you create is valuable, and recycling what you’ve produced for other projects is not a bad thing: pre-existing code is a great timesaver, and this is how JavaScript and CSS frameworks are born.

21. While comments in CSS files can assist other people who read or maintain them, avoid writing comments unless they are required. Comments consume bandwidth. Write CSS in a self-explanatory manner by organizing them intuitively and using good naming conventions.

22. If you’re struggling to remember what’s available in CSS (or even CSS3), get some cheat sheets. They’re simple and can help you get used to the syntax. Here are some excellent CSS cheat sheets: CSS Cheat Sheet (Added Bytes), CSS Shorthand Cheat Sheet (Michael Leigeber), CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) (Smashing Magazine).

23. Bad code breaks more websites than anything else. Validate your code by using the free, web-based W3C CSS Validation Service to reduce potential faults.

24. Vendor-specific CSS won’t validate under the current W3C specifications (CSS2.1), but could give your design some useful enhancements. Plus, if you’d like to use some CSS3 for progressive enhancement, there’s no way around using them in some instances. For example, the -webkit-transform and -moz-transform property was used to progressively enhance these CSS3-animated cards for users using Safari, Chrome, and Mozilla Firefox.

25. Keep multiple CSS files in a single directory, with an intuitive name such as css/. If your website has hundreds of pages, maintainability and information architecture are vital.

26. Be careful when using the media attribute in your HTML declaration for an external CSS file. You might be unable to use media queries to better provide pre-cached alternative visuals.

27. If you find elements that use the same properties and values, group them together by using a comma (,) to separate each selector. This will save you from repetition.

For example, if you have the following:

h1 { color:#000; }  h2 { color:#000; }

Combine them as such:

h1, h2 { color:#000; }

28. Printer-friendly stylesheets are very important if you want to save your visitors’ ink and paper. Use the @media print at-rule, and remove anything that isn’t necessary on the printed page.

29. Accessibility also has to do with how the written word is spoken. The aural (now deprecated in CSS) and speech media queries can improve usability for screen readers.

30. Unfortunately, the handheld media query in CSS isn’t widely supported. If you want your website to work on mobile devices, don’t depend on it to serve the correct visuals to mobile devices.

31. Take the time to eliminate duplicate references and conflicts in your CSS. It will take some time, but you’ll get a more streamlined render and fewer bytes in your files.

32. When working with mouse hover events, deal with the (1) :link pseudo-class, then (2) :visited, then (3) :hover and finally (4) :active — in that order. This is necessary because of the cascade.

33. Making a website work well on Apple iOS devices is straightforward: to scale your design, just use CSS3 media queries with the appropriate min-width and max-width values. Here’s a tutorial for that.

34. Make the most of CSS inheritance by applying required styles to parent elements before applying them to the children. You could hit several birds with one stone.

35. You can apply multiple classes to an element with space separation, which is great if you want to share properties with numerous elements without overwriting other styles.

36. If you don’t want to deal with IE6′s conditional comment quirks–they require a separate CSS file–then you can use the star hack (* html) selector, which is clean and validates.

37. HTML tooltips are fine for plain text, but the :hover pseudo-class for CSS tooltips gives you more options for showing styled content. Check out this tutorial on how to create CSS-only tooltips.

38. Using attribute selectors, you can add icons or unique styles depending on the file type you link to in an anchor. Here’s an example with which you can add style to a PDF link: a[href$='.pdf].

39. You can also use attribute selectors to target a specific pseudo-protocol such as mailto or skype: [href^="skype:"].

40. Rendering CSS takes time, and listing selectors adds bytes. Reduce the workload of a renderer by using only the selectors you require (an id is better than many child references).

41. Not everyone will agree with this, but I recommend writing every "custom" selector down as a class (before making it an id) to help eliminate duplicate entries.

42. When structuring your CSS file by selectors, the convention is to list elements, then classes (for common components) and finally any ids (for specific, unique styles).

43. Naming conventions for selectors are important. Never use names that describe physical attributes (such as redLink), because changing the value later could render the name inappropriate.

44. Case sensitivity relates to naming conventions. Some people use dashes (e.g. content-wrapper) or underscores (i.e. content_wrapper), but I highly recommend using camel case (e.g. contentWrapper) for simplicity.

45. The universal selector (*) is used widely in CSS reset mechanisms to apply specific properties to everything. Avoid it if you can; it increases the rendering load.

46. With CSS3 media queries, you can easily target the orientation of a viewport with portrait or landscape mode. This way, handheld devices make the most of their display area.

47. Apple’s devices are unique in that they support a <meta name="viewport"> tag, which has stylistic value attached to it. You can use this to force the screen to zoom at a fixed rate of 100%.

48. The two CSS3 pseudo-elements, :target and :checked have great potential. They apply their designated style only to certain events and can be useful as hover event alternatives.

49. Embedding content in CSS is a unique way to give anchor links some description in printer-friendly stylesheets. Try them with the ::before or ::after pseudo-elements.

50. IDs can serve a dual purpose in CSS. They can be used to apply styling to a single element and to act as an anchoring fragment identifier to a particular point on the page.

51. Many designs are focused on grids and the rectangular regions of the viewport. Instead, create the illusion of breaking out of the box for added effect.

52. If margin: auto; on the left and right sides isn’t getting you the central point you desire, try using left: 50%; position: absolute; and a negative margin half the width of the item.

53. Remember that the width of an item constitutes the specified width as well as the border width and any padding and margins. It’s basically a counting game!

54. Another controversial tip here: don’t use CSS resets. They are generally not needed if you take the time to code well.

55. A CSS framework such as Blueprint or YUI Grids CSS might assist you speed up development time. It’s a bit of extra code for the user to download, but it can save you time.

56. Remember that Internet Explorer 6 does not support fixed positioning. If you want a menu (or something else) to be sticky, it’ll require some hacks or hasLayout trickery.

57. Whitespace in web designs is amazing; don’t forget it. Use margins and padding to give your layout and its content some breathing room. You’ll create a better user experience.

58. If one thing overcomplicates the task of scaling a design the way you want, it’s using inconsistent measurements. Standardize the way you style.

59. Different browsers have different implementations; visually impaired users may want to zoom in, for example. Give your layout a quick zoom-test in web browsers to ensure the style doesn’t break!

60. Most browsers can use box-shadow without extra HTML. IE can do the same with filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);

61. Rounded corners aren’t as difficult to make as they used to be. CSS3 lets you use the border-radius property to declare the curvature of each corner without surplus mark-up and the use of images.

62. One disadvantage of liquid layouts is that viewing on a large screen makes content spill across the viewport. Retain your desired layout and its limits by using min-width and max-width.

63. WebKit animations and transitions might work only in Safari and Chrome, but they do add a few extra unique, graceful flourishes worthy of inclusion in interactive content.

64. If you want to layer certain elements over one another, use the z-index property; the index you assign will pull an element to the front or push it behind an item with a higher value.

65. Viewport sizes aren’t a matter of resolution. Your visitors may have any number of toolbars, sidebars or window sizes (e.g. they don’t use their browsers maximized) that alter the amount of available space.

66. Removing clutter from an interface using display:none might seem like a good idea, but screen-reader users won’t be able to read the content at all.

67. Be careful with the overflow CSS property when catering to touch-screen mobile devices. The iPhone, for example, requires two fingers (not one) to scroll an overflowed region, which can be tricky.

68. Have you ever come across CSS expressions? They were Microsoft’s proprietary method of inserting DOM scripts into CSS. Don’t bother with them now; they’re totally deprecated.

69. While the CSS cursor property can be useful in certain circumstances, don’t manipulate it in such a way as to make finding the cursor on the screen more difficult.

70. Horizontal scrolling might seem like a unique way to position and style content, but most people aren’t used to it. Decide carefully when such conventions should be used.

71. Until Internet Explorer 9 is final, CSS3 will have some critical compatibility issues. Don’t rely too heavily on it for stable layouts. Use progressive enhancement concepts.

72. CSS makes it possible to provide information on demand. If you can give people information in small chunks, they’ll be more likely to read it.

73. When showcasing a menu in CSS, be consistent in implementation. People want to know about the relationship between objects, and it’s important to avoid dissonance.

74. CSS isn’t a solution to all of your layout woes–it’s a tool to aid your visual journey. Whatever you produce should be usable and logically designed for users (not search engines).

75. Once your layout is marked up with CSS, get feedback on how usable it really is; ask friends, family, co-workers, visitors or strangers for their opinions.

76. Squeezing content too close together can decrease overall readability. Use the line-height property to space lines of text appropriately.

77. Be cautious about letter-spacing: too much space and words will become illegible, too little and the letters will overlap.

78. Unless you have good reason, don’t uppercase (i.e. text-transform:uppercase; ) long passages of text (e.g. HEY GUYS AND GALS WHAT’S UP?). People hate reading what comes off as shouting.

79. Accessible websites have good contrasting colors. Tools exist to measure foreground colors against background colors and give you a contrast ratio. Check out this list of tools for checking your design’s colors. Be sure your text is legible.

80. Remember that default styles might differ greatly from browser to browser. If you want stylistic flourish, reinforce the behavior in the stylesheet.

81. In the old days, the number of colors that a screen could display was rather limited. Some people still use old monitors, but the need for web-safe colors has drastically reduced.

82. Building a font stack is essential when making a design degrade gracefully. Make sure that fallback typefaces exist in case the one you request isn’t available.

83. With Vista, Windows 7 and MS Office 07–10 (and their free viewers), a number of cool new web-safe fonts have become available, such as Candara, Calibri and Constantina. Read about Windows fonts.

84. Plenty of smartphone apps can boost your ability to build a stylesheet, but Typefaces for the iPhone and other iOS4 devices is particularly useful because it shows you every font installed.

85. Web-safe fonts are no guarantee; people could quite possibly uninstall a font even as ubiquitous as Arial (or Comic Sans!). Then their browsers wouldn’t be able to render it.

86. Avoid underlining content with the text-decoration property unless it’s a real link. People associate underlined text with hyperlinks, and an underlined word could give the impression that a link is broken.

87. Avoid the temptation to use symbolic typefaces like Wingdings or Webdings in the layout. It might save KBs on imagery, but it’ll serve nonsensical letters to screen-reader users.

88. Remember that @font-face has different file format requirements depending on which browser the user is on, such as EOT, WOFF, TTF and OTF (as you would find on a PC). Serve the appropriate format to each browser.

89. The outline property is seriously underused as an aid to web accessibility. Rather than leaving it set to the default value, use border styles to enhance an active event’s visibility.

90. Smartphones do not have the same level of core support for web typography that desktop browsers do, which means fewer web-safe fonts and no conventional @font-face embedding.

91. Cross-browser opacity that degrades gracefully can be applied using the -ms-, -moz-, -khtml- vendor prefixes and the filter: alpha(opacity=75); property for Internet Explorer.

92. You can make background-image bullets by using list-style-type:none;, adding a padding-left indent and positioning the background-image to the left (with the required pixel offset).

93. Helping users identify an input box is easy; just add a background image of the name (like "Search" or "Password") and set it so that the image disappears when the box is clicked on by using the :focus pseudo-class and then setting the background property to none.

94. Large and visible click regions enhance the usefulness and usability of anchor links, which in turn guide people among pages. Be attentive when you style these.

95. Remember that background images do not replace textual content. If a negative indent is applied, for example, and images are disabled, then the title will be invisible.

96. Navigation items need to be labeled appropriately. If you use a call-to-action button or an image-based toolbar, make sure a textual description is available for screen readers.

97. If the idea of applying opacity with a bunch of proprietary elements doesn’t appeal to you, try RGBA transparency (in CSS3) instead of background-color: rgba(0,0,0,0.5);.

98. If your visitors use IE6, avoid using px as the unit of measurement for text. IE6 users have no zoom functionality; they rely on text resizing, which doesn’t work with px. Use a relative unit instead, such as em.

99. Providing alternative stylesheets for supported browsers such as Firefox and Opera can enhance readability, as in the case of high-contrast alternatives.

100. If you find choosing colors difficult, web-based tools like Adobe Kuler, desktop tools like ColorSchemer Studio and mobile apps like Palettes Pro might help.

Source: http://sixrevisions.com/

Follow

Get every new post delivered to your Inbox.