Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

Unit 5 - Javascript Ideas

  • Public
By Hassan Jasim in the group COMP 266 August 24, 2022 - 10:13pm

Here, I have focused on quality of the code over quantity, I have only implemented features that are useful to the personas I created in unit 1 and haven’t implemented gimmicky features that don’t serve the personas any use. I would like to implement all 4 ideas as I have some extra time on my hand.


Dark Mode (Enhanced)


This will be an elegant way to implement dark mode into the website as I will be using local storage to keep track of the user’s selection even after they have reloaded the page and between website pages. As each persona user reads through the website, their eyes might get fatigued from black text on white backgrounds, so including the ability to change to dark mode for ease of reading is critical here.


Email Verification


            This feature is key when sending emails in the next unit as we need the email that the user entered to be valid. This will be our only way to reach back out to the user after they submit the form. All personas will need to enter a valid email, this ensure that they will be reachable, and messages are not anonymous. To achieve this, we can use some simple regular expression to validate the email.


Preload Images


            This function will preload all the images that the website will use as soon as the user accesses the landing page. While thinking about scalability of the site and the future projects that we are going to develop, I realized that images are a key part of it as it adds “life” to the page. Having a lot of images could severely impact website performance and would require all the personas to have high speed connections for a smooth experience. Especially with persona 3, small business owners may not have access to the fastest internet available, so creating a website that loads in sub 100ms time is key. Preloading these images will create a smoother experience for everyone.


Dynamic Card Movement on The Page


Adding some movement to a page as it loads gives the illusion that the website is dynamic. This keeps our website lively and interesting. I’ve always gravitated to websites with unique features such as a new take on parallax scrolling or a cool JS or CSS feature. Having some movement on the page has been shown to increase user retention and time spent on the page. In this function I will move the project tiles into place after some time after the page loads.


Landing Page link:


These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.