css_and_html_coding_today-ted_ulle.ppt

css_and_html_coding_today-ted_ulle.ppt

• 1.
  CSS & HTMLCoding Today Presented by: Ted Ulle (tedster) Administrator – WebmasterWorld Senior Search Analyst – Converseon Senior Editor – Search Engine Marketing Journal
• 2.
  This is the#1 Cutting Edge Approach Top Secret It Will Give You a Major Advantage AND ALMOST NO ONE DOES IT !
• 3.
  Speed developmentYou Will… Send clear signals to the search engines Reduce maintenance time Have Tons More Time to Work on CORE BUSINESS TASKS
• 4.
  RTFM!
• 5.
  HT M LM stands for MARK-UP
• 6.
  The DOCUMENTis assumed to be The FOUNDATION NOT! the visible display
• 7.
  Semantic Meaning vs.Visual Rendering HTML tags = semantic information CSS rules = display information
• 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.
  Under-used CSS Commonelements 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.
  Multiple class declarationswith a space separator <p class=“c no sm lg”> Under-used CSS What’s the big deal?
• 11.
  CSS Toolkit .c{text-align:center;} .r {text-align:right;} .s {font-size:10px;} .in {margin:0 0 0 30px;} Easier coding on the fly Lower need for new classes Easy team coordination <p class=&quot;r s&quot; > Laurie Lipsum </p>
• 12.
  Under-used CSS line-heightSpace matters a LOT “ Leading” in print typography Set by ratio (1.25) not px or pt Improves readability and comprehension sup {line-height:0}
• 13.
  Abused CSS HiddenAnchors 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.
  <span> Should beextremely rare Often exposes weak CSS planning Should change only PART of a larger containing element A major culprit in code bloat Abused CSS
• 15.
  H1, H2 etcSemantic meaning - not for presentation! <h2>Buy Now and Save</h2> Use an “imitation” class for the H2 look Abused CSS
• 16.
  RTFM!