An adventure into the world of website creation

Aug. 2, 2019

Pei Xuan Lee

Author:

Pei Xuan Lee
Code and data (Lined) Solutions Loudspeaker icon (Coloured) Commentary
Customized, flexible website creation with WagtailCMS!

Background

As a brand new marketing intern at Auguried, I was tasked to create a marketing plan that would ultimately drive the acquisition of marketing leads, gain customer trust, and improve brand awareness. In this rapidly digitalizing world, a digital point of contact and information was vital to communicate our expertise and experience in building software solutions.


Old Website.png

Old website shown on the right ------>

Thus, the project of revamping the old auguried.com website was born. Although the previous website did the job of displaying basic information and commentary posts, it was very rigid in structure, not mobile-responsive (70% of web traffic are from mobile devices!), and did not effectively convey the message of "what do we do" to our stakeholders.

Poring into documentation, deciding to change from the original outdated ApostropheCMS express.js based website to the Django based WagtailCMS, learning how the models.py file relates to the Model-View-Controller (MVC) web development architectural pattern and many other learnings helped me to overcome the initial steep learning curve of 'How do I even use this particular framework!? Why are there so many files and sections compared to Flask?'




Although the original website built on Apostrophe was theoretically able to be modified and updated, it would be a massive endeavor as the more updated and secure versions of the framework required a complete change of the code logic, and every individual "piece" type needed for creation of a page required a lot more coding than WagtailCMS.



So why and how did I make this new website with Wagtail CMS?


Benefits of current website framework

Easy to read and code

  • Backend website code is written in Python, using the Django/Wagtail framework.
  • Faster development and creation of new page and field types based on project needs.

Easily customisable "Streamfield" blocks

  • Custom blocks and functions can be easily made, and easily edited by users.
  • Blocks can be easily moved around, modified, created, and deleted in the admin page.


ProductBlock.PNG

Mobile friendly

  • With the use of streamfield, custom image and text blocks can be made, allowing side by side or any other view of the final page.
  • No more editing images in Paint to squeeze multiple elements in one image!

ProductBlock_Admin.png


User Friendly

  • No coding needed for end users!
  • No worries about formatting and positioning.
  • Focus on your content and message.

Long blog posts or articles such as this one can be done in Rich Text Fields, showing you the actual display of your post as you type. Blog posts, T&Cs, product characteristics — all can be updated and published easily in a customised yet neat format.







Other Experiments


The coding of the website being easy to understand and extend gave me the extra time to experiment on other website-enhancing features such as:

Automated population of latest published blog and testimonial pages

  • Different page types can be filtered to generate list of pages in another page
    • Can you spot the difference between the blog section of our Home and Solutions pages?


Use of dynamic elements in webpage creation

  • Animations bring visual cues to key elements than static pages
  • Visual elements such as images, infographics, animations, and videos are increasingly important for businesses (Source: Hubspot, 2019)

View some of my experiments at this page here!




Although the current website is still quite basic, I hope that it has been informative and useful in your visit here 😊.

Return to index page