Having a few problems

I really like the idea of the floating site but I am have a few problems. Due the the nature of the coding which makes the site glide I am having trouble adapting the j query to my site. I can't lock the size of the website so it looks the same on different size screens. With the last project I was able to have the main part of the site 960px with a floating background. so if viewed on a smaller or larger screen it would only be the background image that changes.

Screen resolutions

I have done a little research into screen resolution. My laptop displays at 1440 x 900px from what I can see if I try to keep the resolution to around 1280 x 900px I will encompass most of the screen resolution used. I have also decided to change the type of navigation on my site.  I am changing to a vertical type and hopeful this will give me better control on placement of the elements on the site, this will allow me to float everything from the left. The other advantage to the vertical model is I can add a new level as I wish, even though I have not tried it if I was to extend my floating site I would have to add three units at a time.

Reference W3schools

Fonts

I have been looking at fonts for my blue print themed site. I want the font to have the feeling of  being hand written.  My initial idea was to go for comic sans ms.

Comic sans ms

During my presentation this is the type face I said I wanted to use. However during discussions in class most people said they did not like this type face. I have since discovered that some people like it and other hate it, so I have looked around for a less controversial type face.

Selection of fonts

As part of the brief we have to use we have to use webfonts from @fontface or Google web fonts. I have looked at more fonts and have chosen  'Shadow into light two'. It has everything I want to convey in a font, it is a hand written style of script. The hand writing is neat and well ordered and is easy to  read. If you look at the last example of script type, 'Cedarville Cursive', I find this harder to read even though it is more like hand writing and that is way I rejected it.

Website presentation

I have found a navigation system that allows the part of my site to float from one point to another. The concept for my portfolio site is of a blue print which is laying on an imaginary table and the navigation glides from one section to another.

Sections of website

At this present moment I have nine section to the website. A welcome or home section, Fuji printer of the year, Royal Opera House, Paper mache artist, Bea Cummings project, my panoramas, Propaganda poster, Web project, Contact and CV. 

I have generated a wire frame to give an indication where the content will go. Each of the section will follow the same patten, however the Background image and the static content could be swapped round to break up the feel of the site.

My navigation will look like a list on a piece of paper and it will float in the bottom left of the page.

I have generated a movie to show how the site will work.

More Navigation

I have come across a website called Fredhq this site has as he say in his words awesome web things. Here a couple of examples of the web things I may consider for my web page.

These are basically the same type of navigation one is more 3d than the other. I would put my content on each of the faces. It does advise on his web site that your browser has to be able to show the 3d movement.

Link to Fred hq

Navigation

I have been looking at different types of navigation for the website. I have found this example where the central image changes as you move across the menu bar showing other options to go to. I have added my images to make the example work.

 

I like the movement that this type of navigation give, however it limits you to the number of images /pages that can be used.

During our class our tutor has shown as an example of similar horizontal web page the longer the strips the more image it can be made up of. The menu tabs do not have a drop down element to them.

More Research

I have look at further examples of one page websites the first of which is a horizontal website that is a wide and narrow photographic image. The navigation bar has a fixed position at the bottom of the screen. I have a screen grab which is made up of a number of grabs, hence the number of menu bars. There are six section to this website as indicated by six options on the menu bar.

Horizontal web page for Gudang

The second example I like to show is of a vertical website, though it is only made up a three section it does show the basic principal of vertical websites it travels up and down. The menu bar has only three section and there are only three areas  of interest. The image is only made up of illustration.

Vertical website for Yodaa

Research

This project is to highlight projects we have undertaken over the past year. It can also include projects that we have done in past years. As we progress we can add to the website. The key factor of this project is that it is a one page website. I have done some initial research in to one page websites. The common factor for getting the best from these sites is the navigation. 

Basic horizontal layout

Site fall into three basic categories navigation is either horizontal, vertical and a combination of both. The site is in effect a long strip which passes by the viewable area by the aid of the navigation. 

First rough idea

 I have sketched out a rough idea of TV screen come radio where the navigation is the tuner dial at bottom showing what will appear above and then content is shown on the screen.

New Project

 The Brief
In this assignment, I will design and build a website containing my FdA work to date, plus any existing work I feel you should include in my portfolio and biography information such as an ‘about’ section and/or a CV. This will form the starting point to my portfolio website which I will keep up to date with new projects throughout the course.

These are the parameters that have been set for making web pages

To make successful websites with working links you will need to thoroughly understand the folder system that structures your files. You will create a web project folder with your name and make folders within this that offer a sensible navigation structure. These may be, css, images, scripts, working files. Please note the index.html page MUST be loose at the top of the hierarchy not inside a folder.

You will use TextWrangler to create all HTML and CSS. The goal of this project is to further your understanding and abilities in hand coding HTML & CSS, therefore you will not be allowed to make any of this assignment in Adobe Dreamweaver or any other visual WYSIWYG editor.

Your site will be constructed as a single page with the different sections made visible using css positioning or by a hide/show or similar jQuery method. CSS3 animation or jQuery will give the smoothest and best results.

You will not use images of text in this assignment. All text elements must be live selectable text and styled using css. You will use either Google Fonts or @fontface for your text elements.

Images are restricted for content, header (masthead) decoration or sprites for use as background to navigation elements but all links must be text based.

Important: You will not use html tables for the purpose of creating layouts at all in this assignment.

Working with CSS

You will use Cascading Style Sheets (CSS) to format and style the elements of your page so that you can:

· style and distinguish between navigational and content areas of your page,

· format and control your text and any links,

· you can create print- friendly versions of your page which restyle the content for print outcomes.

Working with real outcomes

You will also prepare and format your page with CSS for different browsers on different platforms. This will involve testing your pages on both Mac and PC computers.

In order to make sure that your pages work seamlessly in different browsers and on both Macs and PCs, you can use conditional HTML comments to direct Mac and PC browsers (including Internet Explorer and Safari to sets of CSS files).

Working with text and images

Text material in Word .doc format or created in any other word processing package must be converted to 'vanilla' plain text (txt) files before inserting into the web page.

You will use Photoshop or Illustrator to process images that will be optimised for web delivery using Save for Web and Devices as a gif, jpg or png, with care taken over pixel dimensions, file sizes and image qualities.  Video content should be displayed using the ‘Video for Everybody’ system.

All the images you make in Photoshop and Illustrator should be placed in the ‘images’ folder in your project folder and will be addressed with the correct routing through HTML. You will make these images accessible through the use of  <alt> and <title> tags.

For the typographic elements of your design you will use webfonts using either @fontface or Google Web Fonts.

My design work

I will ensure that I take note of screen sizes and that my pages work effectively with current popular screen resolutions.

I have to consider creating visually pleasing and legible designs where the design acts to make the content more appealing and readily readable with a standard web browser, rather than dominate or overpower the content.

My designs must achieve consistency over the sections of the site: I must use common type styling, layout and structural elements between sections. I need to consider usability and accessibility in the design of your interface and page layout.

I need to demonstrate my approach to the creative process using methods that are standard to the digital media industries. As well as your visual research, my sketchbook and blog should show sketches, ideas and experiments for the designs in development so the processes I have used to reach decisions on such issues as wireframe layout, colour, typography and navigation are transparent. Navigation must be planned using flow diagrams.