Conclusion:

I learned a lot from this project but I am unsure as to the benefits of a fluid site, A responsive site using 4 or 5 media queries and pixels seems like the best way to go for now.  A full fluid site has to many bugs, using images or videos can be messy, and there ends up being a lot more css then seems needed.  Some aspects of fluid I do like but stil using media queries I feel fluid is added work and complicates things that would normally be no issue, like my images on the home page, these stretch and to fix them there is a lot of work needed to fix this,  whereas if it was pixels I could change the size every couple of hundred pixels.

I am happy with what I have learned and how the site turned out.  I feel I understand css and html better for this and going forward I 'm comfortable to try different things and that I could achieve a look a client wanted.

the 6 pages are:

• home
• weddings
• anniversary
• contact
• other
• video

*the video page is a link in the footer


Parts of the site I couldnt fix properly.
The images on the hompage are set by percent, but I dont fully understand how the height attribute works and so the images lose ratio as the window closes.  I tried a temporary fix where the iages are set to max and min widths using the media queries.  This works ok but for a real site ths would have to be addressed.
The main links arent exactly spaced apart, this is because the li's are set to percent and some words are longer so I added classes to each li to try fix this, Its hard to notice but is something again for a real site Id look further into.

Website:

I had another go at the image slideshow and found a responsive slideshow on slide.js.  This stil needed some editing to the css but I was able to implement it the way I liked.  Its fully responsive and works well.

I have implemented 2 custom bits of javascript.  one is an image swap on rollover, this is used for the social icons and the link to my blogger.  The other is using getElemenyById, this is sed for the dropdown menu when the user clicks the plus.  This works by setting the margin-top of the image div to minus 45px, then when the user clicks the plus the function changes the margin-top back to 0.
I rearranged the javascript so if javascript is disabled the menu will be shown.
here is all the javascript:



this is the image swap
html
onmouseover="document.blog.src=blogger.src" onmouseout="document.blog.src=bloggerGrey.src"

js file
bloggerGrey=new Image;
 blogger=new Image;

bloggerGrey.src="images/bloggerGrey.png";
blogger.src="images/blogger.png";




this part is at the bottom of the html page, this is for users who jave javascript disabled

<script>
window.onload = function(){
document.getElementById("image").style.marginTop="-54px";

document.getElementById("ulList").style.opacity="0";
}
</script>


this is the function for the dropdown menu

function showMenu(){
document.getElementById("image").style.WebkitTransition="margin-top 1s";
document.getElementById("image").style.marginTop="0px";

document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";

//list items
document.getElementById("ulList").style.WebkitTransition="opacity 2s";
document.getElementById("ulList").style.opacity="1";
}

WEb Project

I have finished the homepage, which will be the base for all other pages.  Since i uploaded the photoshop file I have changed the colors and some layout.  I am using a 3 main colors, dark grey, light grey and a deep purple. 

Some of the code isnt as clean as it coud be, for example I sed class names for all the links so I could style each one, whereas I could use nth:child but as I am not to sure on that I wanted to do what I was comfortable with, with more time I would try clean up the html and css.  One thing I have learned is that he design has to be well thought out before hand, as it is for different screen sizes some style elements have to be removed, or completely reshaped, and In future I would spend alot more time designing the site.

I added in an image slider, and this is an example of where design has to be thought out.  The image slider works perfectly in full screen but was causing problems on ipad due to its size, so I had to copy the css and restyle the slider to fit on ipad, but then it was too big for the phone, so I removed it from the phone and inserted images instead.  This is also an example of liquid style making it hard to add style to an item.  As the slider uses pixels and relative position I could not make it responsive, therefore I had to do a separate one for ipad, then remove it for iphone.

Project 2:

From tuesday I started planning the design of the site.  From looking at sites my sister liked the look of appassionata.ie, I had a fair idea of the kind of look I wanted.  I did a sketch in my folder for the desktop and then brought that into photoshop. 

 Before I started designing every part I wanted to see How the liquid style works and what problems I might come across, so I started on the header of the site as I knew how this would look, and also this would give me a better understanding of liquid and what problems I might face.  Over the weekend I made my header and the main image div underneath.  Some of this was tricker than I thought as with percentages instead of pixels there is allot more that can go wrong and more elements can be affected.

Understanding how CSS inherits for me is the key part for making a site like this, and soon into making my site I flipped my CSS upside down so the phone media query is hit first.  The reason for this was for  any CSS3 transitions or effects.  It will be easier to add them to the bottom of my CSS in the desktop media query then to remove them from the tablet and phone.

I am currently working on a separate file testing a CSS3 transition view here, which I hope to use for the desktop version.  So in the image above instead of each "occasion div" having a footer of text, when hovered over the card will flip a display the text.

Screenshots of Proposal examples:

Ca2 Project Proposals:

Proposal 1:  My first Proposal is for a florist site for my sister.  She hasn't got a site as yet but is thinking of setting one up.  As she will use this site to get work this is probably the best choice as it is a "real" site.  My sister will also work with me on colors and content so it will be more like a real-life job.  The site will be very clean with images used with some text, as images will be a better experience for the user and give a better grasp of the work she does.  As she does weddings etc.  this site has to be professional or it will defeat the purpose, so for me this site will be great experience for me.
A site my sister likes, and one which Is most like the site I plan to design is  http://www.appassionata.ie/
This site though is very dark and I plan to use brighter colors

Proposal 2:  Guitar website for complete beginners.  As a guitar player myself I found it annoying trying to find a site that actually was directed at beginners without having to sign up to lessons.  For someone not sure if guitar is for them guitar basics should be available for users to experience learning guitar, and then maybe sign up for further lessons.  allot of guitar site are very clogged up, and even though they say for beginners they seem to skim over the very basics, like parts of a guitar, and instead jump into chords and songs straight away.


Proposal 3:  Redo of Dun laoghaire town website.  Considering the amount of work done to the seafront in Dun Laoghaire, with redevelopment of the harbour, the pier, marine and the town centre itself, to try bring in tourism and promote dun laoghaire, this site is very poor.  I was shocked at this site and feel it was not designed with a target audience in mind.  The site is very messy and congested, and allot of text is hard to read.  This site could and should of made use of images of Dun Laoghaire but instead hid images behind text, and being from Dun Laoghaire I felt they missed a great and ready made solution to a good site.  I would use allot of images as viewers maybe planning a holiday or weekend away would befit more from images.

TERM 2:
Week 12 - 13

The last few weeks we started looking at responsive web design.  Responsive web design is when the site responds to the screen size and displays the webpage in a format that best suits the screen.  This is looking to take over from separate web pages for each device.  This is a better way as the web designer does not have to update separate sites, therefore the information is always the same no matter where the user views it.

We looked at two ways of  doing this in class, one was a "semi-responsive" site, where the page uses media queries and when the browser window is reduced the next CSS properties are loaded and the page"jumps" to a new style layout.

The other kind was a new Liquid style.  The liquid style uses percentage for most of its sizes and this way the site constantly changes as the window is reduced.  This way of doing it is allot trickier that the first method but the site is Fully responsive and therefore is arguably the better way to go about a responsive site.  If this method is achieved correctly it will cut down on the amount of CSS within each media query, making changes easier and a less chance of overlapping CSS or any hierarchy issues the CSS follow.

Either way responsive sites are soon to be the norm and not understanding, or not looking into this method could be a huge disadvantage going forward, and as students its up to us to be at the top of modern ways when we leave here, as this is our best chance at making it as web designers in the future.

An example I like is http://www.tilde.io/  This is a good example of a responsive site.  The key to designing a site like this is how the menu changes as the screen is reduced, and how the content changes, eg the image changes to a small circle and the text flows under it.  Parts like this are the real idea behind responsive sites and where a good design is becomes a great design.  Knowing what information to keep and what to discard, but at the same time making sure the user feels "at home" in every window size.