Jeandre Viljoen

210143896

Report Document for University of London BSc Computer Science:
Web Development
(April 2021)

Introduction:

Mutable: music and news is a fictitious news article website/platform that covers and promotes music related content from South Africa’s local music scene/industry.

Mostly focused on alternative and heavier music genres. They cover a whole range of music genres.

The website boasts various types of news. Starting at surface level, standard music news updates. The website also provides single, album or video releases by artists. Events that are happening around South Africa and a small percentage of general/international news.

The platform allows for users to submit music or events that hey wish to be covered by the platform.
Due to modern day content consumption, the need for mobile apps are more and more essential to engage a large audience. With this in mind; The website design focus was based around mobile consumption: e.g. Easy and fast access to all content, with extremely simple layouts, verticality and low amount of clutter.

The website is supposed to represent a phone ‘application’ rather than a traditional full-scale website.
Due to the main content of the website being alternative music. The theming is mainly dark, aesthetically grungy and as simple / modern as possible.

Inspiration

• Other local (and styled) music news websites.

• The fictitious name brand "Mutable" is based around a personally owned and real world brand. I was deeply inspired by the existing brand’s core values and aesthetics and strived to represent a similar level of quality that the real brand adheres to.

• Being a Musician and 'content-creator' myself. A big challenge is always to get the name out there. Naturally I gravitated to a music / news website that could help the limited local industry progress forward.

Accessability

• Meta tags are thoroughly implemented. Including image 'alt' attributes to allow for screen readers to be of assistance.

• With the focus on mobile (and smaller screens), images and text is very simply laid out.
Large scaling of objects/text make it easier for people with visual impairments or small screens to read and consume content.
This, in tandem with a high contrast, easy-on-the-eyes ‘dark-mode’ color scheme, and limited use of colors, make for a bright, thematic user-experience and eliminates unnecessary distractions with over the top details or colors.

• Entire page is tabbable for users not using standard mouse and keyboard, as well as phone touch screens (which limits input resolution due to big finger print surface area.)
Combined with a sticky navigation bar; all pages are easily accessible at all times from anywhere on the site.

Usability

• Simple layout and modern design. Limited colors to remove unnecessary distraction and easily keep focus on important content. Focused on mobile, the app is very portable and simple to use. Animated buttons and sections feel sleek, satisfying and responsive to use.

• Website content gets generated from a database and is not hard-coded. Adding articles and events is as simple as filling in the information in the database and after saving, the website will automatically update all the sections and latest news containers with the latest articles. Thus making it simple and fast to update the site.
This can further be extended by allowing users to fill in submission forms and having the page directly update the information without the need of an administrator to do the ‘paperwork’.
Forms to submit content is data validated to a degree. Meaning the site will not accept normal text when it expects hyperlinks or even numbers when it expects dates values.

• All content is linked and visible from the main index page through multiple avenues/links. This ensures that first-time visitors do not get overwhelmed by information or complex navigation. And helps returning visitors navigate the page extremely fast. Always 1-2 clicks away from anything on the site.

Learning

• How to import data files and convert them to class data structures in order to work with them. (This took days and several grey hairs to get right). This was essential to have the page generate its content via templates on demand. I opted for the JSON filetype which integrates easily with javascript and is easy to update information when necessary

• How to keep data persistent between different HTML pages. Scripts would lose scope when the users navigated away. This required a way to transfer article or event indexes so that the article or event page could display the correct item based on the index of the article stored within an array. Although not ideal, with the limited functions of vanilla JS, CSS and HTML, as well as not using a modernized SPA format. I ended up using the local session storage to transfer essential data between HTML pages.

• A magnitude of JS, HTML and CSS things. Whenever I would run in to a problem, I’d scour the internet for a solution. This took hours of tutorials and stack-overflow forums.

Some of which includes:
- 3rd party library for the image carousel,
- Working with fancier animations,
- Using quality of life tools like SASS to improve efficiency and categorization of styling code,
- Using a library to easily include icons,
- Templating using Handlebars.
- And much more.

Evaluation I

I am very proud of the aesthetics and modern, responsive look / feel for a page completely coded in vanilla JS, CSS and HTML.

The best (and most complex) feature about the website is that its generating content from a JSON database and creating full pages from templates and Javascript code.

My custom designs look professional and sleek and my choice for visual aesthetics to represent an alternative music brand website feel accurate and fitting.

Evaluation II

The biggest downfall of my website would be the slow loading time and unoptomized images etc. A great example is getting the background to loop seamlessly as the users scrolls down. An easy way to do this is tile the background image and flip/mirror every second tile. However after some research, this is almost impossible with vanilla code. Instead I baked the mirrored background in to the image file. But this doubled an already large file size. Not to mention, because the site is not an SPA, every time a new page gets loaded, it has to load up the background image again. And this can make for a jarring navigation / user experience.

Forms can be implemented better, storing and processing submitted user data, however for this project I kept it simple for the sake of time management.

Some more categorization could be added for site content e.g. upcoming and past events.
Vanilla coding is slow and tedious and would’ve liked to learn a framework such as React.
Next time I will definitely learn how to make a modern SPA via a framework to teach myself more about how the industry really works with websites.

Resources

Image Carousel Code

Blueimp, 'Gallery 3.3.0', 2021

blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'), {
                        container: '#blueimp-gallery-carousel',
                        carousel: true
                    })
                    
                    document.getElementById('links').onclick = function (event)
                    {
                        event = event || window.event
                        var target = event.target || event.srcElement
                        var link = target.src ? target.parentNode : target
                        var options = { index: link, event: event }
                        var links = this.getElementsByTagName('a')
                        blueimp.Gallery(links, options)
                    }

https://github.com/blueimp/Gallery

Bootstrap

(Did not intentionally use it but when I cleaned up the code my website broke, so I left it in)

link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"

Font Awesome - icons

link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
                        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"

Handlebars - templates

script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js">

Hover icon code for social media links

Easy WebCode, 'Social Media Button Hover Effect', 2021

.social-menu ul {
                        padding-left: 100px;
                        padding-right: 100px;
                        margin: 0;
                        display: flex;
                      }
                      .social-menu ul li {
                        list-style: none;
                        margin: 0 10px;
                      }
                      .social-menu ul li .fab {
                        color: #000000;
                        font-size: 35px;
                        line-height: 50px;
                        transition: .3s;
                      }
                      .social-menu ul li .fab:hover {
                        color: #ffffff;
                      }
                      
                      .social-menu ul li .far {
                        color: #000000;
                        font-size: 35px;
                        line-height: 50px;
                        transition: .3s;
                      }
                      .social-menu ul li .far:hover {
                        color: #ffffff;
                      }
                      .social-menu ul li a {
                        position: relative;
                        display: block;
                        width: 50px;
                        height: 50px;
                        border-radius: 10px;
                        background-color: rgb(117, 117, 117);
                        text-align: center;
                        transition: 0.3s;
                        transform: translate(0,0px);
                        box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
                      }
                      .social-menu ul li a:hover {
                        transform: rotate(0deg) skew(0deg) translate(0, -10px);
                      }
                      .social-menu ul li a:active {
                        transform: scale(1.15);
                        transition: 0.1s;
                      }
                      .social-menu ul li:nth-child(1) a:hover {
                        background-color: #3b5999;
                      }
                      .social-menu ul li:nth-child(2) a:hover {
                        background-color: #55acee;
                      }
                      .social-menu ul li:nth-child(3) a:hover {
                        background-color: #e4405f;
                      }
                      .social-menu ul li:nth-child(4) a:hover {
                        background-color: #cd201f;
                      }
                      .social-menu ul li:nth-child(5) a:hover {
                        background-color: #e94a0b;
                      }

https://codepen.io/easywebcode/pen/qBBvNEO

SASS to improve CSS workflow

https://sass-lang.com/

Various YouTube tutorials as well as stack-overflow troubleshoting.

Adobe Illustrator for wireframe, mockups and content design.

Images / Content

All images and content such as text used are all under my own ownership/rights or I have consent from rights owners.
Branding designs and all write-ups with the exception of some description sections under the 'events' page is all designed and written by myself.

Appendices

• Wireframes and Site-map
• Planning, Mockups and Design