One of the biggest challenges in web development is to implement modern technology without sacrificing performance, usability and most importantly, accessibility, a key requirement for an institution in the education industry like Msacroa.org
When Msacroa approached us, their goal was simple: We need a sustainable, efficient and most importantly, ADA-compliant site for the next 10 years.
The challenge, however, was to complete the project before their annual conference and then migrate their legacy system into the new one so it could be available during the event.
The old site
Built with an end-of-life version of Joomla and no custom frontend theme.
Initial concept
First wireframe sketch to define the new interface design.
First mockup
Original web design artwork for the home page.
Web based project manager
Our proprietary project manager allowed the client to track, review and approve assets in real time.
scope & timeline
Day 1
Planning
We start by setting up the client’s project manager and then gather materials, instructions and concept exploration.
Designing
We start working on the original mockups, mobile-friendly views and special features interfaces.
Building
We start by converting the approved mockup to a plain HTML5/CSS3 prototype to test the new interface in a browser. CMS framework development, custom features coding and placeholder structure.
Optimizing
Convert the site to mobile friendly. Implement frontend UX and UI. Code cleanup and compression. Testing and quality control. Implement accessibility features.
Copywriting
Content generation, sitemap, content formatting and migration. Stock images, media and third-party scripts. Navigation, link audits and proofing.
Publishing
Deploying project from staging server to production host. Soft publishing and testing. Provisioning of load balancing hosting. Compression, caching and CDN configuration. Security audit and going live.
Promoting
Search engine XML sitemap submission. Integrate with social media. Organize assets and create backups.
day 72
A key feature in the new Msacroa.org was to make the site fully accessible to people with disability.
The Americans with Disability Act (ADA) prohibits discrimination based on disability. Online, the ADA compliance is not fully defined, however, ADA-based complains can already carry penalties for the owner or operator of a non-ADA compliant site.
The accepted standard for ADA compliance is implementing the W3C WCAG 2.0. For this project, we implemented Level AA across all front-end interfaces.
Clear navigation
The system automatically creates a parent/child based on content structure.
Member search feature
The system connects to the members database to retrieve results based on search string.
Fully customized CMS
Site managers can edit content in custom CMS layouts without worrying about formatting or style.
Accessibility features
The front-end offers several WCAG 2.0 AA recommendations for full accessibility.
High contrast theme
With one click, users can change from the default theme to a high-contrast one.
Msacroa organizes a meeting conference each year, so we created a system in which system administrators can create “sub-sites” for each conference.
Sub-sites are all managed from the same backend and their deployment can be done in 10 minutes.
Sub-site theme
Each sub-site can have a custom theme and its own CMS.
No performance sacrifice
Despite the complexity of achieving ADA-compliance, msacroa.org still loads faster than 80% of all tested sites.
Google PageSpeed Score
"Excellent"
We received a very detailed and realistic scope of work and estimate and communicated with me the whole time to ensure the project was completed successfully.
Autumn W. - Vice President For Information Technology