From HTML files to modern WordPress
Rockhill Gardens Neighborhood Association
website re-design launch story
RockhillGardens.org is an informational website for the Rockhill Gardens Neighborhood Association. It was a custom html website maintained by one board member and worked well for a number of years. The Web Atrium was asked to redesign the website and migrate into WordPress. Our goals for the project were:
- An updated look and feel from updated organization branding collateral
- Migrate from hand coded website to WordPress
- Review the content and navigation to best suit web users needs
- Easier experience for content admins, present and future
- Accessibility and responsive design best practices
- Customized contact form connecting user requests to the right recipient
Migrate to WordPress
Since we were starting with handcoded files, the “migration” was straightforward: build a new install of WordPress, choose accessible and secure base theme, identify needed plugins, and create custom child theme for current and new content. All content was added into the new install by hand. As it is a simple site wihtout a deep content structure, there was no need to automate content transfer, and many pages were to be updated with new text and images as well.
Information Architecture review
We reviewed the navigation structure with the client to find where the website visitor might get confused, and sorted out what the most important information should be for the home page:
- Easy to find content links on the home page
- Main menu restructured for prioritized access
- Robust calendar section added into WordPress to replace an embedded google calendar block
- Blog post structure utilized for pdf newsletters past and present
Prioritizing content
For any organization, there is a balance between the content that the organization needs to share most urgently, and the content that the website visitor is searching for. This website has multiple purposes:
- Invite new members to join
- Serve existing members
Achieving the balance between time-specific content for current members, and information about the history, purpose, and how to join is key for a successful website. We worked with the client to learn about what was most needed, what could be dropped, and how it should be displayed.
Pre-development content structure
When we plan for development and design, we organize by two options:
- Global: this content can be found sitewide
- Local: this content is only found in particular sections
This helps us know where we can save on effort for repeated content, and directs what tools we will use to implement the structure.
A new design
The Design comps were created as simply as possible, setting the defaults for what landing and detail pages should look like. We wireframed the structure and then put it into a visual design. The design was tested for accessibility best practices, and was built from existing branding that the organization wished to keep. The style of the neighborhood home architecture is disctinct, and we wanted to reflect the color scheme and warmth one feels there in person. Their new look and feel reflects the spirit of the neighborhood, and keeps the history for a recognizable brand.
Implementation into WordPress
A new custom WordPress theme was created for the client. Using an accessible and secure base theme, we built our theme to support the way the web administrator needs to work. With each new page and section, the admin experience was customized for ease of use along with function. A working website should be easy to update, and not every team is comfortable with the same tools.
Custom Site Features
Calendar integration
Events and meetings can be scheduled and displayed in month, week, or day format. All events are local to WordPress as a post type, but can be synced to third party services like google calendar if needed. Custom “upcoming events” teasers and cards can be configured using the plugin, and inherit theme styles.
Newsletter section with embeds and downloads
Utilizing the blog post “river of news” format, all newsletter content is created by adding a new post with a special category. With help from a PDF embedding plugin, members can read newsletters from the website or download to their own device as they like. The posts are organized by publish date and can be easily navigated using sidebars and teaser listings.
Custom contact form
Board member email addreses are now protected from spammers by a secure contact form. Users can select the appropriate recipient using a dropdown menu for their requests.
Documentation along the way
With custom features, come custom processes. Our admin-only documentation was written as we built each feature, with information on how the site is organized, how to update and add new content for customized features, and general information on how we are using the installed plugins. The client has a useful reference, and can more easily train new admins to help.
Conclusion
By working in collaboration with our client, we achieved the goals of updating the look and feel, and boosting the security, accesssibility, and ease of use by migrating from a handcoded site into WordPress. We hope this basis can support the organziation for years to come.
