CA 2 - Conclusion

This was my first experience with responsive design and after doing some research into the methods. I think I found the best methods that suit me. While they require some extra work with calculations, it is a lot more flexible and will work on any screen size. '

One area I would like to improve upon is javascript. It can do some really cool stuff , drop down menus / image sliders  and many more. While I have a good basic knowledge of the fundamentals from the programming class. I feel my code could be more efficient. I feel like I'm repeating the code over and over.

I do a lot of reading online about web design / development  and I find twitter to be the best source of good and up to date information. 

If you have any questions let me know,

Pete

CA 2 - Javascript

We had to include some javascript in the project. This was my first time implementing any in a project I have done. 

The first bit of javascript I used was to check what browser was being used. If it was IE I would alert warning the user that the site requires an up to date browser to see the images. SVG's



var browser = navigator.appName;    //set a variable called browser to store the browser details

if (browser == "Microsoft Internet Explorer") // if browser is IE run code
{
alert("Yo people still use Internet Explorer. Well I'm afraid this site uses some of the newest technologies availble and of course Internet Explorer doesnt support these. To see this site as I attened you to please use either 'Chrome / Safari or Firefox'  ");


}


I also included a simple rollover to display a div using jquery. I used this on every page for the social icons and also the timeline. 



$('#timeline-name').on('mouseenter',function(){

$('.timeline-desc').show();

});

When mouse leaves element hide the element selected. 

$('#timeline-name').on('mouseleave',function(){

$('.timeline-desc').hide();

});


My last bit of javascript/jQuery checks to see how far the user has scrolled down the page. If the scroll is greater then 2000px then the next button slides out. The else statement then hides this if the user scrolls less then 2000px


$(document).scroll(function(){


if($(document).scrollTop()>2000)
{

$('.portfolio-nav-inner').show("slow");

}
else{
$('.portfolio-nav-inner').hide("slow");
}

});

Responsive Video

Part of the brief was to include a video we had made edited ourselves. I filmed and edited a video for a DMPT CA. Because this was relevant to my "Make It Stop", site I included it in that page. I uploaded the video to youtube and embedded it. Problem was that it was an iFrame and they have to have a specific width and height to work. So responsive was going to be a problem, but I found a little beaut of a javascript file that does this automatically.

http://fitvidsjs.com 


This was simple to implement in the  code.  




$(document).ready(function(){

        // the container the video is in
        $(".big-image").fitVids();

  });


nice and easy . . . . .

CA 2 - Site elements part 2

Animate CSS

I wanted to use some css3 animations in the site. I came across this css library of cool animations already coded for you.  src

All you have to do is link the file and then give the element you want animated the class name of the animation. I gave my logo a bounce and drop in animation. I only used this on the homepage as I found the trick to using these animations is in moderation. I also gave the live link a bounce animation to bring the viewers attention to it. When the link is rolled over , I have jquery hide the tooltip.

the HTML : 



<div class="visit-bubble animated bounce">
       
         <p>Check out the live site</p>

</div>


the CSS : 


@-webkit-keyframes bounce {
0%,100% {-webkit-transform: translateY(0);}

60% {-webkit-transform: translateY(-5px);}
}

@-moz-keyframes bounce {
0%,100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-10px);}
60% {-moz-transform: translateY(-5px);}
}

@-o-keyframes bounce {
0%,100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-10px);}
60% {-o-transform: translateY(-5px);}
}
@keyframes bounce {
0%,100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}

.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
-webkit-animation-iteration-count: infinite;
}

I changed the amount it translates by 5px and also the iteration-count, it now plays forever. I added a bit of javascript so that when a user scrolls over the button the animation disappears. 

Font Awesome

For the about page I wanted a way of displaying my skill sets and interests. I came across font awesome src

I used the star ratings for my skill sets and the hearts for my interests. To get it to work you just link the CSS sheet and include the fonts. 

HTML

<p>CSS/SASS <i class="icon-star-half"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></p>

I altered the colour to match my colour scheme. 

CA 2 - Code

Once my designs were finalised I start to code up the HTML and CSS. 

Before diving straight into the code I set up a few snippets to make the HTML / CSS easier.  

In my last project I mentioned that when padding is applied to a div it affects the width and height. This can very problematic especially when working with percentages. Paul Irish, a chrome developer, came up with a work around for this.  src

/* apply a natural box layout model to all elements */ * { 

-moz-box-sizing: border-box; 

-webkit-box-sizing: border-box;

box-sizing: border-box; }

When this is applied, padding can be added without affecting a div. This is extremely useful  and I use this in every web project I do. It is supported by most modern browsers up to IE8. 

My site is designed from scratch so I wanted to get rid of the browser default styling. I used a CSS reset src , to reset these. 

When a div is floated it is important to clear the floats as the documents box model is broken to allow for the floated div. If the div is not floated weird sh*t happens. In my last project I set up a clear class that cleared the floats. I did a bit of research and found out that the HTML / CSS purists considered this bad practise as it was not semantic (describes the content) and they discouraged using empty DIV's. I used the clearfix method instead, an additional div is not needed. Its hard to explain but an additional class is added to the parent DIV of the floated element. src

Another thing I did before starting to code was define the font-size of the text. 

body{

font-size: 100%;

}  /* sets 1em to 16px */

This sets the default font-size to 16px. I did some research on responsive typography and found out using the em value was the best way. I previously used px in every project. It is quite confusing but the method is simply. 16px = 1em so 32px = 2em. This may sound tough but its major advantage is that you don't need to adjust the font-size throughout the media queries. If you simply adjust the body{ font-size: 150%; }  1em = 24px. This article explains it a lot better then I can.  Problem tho is I already had coded up my site before I read this article so I set the values in the media queries.

Because of the screen resolution with mobile devices and tablets being so high I used SVG ( scalable vector graphics) so they would remain crisp. Only thing is that its browser support isn't great IE9+. Because the majority of mobile devices use webkit as the browser this isnt a problem on these devices. I have a javascript alert when the browser is IE, telling the viewer to use a modern browser. 

CA 2 - Site Elements

Media queries 

Media queries allow the style to change depending on the screen size of the device. Alot of people talk about designing mobile first but as I would rather view a site on my laptop I designed for this and then use media queries to alter the CSS for the that screen size. It inherits the styles applied for further up the CSS . Example if I have colour:black in the desktop version the iPad and iPhone versions will inherit this. 

@media all and (max-width:769px) and (min-width: 481px){

         CSS for iPad goes here 

}

@media all and (max-width:480px) and (min-width: 320px){

         CSS for iPhone goes here 

}

It is possible to load separate stylesheets depending on the screen size but I wanted to keep it all in one CSS file. 

When coding I stick to a workflow that works for me. Some people like to get all the HTML done and then go about styling it with CSS. I tend to do the site in sections. For example I will code up the NAV and then work on the CSS to get it styled the way I want. 

Because this is my first time doing responsive design I also used this workflow when working with the media queries. This probably isn't the best practise but it works for me. 

Another problem I had was how to test the site on the iPhone. On mac's the windows have a min-width so they never get to small. This size was just above the iPhone width size so I couldn't get the view I wanted. Apple's development software Xcode comes with a iOS simulator which was very handy for me testing out the site. 

Max / Min width 

Because I use liquid grids the elements can become any width depending on the screen resolution. On my index page I have 3 DIV's  floated so they appear inline. These have a width of 29.41176%. I gave them a max-width of 300px so they cant get any wider, I did this so the design stays consistent across screen sizes. I also gave them a min-width of 150px so they would not become too small. 

code

.grid-3{

    padding: 0 2.5%;

    max-width: 300px;

    width:29.41176%;

    margin: 100px 1.04166% 100px 1.04166%;

    float: left;

font-family: 'Droid Sans', sans-serif;

    min-width: 115px;

    }

Responsive Images

Thought this would be quite tricky but its very straight forward. Set the IMG to max-width 100%. It will then become the size of the div it is contained in.

code

.images-inner img {

max-width: 100%;

}

.first-image {

float: none;

width: 90%;

margin: 60px 0 40px 5%;

}

CA 2 - Design

The Design

Since starting in IADT we were introduced to Dribbble. Dribbble is a community of graphic and web designers. Work is uploaded to showcase or to receive feedback. I frequently browse the site looking for ideas and  inspiration. I also use a app for mac called Dropmark which allows me to save these in collections. 

In my last site I used a Typekit font 'Museo Sans' , one downside to typekit is that it wont work on a local host. Instead I used google fonts. Very easy to apply and works on a local host. The fonts I used are 'Droid Sans' and 'Pacifico'.

I had the idea of a NAV similar to the Facebook slider but this turned out to be a lot of work. I designed up a NAV that was similar across all devices and easy to use. 

NAV Sketch 

NAV PSD

One idea that is seen on many portfolio sites is the idea of a timeline. Except most of these are simply background images with DIV's positioned absolutely to it, I wanted to create one with CSS (not an easy task).

CA 2 Introduction

Web Programming CA 2 

The second web programming CA was to design and develop a fully responsive website of our choice. We had to propose three different sites of our choice to develop. 

My sites were : 

1. A portfolio site

2. A redesign of a friends website www.robertsofdalkey.com

3. Another redesign of a friends website www.vibe.ie

I picked the portfolio site for myself as I wanted to create a site to display my designs the way I wanted them to be displayed. 

Inspiration 

I based some of my design choices on some of the recent websites I have come across

• http://supereightstudio.com
• http://victorerixon.com
• http://simpleasmilk.co.uk

Far too many websites try to cram as much info into a website as they can. I'm a firm believer of the opposite. It is proven that people scan text on websites. I wanted to get my message across but also encourage the viewer to browse the site rather then hit them with a wall of information. If they want to know more they will get in contact. 

Responsive Design

Responsive design is the new buzz word  in web design but every site has a different approach to it. With the recent explosion of mobile and tablets devices on the market there is a huge range of screen sizes to accommodate. Below is a list of the methods used in responsive web design.

 

Adaptive - Using media queries,  the layout of the site changes depending on the width of the browser. 

Pros : Easy to implement , Design will appear as you intended 

Cons : Have to specify exactly screen size to adapt to 

Liquid grid - The width of all the elements are set to % so they scale according to the screen size. 

Pros: Will work on every screen size

Cons: Can get quite tricky using calculations to specify the width , Because it scales to any screen size the design can look different on devices

Fully responsive - Using a combination of both adaptive and liquid grids, the site will adapt to any screen size but the layout will change with the use of media queries. 

Pros: best of both worlds, Will work on every screen size and with the use of media queries, the design will appear as intended. 

Cons: Calculations to define the width of the element in %

I used the combination of liquid grids and adaptive design. The calculation used to determine the percentage of the element is:   target / context  = result  src

for example 

a 300px div within a wrapper of 1020px would be

300 /1020 * 100 = 29.41176%