On 1st September, I presented my current progress to Dr. Shawn, showing the current look of the Sayembara website, as well as its mobile layout. He commented that since there were now real life photos at the bottom of the website, it ruins the harmony of it all. So, he suggested that I should replace the cartoon-like graphics with real photos.
Just for the sake of comparison, he added that I could do two different pages, one that consists of only graphics, and another that consists of only photographs. To help with this, I downloaded a new WordPress plugin to make duplicating pages easier, instead of having to copy-paste everything manually.
He also said that I should remove the buttons for sharing the page, and the office location, since they were unnecessary.
Photo-Searching
The photographs I’ve chosen for the ‘judging’ and ‘registration’ part of the website, while serviceable, should preferably be replaced. To do this task, I decided to go on the Facebook page that Dr. Shawn provided me, and listed down the albums that have quality photos that could be used for the website. I originally did this simply in my Notepad application, but as I looked through a lot of albums and considered a lot of photos to be potentially useful, I switched to Excel instead. That way, I could simply click on a cell and be directed to the specific Facebook album. I could even color the cells for the albums in which I’ve already checked and selected some photos from.
This unexpectedly took quite a bit of time—since there were 58 albums I listed that had nice photographs. I have yet to choose the proper photos I could potentially use for the version of the website that had only real photos, so hopefully I could settle that next week.
As for the other version—the one that didn’t have real photos, I have found some on Freepik that could be used. Other than that, I also edited the arrows for the flowchart section to look better on mobile, removed the buttons and the office location, as well as changed the mobile layout to be a bit better.
A New Web Development Trick
While showcasing the mobile layout for the website, Dr. Shawn showed me a way to make responsive layout development easier. All I had to do was toggle the device toolbar when I pressed CTRL + SHIFT + I. I could even view it on a lot of different mobile devices!
Before this, I struggled with knowing how it looked like on a phone or a tablet, as how it looked in WordPress’ editor versus the actual website itself looks totally different. Therefore, learning this new trick was certainly helpful.
Reflections
Perhaps it was me being in a “Merdeka” mood, but I found myself to be a lot more inefficient and prone to procrastination this week, as my progress wasn’t all that much compared to the weeks before this. Hopefully I can be more driven next week to complete my tasks faster, as I love seeing the finished product I’ve created after hours of hard work.
Next Week’s Plans
I hope to finalize both versions of the website, and be able to choose which one is more attractive to visitors.
0 Comments