My website is similar to that of a food blog/newsletter, providing readers with various topics related to food such as podcasts, recipes, restaurant recommendations and a self-guided food tour. The type of structure implemented is hierarchical, where the top of the page usually states briefly what the current page is about, which is then followed by more detailed information as the user scrolls down the page.
I personally enjoy eating Italian cuisine and discovering new places to dine at especially since the pandemic began, therefore I satisfied my wanderlust with restaurants since I'm no longer able to travel overseas which I normally enjoy doing. Hence, I have been looking at food reviewers more frequently lately in search of delicious food locally, which has inspired me to make my own website surrounding the topic of food.
Two of my favourite food review blogs that inspired me are Eatbook and SETHLUI.com, where countless honest and informative reviews for places to dine at are published often.
Lengthy content such as the menu under Reviews and recipe details have been placed into collapsible containers, which make it easier for users to navigate the page espeically on mobile. Otherwise, time would be wasted scrolling down if it is not the type of content that they are looking for. It is also easier on the user's eyes as the text will not clutter the page at first sight.
The navigation bar is removed and instead replaced with a burger menu, making it easier for users with smaller screen resolutions to navigate the pages. In smaller screen resolutions, it may not be wide enough to contain all the buttons in the navigation bar and may make it hard to press due to the smaller size of the buttons, hence a burger menu makes it easier by vertically stacking the buttons and providing users with an option to show and hide the menu so that the page content is not obstructued.
The website is responsive to various screen sizes using media queries. This provides accessibility to all devices so that content will be loaded properly according to their needs.
Embedded maps are provided in the Tour page with waypoints of the stops so that users can conveniently refer to it to navigate their way while embarking on the self-guided tour.
Menu consisting of the available items at the cafe is provided in the review page so that users do not need to search online and can easily see if anything appeals to them.
Embedded podcasts are provided on the podcast page so that users do not need to waste time being redirected or change to the Spotify app in order to listen to the podcast.
I had to learn how to use the burger menu with the help of W3Schools, and adapted the code to my website according to my needs.
I learned how to create collapsible content also with the help of W3Schools, however there were some minor inconveniences such as the content not fitting into the collapsible container, therefore I had to do troubleshooting myself and make it suited to my needs.
I learnt how to use jQuery effects using W3Schools to create the sliding show/hide animation for "show more/less articles" in the food page. It would have been a lot of work to do it with pure HTML, CSS and Javascript but jQuery made it easily accomplishable with a few lines of code.
I think the aesthetics and choice of colors makes the website look much more sophisticated and appealing. The sliding animations for collapsible content will also make the interface feel more interactive and smooth to users.
I feel that the Recipes website could be further improved with a filter/sort function to make it easier for users to search for recipes depending on what they feel like making or arrange the recipes according to time/cost to make it.
I also think that the comment pop-up under Recipes can be replaced with a text box built into the .post-interactions area so that it is much easier to utilise on mobile.
If given another opportunity, I would certainly like to learn and implement these changes, which are key elements for a user-friendly website.
Content was used from these sources:
https://www.w3schools.com/default.asp
https://google-map-generator.com/
https://www.budgetbytes.com/parmesan-roasted-potatoes/
https://www.budgetbytes.com/mini-pumpkin-pies/
https://sethlui.com/1-atico-singapore/
https://lavosingapore.com/gallery/
https://www.8days.sg/eatanddrink/hawkerfood/1-michelin-starred-hill-st-tai-hwa-pork-noodle-has-new-preorder-15504736 https://danielfooddiary.com/2019/03/07/ahheng
https://the.fat.guide/singapore/eat/tiong-shian-porridge-centre/
