Station Four: Web Redesign Presentation


Published on

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

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Station Four: Web Redesign Presentation

  1. 1. REDESIGN.How We Updated Our Website andBrand to Fit the Companies Needs.(Hint: It Wasn’t Easy)
  2. 2. 1 STATIONFOUROVERVIEW.Launched…About 6 hours ago.Culmination of a long rebrandingprocess that first got started almosttwo years ago.Full overview of S4’s brandingefforts over the years can be read athttp://blog.stationfour.comOverview Goals Big Picture Tech Phase 2
  3. 3. 2 STATIONFOURGOALS.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, andand 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 ourWe 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 moredevelop 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. 4. 3 STATIONFOURBIG 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 MobileOverview Goals Big Picture Tech Phase 2
  5. 5. 4 STATIONFOURADMIN.Basic admin interface to managedata driven areas of the webiste –specifically individual employeepages and portfolio detail pages.We preferred this approach torolling the website into a CMS.Though I wouldn’t recommend itunless your ‘admins’ happen to beweb developers and designers.Overview Goals Big Picture Tech Phase 2
  6. 6. 5 STATIONFOURCDN.We are spreading assets, such asimages and scripts, across threedomains being served by thecontent delivery network:Images.stationfour.comImages2.stationfour.comAssets.stationfour.comIncreases the number ofsimultaneous downloads a browserwill initiate on page load.Increases transfer speeds.Overview Goals Big Picture Tech Phase 2
  7. 7. 6 STATIONFOURMOBILE.We use jQuery Mobile for thesimplified mobile version of ourmain website.Individual project data is comingfrom the database.jQuery Mobile doesn’t always playnice when you want to do yourown thing.Overview Goals Big Picture Tech Phase 2
  8. 8. 7 STATIONFOURTABLET.The desktop website works prettywell on tablets. However, there area few areas that rely on hovereffects to display information.Where this is the case, we modifiedsome styles if the user is accessingthe site on a touch device, implyinglack of ‘hover’.This is also the case for mobiledevices that access the full website.Blog posts are adjusted to maketablet reading easier as well.Overview Goals Big Picture Tech Phase 2
  9. 9. 8 STATIONFOURBLOG.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. 10. 9 STATIONFOURTECH (FRONT END).Tools. Javascript. Major JS Functions.The basics: Firebug, Chrome, IE jQuery: pulled in via Google CDN w/ Home page rotator, animations, andDev tools, Web Dev Tools local backup side controls.Speed: Yslow, Google Page Speed, jQuery UI’s easing effects Power bar animations, questionPingdom lines. Modernizer for CSS3 selectors andImage compression: Custom HTML5 semantic elements in IE. Contact forms – enforcingscript using JpegTran and PngOut Also for detecting touch. placeholder text and custom dropalgorithms for lossless compression down menus. Small plugins: jQuery Color (forMinification: Google Closure color animations), jQuery shadow Inner transparent autosizingCompiler, CSS Tidy animations, jQuery rotate, and borders. HoverIntentBrowser Compatibility: Actual Animation effects on expertisebrowsers where possible, IE9 for Typekit: Used for Proxima Nova and homepage.testing IE7-9, IETester, any and all Arvo – loaded asynchronously soiPhones and tablets we could find, page rendering isn’t delayed. Using Using canvas to create grayscaleOpera Mobile Emulator, font-events to hide type before hover effect on loaded.Overview Goals Big Picture Tech Phase 2
  11. 11. 10 STATIONFOURPHASE 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. 12. 11 STATIONFOURFINAL NOTE.Don’t forget the details, like 404error pages!We’d love any feedback you have,now or later –!