Website Design 6
This was the big one.
After over a year of iteration, applying my UX, UI, web development, information architecture and SEO knowledge, maximising the capabilities of my CMS and sorting issues on my to-do list, version 6 was born.
Hopefully, it’s here to stay.
With version 5 focused almost exclusively on improving the reading experience, version 6 aimed to take a more general look at any issues still lingering with the design. It found two major ones;
Poor SEO potential
Code that wasn’t optimised for SEO, as well as a low level of backlinks from other sources, meant that the site was rated D for SEO.
Unattractive landing pages
Landing pages for sections (like “work”) used the same template as the archive pages – showing users a relatively unattractive design.
- increased the SEO grade of this site to a B,
- was one of only nine websites (as of Feb 2019) to be featured on the site showcase of TextPattern CMS.
So what changed?
Redesigned section landing pages
With plans to introduce the long awaited blog as part of a backlink building strategy, section landing pages became more important. As a larger proportion of traffic would be redirected to sections instead of the homepage, how these pages looked was critical for users (see note).
Sub-sections weren’t supported by my CMS, making plans for sections to link to a complete archive of its posts a major issue. While a general archive was introduced in version 4, this showed posts from every section on the site. And not being able to find a website using the same CMS doing what I required made me question if a solution was even possible.
How could archives for individual sections be created without using sub-sections?
The fix came by going in the opposite direction, by making the entire section an archive of the posts within it.
By doing this, and introducing pagination to the list of posts, an acceptable archive was created. As well as being the correct design pattern for the content provided, pagination also allowed me to add a conditional statement to the code.
This stated that if the user was on the first page of results, the landing page template should be shown – with the template for section archives to be shown in all other cases.
A UI overhaul
Redesigned section landing pages were part of a larger UI overhaul of the site. Having started to use WordPress, and taking inspiration from its template hierarchy, designs were created for the eight main types of page in use;
- archive (used for general archives),
- article (used for articles),
- error (used for error pages),
- index (used on the homepage),
- landing (used for section landing pages),
- list (used for search results),
- posts (used for section archives),
- single (used for sections without articles, like about).
UI inspirations for this version came from many places, including older iterations of this site. For example, the hero design on the homepage (reintroduced for SEO keyword and code purposes) was pretty much the same as version 3 – only with better background imagery.
Thankfully, the feedback for the redesign has been overwhelmingly positive. Because of this, it’s highly likely that I won’t be making any major changes to the UI for the foreseeable future.
Version 6 introduced two new sections – one of which was this website’s long planned blog (see note).
The introduction of a blog had a direct impact on the design of the new homepage. With previous versions only showing portfolio work, the new design needed to combine the articles in both sections going forwards.
The decision made was to show the three most recently published articles on the homepage. This allowed content from different sections to co-exist and promoted my recent posts, while at the same time improving SEO through a combination of keyword/code optimisation and regular updates.
As the existing SEO was relatively poor, I also took the opportunity to officially rename the portfolio section (from work, where URLs prior to version 6 still pointed), as well as calling the blog a “journal”.
Still to come…
There’s still more!
Features that are still in development for this version include introducing a tagging system and social sharing for articles, as well as search boxes for the error page and header.
I’m also looking to move from opening an external mail client to embedding a contact form in the footer. This is still being worked on – but I want to address accessibility issues, as well as introducing instant error reporting before making releasing this.
Articles in the "Website Design" series
- Previous site designs
- Website Design 1: The First One
- Website Design 2: The One That Fixed The First One
- Website Design 3: The One That Moved To A CMS
- Website Design 4: The One That Did User Research
- Website Design 5: The One That Defined The Article Reading Experience
- Website Design 6: The One That Got Showcased By Fixing The UI