Initially, I was going for a regular site with a red and black colour style. I was aiming for a regular layout with the logo and navigation bar on top of the page. Underneath, I had a 3 column layout of left list, a huge centre video and a right list, followed underneath by a body section, followed by a footer.
I quickly ran into problems with this when I tried the site on other screen formats as my design remained fixed and out of screen.

Image source: www.rocnation.com

From my findings I discovered it was best to work more on the left in order for content to be immediately visible on smart devices, so I restructured the layout. I then went on experimenting with different positions for the homepage contents.

I tested this new layout on my Xperia ray mobile phone, it looked better so I proceeded to working with this format on other pages. I used the"make this item appear on all pages" tool to transfer my layout to other pages. Then I ran into troubles with the footer column as follows; each time I made adjustments to it on another page, it would also apply to the home page and other pages containing it.
My initial aim was for a site where it's div fields resized vertically according to their contents but I found out this wouldn't be possible on HOTGLUE platform as its div settings were either set to be static.

I had to get rid of the footer in this new layout. This now allowed my page contents flow downwards, as can be seen on many blog sites.
In the process of doing all the previous re-positioning, I now had a large empty space on the right that was easily seen on larger screen sizes.
I tried filling this out with different background images and colors but wasn't quite getting the effect I desired.
So I decided on going with a black background to act as negative space and to make the emptiness less obvious.

At this point, I started having a clear idea of the direction I was going and how to get it implemented on HOTGLUE. I then sought design references from a similar site, www.rocnation.com and learnt how they made their elements and design work. Their site layout gave me a lot of inspiration for mine, like getting rid of a top navigation bar and having it on the left, as I had in a previous layout.
It also gave me an idea on how to structure my contents to flow downwards as theirs also did the same.

From www.rocnation.com, I also had a clear idea for the color scheme i.e on how to use different shades of black to have a stylish monochrome design. I was doing this before but wasn't too sure on what to do so this really helped.
I tested having content fields stretch from end to end like theirs but with the help of Isobel Cowen, found it could result into a problem in the future. The problem was, as my navigation list was on the left, if I wanted to add more content to it, I would have to manually push all content fields on all pages downwards, courtesy of HOTGLUE's inflexible nature. So it was best to have them give way for the navigation list to grow downwards.

Initial 3 column layout with a top header and navigation bar

Here I moved the contents intended for the right column to the left column

I further experimented with having the video on the left small page links on the footer, which would have been difficult to tap on touch screens

I tried filling up the background with a grey metallic image...

tried with a polished wooden image...

and came to the conclusion that it worked better with a black background

From these new positions, I had an idea for a new layout so I made a rough sketch of it

www.rocnation.com with the navigation bar positioned left and a black monochrome color scheme

redzone.hotglue.me with the "WELCOME" content field stretched from end to end, clearly blocking the expansion of the navigation bar

redzone.hotglue.me with the "WELCOME" content field and image resized away from the nav. bar. The nav bar contains more links now and can even expand downwards without any obstruction

Now I had gotten the most ideal layout that works well on smart devices and PC screens, it was time to fine tune. I then used the grid to space out as follows;

(From left to right)
3 blocks for the width of the navigation bar,
1 empty block of columns between the navigation and contents,
12 blocks for the width of content and
3 blocks for the remaining width to the right

Diagram showing the grid spacing; 3 blocks for the nav. bar, 1 empty space, 12 for content and 3 for remaining right

With the grid I was able to neatly organize my site and provide the right amount of negative space between contents for a viewer to rest their eyes.
Now satisfied, I then copied this design layout and used ti for the rest of my pages.

My HOTGLUE Testing worksheet showing the various problems I ran into on different platforms and screen sizes.