mastercard - online ad builds and website development
DESCRIPTION
A presentation outlining the online ad build process and the MasterCard website development process.Presented by Micah Howard of MercerBell 26-08-09TRANSCRIPT
![Page 1: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/1.jpg)
The Brief
“Tell us a bit about how a banner is built and how you put a website together”
![Page 2: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/2.jpg)
MasterCard Digital Training
“Online Ads - 101”
![Page 3: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/3.jpg)
Agenda
• Sit on my space
• How long’s a piece of string?
• Playing Big Brother
![Page 4: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/4.jpg)
Sit on my space
The more common formats for online ads
![Page 5: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/5.jpg)
Standard Banner ads
![Page 6: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/6.jpg)
What are they?
• “Display ads”, “banner ads” or “creative placements” found on the majority of web pages linking users to other websites.
• Usually made in Flash (SWF files)
• Usually limited to between 30Kb and 40Kb file size
• There are many sizes but some standards:
728 x 90 pixels (leaderboard)
468 x 60 pixels (banner)
234 x 60 pixels (half banner)
300 x 250 pixels (tile / island / medium rectangle)
120 x 600 pixels (skyscraper)
160 x 600 pixels (wide skyscraper / vertical tower)
![Page 7: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/7.jpg)
![Page 8: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/8.jpg)
![Page 9: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/9.jpg)
What can they do?
• Banners can be animated and animations can loop
• Banners can be interactive (roll-over or click interactions)
• Banners can read external XML files (e.g. News headlines, product prices etc.)
• Banners can drive response but are generally more passive
• The average click through rate for the financial sector is 0.04%*
• Standard banners are therefore often sold on a cost per click (CPC) or cost per acquisition (CPA) basis
*Source – EyeBlaster 2008 report
![Page 10: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/10.jpg)
So why buy standard banners?
• Relatively inexpensive, leaving more budget for media buys
• Can be sold based on performance, helping to manage media costs
• Relatively quick to design and build (especially if a concept already exists)
• Wide range of formats available across websites
• Can be made to read external information sources so can be easily updated
![Page 11: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/11.jpg)
Rich media ads
![Page 12: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/12.jpg)
How are they different to standard ads?
• Larger file size allowance
• Wider range of interactions available
• Support more than just flash formats
• A lot more “engaging” from a user perspective, helping to drive response
![Page 13: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/13.jpg)
What do they look like?
• Some of the more popular formats include:
Expandable ads
Overlay / Over The Page (OTP) / Floating ads
Synchronized ad units
Video or Streaming video ads
Data capture ads
Homepage take over or Site take over
![Page 14: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/14.jpg)
Expandable ad
http://stage.mercerbell.com.au/ourwork/content/2008/MCA071/index.html
Other Examples http://creativezone.eyeblaster.com/
1. 2.
3. 4.
![Page 15: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/15.jpg)
Over The Page ad (OTP or Overlay)
5.
2.
3. 4. 6.
1.
Medium rectangle ad appears on pageOn roll-over things start to happen
across a fixed area of the page
More stuff happens on the page, or within the medium rectangle ad space, resulting in a call to action
![Page 16: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/16.jpg)
Synchronized ads (Sync ads or “Talking” ads)
1.
2.
3.
4.
5.
http://stage.mercerbell.com.au/ourwor
k/content/2008/MCA094/index.html
Other great example:
http://www.bannerblog.com.au/2006/1
2/mini_tug.php
![Page 17: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/17.jpg)
Video ads
![Page 18: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/18.jpg)
![Page 19: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/19.jpg)
Video Egg
![Page 20: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/20.jpg)
Increasingly popular formats
![Page 21: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/21.jpg)
Rich media examples – Data capture
This ad was run as an OTP. The user entered their friends’ details and that person was “called” with a message.
Data captured was then added to a database for further promotions
![Page 22: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/22.jpg)
Widgets
Video, additional navigation and
social bookmarking all included in
one ad
![Page 23: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/23.jpg)
Homepage skin
![Page 24: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/24.jpg)
Homepage takeover
http://creativezone.eyeblaster.com/?ItemName=Jumper%20Overlay
![Page 25: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/25.jpg)
What else can they do?
Online chat
HD video
Interactive games
Data-driven functions (e.g. postcode locator)
File upload/download
![Page 26: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/26.jpg)
So why buy Rich media ads?• More engaging, so excellent for driving direct response – CTR of 0.09% for financial sector (versus 0.02% for standard ads)*
Expandable ad 0.18%
Overlay/OTP/Floating ad 2.06%
Video ad 0.20%
Standard banner 0.06%
• Wider range of file formats and technologies can be supported (e.g. video, gaming and data capture)
• Rich media ads are starting to replace the traditional microsite
*Source – EyeBlaster 2008 report
![Page 27: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/27.jpg)
So to summarise…
• There are several formats of standard and rich-media ad type available with more being developed every day
• Rich media ads will cost more to develop however, campaign managers (such as Eyeblaster and DoubleClick) are continually developing tools to help reduce development costs
• Rich media ads offer considerably more interactivity opportunities that standard ads and will return higher response rates
• Due to their comparatively low response rates, standard ads can be purchased on a cost per response basis
![Page 28: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/28.jpg)
How long’s a piece of string?
How the media schedule & ad specs affect the design and build process
![Page 29: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/29.jpg)
The build process
![Page 30: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/30.jpg)
Concept creation
The media schedule (or at least an idea of the proposed schedule) will directly impact on the concept creation process
• Selecting a rich media campaign will offer the potential to develop a wider range of concepts
• Publisher file-size allowance will determine concept direction and asset selection
• Available ad formats (within a schedule) can also drive concept development…
The affect of the media schedule on….
![Page 31: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/31.jpg)
http://www.bannerblog.com.au/2007/0
8/nt_tourism_map.php
![Page 32: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/32.jpg)
So….
Where possible, ensure the creative team is involved in the media planning process – a strong creative concept can often help shape the media schedule.
![Page 33: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/33.jpg)
Costing and timeline development• Multiple formats and file sizes take longer to produce
• Individual publisher requirements (odd sizes for example) can also heavily impact on timeline, effort and cost
• Rich media ads can take longer to develop than standard ads
• Skill-set requirements can be different between rich media and standard ad build jobs
• Additional producer time may be required to upload rich-media creative to ad servers
• Additional click-tagging requirements for rich media ads can take longer to implement
• Media agency’s lead time can be up to 10 days prior to live date
The affect of the media schedule on….
![Page 34: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/34.jpg)
So….
When allocating budgets, be aware that rich media campaigns will cost more and take longer to produce.
They will drive a better response though!
![Page 35: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/35.jpg)
Building the ads• Publisher permitted maximum file size will determine how the creative eventually looks
Use of vector images versus photo images
Ability to re-use assets within a banner
Complexity of patterns and assets
Nature of animations or interactions
For example…
The affect of the media schedule on….
![Page 36: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/36.jpg)
Supplied artwork
Finished ad with a 25Kb file-
size allowance
![Page 37: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/37.jpg)
Building the ads• Different publishers will have different maximum flash version requirements
• Different publishers will have their own requirements regards looping, interactions and user-initiated events
• Publishers may also have rules for back-up GIFs* (e.g. file size limit, static only, no animation)
* What’s a “back-up GIF”?...
The affect of the media schedule on….
![Page 38: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/38.jpg)
99% of PCs in “Mature Markets” have a flash player installed – Millward Brown global survey 2009
![Page 39: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/39.jpg)
So….
Keep in mind that even the simplest concept will be affected by publisher specifications. High-res and complex images can be used but will need to be reduced in quality or modified before being featured online.
![Page 40: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/40.jpg)
Quick lesson on ad-serving……
![Page 41: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/41.jpg)
Media agency
Ad server
Creative uploaded and trafficking schedule
specified
MercerBell
Creative handed-
off
Publisher ad-
servers
![Page 42: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/42.jpg)
www.mastercard.com.au/debit
Ad server
Ad Server Records:
• Creative served
• No. of impressions served
• Clicks generated
• Other interactions
![Page 43: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/43.jpg)
Trafficking the ads
• Rich media ads often require the creative agency to upload creative
• Delivering finished creative to media agency often problematic as there will be several files destined for several publishers websites
• Publishers will often change specs requirements from those provided requiring ads to be tweaked (file size, dimensions etc.)
The affect of the media schedule on….
![Page 44: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/44.jpg)
So….
Even after the ads are built, there is a lot of work involved to get them up onto publisher websites, involving several parties, and despite everybody’s best efforts, ultimately, we are all at the mercy of the publishers!
![Page 45: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/45.jpg)
To summarise
• Creative concepts are directly affected by the media schedule and publisher specs
• Costs and timelines will differ between ad-build jobs based on the complexity of the media schedule and types of media selected
• Publishers are prone to changing their specs so even handed-off creative can sometimes need re-working
![Page 46: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/46.jpg)
Playing Big Brother
Tracking, Reporting and Optimising your campaign
![Page 47: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/47.jpg)
What are Ad Tags?
• Ad serving will be charged to the media agency on a CPM (cost per thousand), CPC (cost per click) or CPI (cost per interaction) rate by the ad server
• Ad tags are inserted into flash ads (prior to hand-off) allowing click-through to be specified and allow campaign success to be measured by tracking and reporting on the number of impressions, clicks and interactions returned by the ad
• Corresponding “action” or “post-click” tags are often inserted into destination pages to track activity and conversions delivered by ads
![Page 48: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/48.jpg)
www.mastercard.com.au/debit
Ad server
Ad Server Records:
• Creative served
• No. of impressions served
• Clicks generated
• Other interactions
• “Conversions”, allowing CPA measurement
Interaction
with web
page
recorded
![Page 49: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/49.jpg)
Measurement and reporting• Reporting configured and provided by the media agency
• The Ad server will typically provide stats on:
Campaigns trafficked
Impressions served
Click through rates
Conversions
Flight comparisons (“Flight” refers to ads served in a position on publisher’s page)
Creative comparisons
![Page 50: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/50.jpg)
Campaign optimisation
• The media agency can often specify an increase/decrease of impressions per ad type based on activity reports
• The media agency can set the weighting of creative per flight based on performance (e.g. Click through rate), or can request this of a publisher
• The media agency can (sometimes) set weighting of flights across publisher pages/sites for RON (Run Of Network) ads (negotiated by publisher)
• Additional creative can often be added to a campaign once scheduled (edited copy, new creative or updated links)
![Page 51: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/51.jpg)
So…• Request frequent updates on your campaign from your media agency
• Optimise your campaign based on successful creative, flights and sites
• Update creative whenever necessary to ensure relevance and maximise response
• Always try to include conversion tracking in your campaign….where possible
![Page 52: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/52.jpg)
Summary• Several types of online ad available – budget, timeline and campaign objectives should all be considered when selecting creative media type
• Budgets and timelines will be directly impacted by the media schedule and publisher specifications – highlighting their importance
• Ad build process consistent for most types of ad. Alterations at any point will often have a knock-on effect
• Campaign creative reporting is provided by your media agency for ads. Campaign effectiveness is relatively easy to track and should be requested during planning
• Monitoring effectiveness throughout campaign should be agreed to and optimization reviews scheduled
Resources
http://creativezone.eyeblaster.com/
http://www.bannerblog.com.au/
![Page 53: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/53.jpg)
MasterCard Digital Training
“Building a MasterCard website”
![Page 54: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/54.jpg)
Agenda
• Scoping the idea
• Designing a website
• Building
• Implementing
• Launching and updating your site
![Page 55: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/55.jpg)
So whaddya want?So whaddya want?Scoping a projectScoping a project
![Page 56: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/56.jpg)
What is “scoping”?
Scoping is the process by which we examine what we are trying to achieve with a website and decide how we are going to deliver it
• Through scoping,
you will determine how content will be included on your web pages
you will define the user-journey through your site
you will define how a user will interact with your site
you will decide upon and define the technical architecture for your site
you will define how much your website build will cost and how long it will take
…..to a degree of accuracy!
![Page 57: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/57.jpg)
What’s involved?A number of tasks can be performed during the scoping phase of a project, producing a number of elements, including
• Stakeholder feedback/Executive summary
• Statement of work
• Functional specification (often also called a Scoping Document)
• Technical specification
• User, Functional or Data work-flows
• Tracking requirements
• Site map
• Page wireframes
• Timeline
• Cost estimate
For MasterCard projects, the functional spec will form part of the DIF to be supplied to the GTO
![Page 58: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/58.jpg)
Why is it important?
Should go without saying, but:
• Allows both consumer and business goals to be identified and set
• Allows all appointed stakeholders to input into project and agree outcomes
• Allows content inclusions, priorities and layout to be specified and reviewed before any design or build has commenced
• Allows timeframes and cost estimates to be identified
![Page 59: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/59.jpg)
How long does it take?
Typically, the scoping phase of a web-build project will count for 40% of the total project timeline
For MasterCard projects, this would include (several) conversations with the GTO to discuss functional requirements, timelines, resource requirements and CMS access
![Page 60: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/60.jpg)
Making pretty picturesMaking pretty picturesConcepting and creative designConcepting and creative design
![Page 61: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/61.jpg)
The Creative brief
• Written by the Account Service team, the creative brief outlines the campaign requirements, objectives and brand considerations
• It dictates the desired tone and style of both the copy and creative concept
• It indicates where inspiration should be drawn from (if specific sites have been identified)
• It identifies the target audience and communications objectives
• It allows all parties (internal departments and the client) to input into the desired outcomes from a creative perspective
The result of which will be…..
![Page 62: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/62.jpg)
![Page 63: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/63.jpg)
And…
![Page 64: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/64.jpg)
The studio brief (Task brief)
• Written by the Digital Producer, the task brief outlines to the digital studio the “nuts and bolts” of the design build
• Identifies the selected concept with any amends
• Provides the location of any supplied assets or outlines sourcing requirements
• Details technical requirements relating to design including minimum supported screen resolution, style guide to follow and CMS or other code restrictions affecting design
• Will incorporate the functional and technical specification documents
The result is “pixel-perfect” PSDs which can be used to create page code…..
![Page 65: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/65.jpg)
![Page 66: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/66.jpg)
How long does it take?
Typically, the concepting and design phase of a web-build project will account for 20% of the project timeline
![Page 67: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/67.jpg)
Slice ‘n’ diceSlice ‘n’ diceFront-end codingFront-end coding
![Page 68: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/68.jpg)
Front-end coding
• The front-end developer (often called a Web Designer) will take the PSD files and use Photoshop to “slice” them into assets
Like this…
![Page 69: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/69.jpg)
![Page 70: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/70.jpg)
Front-end coding
• Images then need to be made “web-ready” and resized to between 72 and 96DPI
• Colours matched and made “web-safe”
• Flash elements will also be developed at this time
• They will then produce a mixture of HTML and CSS code which will replicate the design in a web-browser
• They will produce the code in line with SEO best practice standards
• They will adhere to W3C standards for accessibility
• They will liaise with the back-end developers (GTO) to ensure the code they provide is usable in the CMS
• They will provide place-holders for additional functions to be included later (e.g. XML files, Video player, Photo gallery etc.)
• They will set up their code in a “development” environment where all parties can review and comments on design and layout
The result will be the “shell” of the website with a completed design, but without the functionality.
![Page 71: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/71.jpg)
HTML code
CSS+ Assets+
=
![Page 72: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/72.jpg)
How long does it take?
Typically, the front-end development phase of a web-build project will account for 20% of the project timeline
![Page 73: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/73.jpg)
<Code> Monkey Business<Code> Monkey BusinessBack-end coding and implementationBack-end coding and implementation
![Page 74: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/74.jpg)
Back-end coding and implementation
• At this stage, front-end code is handed off to the GTO for implementation onto the CMS
• Code is also provided to dload so form pages can be created
• Javascripts (allowing interaction and functionality) are also added at this point
• The front-end developer will work closely with the GTO, dload and other back-end developers to ensure code is implemented correctly and all assets are provided
• The Producer will begin uploading materials (images, videos, flash files etc.) to the CMS
• The Producer will work with dload to set-up the required databases and data-capture requirements
• Tracking tags will usually have been created by this point and provided directly to the GTO for inclusion within page code
• The pages will be uploaded to a staging environment for review and testing
![Page 75: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/75.jpg)
How long does it take?
Typically, the technical implementation phase of a web-build project will account for 10% of the project timeline
It is also typically one of the largest cost-points
![Page 76: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/76.jpg)
Go for launchGo for launchTesting, fixing and launching a websiteTesting, fixing and launching a website
![Page 77: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/77.jpg)
Testing and bug-fixing
• Well-run projects will contain several testing phases throughout the development phases
• A master bug-list should always be prepared for the final testing phase
• Typically done in a staging environment
• Amends made in a local development environment then pushed to staging for review
• Once all amends are made and site is approved, the site can be launched
![Page 78: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/78.jpg)
GTO
Development environment
CMS Templates created and page code implemented
MercerBell
Page coded
handed off
Amends briefed and staging site updated
Amends pushed to live site
![Page 79: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/79.jpg)
Post-launch
• Live-site should be checked following same process as pre-launch testing
• Tracking code should be checked to ensure it is working
• Typical live-site updates will follow the same process as launch
• Larger updates may require coding by MercerBell and review on local staging environment
![Page 80: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/80.jpg)
How long does it take?
Typically, the launch phase of a web-build project will account for 10% of the project timeline
![Page 81: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/81.jpg)
Finished!.....almost
![Page 82: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/82.jpg)
In summary
There are 5 major phases of a web-build project for MasterCard
Scoping, specification and technical design can contribute to 40% of the overall timeline but is by far the most important phase
Agreeing page layout and content inclusions during scoping will save time later in the process
Front-end coding not only covers design, but also search, accessibility and browser compatibility
While back-end implementation can be a relatively short phase, it is often one of the more costly
Testing is vital at all stages of the project, even after a site has launched
![Page 83: MasterCard - Online ad builds and website development](https://reader036.vdocuments.us/reader036/viewer/2022081412/5455896aaf795989638b86a3/html5/thumbnails/83.jpg)
•
Thank you