Interactive Design: Project 2

on

7.6.2022 - 18.6.2022 (Week 11 - Week 12)
Chung Yi Ki / 0345014 / BDCM
Interactive Design
Project 2 / Working Landing Page

Lecture

Week 12 / Bootstrap demonstration

This week, we are given a live demonstration on how to use Bootstrap by Mr. Shamsul. We used the v4.4 of Bootstrap documentation for this demonstration: https://getbootstrap.com/docs/4.4/getting-started/introduction/

Linking HTML to Bootstrap

Fig 1.1 Bootstrap starter template

Since Bootstrap is an external code and style sheet, it has to be linked in our HTML using the <link> tag so that Bootstrap elements can be used. The starter template in Bootstrap website can be copied and pasted on our HTML. Though, the Javascript links should be at the very bottom of our HTML. 

Navigation bar

Fig 1.2 Bootstrap navigation bar template

Bootstrap also has a navigation bar with clickable links and search bar that can be copied and pasted on our HTML as well. To make the navigation bar stickied on top, we can add sticky-top to the classes in the <nav> tag. To make the navigation bar fixed on top, fixed-top can be added instead. 

Carousel 

Fig 1.3 Bootstrap carousel template

Bootstrap also has various carousel template, ranging from a carousel with only picture slides to carousel with controls, indicators and captions. Though, Bootstrap only has one type of template for its carousels which is a full width screen template. For this demonstration, we used a carousel with controls and indicators template. The template codes can also be copied and pasted in our HTML. 

Cards

Fig 1.4 Bootstrap card template

Fig 1.5 Using the card template in multiple columns

Bootstrap also has various card templates ready to be copied and pasted to use in HTML. For this demonstration, we used a template which shows one card with an image and button. Mr. Shamsul showed us how to use this one card template to make a row with 3 columns of card by putting the cards in a row div and copy and pasting the codes for the card in each col div. The margin and padding value can be changed with the shorthand "m" for margin and "p" for padding. The shorthand is Bootstrap shorthand and can be directly typed in the classes of the respective div.

Fig 1.6 Example of customised demonstration using CSS

All Bootstrap codes can be customised using our own CSS style sheet. For example, the background colour of the webpage and navigation bar can be changed, the style and colour of the buttons can be changed and the font used can be changed as well. But remember to link the fonts from Google Fonts to change the fonts. We would only require to find the class name and indicate it in CSS to customise the appearance. The class name can be found by looking at the HTML or by using the inspect function in the web browser. 

Instructions


This project is a continuation of our project 1, where we’ll be creating a working prototype of our landing page using Adobe Dreamweaver or Microsoft Visual Studio Code and Bootstrap.


Process of creating the working prototype of landing page

Fig 1.1 First attempt in creating the working landing page

I used Adobe Dreamweaver to code my website based on my Project 1 prototype. As like always, I started with typing down the html codes before moving on to CSS. I followed the bootstrap demonstration that Mr. Shamsul did in class and linked the Bootstrap starter template and enclosed my content in a container-fluid div with 0 margins and paddings. I used the codes for Bootstrap cards for the threats section, Bootstrap buttons for all the buttons, Bootstrap navigation bar and Bootstrap grids for the conservation efforts section. For the other sections, I mainly customized them in CSS and add some Bootstrap classes where needed. I also customized the Bootstrap elements in CSS as well where necessary so that it would fit the look of my prototype. For the point sizes, all body text are in the same point size except for the ones in the header, the balance ecosystem section and the bullet points for the conservation efforts section. This is because since all of them are more important than the other body text content near them, they would need a bigger size to create hierarchy. 

Fig 1.2 How stickied on top navbar would look like for the landing page

Fig 1.3 Effect of putting the navbar inside the same div as the header section

Although I planned to make my navigation bar sticky-top in my Project 1, I changed it to fixed-top as I found that the navigation bar would look distracting if it’s stickied on top as it would overlay on the other words on the landing page. I also found that if I want to overlay it on my header div, it would either become fixed at the top or stickied on top but disappears at the end of the header div. 

Fig 1.5 Thin white line between conservation
efforts section and balanced ecosystem section

Fig 1.6 The third column sticking to the first column when stacked in the threats section

Fig 1.4 Header background image being cut off in small screen devices

After customizing my landing page in CSS, I added media queries so that the website would look decent in other devices. I changed the navigation bar to be sticky-top and gave a background colour for it as I thought it would work better for smaller screens. There are some problems I faced is that the last column for the threats section would stick with the column above it for the Nest Hub device and some parts of the images will be cut off for smaller devices. There’s also a very thin white line between the conservation efforts section and the balance ecosystem section when viewed at a normal laptop screen. 

Further process of creating the working prototype of landing page

Fig 2.1 Changing the "read more" button at the same line with the source statement

Fig 2.2 Column width at 100% and resized images viewed on Nest Hub device


Fig 2.3 Very slight misalignment between the conservation efforts section and balanced ecosystem section at the far right side

After receiving feedback from Mr. Shamsul, I changed the “read more” button in the threats section to be at the side so that the content would still be aligned but there won’t be too much white space. was suggested to either apply a top margin value for the last column of the threats section or apply width: 100% for all the columns. As for the thin white line, Mr. Shamsul suggested me to use margin-top: -1px to remove it. For the threats section, after trying out adding top margin value, I decided to try out using width: 100% as I thought it would look better. I had to resize the images again and relink them in the media queries so that it would fit the size of the columns. For the thin white line, the margin-top: -1px worked though the right side of the balance ecosystem section is very slightly misaligned with the conservation efforts section. 

Fig 2.4 Screen recording of final working landing page

I later tried out creating a parallax effect for the header section and the balance ecosystem section so that it would give a bit more interactivity for the landing page. I used background-attachment: fixed and width: 100% for both sections, this also solved the issue of the slightly misalignment between the balance ecosystem section and the conservation efforts section. I also set background-position: bottom for the balance ecosystem section so that the effect would look more seamless, and resized the background image for that section so it is large enough to cover all the spaces. 

Fig 2.5 Images used in final working landing page

Fig 2.6 HTML codes for final working landing page

Fig 2.7 CSS codes for final working landing page

I also made the social icons in the footer to change colour on hover by exporting the icon images in the hover colour and link the image to show it on hover in CSS. using content: url (). To make all the links relate to the topic of my project, I created a Facebook page, Instagram page and email to link them to the social icons for the purpose of this project. Since the mouse cursor doesn’t change to a hand pointer before when hovering on clickable buttons and links, I applied cursor: pointer on all the clickable elements in CSS. I also resized the image for the columns in the threats section and the header image so user would be able to see at least some of the cut off parts in other devices. After that, I uploaded my landing page file on Netlify for submission. 

Final Working Landing Page


Feedbacks

Week 12
The source statement in the threats section would look better if it's centered or the sentence and the button is in one line. Applying mt-5 in HTML for the third column can be tried to create a gap between the stacked columns in the threats section. It's a good change of idea to make the navbar fixed at the top, since it would look distracting if it's sticky-top as it would overlay with the other words too, or set the column to width:100% so it spans across the entire page. Make sense to make the body text for the header and ecosystem section bigger as they are call to action messages.

Reflection

This project was challenging as I faced several problems when coding the landing page, and it is frustrating at times but I have to admit that despite getting frustrated, personally I did enjoy figuring out solutions to solve the problems. I found that coding involves a lot of trail and errors, and there's no one way to make something work, so if one solution doesn't work there's always another solution to try out. I also got to learn more about other CSS effects and how to use Bootstrap while doing this project, which I thought is going to be useful in the long run since it showed me some ways on how to do certain things more effectively. 

Though, I do wish we had more demonstration or explanation on how to use Bootstrap to create a landing page of our length as it would make our process much faster. I know that due to time constraint for our project timeline, we had to learn and find out solutions ourselves but it'd be nice if we have a clearer understanding on how Bootstrap works in creating a long webpage with a lot of columns and divs so that we'd have a better grasp on how to start our coding process. 

Comments

Post a Comment