Since Easter I have presented and pitched my idea to the class explaining my design solutions.

I have gathered content, made wireframes for my websites and illustrated pages for my iBook.

When designing for my website i am designing upwards from smart phone > tablet > desktop.

I am trying to keep a fairly structured layout throughout so It is recognisable to my project.

Looking more into responsive design I have found a website that specialises  in running restaurants.  The website name is 'GetGumbo.com'.  Surprisingly their website is responsive and would like to show below;

This is desktop view of the web page.  As you can see there is a women on the left,  title that is just off centre to the right,  sub-title then an E-mail adress bar.  This website looks incredibly simple to use however I wouldn't know is thats effective in terms usability as I dont unfortunately my own  restaurant. Top left is the logo then on right is the 'Login' and 'Already have an account' tabs.

We are now down to tablet view.  The women has been eliminated from the viewing frame as again just like my evaluation on the Webdesigner Depot, the graphics disappeared at smart phone view.  This is becoming very common throughout my research as this is least important.

Above here we have 3 tabs/buttons.  I have screenshot them individually away from the main website.  They are lined up together as a 3. 

At smartphone view it is obvious that they have been broken down into a single column.  

This website overall is very clear cut and simple to navigate around. The colours are very sleek and the opacity on some of the boxes and background have been reduced.

After looking at wireframes for desktop level I decided its time to look into responsive web design.  I was not familier with this until we had it explained to us in class.  Below I will list a few interesting examples I found;

Above I have screenshot a website called 'Webdesigner Depot'.  I love looking at this website in general time to time and being a web designing website I knew it just had to be responsive which it is.  I find this website so beautifully laid out with the Navigation pushed right to the top of the page, big title with huge extensive graphics behind.  As you can see from this screen shot that there are 3 individual columns at desktop view with the navigation stretching right across the page.  

By dragging the window inwards it shrunk to 2 columns.  I am not sure is this is tablet view form or not due to the next example I use.  However it breaks down the page at appropriate view points with the original middle column from the 3 column layout being placed underneath to the left.  It is hard to tell from my screenshots but the navigation has shrunk down.  You can tell if you look closely has the social networking thumbnails are actually closer to the search bar.  I think its great how the title can be in proportion even though I have shrunk the window.  It scaled down perfectly as I was pulling the window inwards.

Above is tablet view.  First thing i noticed is that the title still remained the same size even though the background has been cropped out slightly.  I think this effect is great as the title is the most important thing as this is the name of the website.  The graphics are also important even though being cropped out slightly.  This still works though because most of it still there its only the outside parts that disappear.  The column layout is reduced to 1 here.  This break point is vital as I think 2 columns would be too much.  In a sense, this may be better because the first column is larger making it more easily readable. One other i noticed is that the social networking thumbnail links have disappeared.  This is because it is far from the most important part of this page. 

And finally we have smartphone viewport.  For me this website works at an incredibly effect level at all viewports considering the break points.  The navigation is the most noticable part of smartphone view for this.  In the top left part of the navigation is a small drop down icon that lists everything that is missing.  They just drop down in a few bars.  The graphics and stylised title have gone.  This is appropriate as the viewport is so small that the content is most important here.  I like the way the title is placed into the navigation.  Not only this but the title has changed colour.  If kept the same this would be very un-readable.  White in my opinion is a very effective colour.  Obviously you need a a lighter font colour against a dark background and this case navigation bar but white is vibrant and just suits this page.  Finally the column count is still at 1 but more can actually fit into this one.  If you look above this screenshot you can only see the first article about 'Grey Hat Techniques'.  On this one we can see the women too.  Also the search option is still visible in the navigation bar making it easy search here.

Looking at responsive web design has given me a clearer insight to break points and priority over content to graphics etc.