Self Initiated: Java Script (Off Canvas Navigation)

For further implementation of java script into the IVY Infant Clothier website, I added an off canvas navigation with animation. After doing some research into the off canvas navigation I decided to go forth and add one to the website, mainly because it is in within modern web trends, and is also more user friendly on touch screen devices such as smart phones and tablets, and also saves room on the screen.

HTML

offcanvasnav

Here is the HTML code for the off canvas navigation, just the same as the sticky navigation the off canvas must be outside the main container of the website, mainly because this one needs to stick  to the screen as well.

There are two main containers within this process of using an off canvas menu:

  • Container for the menu (menu-wrap)
    The main container which includes all of the links to the pages, and is the section that slides out once the ‘ham burger button’ is activated.
  • Container to wrap all of the content together
    The container which wraps around the site, but is hidden until the button is selected. this puts an overlay over the full page, and allows for the menu to scroll freely within this container.

And then underneath the code that creates the actual menu, is the code for the close and open buttons of the off canvas, these are very important allowing the user to open and close the actual menu.

CSS

offcanvascss

Here is the CSS for the off canvas menu itself, (the section that appears once the ham burger button is activated), making sure that I had implemented the correct ‘z-index’ so that the menu move forward in front of the rest of the content, and then setting the position to ‘fixed’ to that the menu scrolls with the user, as they go down the page.

Also implementing the correct ‘web-kit’ so that this function works across each different browser, I also set the height to ‘100%’ so that this menu fits the height of each device screen that is used on.

JAVA SCRIPT

javascriptoff

Here is a gif of the off-canvas navigation working:

offcanvas.gif

Self Initiated: Java Script “Sticky Navigation”

One of the key learning curves for this project was the use of ‘Java script’, this is an area I am very interested in, and wanted to implement this into the ‘IVY Infant Clothier’ website. One thing I wanted to do which is discussed within the content plan, is that I wanted to create a sticky navigation that faded in when scrolling down, and then faded back out when scrolling back up the page.

I began by creating a secondary navigation, separate from the one located on the top of the hero section. This secondary navigation had to be separate from the main wrapper that goes around the full website, mainly because it may conflict with the css rules implemented for the sticky nav.

HTML

stickynav

As you can see in this code taken from the ‘index.html’ file, that this navigation is set within 1 container named ‘main-nav’, and inside the container are standard anchor elements containing the links for each page. And also includes a smaller ‘png’ file of the main logo of IVY Infant Clothier, and then also a div which contains the full navigation but is only used for the Foundation ‘show-for-large’ attribute, which only makes this navigation appear on large screens.

Notice on the end of this containing div is another attribute titled ‘hideme’, this attribute is linked into a java script file which allows for this container, to fade.

CSS

navscrolly

  • .main-nav-scrolled
    Here is the CSS code that has styled the navigation, notice on the selector ‘.main-nav-scrolled’ I have assigned the div as ‘position: fixed;’ this means that on scroll the navigation will stick to the screen.
  • .main-nav
    I have assigned for this div, considering its the main container that goes around the navigation a ‘z-index’ of 9000 which allows the navigation to move forward in front of the other content on the page.

Java Script

stickyjava

Here is the java script file for the sticky navigation, as you can see on the bottom section the container ‘main-nav’ is selected in two separate sections, one has a rule that say’s ‘.fadein’ and the other ‘.fadeout’, this basically means that on scroll ‘main-nav’ fades in and out. Above that section you can change when the nav fades in, dependent on the amount of pixels entered into the javascript. You can have it so when the user scrolls, it can take longer to fade in dependent on how many pixels the user has scrolled.

Here is a gif demonstrating the sticky navigation working:

scrollnav.gif

Notice how it fades in when the user scrolls down, and then fades back out when the user gets back to the top of the page.

(This navigation will only be used on large screens)

 

Self Initiated: Implementing Video Background

Now that I had created a structure for my website, I decided to look into implementing the video background to my website. One of the main things I wanted to do with this background, is make it full screen for when the user first enters into the website so it engulfs the screen of the users device, and also wanted the video background to stick the screen and follow the user all the way down to the footer.

First of all I had to implement my video into the ‘index.html’ file, making sure that the video was not contained within the main container that wraps itself around the entirety of the website, this stops any css rules applied to the video container to conflict with the main wrappers css rules.

HTML

Here is the code for the video, taken from the ‘index.html’ file:

videobackground

This piece of code is made up of two different containers, ‘videobackground’ and ‘fullscreen-bg’, within both of these containers is the actual video taken from the vids folder within the file tree.

  • videobackground container
    This container will allow for the video to be fixed to the screen, and will also set the height and width through css.
  • fullscreen-bg
    this is the container is linked directly to the video, and it will allow for the css to make the video fill the outer container of ‘videobackground’.

CSS

videobackground2

Then through the css the video is set to 100% of the screen size it is being viewed on, and also ‘web-kit’ is added to the css code, to make the video fit the same across each different browser.

Here is a gif of my video background working on desktop:

ivybackground.gif

 

 

Does it work?

After testing the video background a cross the browsers it worked, it was responsive and also fixed to the screen. I then went onto test the video background on a tablet device, and noticed that the video background did not work.

And later discovered that the ‘autoplay’ attribute inserted into the html tag for the video, is not supported on tablet or mobile, making the video not work. I looked into different techniques of how I could get the video to work cross device, but there is no fix for this.

I later discovered that you can set a poster image to replace the video on tablet or mobile, but this could also be replaced with a gif which would still give off the effect of the video.

 

Self Initiated: Start Of Development

Now that I had a better understanding of a ‘frame work’ works, I decided to begin development of the website. First of all I needed a domain for IVY Infant Clothier, so I went onto my domain hosting website ‘Godaddy’.

godaddy

Luckily the domain I wanted was free, so I managed to get

http://www.ivyinfantclothier.com

I also purchased 5 years worth of use, because this website has a long shelf life and is a product that will be used for a long time, here is a screenshot from my cpanel of the domain:

domain


 

 Start Of Development

To begin with I first implemented the foundation documents into the file tree of my website, and put the files up onto the server. Here is a screenshot of my file tree:

filetree

Containing all of my foundation documents, including folders for:

  • pics
    Including any pictures such as (logos, buttons, ect.)
  • Dresspics
    Including all of the pictures of Louisa’s dresses
  • Icons
    Including all of the icons such as social networking icons
  • Vids
    Includes my hero video
  • Webfonts
    Includes my purchased fonts, with the licensing I purchased with them

It is good practice to keep your files organised and labeled, it makes it easier when trying to find files you need to edit or implement into your website. Now that I had my file structure in place it was time to start implementing the frame work such as the rows and columns into my ‘index.html’ file.

First of all I had to link all of my documents within the file tree, into the head of my index file, such as the foundation documents and any other files such as style sheets.

head

My next step was to begin creating the structure of the website, implementing containers using relevant names for the classes, for each sections of the website. Once I had done this I then went onto working on my main body, and started adding my rows of columns for the pictures of the new in section.

rowscolumns

I had to make sure that all of my images where of the correct file format ‘png’ to help with loading time, and also that all of the images where of the same size. Once I had done this I began entering the images into the columns, and setting the amount of columns each image would take up in each row, in this case I set the column sizes to Large 4, this means that for each row, there will be three images each image is assigned the large 4, because only 12 columns can go into each row.

So these columns I have assigned in the screen shot only show on large screens, so my next step was to copy and paste this section and implement it bellow:

row2

These are the rows for medium screens only ‘tablet devices’, and notice I have set the size of the columns of each picture to medium-6 this means that in each row there are only two images, changing the structure of the layout of images. I then carried out the same process for small screens ‘smart phone’.

When the screen is downsized from large to small the content is now responsive, and flows with the resize of screen, here is a gif I created showing how the images respond to the size of the screen and change in structure:

responsiveivy.gif

 

Self Initiated: Using A Frame Work

framework

One of the key learning curves for me, was to learn how to use a frame work and then develope a website using a frame work. Before delving into this section, I believe it is key that I explain exactly what a frame work is. 

“A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.”

a frame work is a package of different files such as (html, css, javascript) this files create the foundations of a website, allowing a web designer to use them as a structure for there website.

The use of a frame work supports the development of a website, and cover different aspects that make a website, making it easier for your website to be:

  • Respond to different device screen sizes
  • Animations for buttons, and other areas
  • Reusable code, and shortcuts

 

Resource: A WWW ARDS

Now that I had a great understanding of what a frame work does, it was now time for me to begin looking into different frame works, and then playing around with them to gain an understanding of how the code functions.

logo-foundation_by_zurb

After looking through different frame works, I came to the conclusion that ‘Foundation Zurb’ is perfect for exactly what I want to do with this website. One of the first things I did before actually implementing a frame work into the website, I decided to have a little play around with the code, and watch some tutorial’s to develop an understanding of how to use this frame work. First of all I went onto the Foundation Zurb website, and downloaded the documents.

zurb1.png

Once I had downloaded the documents, I had a look in the folder to see what files where contained inside.

zurb2.png

Within the folder are two different folders, and a file:

  • CSS Folder
    Containing the style sheets for the framework, including the ‘app.css’ which is the only style sheet that should be edited via the developer, this file allows the developer to over ride elements of the other two foundation style sheets.
  • JS Folder
    This folder includes all of the javascript, again with an ‘app.js’ file, allowing the developer to add further javascript to the framework.
  • Index.html
    This is the html file which is the website itself, and is connected to both the css files and the java script files.

(These files must be contained within your websites files tree)

To Further inspect I opened up the html file in a browser to see exactly what all of these files together created.

foundationfile.png

Here is what comes up when you open the file, giving an explanation of all of the different things you can achieve via using this frame work, such as the buttons and the creation of forms.

I then went onto opening up the file within dream weaver to have a closer look at the code, to see how this all works.

gridsystem

Within the actual file, you can see from this screen shot that each section of the website is built up of:

  • Rows
    The row is a div that goes horizontal across the website, and contains the columns.
  • Columns
    The column is a div that goes vertical on the website, keeping in mind only 12 columns are permitted to be used within a row. The content you want to enter into a row, goes within a column.

Here’s a closer look, of a column:

zurb3

As you can see within each column, are attributes that set the size of the column:

  • Large
    for large screen such as desktop or laptop devices
  • Medium
    for tablet devices
  • Small
    for mobile devices such as smart phones

Setting the unit next to the size attribute such as “large-6” means that the content within that column will take up the room of 6 columns within that row. The reasoning behind using a grid system, is because it makes its easier for the developer when taking into consideration responsive design.

This means that the developer does not need to enter media queries for each element, to make them resize when the website is used on a device with a smaller screen size, instead it saves time and creates a more fluid development process using shortcuts.

Here is a gif I have captured that shows off the use of a foundation framework, in relation to the responsive design:

responsive.gif

 

Self Initiated: Approval to go a head with Development

louisaimg

After finishing the design stage of the website, and implementing certain aspects that I gained inspiration from and also from what I discovered the client needed from the website.

I sent the client my designs to see what they thought, and to also get approval to move forward with the development of the product.

Here is the response from the client:

 

louisa

 

She was very happy with the work I had already done, so this gave me the approval to move forward and begin developing the website.

Self Initiated: Creating A background Video

One very important aspect of this website, that will bring out the whole emotional aspect of the website is the video background that will appear on the hero section of the home page, and the contact footer on the other pages.

My first step was to research into how to create a video that would function at its best as a video background, and also areas I should keep in mind to make this video background fit in with modern web trends, and the big does and don’ts.

Key Pointers

Here is a list of things I came across, to deffinitly consider for a video background on a website:

  • Make sure the video is muted
    People will often be playing music whilst browsing the internet, so they do not want it to be interrupted when entering into a website. Usually when there is a video, the user activates the video themselves choosing to play it or not.
  • Browser Compatibility
    Making sure your video is compatible in each browser is very important, some do not support certain file types of code that has been used to implement the video background.
  • Simple Video With Contrast
    Making sure that the video contrast to other page elements such as text, when using a darker video make sure the content is of lighter colours, but when using a lighter video make sure the content is darker in colour.
  • Make Sure The video Reflects the Emotion Of Your Website
    Another important aspect of implementing a video background is that it really does need to reflect the emotion of your website, it can’t just be a video background that has no meaning and does not tell the user anything about the personaltiy of the company.

Resource: Envatomarket

Inspiration

After creating an understanding of what I must take into consideration before creating my video background I looked into different websites to gain inspiration from, to see how I could use my video background on my website.

I came across a website called Whiteroom, one thing I really like about the video background on this page, is how it follows the user down the page in the background, and changes colour on the different sections depending on the colour overlay of that page, here is a gif I captured to demonstrate this.

video.gif

I really like this style of video background, and fits in with my idea of using the same video for the hero section of the website for the footer as well, it means that I don’t have to implement the video into two separate containers.

Now that I had a good idea of what I needed I decided to begin finding some footage for my video background, relating to the key points stated earlier. I decided to ask Louisa for some video’s of IVY, but the video must fit my design.

And as stated above the video must be a ‘simple video with contrast’ the the page content.

The Video

ivy4

Here is the video that Louisa sent over to me, I believe it represents emotional aspects of the company, this video reflects:

  • Innocence
  • Small and sweet
  • Personal

Also its a short clip, which almost looks like a loop which I believe gives off quite a nice effect, and that also in the video is IVY, she is the centre piece of the company and what the company is based around, so I believe this video is perfect for the website.

Video Background Best Practices

On a website called ‘The New Code’ I discovered that, a video background must be compressed to ideally bellow 5mb, This will make loading times faster. So I decided to load the footage into premier pro, to try and compress the video to a file size bellow 5mb.

mb

As you can see in this screen shot the video has an estimated file size of ’18 MB’ I went onto adjusting some of the properties of the video to lower the file size, and compress the video.

bitrate

I adjusted the bitrate of the video, which in turn lowered the file size, I then rendered the file and checked the footage to see if it ran smoothly and still looked okay which it did, here is a screen shot of the file size now:

mb2

Finished

Now that I had a video that fit the purpose of the website, set to the correct file size it was ready for when I come to implementing it into the website.

Resource: The New Code