Website Case Study: Healthcare Events
Developer from Spring 2007 – May 2011, including redesign in November 2010
Healthcare Events are one of the UK's biggest conference organisers, arranging 150 events a year for healthcare professionals. The company changed ownership in Summer 2011 and has rebranded (including a new name). These screenshots reflect the design whilst I was responsible for the site.
- Custom built booking system / CMS
- Integrated with Barclays and later Worldpay Merchant Services
- Redesign process: Photoshop / Illustrator templates created by Mercer Design (who are responsible for all of HCE's branding, conference brochures plus promotional 'tiles' and banners used on the site)
- Adapted their work for layout constraits and 960 pixel/24 unit grid
- Upgraded previous site to support web-standards (table free, semantic code, separating content and presentation)
- Support for appropriate alphabetic/numeric/email keyboards when using iOS devices
- Work to ensure cross browser compatibility whilst using HTML5 features
- Selection of best jQuery plugins to support news ticker etc.
- UK government standard accesskeys.
- Phark Image replacement
- CSS signature - allows users to supply their own custom stylesheets
- Conference calendar available in RSS and .ics (iCal)
- Conferences and contact form are tagged with hCalendar and hCard microformats.
- Simplified URL structure for SEO and general ease of use, with use of rewritemaps and canonical URLs
- Avoided conventional CAPTCHA images due to their inaccessible nature and bad user-experience
- Standard and Apple iOS favicons
- CSS3 progressive enhancement: rounded corners, opacity and transitions
- Web fonts from Typekit to make site more attractive whilst allowing HTN
- Followed Yahoo and Google's recommendations for high performance websites:
- HTML, CSS and javascript served compressed - minimises bandwidth between server and browser
- Graphics optimised (losslessly) using PNGCrush and Smush.it
- Images (e.g. icons and certain logos) combined using CSS sprites
- Icons for conference pages preloaded once homepage finishes loaded
- Cached headers added to images by Apache
- Minified CSS and javascript
- Javascript combined into single file
- jQuery served by Google CDN
- Google page speed score: 93/100.
- CMS (PHP and MySQL) to manage:
- conferences (including fees, logos, dates, top-level URLs, downloadable files)
- bookings (processing, email notifications and search)
- the news ticker
- contact form
- links page
- promotional graphics
- all reporting (web pages and CSV files)
- Over 20,000 lines of code (plus custom libraries for database access & HTML generation)
Other useful resources:
- Natalie Downe's presentation: CSS Systems for writing maintainable CSS
- HTML5 for Web Designers by Jeremy Keith
- Google Google Analytics and Webmaster Tools
- YSlow
- Adobe Browserlab
- Technorati hCard to vCard service
William Turrell,