Sucuri is a worry-free website security platform that allows website owners to stop worrying about website security and get back to building their brands. With Sucuri, you get a highly technical team of security professionals distributed around the world, each trained in identifying and fixing any issues you might be faced with.
The Sucuri website consists of the corporate site and an integrated WordPress blog. The Sucuri team had recently launched a redesign of the corporate site and engaged Bourn Creative to not only redesign the accompanying WordPress blog, but to provide consulting and assistance in streamlining and simplifying the content organization, presenting critical data to visitors, and implementing publishing best practices.
Website Design and Development
A primary requirement was to duplicate the header, navigation, and footer design from the non-WordPress corporate site on the WordPress blog, providing visitors an almost seamless transition from one site to the other. This included:
- Custom menu items and menu classes
- The integration of a custom language selector to toggle between languages site-wide
- An advanced search for faceted searches that allows fast sorting of posts by category or tag
Because the Sucuri blog exists in English, Spanish, and Portuguese versions, Bourn Creative also added a custom, backward-compatible, multi-language publishing system that:
- Allows team members to easily add a link to the alternate language versions of a post in the actual individual post. When a link is added for another language, the associated flag appears alongside the author byline and date at the top of the post.
- Allows visitors to click a flag icon at the top of the post to quickly switch between languages for that specific post.
The Sucuri blog design uses a card-style layout and sidebar for the post archives, with the posts displayed in two-columns and the first post in each grouping of posts displayed as a large featured post. Rather than paginate the archives, Bourn Creative integrated an on-demand infinite scroll.
The primary issue with a normal infinite scroll is that the visitor may never reach the end or see the site footer if there is a lot of content on the site, and that isn’t smart if your footer content contains important information and links. An on-demand infinite scroll adds a “Load More” button at the bottom of the blog post archive, which keeps the footer visible. Visitors can then click the button to load an other grouping of posts to the page.
Similarly, the site design includes a green call to action at the bottom of the sidebar. Most websites display an email marketing opt-in at the top of the sidebar because they believe it maximizes visibility, but as soon as a visitor begins to scroll, the opt-in disappears. Bourn Creative instead placed the call to action widget at the bottom of the footer and made it “sticky,” which means that during scroll, it sticks to the top of the browser and stays there, always visible no matter how long scrolling continues for.
Additional design features were added to the WordPress blog to provide visual context to important content. This included:
- Custom fields for vulnerability disclosure information to set it apart from the post content
- A custom post template for the Sucuri Labs recap posts
- The design of special boxes for code samples to help it stand out from the content
Content Organization and Planning
As with any website or blog that has different team members publishing content over several years, the organization of content can get a little hairy, and the existing Sucuri blog was no different. It had hundreds of posts and a large number categories and tags that needed to be cleaned up, organized, and streamlined.
Bourn Creative began by evaluating the existing content, including categories, tags, image use, content styling and formatting, and optimization, and preparing a Road Map report on recommended steps to reorganize the content.
Usually, we make the recommendations and then handle the implementation, but due to the security requirements of the project, the internal Sucuri team managed the implementation. Every recommendation made was documented, step-by-step, in a specific order to create minimize efforts and clicks and provided as detailed checklists to ensure nothing was missed or overlooked.
In our work together, the site went from almost one hundred categories and more than 800 tags, to 20 categories and just under 90 tags, creating content rich, valuable archives of posts. Condensing the categories and tags also paved the way for a more helpful and valuable advanced search feature that we added to the blog.
Next, we identified existing posts with content styling/formatting that needed to be updated, including:
- Posts with a missing featured image — with the new card-style layout, every post needed a featured image
- Vulnerability Disclosure posts that needed to be updated to use the new custom fields added to the blog for better presentation of critical data
- Posts with styling or formatting inconsistencies that could be addressed quickly
Finally, Bourn Creative provided a Content Style Guide for the Sucuri blog, detailing formatting best practices and brand styling guidelines, as well as a blog post optimization checklist the internal blog team can use to ensure they take advantage of every optimization opportunity available when publishing new content.
We continue to work with the Sucuri team for ongoing updates and new feature additions.