Skip directly to content

Know more about WMGD2C

Blog

  • Lisa jackson's picture
    Know more about WMGD2C
    Posted by      
    July 06, 2011

    WMGD2C

    Warner Music Group Direct 2 Consumer  attempts to increase the marketing effectiveness of the websites it develops. Improving our website to get more sales or less budget is the first step to achieving significant results. Web Analytics helps us understand our customers based upon:

              What keywords do they use

              What content do they see

    One can use this to better focus the advertising and to identify market segments that may not be effectively reached by the general method. Web Analytics can help in measuring the all aspect of a campaign and find out where the big results can be made. Web Analytics is the measurement, collection, analysis and reporting of internet data for the purpose of understanding and optimizing web usage.

    There are two categories of web analytics; off-site and on-site web analytics.

    Off-site web analytics refers to web measurement and analysis regardless of whether you own or maintain a website. It includes the measurement of a website's potential audience (opportunity), share of voice (visibility), and buzz (comments) that is happening on the Internet as a whole.

    On-site web analytics measure a visitor's journey once on your website. This includes its drivers and conversions; for example, which landing pages encourage people to make a purchase. On-site web analytics measures the performance of your website in a commercial context.

    Google Analytics, Yahoo Analytics, and Omniture(safe ,but not free) are few of the Web Analytics tools that can be made use of.

    D2C sites currently uses Freewheel Ads.

    Now let us talk about SEO ! Search Engine Optimization (SEO) uses some algorithm, which assigns each Web page a relevancy score, and rank them accordingly in search engine results page.

    A Web page's Page rank depends on a few factors:

              The frequency and location of keywords within the Web page.

              How long the Web page has existed.

              The number of other Web pages that link to the page in question( Google looks at how many web pages link to a particular site to determine its relevance).

    There are two techniques for SEO:

    White hat technique

              Straight forward implementation (using keywords in appropriate place).

              Risk-free.

    Black hat technique

              Uses keyword stuffing

              doesn't usually last very long

              Risky, search engine might flag our site as spam

     

     

    For a better SEO,the following points must be taken care of:

              Make sure that your <title> elements, <meta> tag and ALT attributes are descriptive and accurate

              Absolute Positioning

              Styling h1, h2, h* headlines

              sIfR/Image replacement for headlines

              Using Lists (ul/ol)

              Get your site feed listed across the web

     

    Now there are some common Layout issues with CSS, that one should be prepared to tackle with. Every element in web design is a rectangular box. Positioning  elements using CSS can be done using four different methods:

              Static

            Default

              Fixed

            Will not move even if the window is scrolled

            Removed from normal flow

            eg: Thick boxes

              Relative

            Positioned relative to its normal position.

            when you position something relatively, you are modifying its position from where it would have been if you hadn’t changed anything

              Absolute

            Removed from the normal flow

            Positioned relative to its first parent element

            eg: All Flyouts

    We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. After the floating elements, we can "clear" the floats to push down the rest of the content.

    Why use div/span over tables ? The following give the answer:

              Quicker download time

               Improved accessibility 

               Easier site management

               Comparatively less browser specific bugs

     

    The display property can be used in different ways:

              Block

             Takes up the full width available, with a new line before and after (display:block;)

               Inline

            Takes up only as much width as it needs, and does not force new lines (display:inline;)

              Not displayed

            Some tags, like <meta /> and <style> are not visible (display:none;)

    The overflow property is used  in following ways:

    ·         Visible: Overflow is not clipped. It renders outside the element's box. This is default

    ·         Hidden: Overflow is clipped, and the rest of the content will be invisible

    ·         Scroll : Overflow is clipped, but a scroll-bar is added to see the rest of the content

    ·         Auto : If overflow is clipped, a scroll-bar should be added to see the rest of the content

    ·         Inherit: Specifies that the value of the overflow property should be inherited from the parent element

     

    When to use Ids and Classes ?

    Use a class tag if 

    1.  
      • The style is used in various places throughout the document.
      • The style is very general.

     

    Use an id tag if

    ·         The style is only used once ever in the document.

    ·         The style is specific to a certain area of the document.

    Few more points-

    ·         Remember that an id can only appear once in any HTML document. Once you've used the id, it should not be used again on that page.

    ·         ‘Float’ is assigned to element, to specify its position.

    ·         ‘Text-Align’ is used to specify the horizontal alignment of text in an element

    ·         Do not use negative z-index .

    ·         Z-index issue: z-index only works on positioned elements (absolute, relative,

    fixed).

    ·         W-mode Issue:  Any flash object in web page, should have 

                       <param name="wmode" value="transparent" />

     

    CSS Image Sprites

    An image sprite is a collection of images put into a single image.A web page with many images can take a long time to load and generates multiple server requests, Using image sprites will reduce the number of server requests and save bandwidth In our project, sprite is implemented in scenarios like rating star, Global Nav bar, Footer, etc.

     

    sIFR

    Scalable Inman Flash Replacement (sIFR) is a technology enabling

    the replacement of text elements on html web pages with Flash

    equivalents.

    How to Implement sIFR :

              Download sIFR library

              Create YourTypeface.swf

              link sIFR files appropriately in html pages

              Start Styling your text elements in sifr-config.js

     

    Pros:

              Easier to implement

              Its usage encourages the improvement of SEO

    Cons:

              Its not free to use

              Affects page load time when used widely

    CSS hacks

    CSS hacks sends one CSS rule to the browser(s) you're trying to trick, and a second CSS rule that overrides the first command to the other browsers.

     

    IE specific hack

     

    html>body #header {margin-bottom:10px}

     

    html>body will take only in ie7 and firefox

     

    <!--[if IE 7]>
    <style type="text/css">
    </style>
    <![endif]--> 

     

    * (star) can be used as the inline hack for both ie6 and ie7.

    For eg:

    .logo{*margin-left:10px;}

     

    Best practices

              Meaningful names for classes and ids

              camelCasing for class names and ids

    eg: .title, #leftWrapper

              Common fixes in global.css rather than module.css

               Avoid defining both padding-left, padding-right, and width on the same element. Similarly height, and padding-top and padding-bottom. This leads to box model problem

              Do not override basic styles like font-family, unless otherwise the font is different than the base one

     

     

     

     

     

     

     

     

    Filed under:
    0
Lisa jackson's picture
on July 06, 2011

WMGD2C

Warner Music Group Direct 2 Consumer  attempts to increase the marketing effectiveness of the websites it develops. Improving our website to get more sales or less budget is the first step to achieving significant results. Web Analytics helps us understand our customers based upon:

          What keywords do they use

          What content do they see

One can use this to better focus the advertising and to identify market segments that may not be effectively reached by the general method. Web Analytics can help in measuring the all aspect of a campaign and find out where the big results can be made. Web Analytics is the measurement, collection, analysis and reporting of internet data for the purpose of understanding and optimizing web usage.

There are two categories of web analytics; off-site and on-site web analytics.

Off-site web analytics refers to web measurement and analysis regardless of whether you own or maintain a website. It includes the measurement of a website's potential audience (opportunity), share of voice (visibility), and buzz (comments) that is happening on the Internet as a whole.

On-site web analytics measure a visitor's journey once on your website. This includes its drivers and conversions; for example, which landing pages encourage people to make a purchase. On-site web analytics measures the performance of your website in a commercial context.

Google Analytics, Yahoo Analytics, and Omniture(safe ,but not free) are few of the Web Analytics tools that can be made use of.

D2C sites currently uses Freewheel Ads.

Now let us talk about SEO ! Search Engine Optimization (SEO) uses some algorithm, which assigns each Web page a relevancy score, and rank them accordingly in search engine results page.

A Web page's Page rank depends on a few factors:

          The frequency and location of keywords within the Web page.

          How long the Web page has existed.

          The number of other Web pages that link to the page in question( Google looks at how many web pages link to a particular site to determine its relevance).

There are two techniques for SEO:

White hat technique

          Straight forward implementation (using keywords in appropriate place).

          Risk-free.

Black hat technique

          Uses keyword stuffing

          doesn't usually last very long

          Risky, search engine might flag our site as spam

 

 

For a better SEO,the following points must be taken care of:

          Make sure that your <title> elements, <meta> tag and ALT attributes are descriptive and accurate

          Absolute Positioning

          Styling h1, h2, h* headlines

          sIfR/Image replacement for headlines

          Using Lists (ul/ol)

          Get your site feed listed across the web

 

Now there are some common Layout issues with CSS, that one should be prepared to tackle with. Every element in web design is a rectangular box. Positioning  elements using CSS can be done using four different methods:

          Static

        Default

          Fixed

        Will not move even if the window is scrolled

        Removed from normal flow

        eg: Thick boxes

          Relative

        Positioned relative to its normal position.

        when you position something relatively, you are modifying its position from where it would have been if you hadn’t changed anything

          Absolute

        Removed from the normal flow

        Positioned relative to its first parent element

        eg: All Flyouts

We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. After the floating elements, we can "clear" the floats to push down the rest of the content.

Why use div/span over tables ? The following give the answer:

          Quicker download time

           Improved accessibility 

           Easier site management

           Comparatively less browser specific bugs

 

The display property can be used in different ways:

          Block

         Takes up the full width available, with a new line before and after (display:block;)

           Inline

        Takes up only as much width as it needs, and does not force new lines (display:inline;)

          Not displayed

        Some tags, like <meta /> and <style> are not visible (display:none;)

The overflow property is used  in following ways:

·         Visible: Overflow is not clipped. It renders outside the element's box. This is default

·         Hidden: Overflow is clipped, and the rest of the content will be invisible

·         Scroll : Overflow is clipped, but a scroll-bar is added to see the rest of the content

·         Auto : If overflow is clipped, a scroll-bar should be added to see the rest of the content

·         Inherit: Specifies that the value of the overflow property should be inherited from the parent element

 

When to use Ids and Classes ?

Use a class tag if 

  1.  
    • The style is used in various places throughout the document.
    • The style is very general.

 

Use an id tag if

·         The style is only used once ever in the document.

·         The style is specific to a certain area of the document.

Few more points-

·         Remember that an id can only appear once in any HTML document. Once you've used the id, it should not be used again on that page.

·         ‘Float’ is assigned to element, to specify its position.

·         ‘Text-Align’ is used to specify the horizontal alignment of text in an element

·         Do not use negative z-index .

·         Z-index issue: z-index only works on positioned elements (absolute, relative,

fixed).

·         W-mode Issue:  Any flash object in web page, should have 

                   <param name="wmode" value="transparent" />

 

CSS Image Sprites

An image sprite is a collection of images put into a single image.A web page with many images can take a long time to load and generates multiple server requests, Using image sprites will reduce the number of server requests and save bandwidth In our project, sprite is implemented in scenarios like rating star, Global Nav bar, Footer, etc.

 

sIFR

Scalable Inman Flash Replacement (sIFR) is a technology enabling

the replacement of text elements on html web pages with Flash

equivalents.

How to Implement sIFR :

          Download sIFR library

          Create YourTypeface.swf

          link sIFR files appropriately in html pages

          Start Styling your text elements in sifr-config.js

 

Pros:

          Easier to implement

          Its usage encourages the improvement of SEO

Cons:

          Its not free to use

          Affects page load time when used widely

CSS hacks

CSS hacks sends one CSS rule to the browser(s) you're trying to trick, and a second CSS rule that overrides the first command to the other browsers.

 

IE specific hack

 

html>body #header {margin-bottom:10px}

 

html>body will take only in ie7 and firefox

 

<!--[if IE 7]>
<style type="text/css">
</style>
<![endif]--> 

 

* (star) can be used as the inline hack for both ie6 and ie7.

For eg:

.logo{*margin-left:10px;}

 

Best practices

          Meaningful names for classes and ids

          camelCasing for class names and ids

eg: .title, #leftWrapper

          Common fixes in global.css rather than module.css

           Avoid defining both padding-left, padding-right, and width on the same element. Similarly height, and padding-top and padding-bottom. This leads to box model problem

          Do not override basic styles like font-family, unless otherwise the font is different than the base one