I hosted the finished Radfords site on my domain and posted it on my Facebook in order to gain some feedback.

[The finished site can be viewed here: http://www.stephengreig.com/radfords.html]

Most of the feedback was positive but someone with a widescreen monitor (1600x900) pointed out that some text on the home page appeared in the wrong place; as can be seen below.


However I only needed to make a relatively small change to the CSS and the problem was fixed. I changed the positioning of this text to absolute so the text would appear in the correct place in all browsers/screen sizes. I used http://browsershots.org/ to test my edits. This site allows you to view a screen shot of a web page in any browser and at any screen resolution.

Also, I created a new style sheet for versions of IE that are 6.0 or lower. Firstly I used a 'conditional comment' which is an XHTML comment that is only registered by Internet Explorer. You can then specify certain versions of IE; you can see how it's done by looking at the conditional comment I used for my IE7 stylesheet:



The style sheet I used for IE6 involved setting all of the pages id's/classes to display:none. Then, back in the HTML, within the conditional comment tags I entered the text I wanted to be displayed. I then used the browser shots website again to test my site in IE6; the result can be seen below:


The message delivered is that their browser is out of date and links are provided for the user to update. I have chosen to do this as only a small percentage of Internet users now use IE6 and I feel it is our responsibility as Web Developers to keep the world up to date.

After the final touch ups I tested all of the pages with the W3C Validator to ensure all of the code was still valid. All pages still validated to 1.0 XHTML Strict.

I have completed the website for Radfords Function Suite and Match Bar. Below are some screenshots of the completed site, all taken from Mozilla Firefox.


The Home Page


The Events page. I have used Javascript to show more information about each event. I have also used Javascript on this page to make the text bigger for those who are visually impaired.


The Food and Drinks page. The drinks/prices are presented in a pub board style and Javascript has been used to show the snacks board when snacks button is clicked.


The Gallery page. I have used Javascript to make this gallery function; when the thumbnails are clicked it shows them in the main image frame. Also, when the main image is clicked it moves onto the next image.


The Contact page. This page uses a mailto action which sends the content of the form via email when the submit button is clicked.

All of the pages validate against XHTML 1.0 Strict and the CSS also validates. All of the pages also work in all of the major browsers (Firefox, Internet Explorer, Safari, Opera and Chrome).

The only thing left which I had planned to do is make a separate style sheet for Internet Explorer 6.0 or lower. This style sheet will just show a message to the user informing them that their browser is out of date and will give appropriate links so the user can update.

I've included a gallery page on the Radfords website I'm making, making use of appropriate Javascript code.

Here is how the page appears in Mozilla Firefox.


When each thumbnail image is clicked, the larger version appears in the main frame. Also, when the main image is clicked, it moves onto the larger version of the next thumbnail.

Here are the images in the XHTML code. The onclick event calls the appropriate Javascript function. For example, the function required for the first image is gal1.



This is the Javascript that makes the gallery work. When the first thumbnail image is clicked it calls the gal1 function. This function shows the element with the id g1, which is an img (the larger version of the thumb) and hides all of the other large img tags.

Since my previous progress update I have done a bit more design work in Photoshop, but I have also started writing the code for the website, which has taken the majority of my time.

I always try to ensure that the XHTML and CSS I am writing is valid, so I have constantly checked my code using the W3C Validator to identify any errors early and stop them from accumulating. Additionally, what good is valid code if it isn't compatible with your browser? I have tested my code very regularly in all of the major browsers; Mozilla Firefox, Internet Explorer (7.0), Google Chrome, Safari and Opera. I am not aware of a way to have two different versions of IE on my computer at one time so I am using 7.0 for IE testing initially and will hope that if it works in an earlier version, it should be OK in a later version!

There have been a few issues when testing my site with IE7, all style related, so I have created a separate style sheet that IE 7 will use. I will also make 1 more style sheet for any versions of IE that are 6.0 or lower. However, this will just show a message to the user telling them that their browser is out of date and they need to update (links will be provided).

The above code features HTML that only IE will respond to. Within these tags I have linked to a style sheet meant only for IE 7.



The above two screenshots both occur in the same web page. I have used Javascript to replace the drinks board with the snacks board. The Javascript basically replaces all of the content from one div with all of the content from another div when a button is pressed. This prevents an extra web page having to load unnecessarily. I have highlighted all of the 2nd screenshot to show how I put it together. Each 'element' of the design is a separate image, so each image can have their own appropriate alternate text for the search engines to feed off. I feel this is important in a web page with practically zero actual text.


The above screenshot is the events page (un-finished). This makes use of Javascript that shows more information about each type of event in an expand/collapse style. This increases organisation and ease of use, as the user can easily access the particular information they are looking for.

All of my pages successfully validate as XHTML 1.0 Strict and they all appear correctly in each of the major browsers.

I created another game using Javascript, this time with a bit more substance to it. The Javascript code is still very simple, although I suspect not as simple as it should be - and not without it's drawbacks.



The game (interface shown above) shows images of football grounds and presents the user with a text box. The user can then type the name of the ground into the text box and click the 'Check Answer' button. If the answer is correct/incorrect, an alert will appear to confirm this.

Here's the code:


To begin with, the HTML is a simple img, a text field input and a button input. The text field has an id property so it can be referenced in the Javscript Function. The Button has an onlick property, so it can call the function when clicked upon.

The actual function is quite basic. It calls the value from the text field (that the user has entered), then states that if this value is 'Anfield' an alert should appear informing the user that this answer is correct. I tried to use a simple 'or' (||) operator to state other possible answers, but this stopped the program from running. So instead I used an else if statement to state another possible correct answer. Then, anything else would show as incorrect due to the final else statement I used.

After being set a task to plan and create a game using Javascript, I considered my knowledge of the language; which is fairly limited.

I had recently learnt how to generate random numbers and I thought this code may be a good basis for a game. After some thought I decided to create a dice game; the aim being to roll either a 2 or a 6 in order to win. Very simple stuff.

Here is the code, including the XHTML framework, the CSS formatting and the Javascript to bring the game to life.


The die=Math.ceil(Math.random()*6); code generates a random number between 0 and 1, then multiplies it by 6, so we have a random number between 0 and 5.999. The Match.ceil part rounds this number up, so we have a random number between 1 and 6.

I then use an if statement to give the game different outcomes. So if the user rolls a 2 or a 6, they receive feedback telling them they have won. Otherwise, they are given the feedback 'sorry, try again'.

The try again text is a link, which also uses some Javascript. This javascript:location.reload(true) refreshes the page when clicked, so as to begin the whole cycle again.

The following screeshots show the sequence of the game.

I'm currently in the process of designing the look of the website I'm developing for the Radfords bar. I'm using Adobe Photoshop for this part of the design process as I am comfortable within this software and familiar with all the tools. I have many papers full of sketches of many different design ideas which I will scan and upload at a later date. So far I have designed the look of the Enter page, the Home page and the Food & Drink page.


Enter Page

Home Page

Food & Drinks Page - Drinks

Food & Drinks page - Snacks

I got in contact with the bar's Landlord to get an idea of content for the site and he provided a few bits of information, such as the local ale they serve and the sort of events they hold.

I hope to use Javascript for a Calendar feature on the Events page, the Gallery and the Food & Drinks page. Although I feel the interactive calendar I have in mind may prove too challening for my level of Javascript knowledge... but I will see what I can come up with.

Our project for the first term is to choose a 'building, structure or environment' to create a website for. The site must have a minimum of 5 pages and 3 interactive javascript features.

I have chosen to create a website for Radfords, the match bar at Hereford United's Edgar Street stadium. The bars main purpose is to serve the Hereford United fans on a match day with drinks and snacks, although the bar can also serve a number of other events, such as meetings and functions.

The bar has recently undergone a huge refurbishment as well as a name change which has given it a new lease of life among Hereford supporters.




Thanks to my good relationship with Hereford's official photographer I can get hold of the necessary images relatively easily, although I do plan to get to the bar in the next month or so to gather my own material.

At this early stage I would imagine the content of the site would be on the following lines; welcome page, up-coming events (maybe a calendar feature), book an event, food/drinks/offers, history, gallery and a contact page. This will more than likely change when I get further into my planning for this project. I do plan to contact the bar's landlord to gather some information and get his opinion on content for the site.

I've just finalised the design I've been working on for the Junior Bulls Supporters Club (of Hereford United) Christmas card. This design will be mass produced and all the players at HUFC will sign each card. The cards then get sent to each member of the Junior Bulls Supporters Club in time for Christmas.



The baubles each feature a player's face as does the fairy; this will be the basis of a competition where the members have to guess which player the fairy is. Everything in the card design was made from scratch including the xmas tree, the presents and the baubles.

We have been asked to find and comment on three examples of websites with user generated content.

1. DeviantArt

The first website I would like to discuss is DeviantArt, as I am an active member of this website, using it as a platform for my design work as well as to seek inspiration from. The main purpose of the site is for artists to upload their work for others to see. The site presents its art in several ways, including order of popularity, time of submission and categorically. There are browse/search features so the user can easily find what they are looking for, whether it be a user or a piece of art. User's can also create their own collections of their favourite pieces, so these collections can be easily accessed in future when looking for inspiration. The site is generally well organised and easy to use, although there are many areas of the site to explore which could be easy to miss for the casual user.


2. LogoMoose

The second website I am going to comment on is LogoMoose. As the title suggests, this website is all about logo design. User's can upload their own logo design's and the very best are featured on the website's gallery. Only the best are featured as the website aims to be a source of real inspiration for logo design. The website also has features such as awards for the best logos and user's who require logo design can also submit job offers for the designers who use the site. LogoMoose is very well organised and all of the options are very clear; the site is extremely easy to use and navigate around.


3. Design Snack

The final website for discussion is called Design Snack. The point of the website is for users to upload XHTML/CSS templates as well as Flash created website designs. This creates a designer showcase that the user controls. A user can then browse through the designs and rate, comment or favourite the designs. The site is well organised and has large fonts and distinctive sections increasing the site's ease of use and desirability.

We were asked to read and comment on two interviews with professional designers; the interviewees being Dan Saffer and Joel Schaffer. Primarily I'd like to say that I found the interviews very enlightening and extremely useful in terms of building the ideal mindset for a designer.

Interview 1 - Dan Saffer: 'Interaction Design is an Applied Art'
The first point I'd like to touch upon involves the aspects of an interaction design that web designers apply a particular focus to during the creative process. Saffer is very specific when he lists that usefulness, usability and desirability are the most important elements of interaction design. He states that "If your design fills a need in people's lives, works well, and looks beautiful, you've got design gold." Although this statement probably over-simplifies the criteria for creating 'design gold', it clearly points out the three main principles of design that need to be considered during the creative process. If a designer can meet these three principles consistently then they should prove to be very succesful in the industry.

Saffer goes on to discuss the common mistakes that those who are new to interaction design often make. He says that one of these mistakes is "not coming up with enough variations—or, more accurately, not being able to come up with more alternatives. Which is to say, falling in love with one direction and not being able to see others. Often, this direction is something familiar, that the designer is comfortable with." I think this is a trap that most designers, of all standards, have probably fallen into at some point or another; myself included. The designer's skillset and creative process can become somewhat one-dimensional as the designer takes a direction that they have used before and are comfortable with. This can lead to repitition in the designer's work and eventually cause their toolset to become very limited. I believe a designer needs to experiment and learn new things, which Saffer later touches on when he mentions the need to tinker.

I would also like to briefly discuss Saffer's means of inspiration. He describes his desire for seeking inspiration in the interfaces of actual, physical machines. This is an area that I had never seriously considered as a source of inspiration for interaction design before reading this interview. I can now however, realise that sometimes it helps to think outside of the box when seeking inspiration.

The final point of discussion is Saffer's irritations/distractions whilst working. His answer included the following quotation; "My own ignorance, lack of skills, or inability to grasp new concepts. My own limitations are always more frustrating than almost anything external." I can certainly relate to this statement as I have often found myself in a position where I have an idea in my head but I find the task of reflecting this idea onto a blank canvas very challenging. It is these limitations of my own that I find to cause me the most frustration during the creative process. A way to improve on these limitations is to divulge in as much relevant information as possible to broaden your view of design.

Interview 2 - Joel Schafer: 'I'm into minimalistic, clean design'
When describing his own design process Schafer says "I always write down everything to paper before starting a software." This is also where I start my own design process (after seeking inspiration). I find that it helps to make a few rough sketches of a website design in order to help organise the various page elements in your mind and to have something visual to work from when you move onto software.

Schafer also states that a "good photographer is always good to know." This is a good example of how I could expand my own network in order to lessen my own design limitations.

When listing the languages he uses for coding, he mentions "ActionScript, html, xml and sometimes php. These languages is all I need." I think that this is a slightly short-sighted view as my belief is that you need to know whatever the client requests and this request may require coding knowledge outside of that bracket. Therefore to state that those languages are all he needs is, in my opinion, slightly ignorant as he has failed to consider that there are other posibilities.

Portfolio v2.0: http://www.stephengreig.com/

I soon got bored with my portfolio and design service website so I decided to re-design it. During the designing process I tried to consider organisation, professionality, simplicity and usability.

The main difference between the previous design and v2.0 is the simplicity element. Previously, you would enter the 'work' area and have a list of categories to explore. The way the work was presented was 4 thumbnails to a page with next/back buttons to move onto the next/previous set of 4 thumbs. This format meant the work area contained several web pages which could have caused some confusion.
For v2.0, the work area has been stripped to it's bare bones and it now consists of just 3 web pages, each with a very clear and organised gallery layout. There is a gallery for Client work, Other work and Graded work.

The services area has also been massivly simplified. Previously there were many options to click on, such as logo design, website design etc etc. The services area for v2.0 is now just a single web page with very clear content detailing what I can offer to the client.

I'm pleased with the new look and plan to use it for at least another 6 months before I get bored with it again and start on v3.0!

Here's all the design work I've done since my last post in May.

So we've started a new academic year... time to reinvent my blog which has been somewhat neglected over the summer. I wanted to design my own Blog template, but that's been put on the backburner until I have sufficient time to do it; so in the meantime I've found this nice, new template to do the job. I designed a header splash thing to try and give this skin more of a unique feel.

In terms of the year ahead, I'm hoping to expand my knowledge of web development, particularly more complex coding languages which in turn will allow me to broaden the services which I can offer to clients.

I will be updating my blog soon with all the design stuff I've done since my last post.

Finally finished it after months of working on this.

You can view it here:
http://www.stephengreig.com/interactiveshowcase.html







The room obviously includes my 5 identities elements but also includes many additional interactive features for the user to explore. A little disappointed with the quality of the images but overall I'm very pleased with it and glad everything seems to work ok.

If anyone would be kind enough to provide some feedback it would be greatly appreciated.
Send to steve.greig1@ntlworld.com
Ta.

Finally finished all of my identities elements as well as the design of my showcase. So all that is left to do now is to bring them all together in the final Flash showcase. Here's what I've done...

1. Logo


2. Audio-Visual (Pixilation - A Day in the Life of Stephen Greig)
http://www.youtube.com/watch?v=ATxaVlBpxIo

3. Avatar


4. Portfolio and Design Service Website

http://www.stephengreig.com/

5. My World (Graphic Design - Typography)


Interactive Showcase - Completed Design




This gives me about 2 weeks for my essay and an extra few days to make my showcase interactive, which I'm hoping will be enough time!