![Page 1: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/1.jpg)
1
Behind the Scenes at USNews.com
By Russell Heimlich
1Friday, October 17, 2008
![Page 2: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/2.jpg)
About Russell Heimlich• Graduated with a B.S. from the Art Institute of
Philadelphia in Sep. 2006
• Front-end Developer (HTML/CSS/JavaScript) at USNews.com
• Worked there since Nov. 2006 (nearly 2 years)
2
2Friday, October 17, 2008
![Page 3: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/3.jpg)
Stats about USNews • USNews is 75 Years old
• USNews.com is 13 years old
• 460,000 pages
• 66 unique stylesheets
• 4 frontend developers
• Located right across the street
3
3Friday, October 17, 2008
![Page 4: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/4.jpg)
A Walk Down Memory LaneThis is what USNews.com looked like when I first arrived...
4
4Friday, October 17, 2008
![Page 5: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/5.jpg)
• Mostly tableless
• No CMS
• Updated by hand using Dreamweaver
• LOTS of PHP Includes
• Regularly scheduled syncs kept staging server and live site up to date.
5
5Friday, October 17, 2008
![Page 6: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/6.jpg)
Change Was In The Air!• USNews worked with Siteworx on a
new design and site architecture.
• Worked with Vanguardistas for a new CMS built on Zope.
6
6Friday, October 17, 2008
![Page 7: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/7.jpg)
I got to start over from scratch!
7
7Friday, October 17, 2008
![Page 8: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/8.jpg)
8
What’s the source order?
8Friday, October 17, 2008
![Page 9: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/9.jpg)
• Global.css for things that appear sitewide‣ Header‣ Footer‣ Ad positions‣ Newsletter signup widget
• Specific styles for each page type‣ Homepage‣ Section‣ Articles‣ Blogs
9
How to organize the CSS?
9Friday, October 17, 2008
![Page 10: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/10.jpg)
Divide and Conquer• We thought dividing each CSS file
into sections would make it easier to maintain.
• Separated structure styles from visual styles.
• Indent CSS for maintainability.
10
10Friday, October 17, 2008
![Page 11: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/11.jpg)
Slow and Steady IntegrationMoved everything into the CMS one thing at a time...
• Home page
• Section fronts
• Blogs
• Articles
• Data Projects (Best Colleges, Best Hospitals etc.)
11
11Friday, October 17, 2008
![Page 12: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/12.jpg)
After a year of the new design & the CMS, things were getting messy under the hood.
Homepage
• 1 HTML document (52.9K)
• 4 Style Sheet Files (34.0K)
• 18 JavaScript Files (161.0K)
Article
• 1 HTML document (28.7K)
• 16 Style Sheet Files (87.2K)
• 30 JavaScript Files (260.7K)
Clean up!
12
12Friday, October 17, 2008
![Page 13: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/13.jpg)
Problems• Dividing CSS into Sections = Duplicate Code
• Indenting CSS = More Work!
• Too many requests/stylesheets
• CSS was not flexible enough for our needs
13
13Friday, October 17, 2008
![Page 14: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/14.jpg)
Problems• A lot of CSS code just overwrote other CSS code
14
14Friday, October 17, 2008
![Page 15: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/15.jpg)
Problems• Updating the same code in multiple places
• Blogs and Articles both use comments which required the same styles to be copied into two different stylesheets.
• To update, we must make a change to both stylesheets.
• Things were soon out of sync.
15
15Friday, October 17, 2008
![Page 16: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/16.jpg)
Problems• The #1 culprit to our HTML/CSS woes was sloppy coding
in our templates!
- Lack of common structure
- Unnecessary cruft
- Bloated CSS
16
16Friday, October 17, 2008
![Page 17: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/17.jpg)
The Fix• Cleanup our templates
• Implement our own framework
• Modularize CSS
• Create a CSS hierarchy
17
17Friday, October 17, 2008
![Page 18: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/18.jpg)
Template Cleanup• Reduce code where possible
• Reuse as much code as possible
• <br /> are stupid! (learn how to clear floats w/o markup)
18
18Friday, October 17, 2008
![Page 19: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/19.jpg)
What is a framework?“A framework is a basic conceptual structure used to solve or address complex issues.”
“A set of interrelated reusable classes which form the basis for an application.”
“A framework is a defined support structure in which another software project can be organized and developed.”
In other words, a broad set of guidelines to structure our pages.
19
19Friday, October 17, 2008
![Page 20: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/20.jpg)
Two Column Layout
20
20Friday, October 17, 2008
![Page 21: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/21.jpg)
Three Column Layout
21
21Friday, October 17, 2008
![Page 22: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/22.jpg)
Modular CSSThe final CSS file is made up of smaller modules.
22
22Friday, October 17, 2008
![Page 23: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/23.jpg)
Modular CSSEverything is defined in one XML file and built when we push it live. <file> <module/> <module/> ... </file>
23
23Friday, October 17, 2008
![Page 24: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/24.jpg)
ModulesEach module has a comment at the top with the name of the module and a description.
This makes it easier to debug.
24
24Friday, October 17, 2008
![Page 25: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/25.jpg)
Auto Optimize• Optimize with CSS Tidy
- #ffffff -> #fff
- margin:1px 1px 1px 1px -> margin:1px
- color:#ff0000 -> color:red
25
25Friday, October 17, 2008
![Page 26: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/26.jpg)
CSS Hierarchy• Site Wide (global.css)
• by Page Type (articles.css, blogs.css)
• by Section (news.css, business.css)
• for an individual page (custom CSS field in CMS)
26
26Friday, October 17, 2008
![Page 27: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/27.jpg)
A New Subdomain• Moved all CSS/JavaScript to a new sub-domain,
static.usnews.com
• Set-up a development static subdomain.
• Using bookmarklet, we can switch CSS of the live site to staging CSS.
27
27Friday, October 17, 2008
![Page 28: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/28.jpg)
After a year of the new design & the CMS, things were getting messy under the hood.
Homepage
• 1 HTML document (52.9K)
• 4 Style Sheet Files (34.0K)
• 18 JavaScript Files (161.0K)
Article
• 1 HTML document (28.7K)
• 16 Style Sheet Files (87.2K)
• 30 JavaScript Files (260.7K)
Clean up!
28
28Friday, October 17, 2008
![Page 29: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/29.jpg)
Final Results
Homepage
• 1 HTML document (22.3K)
• 2 Style Sheet Files (23.2K)
• 21 JavaScript Files (99.5K)
29
Article
• 1 HTML document (9.2K)
• 5 Style Sheet Files (53.1K)
• 29 JavaScript Files (91.0K)
29Friday, October 17, 2008
![Page 30: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/30.jpg)
Final Results
• 11 less stylesheets
• 33K smaller!
➡ Savings of 31GB in bandwidth per 1 million hits
30
Article CSS
30Friday, October 17, 2008
![Page 31: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/31.jpg)
Growing Pains• One day we got linked to from the homepage of Yahoo!
31
31Friday, October 17, 2008
![Page 32: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/32.jpg)
Growing Pains• One day we got linked to from the homepage of Yahoo!
31
31Friday, October 17, 2008
![Page 33: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/33.jpg)
Growing Pains• One day we got linked to from the homepage of Yahoo!
• 15 minutes later we had to ask them to remove it
31
31Friday, October 17, 2008
![Page 34: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/34.jpg)
Growing Pains• One day we got linked to from the homepage of Yahoo!
• 15 minutes later we had to ask them to remove it
31
31Friday, October 17, 2008
![Page 35: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/35.jpg)
Growing Pains• One day we got linked to from the homepage of Yahoo!
• 15 minutes later we had to ask them to remove it
• Decided to run everything through Akamai
31
31Friday, October 17, 2008
![Page 36: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/36.jpg)
Akamai Works• On America’s Best Colleges launch day we served 15
million pageviews
• 2 million/hour
• The site didn’t even hiccup!
32
32Friday, October 17, 2008
![Page 37: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/37.jpg)
Downsides to Cacheing• Updating a site with cacheing is like tying your shoes with
mittens on.
• Frequent little changes become impossible.
• Less flexibility is worth the stability!
33
33Friday, October 17, 2008
![Page 38: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/38.jpg)
A few more things...
34
34Friday, October 17, 2008
![Page 39: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/39.jpg)
We’re Hiring!• Front-end developers (HTML/CSS/JavaScript)
• Zope/Python Developers
• Send resume, cover letter, and salary requirements to [email protected]
35
35Friday, October 17, 2008
![Page 40: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/40.jpg)
How did I do?• Please give me feedback at
http://www.RussellHeimlich.com/barcamp
• Slides are available for download there too!
36
36Friday, October 17, 2008
![Page 41: 1 Behind the Scenes at USNews - russellheimlich.com€¦ · Stats about USNews • USNews is 75 Years old • USNews.com is 13 years old • 460,000 pages • 66 unique stylesheets](https://reader033.vdocuments.site/reader033/viewer/2022052000/6011e3648ad06f77b44e5444/html5/thumbnails/41.jpg)
Questions?
37
37Friday, October 17, 2008