Interactive Media Web Authoring Part 1 of 3 (Simple Website)

This is the first of 3 posts charting my progress through the module Interactive Media Web Authoring and will focus on the development of a basic website using NotePad++ to construct the site.


In planning this site I looked at a number of collections of portfolio sites. Of them all I probably found the most useful information on what makes a good basic portfolio site here. Some of the most common advice includes being visually well designed, only a selection of the designers work and have contact information easily available.

This website from a former student caught my attention for it’s simplicity & it’s style. It’s a great looking site that looks like it was made with WordPress, however while it seems to have a lot of the same styling it does not use WordPress. Great site though.

This site here has a lot of elements that are in the minamilist style which I have always liked. A lot of the effects are achieved using Javascript too which we covered in this module.

The work of the New York based photographer Satoshi has been a favorite of mine perhaps since I took up the study of photography and his website probably embodies everything I enjoy & aspire to in design. It mirrors his work in it’s simplicity and minimalism, it’s clean & bright, easy to navigate and it only has some of his best work on display. His earlier works of minimalist still life images will probably remain in my list of favorite works of all.

Part one of this module is to create a simple portfolio website to showcase my work online. We basic-html-1used a basic template and created the html code to lay each page out as desired. The first look at html dealt with laying out page structure into boxes in which we placed our content be it text or image.

These boxes of content are designed with the ability to float or respond in a manor specified by the html code. basic-html-1b


For instance, when the page is viewed on different devices the content will respond accordingly. So on a pc, the page would look as above in example 1, but when viewed on a mobile device all the content will resize & even stack on top of each other as specified by the html and look like the example 1b.


Next we looked at Java script & it’s uses within the website. Javascript can change the state or style of an element or even change the function of html as described in here in W3Schools

We used java script for a number of uses but started basic-html-2off by changing the size of text (Example right) , then by introducing a message box when arriving at the page before revealing the full page (Example Below) basic-html-3.




We then used javascript to construct a slideshow to showcase some of our work and placed it on basic-html-7a page within the new website. It enabled me to construct a gallery in a grid style that would enlarge when cliched on. Within the slideshow you can move from image to image with each one displaying an image name.

Here are some other examples of good uses of Javascript. This one is probably my favourite…by a mile.

I was able to style the website with my own branding, colour palette & Logo marks which were developed in the Advanced Typographic Design module. I used a minimum amount of branding as is recommended in my brand guidelines ( gra-brand-guidelines-march-2017) but did place a logo mark in the bottom right of each page & also a Favicon in the tab of each page.

This slideshow requires JavaScript.

Some of the issues I encountered along the way included getting the social media buttons to place where I wanted them. I wanted to float them to the right hand side of the footer but they insisted on sitting more to the centre. Also, when I tested the site on a mobile device they did not stack up evenly. Also, my brand mark which floated to the left was not sitting flush with the social media icons which gave the footer a very uneven & messy look. I managed to get it all good in the end though. The site was uploaded to Hostinger where I was able to set up a free hosting account and the website can now be found here.





One thought on “Interactive Media Web Authoring Part 1 of 3 (Simple Website)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s