Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Template Improvements

- Prateek Gupta

Prateek Gupta

on 1 February 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Template Improvements

1. Enquiries per 100 visits
2. No. of clients
3. Visits per client Prateek Gupta Template Improvements Other Changes Number of color options are no longer a show-stopper UI/UX Improvements Architectural Improvements Color Suggestion Algorithm Color-option
specific CSS
Deletion Color-option-specific Sprite Deletion Process Improvements Page-load time What is color? What a designer does? What we did #ffffff Hexadecimal (Base=16) { { { RR GG BB 255, 255, 255 Decimal (Base=10) 0,100,0 HSL
(Hue/Saturation/Lightness) { Color (Hex RGB) Color (Dec RGB) Color (HSL) add constant values of Saturation & Lightness New Color (HSL) New Color (Dec RGB) New Color (Hex RGB) Final output:
Suggested color k.. got the color.. now what?

Hold on! Steps Stylesheet Architecture Arrays in tstyle.css Template=D0001 tstyle.css
(template level stylesheet) 1. index.css (homepage)
2. stylesheet.css (all other pages *Designer goes into each css to change Style ID 1 1. index.css (homepage)
2. stylesheet.css (all other pages Style ID 1 (Total 15 style IDs) 1. Brought all color-independent classes from index.css and stylesheet.css into tstyle.css

2. Removed all common classes

3. Reduced no. of colors to minimum

4. Replaced colors with variables %color= ('1085' => {'btn'=>"#fabc62" , 'text' => "#000000",}, '1086' =>{'btn'=>"#0777d8" , 'text'=>"#ffffff" ,}, '1089' =>{'btn'=>"#fabc62" , 'text'=>"#000000" ,}, '1090' =>{'btn'=>"#fe3500" , 'text'=>"#ffffff" ,}, '1091' =>{'btn'=>"#fcbd51" , 'text'=>"#000000" ,}, '1092' =>{'btn'=>"#fff335" , 'text'=>"#000000" ,}, '1093' =>{'btn'=>"#fff000" , 'text'=>"#000000" ,}, '1094' =>{'btn'=>"#F3E951" , 'text'=>"#000000" ,}, '1095' =>{'btn'=>"#fddd2c" , 'text'=>"#000000" ,}, '1096' =>{'btn'=>"#fddd2c" , 'text'=>"#000000" ,}, '1097' =>{'btn'=>"#f75d01" , 'text'=>"#ffffff" ,}, '1098' =>{'btn'=>"#ffc707" , 'text'=>"#000000" ,}, '1101' =>{'btn'=>"#f8423d" , 'text'=>"#ffffff" ,}, '1103' =>{'btn'=>"#b20093" , 'text'=>"#ffffff" ,}, '1104' =>{'btn'=>"#fb201b" , 'text'=>"#ffffff" ,}, '1106' =>{'btn'=>"#914a4d" , 'text'=>"#ffffff" ,}, '1107' =>{'btn'=>"#fddd2c" , 'text'=>"#000000" ,}, '1108' =>{'btn'=>"#624921" , 'text'=>"#000000" ,}, '1109' =>{'btn'=>"#711f0a" , 'text'=>"#ffffff" ,}, '1110' =>{'btn'=>"#be5f4d" , 'text'=>"#ffffff" ,}, '1111' =>{'btn'=>"#ed864e" , 'text'=>"#000000" ,}, '1112' =>{'btn'=>"#ab140b" , 'text'=>"#ffffff" ,}, '1113' =>{'btn'=>"#8223db" , 'text'=>"#ffffff" ,}, '1114' =>{'btn'=>"#7a2186" , 'text'=>"#ffffff" ,}, '1115' =>{'btn'=>"#a867bb" , 'text'=>"#ffffff" ,}, '1116' =>{'btn'=>"#087b9d" , 'text'=>"#ffffff" ,}, '1117' =>{'btn'=>"#a91f1f" , 'text'=>"#ffffff" ,}, '1118' =>{'btn'=>"#928f2f" , 'text'=>"#ffffff" ,},); + color generated via Color Suggestion Algo are fed into tstyle.css arrays directly Using css to develop all of these Migrating these into template-specific sprite Image sprite in a color option Auto-screenshot script Used imacros - A Mozilla extension Accomplished Task 1: Accomplished Task 2: Screenshots for each page of each color option for copyright task Showroom image updation (Also used a batch image editing software) Used imacros - A Mozilla extension Accomplished Task 1: Accomplished Task 2: Verified whether the code related to m.IM.com was present on all live clients of MDC In-process verification of URL present on offpage promotion sites done by vendor Auto verification script Open up all fed URLs in series (or their source codes) & check whether the given string is present Open up all fed URLs in series, take their screenshots and save with a given naming convention Used imacros - A Mozilla extension Accomplished Task 1: Applicability: Testing of every task on all templates via 47 temp clients Anyone in IM can install the add-on and start bulk publishing Open up MY.IM of all fed URLs in series, publish at clientside Auto publish script Schema.org Implementation D0015 1. Product, Category
2. Home
3. Profile
4. Video
5. Media
6. ETO
7. Jobs
8. News ItemPage
NewsArticle Page Optimized According to Full Page Optimization Other Markup Organization markup

SiteNavigationElement markup On every page, 'Contact Us' footer

On header of every page <body itemscope itemtype="http://schema.org/Organization"> Star Plugin
Experiment *Implemented on test Objective Tech Implementation Two .xml files generated in client's folder - Refreshed everytime on publish
- Contains category IDs - Contains categoryID, ratingcount, no. of votes)
- Not refreshed on every publish
- Fetches refreshed categories from cat_id.xml cat_id.xml rating.xml Future course Implement on 1 template (?) Click Tracking

Number of users who rate

Overall benefit analysis, Key metrics - Visits, conversion etc. 1) On page js removed, added in a js file.

2) Combined external js into few files.

3) Eliminated document.write() (previously, drop1.js was being called as document.write() in drop.js) D0041 Templates Phaseout Thankyou Page Redesign Enquiry Page Changes Improved UI Form Combination a) Four final enquiry forms - B2B, Service, Hotel, Travel are merged into one.
b) Conditions are applied on only those fields which are uncommon across forms.
c) On page Javascripts removed, JS of 4 forms combined into enq.js Number of pages required to be changed for any future change on final enquiry form drastically reduced. Benefit: Header Removal Time saved in new UI changes Any number of color options in one template Benefits Color-option
improvement PDF changes Automatic main banner creation by fetching product images

Automatic 'Corporate Brochure' banner creation via css New PDF Viewer Dynamic Banner
Creation Tracking code Implementation Introduction Vital Parameters Concerned Teams UI/UX (Templates' Performance)

Templates (Dev / Support)

Technology Support Laxman Singh

Shruti Gupta

Vinay Kaushal Popup Enquiry
Form changes 'Contact Us' button - Media Pages D0003 D0033 Problem Statement:

1100 color options needing change in every small implementation rollout In-process Task 3: Checking GA code implementation & <alt> tag presence throughout D0001 Discard of 25 templates based on performance Parameters considered: *Owner: MDC Team http://www.tradeseal.com/thankyou.html http://www.tradeseal.com/plastic-products.html http://www.tradeseal.com/corporate-brochure.html http://www.indiamart.com/amirdula/pdf1.html Stats:
Header Removal
Experiment Stats:
Popup Form
(D0033) Stats: Schema.org
D0015 Apart from this, Microdata markup pushed


to top 3 results from Google's 3rd page

on the query 'Sonic Engineering'.

Timeframe: 2 months Microdata markup on ratings shows up like: Applied in: Button implementation rollout (On local, D0001) Stats:
Page load time experiment
D0041 d0001d0005d0006d0007d0008d0009d0011d0016d0017d0018d0019d0021d0022d0029d0032d0033d0036d0037d0038d0040d0041d0044d0045d0046d0047 Retained Templates' List (25) Standardization Limit of 40-40-400 Showroom overhaul GA data correction in WebERP 'Ideas for Life' Event tracking implementation
Measurement and analysis via proper funnels Dummy URL Modification _gaq.push(['b._trackPageview', '/GATRACK/IN/d0006/complexhorizontalproductpage/TS/abcmachines-net/namkeen-machineries.html']); corporate-brochure.html
Full transcript