Interactive Design: Project 3

on

21.6.2022 - 9.7.2022 (Week 13 - Week 15)
Chung Yi Ki / 0345014 / BDCM
Interactive Design
Project 3 / Microsite

Lecture

Lectures 1-7 were documented in Interactive Design: Exercises
Lecture 8 was documented in Interactive Design: Project 2

Instructions


Due to lack of time, Mr Shamsul has changed the final project brief to be a continuation of Project 1 and Project 2. We’ll be adding 4 other pages to our landing page that we created in Project 2 to create a working microsite using Adobe Dreamweaver or Microsoft Visual Studio Code and Bootstrap.


Layout of microsite pages
Fig 1.1 Contact page rough layout

Fig 1.2 Donation page rough layout

Fig 1.3 Variation of sea turtle importance page rough layout

Fig 1.4 Variation of sea turtle importance page rough layout

Fig 1.4 Variation of volunteer page rough layout

I first started with creating the layout for the other pages I planned for my microsite. The pages that I plan to include is a volunteer page, donation page, contact us page and a page explaining the importance of sea turtles. The layouts are created to look consistent with the landing page in mind. I also tried out different layout variations for some pages to see which works better. 

Fig 1.5 Refined layout of contact page

Fig 1.6 Refined layout of donation page

Fig 1.7 Refined layout of sea turtle importance page

Fig 1.8 Refined layout of volunteer page

After receiving feedbacks from Mr. Shamsul, I picked the suitable layout to use for the pages and typed out the content for each of the page. For the donation and volunteer page, the primary call to action button will lead the user to the respective organization’s donation and volunteering webpage. 
Process of creating the pages of the microsite
Fig 2.1 First attempt in creating the pages of the microsite

The navigation bar and footer codes are the same as the one in the landing page. Bootstrap cards are used for the sea turtle importance page and donation page, Bootstrap form is used for the contact page. The dark blue line in the volunteer page is created by customising the <hr> element in CSS. The image for the olive ridley sea turtle on the sea turtle importance page and the image for the last section in the volunteer page are also changed as the original ones aren't really suitable as background images.

Fig 2.2 Cut off last section image in donation page

Fig 2.3 Cut off header image in sea turtle importance page

Fig 2.4 Cut off background images in sea turtle importance page

Fig 2.5 Unaligned donation NGO information on smaller devices 

When customising the media queries code in CSS, I noticed that some pictures are cut off in smaller devices and the donation NGO information in the donation page isn’t centred too. I tried out using justify-content: center but it didn’t work. 

Fig 2.6 Navbar disappearing after scroll and large white space at the right

The navigation bar for the sea turtle importance page doesn’t stick at the top when scrolling down on small devices too, but reappears when scrolling up. (position: sticky is used) There’s a large white space at the right as well. 
Further process of creating the pages of the microsite


Fig 3.1 Fixed sticky navbar and removed white space

Fig 3.2 Codes from stackoverflow to fix the problems
Source: https://stackoverflow.com/questions/4617872/white-space-showing-up-on-right-side-of-page-when-background-image-should-extend

Firstly, for the navigation bar and white space problems in the sea turtles page, I went on Google to find a solution for the problem, in which I encounter this answer on a forum website called stackoverflow. I tried the codes on top of all my other CSS codes and they fixed the problems. The overflow-x: hidden tag is to hide any white space in the horizontal space, width:100% is to define the body of the webpage to confine to the full width of the device, and the height and width property set to 0 is to make sure the page takes up the whole dimension of the device. The property display: none is also used to remove the line break in the header paragraph. 

Fig 3.3 Resized background images for viewing on smaller devices

Fig 3.4 Aligned donation NGO information on smaller devices 

Fig 3.5 Media queries used to align the
donation NGO information in different screen sizes

As for the cut off pictures, I resized the pictures and inserted them in media queries where the resized pictures will be shown when the device changes. For the unaligned volunteer information on the volunteer page, I had to define different media queries to set the left margin at different screen widths so that it would be centered at all screen sizes.

Fig 3.6 Pop-up message when required
fields are not filled in and submit button is clicked

Fig 3.7 Pop-up message when the contact number
doesn't match the format stated in the placeholder text

Fig 3.8 Example code using pattern attribute to validate phone numbers from W3Schools
Source: https://www.w3schools.com/tags/att_input_type_tel.asp 

Fig 3.9 Codes for contact number input field on my contact page

I refined the function of the contact form more by adding the required tag for all input boxes so that the form won’t be submitted unless all the inputs are filled in. Following an example code about telephone input boxes from a website called W3Schools, I added the pattern tag into the contact number input codes so that users would have to follow the defined format in order to submit the form. 

Fig 3.10 Success pop-up message when a valid form is submitted

Fig 3.11 Example codes for success pop-up message from W3Schools
Source: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit


Fig 3.12 Codes that I used in my contact page for the pop-up message

Following another example code about form success submit pop-up message from W3Schools, I added the onsubmit=myFunction() code in my <form> tag and used the Javascript codes from the website (the codes within the <script> tag). I decided to add the pop-up message so that users would know that the form is working after the submit button is clicked. I also added placeholder text for the email and contact number input boxes so that users would know what format they should type in. 

Fig 3.13 All the images used in the microsite

Fig 3.14 All the sources for the pictures used in the microsite

Fig 3.15 HTML and CSS codes for all the pages in the microsite
(click the folder name to view the codes)

After checking that every webpage to make sure there’s no broken links or images, I uploaded my microsite file on Netlify for submission. 

Final Microsite


Feedbacks

Week 14
General feedback:  
Make sure to test your website before submission. Test all links from all pages, check if there's any broken links for your images

Reflection

This project was enjoyable for me as I got to try out some new elements such as customizing the <hr> element and creating a form with validation function and a pop-up message. After doing project 2, working with bootstrap codes and setting media queries is much easier than when I started. But there will always be some unexpected problems when working with codes so I had to take some time to search for solutions on the Internet. The trial and errors of coding is also the reason why it can be frustrating at times, but there’s a sense of accomplishment for me when I manage to solve those problems. 

Other than that, I also got to learn on creating layouts for other pages in my microsite that are consistent with my landing page but still have enough variation for them to not feel dull. When creating the static layout, I was worried that the pages might feel repetitive and dull, but I fond out that adding interactivity on the microsite pages, such as a parallax scrolling and button hover effects, make the pages more entertaining to scroll through. 

Comments

Post a Comment