#heromake

[calumdixon]

CalumDixon/Heroes-Villains

Contribute to CalumDixon/Heroes-Villains development by creating an account on GitHub.

Heroes & Villains - Finished Website Link

[calumdixon]

Heroes & Villains - Image Changes

I’ve decided to go back and modify my images a bit more because I wasn’t happy with them as they were. The first and biggest change I made was that I significantly reduced my file size, before my images were pngs that took up around 1-2Mb, now I’ve managed to reduce their file down to roughly 100-200Kb. This is going to let users load my site much faster making it more accessible to those with slow bandwidth speeds.

I modified the the images borders by using a new brush to get the bleeding ink effect that I wanted. The brush I used before looked too soft, in contrast the one I’m using now gives the images a more defined edge that still looks like bleed ink. I also made some other minor changes like increasing the contrast of my images using a curves layer and tweaking my reticulation and halftone filters to make the images better suit this higher contrast style.

[calumdixon]

Heroes & Villains - Site Acting Responsively 

Now that I’ve made every aspect of my site responsive I thought it would be a good idea to showcase it through a video rather than images. I think it makes it easier to understand how the content changes to adapt to new viewports when you see the change happen, rather than two results as images. 

One of the challenges when facing having to change content for new screens was my menu, unlike the rest of the site the menu’s contents should always fit within a single viewport, so adapting the content of the menu to fit small viewports such as mobile landscape was a tough ask. The solution was to work with the margins and font sizes like any other media query but I also then removed the chapter number subheading on these landscape viewports because the information isn’t essential, so removing it doesn’t negatively impact the experience. Removing these opened up a lot of needed room on the screen for me to use as before it was basically impossible to include each menu item without lowering font sizes to unusable sizes.

One thing that I also changed since my last update was that I went back to both my pre-loader and chapter menu and rebuild their layout using flexbox. Before I was using margins to position my content and this worked but I thought that it could work much better.In situations such as when using a macbook the viewport height is very different depending on whether or not the browser is in fullscreen. In situations like this media queries are needed for both inside and outside of fullscreen. Using Flexbox allowed me to solve problems like these as instead of using margins to vertically center the content it instead using Justify Content:Center and Flex Direction: Column. This meant that the content would responsively adapt to the viewport height allowing me to cut out a lot of these unneeded media queries.

[calumdixon]

Heroes & Villains - Website Preloader 

One of the things I worked on in the prototype was creating a preloader, the reason I decided to include a preloader for two reasons, I first decided to include it as a way of introducing the user to the web experience rather than just blasting them with a page that is filled with an insane amount of text, this preloader allows them to understand quickly that the site they are entering is meant to be a newspaper. The second reason is because a preloader gives the page the opportunity to completely load the site content before seeing it.

The preloader is built up of three different css animations, the first being an opacity changer than makes the preloader content fade in and out of the sight. The second being another opacity changer that is applied the preloader’s container so that it can fade away completely revealing the content. The reason for using two separate animations is so that when the preloading bar and type can be removed before the white background as when done at the same time the two text layers can be seen on top of each and it can look unpleasant and distracting. The third animation is an animation applied to the black bar of the loading bar, the animation transforms the width of the bar so that it can move from 0% to 100%.

[calumdixon]

Heroes & Villains - Finished Chapter Menu

Now that I’ve finished the CSS and JS for my chapter menu I thought it would be a good idea to show off the finished menu in action.

[calumdixon]

Heroes & Villains - JavaScript for Chapter Menu & Focus States 

When creating my chapter menu one of the bigger obstacles for me was creating the JavaScript because overall I’m still very inexperienced with JavaScript. The JavaScript I created is there to serve multiple purposes.

The first is for opening and closing my chapter menu when clicking on the my open menu button, to achieve this I gave my chapter menu a class in my css which I could then toggle on and off when clicking on the button. 

The second is to create the focus states when clicking on a chapter link. This works by applying JavaScript to the class on each menu link and this targets the content outside of each intended focus state and sets its opacity to 0.25 so that the content intended to be focused on stands out much more making it easier to focus on. In a similar vein, the container also has JS applied to so that when clicked it reverses these focus changes so that content that was previously faded becomes normal again. 

Lastly, I used a JS to create a smoothscroll effect to each article. This was setup so that when clicking on a chapter menu link the smoothscroll script will automatically move the user to the content they are looking for. 

[calumdixon]

Heroes & Villains - Sherlock Site Made Responsive 

Now that I have coded the site for desktop and planned out how I was going to make the 6 column grid responsive, I needed to actually set to work making the content responsive. To make it responsive I made sure I build the grid using css grid so that I could make the columns take up different fractions of the screen, so while previously each column took up a 1/6 of the container I could easier to a 1/3, after 3 columns the next set of three then automatically fall underneath the ones that came before. This method can easily be applied for the other different breakpoints as well. 

[calumdixon]

Heroes & Villains - Mockup 2 to Web

After having created a new and improved design for my Heroes and Villains I set to work recreating it in the web browser. I started by creating the base 6 column layout which I would later work on making responsive by having the 6 column layout break down into a 3 column layout then a 2 column layout and lastly a 1 column layout for mobile.

The design remains consistent with the Adobe XD mockup I created so that everything resembles an old newspaper from 1891. This is accomplished by using a lot of the same typographic techniques used during that time such as making sure to center all the headings and subheadings or by including indents for every paragraph after the first.