National Association of Government Web Professionals 2013 National Conference

LESSONS IN SHARING OPEN SOURCELeslie LabrecqueCity of Boulder, Colorado

National Association of Government Web Professionals 2013 National Conference

Agenda• Project Definition• Technology Used• Lessons Learned• The Final Product• Questions

National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference

Project DefinitionProject Phases Defined

National Association of Government Web Professionals 2013 National Conference

Old Website Design• This was our old website…• Joomla CMS• Around since May 2006

National Association of Government Web Professionals 2013 National Conference

Phase I - Research Project• Site Navigation• Content Organization• Data Retention and Archiving• Search Capabilities• Site Aesthetics• CMS Functionality (Joomla)

National Association of Government Web Professionals 2013 National Conference

Phase I - Process• Request for Information (RFI) Issued• Nine proposals received• Five vendors selected to present• Narrowed down to two vendors

National Association of Government Web Professionals 2013 National Conference

Phase I – Design Winner• Vision Internet

• Deliver a responsive design template• We would integrate with the CMS

National Association of Government Web Professionals 2013 National Conference

Phase I – CMS Winner• City of Arvada

• Shared use of their CMS• Both cities would use and contribute to• Enter into an intergovernmental agreement• We added a PHP developer position to our staff

National Association of Government Web Professionals 2013 National Conference

Phase II - ImplementationDate Task

Apr 2012 Kick-off call with Vision Internet

Apr – May 2012

Conducted internal and external surveys

Jul 2012 On-site visit and approved wireframe

Aug 2012 Delivered round I design mockups

National Association of Government Web Professionals 2013 National Conference

National Association of Government Web Professionals 2013 National Conference

Design 1 Design 2

Design 3

National Association of Government Web Professionals 2013 National Conference

And The Winner Is…

National Association of Government Web Professionals 2013 National Conference

Design Phase TimelineDate Task

Aug 2012 - Dec 2012

Worked on homepage mockups

Dec 2012 Completed and approved homepage mockup

Jan 2013 Completed interior page design

Feb 2013 Delivered working prototypeTested and refined prototype Work with Vision completed

National Association of Government Web Professionals 2013 National Conference

CMS ImplementationDate Task

Sept 2012 Hired PHP Developer

Oct 2012 Installed Arvada’s CMS code

Mar 2013 Integrated design with CMSRan migration scriptTrained users

Mar 2013 – Jul 2013

Repurposed content for responsive design

Jul 2013 GO LIVE!

National Association of Government Web Professionals 2013 National Conference

Would Also Be Great If…• Implement new constituent relationship management

system (CRM)• Online document repository• Officially announce online data catalog

National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference

Technology UsedThe Technology We Are Using

National Association of Government Web Professionals 2013 National Conference

Arvada CMS (XPress)• PHP 5• MySQL database• Kohana PHP framework• jQuery UI

National Association of Government Web Professionals 2013 National Conference

Why We Chose XPress• Government specific• Easy/Intuitive for our web managers• Integrated link checker to scan for broken links• Integrated with Vimeo, YouTube, Google Maps and Flickr• Tagging system to multi-purpose content

National Association of Government Web Professionals 2013 National Conference

CMS/Social Media Integration• Embed related videos from YouTube and Vimeo• Include related photos from Flickr• Provide map with address on any page• Include an image banner on any page• Include scrolling mini-banners on any category

National Association of Government Web Professionals 2013 National Conference

Additional Technology• CRM - Government Outreach hosted solution• Online Records Access – Laserfiche web portal (Rio)• Open Data – Open Colorado/CKAN

National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference

Lessons LearnedWhat We Learned From This Project

National Association of Government Web Professionals 2013 National Conference

Clean House• Clean up the code before sharing• Remove hard-coded variables

National Association of Government Web Professionals 2013 National Conference

Learn the Technology• Take the time to learn the technology• Do this before you install the code

National Association of Government Web Professionals 2013 National Conference

Hire Good People• Added PHP developer position• Have a rock star systems administrator

National Association of Government Web Professionals 2013 National Conference

Communication• Regular meetings• Show/Tell • Keep management informed

National Association of Government Web Professionals 2013 National Conference

Establish Roadmap• Where is the project going?• Agreed upon enhancements • Enhancement timeframe?

National Association of Government Web Professionals 2013 National Conference

Scope Creep• Lot of things you can do• Stick to the roadmap

National Association of Government Web Professionals 2013 National Conference

Shared Code Repository• Master code repository• Each agency can have their own

National Association of Government Web Professionals 2013 National Conference

Bug Tracking• Collectively log bugs• Collectively squash bugs

National Association of Government Web Professionals 2013 National Conference

Modularize• Write reusable modules• Can someone else use this?

National Association of Government Web Professionals 2013 National Conference

Know Your APIs• Read the documentation• Write code to catch exceptions • Sign up for updates

National Association of Government Web Professionals 2013 National Conference

Webmaster Tools• Setup Google and Bing

webmaster tools in advance• Fetch as Bingbot and Googlebot• Don’t delete old website

National Association of Government Web Professionals 2013 National Conference

Bing Move Tool• Use the Site Move Tool!• Located under Diagnostics & Tools

National Association of Government Web Professionals 2013 National Conference

Responsive Design• Include tables and forms in

design contract• Separate stylesheet for IE8• Will not work for IE7 or below

National Association of Government Web Professionals 2013 National Conference

HTTPS?• Everything has to be https• IE will throw an error every time• Newer browsers will not show

the content

National Association of Government Web Professionals 2013 National Conference

Keep Old Website Active• Maintain access to old website• Use no follow in <meta> tag on

old website

National Association of Government Web Professionals 2013 National Conference

Search Issues• Have a good internal search• Search engines take time to reindex

National Association of Government Web Professionals 2013 National Conference

Robots.txt• Include directories you don’t want indexed• Use wild cards to eliminate old pages

National Association of Government Web Professionals 2013 National Conference

Sitemap.XML• Create a sitemap• Place at the root• Submit to webmaster tools

accounts

National Association of Government Web Professionals 2013 National Conference

301 Redirects• Setup 301 redirects• Redirect top level pages• Redirect high traffic pages

National Association of Government Web Professionals 2013 National Conference

Soft/Hard 404 Error• Hard 404: Not Found• Soft 404: Also returns 200 OK code

National Association of Government Web Professionals 2013 National Conference

Documentation• User and reference manuals• Style guides

National Association of Government Web Professionals 2013 National Conference

Share The Love• Setup a website to share• Join the community and

help where you can

National Association of Government Web Professionals 2013 National ConferenceNational Association of Government Web Professionals 2013 National Conference

The Final ProductWhere We Are Now

National Association of Government Web Professionals 2013 National Conference

National Association of Government Web Professionals 2013 National Conference

National Association of Government Web Professionals 2013 National Conference

National Association of Government Web Professionals 2013 National Conference

National Association of Government Web Professionals 2013 National Conference

National Association of Government Web Professionals 2013 National Conference

Questions?Email: labrecquel@bouldercolorado.gov

Twitter: @leslielabrecque

Delicious: d.me/leslielabrecque

Slideshare: slideshare.net/leslielabrecque