WordPress is much more powerful than other Do-It-Yourself website platforms (Wix, Weebly, Google Sites, SquareSpace). That power comes from the over fifty thousand plug-ins–some free, some not– that the community of developers has made available for WordPress. Over 25% of the Web is made with WordPress, so there are a lot of people working to make it better.
But what does “powerful” mean, really? Many websites are just “brochureware” – 5 or so unchanging pages that provide the same information you’d find on a brochure. That’s not where the power of WordPress lies. This is why working with our clinic is so helpful: we know about that power, and just knowing what is possible can make the difference between brochureware and a website that really works for your business or organization.
This is a case study of last year’s major project: a redesign and re-branding of Vermont’s Career and Technical Student Organizations site. What was once vtctso.com is now vtcareertech.org. Because we taught our client how to manage the new site over the summer, she is gradually adding and updating content, so both sites remain open for her comparison.
What did we do? Beyond a more memorable and appropriate domain name, a conversion from “flat HTML” to WordPress, and selection and customization of a new appearance (“theme” in WordPress language) , our redesign made use of database-driven features to create custom content types — in other words, not only pages and blog posts, but also organization data sheets, newsletters, and site reports.
Below is a series of showcase sliders, providing before/after views of the site. Use the arrows left and right to explore each.
New Home Page
One of the most powerful design plugins for WordPress is Elementor, which enables someone who does not know how to code to create a custom, dynamic layout for a page. By “dynamic” we mean automatically generating pieces, like “latest posts”. Here is a quick look at the old and the new home page. Tip: we don’t dive into Elementor and start playing around — that would be a huge time-sink. Instead, we design a site map (navigation system) and a wireframes diagram (page mock-up) first, so that when we get into the gears of Elementor we already know what we’re up to.
The site banner, also known as “masthead” for folks in the printing business, has a huge impact on visitors. We are not graphic design experts, but we were able to help out a lot here. There is a graphic design classroom down the hall, however, and for a small fee our clients can distract those busy and very talented students long enough to come up with new concepts. One helped us redesign our own clinic site, and we were very impressed. For $50, she’s willing to work up a new banner idea for your site — just ask us.
We added an online newsletter build from the teasers of blog posts, to be mailed out with MailChimp to track reads and bounces. The image at right is a list of blog (news) posts from the home page. These posts include excerpts of text, also known as teasers, to encourage visitors to click and read. The newsletters have this same structure, but in the act of creating a newsletter the editor chooses which posts to include, and makes layout decisions about columns, images, and introductions.
Each Career Technical Student Organization has its own database-driven datasheet (see example at left) , so that site visitors can compare and select an appropriate CTSO based on skills, officers, costs, and other features. The data on these sheets can then be incorporated into reports, as in this Costs Comparison page at right.
Each participating CSTO submits annual reports. We created reports content types with fields for submitted PDFs for easy submission and comparison by the state coordinator.
The old site did not support a contact form. Contact forms protect email addresses from harvesting and incorporate CAPTCHAs that block robots from posting spam.