CSS & HTML Coding Today Presented by: Ted Ulle  (tedster) Administrator – WebmasterWorld  Senior Search Analyst – Converse...
This is the #1 Cutting Edge Approach Top Secret It Will Give You a Major Advantage AND ALMOST NO ONE DOES IT !
Speed  development You Will… Send clear signals to the   search engines Reduce  maintenance time Have Tons More Time to Wo...
RTFM!
HT M L M stands for MARK-UP
The  DOCUMENT is assumed to be The  FOUNDATION NOT! the visible display
Semantic Meaning vs. Visual Rendering <ul><li>HTML tags = semantic information </li></ul><ul><li>CSS rules = display infor...
The Goal: Lean & Mean HTML <div id=“content”> <h1> Modulation Rules </h1> <p> System-wide iteration engenders economies of...
Under-used CSS Common elements deserve their own default style rules! Not this:  <h1 class=“topheader”><span style=“font-w...
Multiple class declarations with a space separator <p class=“c no sm lg”> Under-used CSS What’s the big deal?
CSS Toolkit .c {text-align:center;} .r {text-align:right;} .s {font-size:10px;} .in {margin:0 0 0 30px;} <ul><li>Easier co...
Under-used CSS line-height <ul><li>Space matters a LOT </li></ul><ul><li>“ Leading” in print typography </li></ul><ul><li>...
Abused CSS Hidden Anchors Don’t let aesthetics hurt communication Removing underscores? Then use redundant link cues: Colo...
<span> Should be extremely rare Often exposes weak CSS planning Should change only PART of a larger containing element A m...
H1, H2 etc Semantic meaning - not for presentation!  <h2>Buy Now and Save</h2> Use an “imitation” class for the H2 look Ab...
RTFM!
Upcoming SlideShare
Loading in …5
×

css_and_html_coding_today-ted_ulle.ppt

701 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
701
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

css_and_html_coding_today-ted_ulle.ppt

  1. 1. CSS & HTML Coding Today Presented by: Ted Ulle (tedster) Administrator – WebmasterWorld Senior Search Analyst – Converseon Senior Editor – Search Engine Marketing Journal
  2. 2. This is the #1 Cutting Edge Approach Top Secret It Will Give You a Major Advantage AND ALMOST NO ONE DOES IT !
  3. 3. Speed development You Will… Send clear signals to the search engines Reduce maintenance time Have Tons More Time to Work on CORE BUSINESS TASKS
  4. 4. RTFM!
  5. 5. HT M L M stands for MARK-UP
  6. 6. The DOCUMENT is assumed to be The FOUNDATION NOT! the visible display
  7. 7. Semantic Meaning vs. Visual Rendering <ul><li>HTML tags = semantic information </li></ul><ul><li>CSS rules = display information </li></ul>
  8. 8. The Goal: Lean & Mean HTML <div id=“content”> <h1> Modulation Rules </h1> <p> System-wide iteration engenders economies of scale, cross-media technology and life cycle replication. <img src=“url.jpg” class=“fl”></p> <p> Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and a focus on cross-training. </p> <ol> <li> Marketing teams input produce cross purposing </li> <li> Goals misalign due to knowledge paucity </li><ol> <p class=“c b”> Conceptualizing random endpoints in an access matrix provides reach extensions enterprise wide. Respective divisions historically insignificant, upscale trend lines in a management inventory analysis survivability format. </p> </div>
  9. 9. Under-used CSS Common elements deserve their own default style rules! Not this: <h1 class=“topheader”><span style=“font-weight:normal; text-align:center;”> text </span></h1> But this: <h1> text </h1> Put your rules for h1, p, li etc, in the external CSS file
  10. 10. Multiple class declarations with a space separator <p class=“c no sm lg”> Under-used CSS What’s the big deal?
  11. 11. CSS Toolkit .c {text-align:center;} .r {text-align:right;} .s {font-size:10px;} .in {margin:0 0 0 30px;} <ul><li>Easier coding on the fly </li></ul><ul><li>Lower need for new classes </li></ul><ul><li>Easy team coordination </li></ul><p class=&quot;r s&quot; > Laurie Lipsum </p>
  12. 12. Under-used CSS line-height <ul><li>Space matters a LOT </li></ul><ul><li>“ Leading” in print typography </li></ul><ul><li>Set by ratio (1.25) not px or pt </li></ul><ul><li>Improves readability and comprehension </li></ul>sup {line-height:0}
  13. 13. Abused CSS Hidden Anchors Don’t let aesthetics hurt communication Removing underscores? Then use redundant link cues: Color / Background-color Font variations Hover behaviour Links are the CORE of the web – Keep your visitors in touch
  14. 14. <span> Should be extremely rare Often exposes weak CSS planning Should change only PART of a larger containing element A major culprit in code bloat Abused CSS
  15. 15. H1, H2 etc Semantic meaning - not for presentation! <h2>Buy Now and Save</h2> Use an “imitation” class for the H2 look Abused CSS
  16. 16. RTFM!

×