Design For Web: FINAL SUBMISSION BOARDS

These boards will also be printed and in the submission folder along with the CD package for access to the website and closer inspection.



##Boards:

• A History of...
• Research
• Concept
• Initial scamps
• Final mock-ups
• Scamp_Site map
• Website
• In use
• Root folder

Open publication - Free publishing - More abbas mushtaq

Web: Embedding the issuu

I was a little wary about adding in my issuu document for what my website is based on - my Mixed Martial Arts book I worked on over summer but when embedding I realised I can paste the same background colour in!

Got rid of the blue text

Much better!

Issuu's embed code within the editable region in the HTML code of 'foreword.html'

Website finished

I've finished off the Quotes Page and the Greatest Fighters page, I couldn't manage to tweak Lightbox to look exactly how I wanted so instead I did it in a pretty long way, I created a separate template 'GreatestEvertemplate.Dwt' which had arrow links etc, and applied this to all the fighter pages, which I made separately.

This is my list of fighters in the order I want them to appear, the last fighter on the list, links back to Brock Lesnar, to complete the cycle and make it infinite. The list allowed me to figure out easily what the 'next' and 'previous' links needed to be on each fighter page.

brock lesnar

cain velasquez

don frye

fedor

frank mir

dos santos

overeem

tank abbott

Noguira

Bas Rutten

Chuck Liddell

Dan Henderson

Forrest Griffin

Jon Jones

Rampage jackson

Randy Couture

Shogun Rua

Tito Ortiz

Wanderlei Silva

Michael Bisping

Anderson silva

Rickson Gracie

Royce Gracie

Kazushi Sakuraba

GSP

Matt Hughes

Nick Diaz

BJ Penn

Frankie Edgar

Benson Henderson

Takanori Gomi

Jose Aldo

Miguel Torres

Dominick Cruz

Urijah Faber

//

Screenshots of the pages__

Greatest fighters ever slideshow page

Foreword page which is my study over summer into the roots of mma and the concept of a "warrior"

Home page, with articles, blog format.

Blog article once clicked through with news story.

A History of, page, with the history of MMA

embedded Youtube videos of latest MMA news on homepage.

Quotes page which scrolls down with classic quotes from MMA practitioners.

Website with no content put in.

Design For Web: Adding content to Blog page and embedding videos

I've started to add content and lead-ins into a few article pages. Obviously it's not worth me creating tons of articles but I'll create 3 article pages, which you access from the index page - the blog page.

Embedding videos was surprisingly easy, YouTube even lets you change the width of the video, so I made mine 675px so it sits flush with the rest of the content, I pasted the code straight into the code and it appears perfect.

Youtube video as you can see works perfectly and seamlessly. Great.

Design For Web: The Mystery of the Header Div

I managed to make my body colour the same pale off white colour of #EADECA which made the website look seamless.

Yesterday my main target was to make my webpage scrollable with the navigation stuck to the bottom of the screen.

I overcame this by creating a "navigation holder" css element which is the width of the website and the height of the navigation css element, of 50px.

I housed the navigation div, inside the navigation holder div, basically inside the DWT code. So this way, the navigation holder automatically stays glued to the bottom of the screen as it's coded AFTER the container </div> which puts it underneath rather than above. The navigation div inside worries about having the margins and being centralised. Sounds confusing but it's not really and it seems to work fine.

<div id= "nav-holder">

          <div id='navigation">

          </div>

</div>

How it looks in design view on DW, you can see it's separate from the container, and hangs onto the bottom of the screen in a fixed position, as specified on the navigation CSS.

How it looked afterwards

It acts similar to a liquid layout, when i shrink the window the content and navigation centralise, but the header's now being problematic! It's no longer centred and something seemed to be interfering with it but I was happy with the header sticking to the top and the navigation sticking to the bottom.

To fix the header, I adopted the same approach I took with the navigation.

I created a header-holder CSS element and placed the header element inside it with margins to stay centralised. The header is 130px in height, so the header-holder is width:1024px and height:130px

The CSS code

My navigation was bottom:0 so I did the bottom here and made the top:0 and it seemed to do the trick.

Again, I took the header div out of the container div, it's all got a transparent background anyway so I want it to just float above and stick to the top of the screen. Here's the DWT code

Div's inside Div's help me sleep at night.

Moment of truth...

Tears of joy. It works, it also seems to stay centralised when resizing the window too which is great. I feel ready to finalise the content and page order etc and start getting stuff into the layout.

I feel the template is now ready to put stuff into.



I have two types of page layouts. The template applies to both...

1. The scroll page, which is literally just more content in the middle column, as my body is the same colour as container, you can't tell that the text is over-running over the container, and it scrolls down as I want it to.

2. The slideshow page. This is the same layout as the scrollable page, I just add in the next and previous buttons into the margin. I think I can have a separate slideshow template, but I feel safer doing it this way manually for now. I'm not going to add in a javascript slideshow and will make the list of fighters in order of how I want them to be seen, and link the next and previous buttons accordingly.




Moving forward I'm going to look into font styles, as I originally planned to have a heading style and a body style, same font just bigger in size

Web Workshop: 28-11-12

To make a website go live you need two things. A domain name and a host.

Go for the cheapest one based in the UK.


http://www.123-reg.co.uk tends to be one of the cheapest. Averages out £2-3 for a .co.uk .com for a year.

Once ou buy a domain name you need hosting. Hosting is the space you store your website on, so it's a server housing your website folder with the files in. With 123 reg you get a free domain name with the hosting sometimes.

http://www.one.com is also good.

If you buy a domain name and hosting from different countries, you need to link the host to the domain name. Which makes it easier to sometimes do a host and domain name from the same country, if a little bit more expensive.

Go to server settings in DW.

FTP is the means of travel for your files to the host. For example the FTP address for apple will most likely be ftpa.apple.com

You'll have your username and password emailed to you by the hosting people.

Once you put in FTP address, username and password click on Test. Connection should be instant, if it takes a while it's not going to work. If put in correctly, it will say Dreamweaver connected safely. This means it's now linked.

Save out and click done.

When you're connected o you have a little icon of two leads connecting together, you can click it and it goes green to show it's connected. 

You can literally drag and drop from local files to remote server.

Online content management systems

Able to alte captions and text remotely, good for your clients to be able to manage stuff a little bit themselves or to even work remotely from any web-connected device.

You basically specify editable regions. You can give permission to the user of the website to exactly what you want and don't want them to, so they can't mess up the website.

CushyCMS is very simple and easy to set up, recommended.

Final Crit: Design For web boards + Crit feedback

Open publication - Free publishing - More abbas mushtaq





Feedback:

Strengths:

• Logo transparent & fixed, gives good effect when scrolled over images.
• Clear design sheets
• The monotone image works well with the pale background
• Page boxes work well when hovered over. The movement indicated a link
• Really clear/clean layouts and designs
• Image slider is a really good idea
• Good quality images. Like how you have made them match the background
• Simple and legible text and colour scheme. Stands out to the audience
• Very achievable with the time you hav

Areas for improvement

• On blog page - the text could be shortened or maybe broken up with imagery
• Shorten the height of main container so the viewer does not need to scroll to see the pages. Or pages could be placed on the side or top to make navigation clearer.

Considerations

• Would there be any images in the text heavy pages such as the blog? Would make viewing easier.
• Consider having the navigational buttons at the top or side of the home page rather than at the bottom (gets lost in the content)
• Could have hover-overs on the navigation buttons, so that they have changed colour

Action plan moving forward

• Make navigation column at the bottom of the page fixed, so the content in the middle of the container scrolls freely. Also add a background colour to the column so when scrolling, the body text doesn't interfere with the navigation
• Attempt to make the website a liquid layout so it automatically alters for a variety of desktop devices, with the top and bottom scaling to fill a screen, and also working on ipads too with portrait or landscape modes
• Consider maybe adding sharing and social buttons - facebook/twitter/blogger and pinterest?

Overall I'm happy with the feedback. It's definitely an achievable website layout and I'm confident I can pull it off, I feel it can be a very clean/minimal and usable website when completed to my vision. I just need to figure out how to make the website show fully on a variety of resolutions as on my laptop screen a 1024x768 doesn't fully fit on my screen, I have to scroll down to see the bottom of the container. I want my navigation to fit snugly at the bottom of the screen, no matter which machine you're using.

Website: Having A Crack At it: Riding Solo

Been actually quite into the web brief so I thought I'd have a stab at bringing my final scamp to fruition without referring to the web sessions, seeing how much I remember and see how far I can get with it.

This is the scamp

I modified it a little, the logo is now 130px by 130px and the margins on the right level out with the navigation rather than fit alongside it as this led to some problems for me, i'm sure it's easy to do but for this experiment I added a margin to the left and right side of the navigation and made the left and right columns a little shorter.

This is how I want it to look..

^^ Mock-ups I made digitally.

The web sessions were really helpful as I could refer to the CSS and DWT files just to be sure I'm not missing any important step out

Getting there, the columns and navigation are fine and I even managed to make the hovering logo appear just right at the top, in the teal-ish colour. I read in the HTML & CSS book that a hovering element is position:fixed. It doesn't move with the page as you scroll

^ Created a CSS element for the floating logo called #header with position:fixed;

I added a repeatable region instead of an editable region in the header div, in the HTML template as I want it to repeat but not be editable on each of the 5 html pages I've linked to it. I just thought I'd try it out and it works fine! I created a transparent png and made it save for web as we  were shown in the sessions

For some reason making the position fixed for the header element makes it appear here in the 'design' view'

But previewing in Safari looks just fine! You can see it's transparent and floats even as you scroll up.

Adding the rollover buttons inside the navigation div.

 Rollovers work too, the buttons slightly nudge upwards.

I don't want a background colour and want it to be transparent, so I've got rid of the 'background-color' line altogether in the CSS template, as this worked for the header element.

Worked! 

I've also placed in a fighter image I prepared just to see if it'd fit in right and it seems to fit in right in the middle column which is my content column, the left and right columns almost just act as margins, but will have the 'next' and 'previous' buttons housed in them for the slideshow pages.

Now the layout actually works, time to sort the colours out, I had the colours all weird and bright so I could see if they all even fit together properly.

The hex code I need to colour it all in is #EADECA

I should be able to change all this from the CSS template and it should all 

Sorted.

One issue I am actually having though is the resolution of 1024x768 is slightly too big for my screen. I have to actually scroll down to be able to see the navigation at the bottom. On a higher resolution screen it will all appear to be 'smaller'. This is an issue as I want the website to be without any serious issues on pretty much all formats.

I'll talk to Simon about an obvious solution to this, I could always just shrink the height of the website. A viewable size within the browser on my laptop is a height of 680px.

I also still don't know how to get stuff scrolling with the navigation still hovering, along with the header logo. I also don't know how to centralise the container and have the container flexible so that I don't have white borders round it and the background colour fills the white borders up, to be seamless.

Making and saving the next and previous buttons as transparent png's. They should fit seamlessly into the right and left margin

You can see here simply adding in from the design view, they push everything down as they're about 10px lower than they should be. Probably not the best way to do it, but for now I'll just change the height from the code, to be a little shorter in height, so they fit within the columns

Changed the height from 718px to 700px as a quick fix

Fixed! Now I'll create a few fighter pages and make the next and previous arrows links between them, Maybe I could create a separate greatest fighters ever template and create fighter pages from it? 

Something like how the greatest fighter page would look, this is without text. 

Still not too sure how to have different text styles, such as headings and so on and the best way to link up fighter pages and have the same next and previous button template without messing everything up. 

I'm really happy with even getting this far so I'll make sure I know what I'm doing before moving forward.