Presenting the 2012 Station Four web redesign to AIGA's morning leak. The presentation reviews the design, site structure, and technologies involved.

1. REDESIGN.
How We Updated Our Website and
Brand to Fit the Companies Needs.
(Hint: It Wasn’t Easy)

2. 1 STATIONFOUR
OVERVIEW.
Launched…
About 6 hours ago.
Culmination of a long rebranding
process that first got started almost
two years ago.
Full overview of S4’s branding
efforts over the years can be read at
http://blog.stationfour.com
Overview Goals Big Picture Tech Phase 2

3. 2 STATIONFOUR
GOALS.
Modernize. Simplify. Show Off.
Old site launched in 2007. Retiring content. Larger focus on our work.
The design of the old site was dated The old site was basically an in- Our philosophy, methodologies, and
and sorely needed a refresh. place upgrade of our very first how we’re good looking took a
website. That first website was built backseat to highlighting our
We wanted to take advantages of when we had a lot of ideas but no projects.
newer technologies – HTML5, clients and no work.
CSS3, larger use of Javascript, and We provide significantly more
develop a mobile version. The recently replaced website was images and discussion on each of
bloated, which helped in some ways our projects than we had previously.
with SEO but not for providing a
focused experience.
Overview Goals Big Picture Tech Phase 2

4. 3 STATIONFOUR
BIG PICTURE.
The Numbers. The Platform. Data.
• About 16 pages – not including • ASP.NET MVC v3 • Parts of the site are DB driven
blog posts or projects (people, projects) and accessible
• No content management system via a basic admin interface
• 27 Project detail pages for the main website
+ 1 Featured client page • Mobile site pulling from same DB
• Blog is running on Wordpress
• ~ 700 lines of custom Javascript
or 1 big line minified • Content Delivery Network through
Rackspace Cloud Files
• 7 JS libraries/plug-ins
• Mobile site using jQuery Mobile
Overview Goals Big Picture Tech Phase 2

5. 4 STATIONFOUR
ADMIN.
Basic admin interface to manage
data driven areas of the webiste –
specifically individual employee
pages and portfolio detail pages.
We preferred this approach to
rolling the website into a CMS.
Though I wouldn’t recommend it
unless your ‘admins’ happen to be
web developers and designers.
Overview Goals Big Picture Tech Phase 2

6. 5 STATIONFOUR
CDN.
We are spreading assets, such as
images and scripts, across three
domains being served by the
content delivery network:
Images.stationfour.com
Images2.stationfour.com
Assets.stationfour.com
Increases the number of
simultaneous downloads a browser
will initiate on page load.
Increases transfer speeds.
Overview Goals Big Picture Tech Phase 2

7. 6 STATIONFOUR
MOBILE.
We use jQuery Mobile for the
simplified mobile version of our
main website.
Individual project data is coming
from the database.
jQuery Mobile doesn’t always play
nice when you want to do your
own thing.
Overview Goals Big Picture Tech Phase 2

8. 7 STATIONFOUR
TABLET.
The desktop website works pretty
well on tablets. However, there are
a few areas that rely on hover
effects to display information.
Where this is the case, we modified
some styles if the user is accessing
the site on a touch device, implying
lack of ‘hover’.
This is also the case for mobile
devices that access the full website.
Blog posts are adjusted to make
tablet reading easier as well.
Overview Goals Big Picture Tech Phase 2

9. 8 STATIONFOUR
BLOG.
The blog is running on Wordpress,
modified to be very simple.
No categories, tags, archives, etc.
Just the index and post pages.
Overview Goals Big Picture Tech Phase 2

10. 9 STATIONFOUR
TECH (FRONT END).
Tools. Javascript. Major JS Functions.
The basics: Firebug, Chrome, IE jQuery: pulled in via Google CDN w/ Home page rotator, animations, and
Dev tools, Web Dev Tools local backup side controls.
Speed: Yslow, Google Page Speed, jQuery UI’s easing effects Power bar animations, question
Pingdom lines.
Modernizer for CSS3 selectors and
Image compression: Custom HTML5 semantic elements in IE. Contact forms – enforcing
script using JpegTran and PngOut Also for detecting touch. placeholder text and custom drop
algorithms for lossless compression down menus.
Small plugins: jQuery Color (for
Minification: Google Closure color animations), jQuery shadow Inner transparent autosizing
Compiler, CSS Tidy animations, jQuery rotate, and borders.
HoverIntent
Browser Compatibility: Actual Animation effects on expertise
browsers where possible, IE9 for Typekit: Used for Proxima Nova and homepage.
testing IE7-9, IETester, any and all Arvo – loaded asynchronously so
iPhones and tablets we could find, page rendering isn’t delayed. Using Using canvas to create grayscale
Opera Mobile Emulator, font-events to hide type before hover effect on fly.
browserstack.com loaded.
Overview Goals Big Picture Tech Phase 2

11. 10 STATIONFOUR
PHASE 2
• Interactive timeline of company’s history
• Project filtering.
• Automatic minification and switching between
CDN and local files based on the
environment.
• More case studies/featured client sections.
• Add in branding and print projects.
• Ajaxifying person and project pages.
• Add responsive elements.
• Possibly lightweight CMS integration.
Overview Goals Big Picture Tech Phase 2

12. 11 STATIONFOUR
FINAL NOTE.
Don’t forget the details, like 404
error pages!
We’d love any feedback you have,
now or later –
hello@stationfour.com.
Thanks!