Follow me on Twitter

11 - Beta Status

Space for Yourself - Beta Website

Follow this link to see my beta website for Spaceforyourself.com for the client - Clare Byrne.

Roadtrip to beta

11 - Beta Status ↑

My roadtrip to beta status started off with the first thing I did was copy my site template on my liveproject Folder onto my IMDSERVER directory. My site template consisted of the following folders and files to allow me to easily structure my website from the beginning:

site_temp

Structured Markup

11 - Beta Status ↑

Next step in the roadtrip was to begin adding structured markup to the txt files that Chris and Nick provided us with. I was adding <h1> - <h4> tags for the headings, and I divided the content up into paragraphs using <p> tags. I added in both ordered list (<ol>) and unordered lists (<ul>) tags. Now that I had structured markup added to the txt files, I saved the files with the .php extension. I did this as I was preparing the break the content up into PHP Include files.

CSS Galleries

11 - Beta Status ↑

Now that I had my content laid out, and broken up into php include files, the next process was creating the design of the site. Now it was time to look for some inspiration. For inspiration I find it useful to look at some css galleries such as:

Quick Sketches

11 - Beta Status ↑

This is useful but I from the concept of Nature and Water, I had few good ideas so I started doing some quick sketches and wireframes of different layouts as you can see from the following images:

Quick Sketches Quick Sketches 2

Wireframes

11 - Beta Status ↑

Here are some of the wireframes I created in Photoshop to help me structure the layout of the design:

Wireframes Wireframes 2

Design

11 - Beta Status ↑ Using CSS Edit to style the content

The next step was moving into designing the site in Photoshop, and as I fine tuned the design and I then began cutting up the images, and optimising the images for the web. This allowed me to move onto styling the content I had added markup to in the beginning. By adding the images, and the width and height measurement spacing from the Photoshop document I could quite quickly create the CSS file for the screen. I also created stylesheets for the print, and as I was using sIFR, there were two more stylesheets needed to control styling of the fonts.

JavaScript Magic

11 - Beta Status ↑

I wanted to add a bit of JavaScript magic to enhance the user experience of Space for Yourself. I added sIFR to bring in a customised font for the headings on the site. sIFR uses both Flash and JavaScript to work. I decided to use the same font I used for the brand of Space for Yourself - Gargoyle, and I feel that the font adds another dimension to the site as it works quite well. With JavaScript disabled browsers, the may not see the custom font but they will still be able to see the information. I have played around with jQuery through the semester, and wanted to add a fading slideshow of images in the banner area of the design. I will look at adding this functionality to the site before next weeks deadline.

Market Research

11 - Beta Status ↑ Email Questionnaire

I needed to do some market research as part of my research for my major project proposal, so I created a short questionnaire that I would send out to a targeted audience of Managers and Coaches from sporting backgrounds in Gaelic Football, Hurling and Soccer. You can download the word document that I sent out to the following people:

So far I received feedback from 4 people, and one of the ten questions I asked them to fill out was to rate between 1-5 the features of Performa Sports. This is how they rated the features of Performa Sports:

From reading Steve Krug, Don't make me think, I have also asked if above participants be interested in testing the Performa application, and Steve Krug recommend about 3 would be enough for usability testing, and I am happy that 3 from the 4 were happy to test the application for me.

Statistical Charts

11 - Beta Status ↑

One of the features of Performa is to display the recorded data from the user, and display this data in an easier more readable and easier understand way. My idea was to use graphs, as within seconds of looking at graphs you understand whether the information is good or bad. I have came across some nice sites that have tutorials in creating charts/graphs. Here is a list of sites I have been looking at:

Although, when implementing this feature into the iPhone App, I need to consider to either create the charts with PHP or with JavaScript. As PHP could be problematic if the user does not have internet connection, or a 3G signal. So a JavaScript could be more ideal solution, but this could make the application slower, and less responsive. I have created two examples (below). The first example is the PHP method using Google Charts API, GoogChart, and the second method is Flotr, which uses the Prototype JS library.

GoogChart
PHP Charts
Flotr
Flotr Charts

PHP Browser Detection - iPhone

11 - Beta Status ↑ PHP Browser Detection - iPhone

This week I wanted to be able separate the look and feel of content from my desktop to my iPhone, and I came across this PHP script for mobile browsers detection. Now if you access the following url - performasports.com/test.php, from the iPhone you will see a sit optimised for the iPhone, and a normal website when accessed from the desktop.

Christmas Wishlist on Amazon

11 - Beta Status ↑ Christmas Wishlist on Amazon

Well it's coming up to that time of the year again when Santa will be visiting all the children soon (yea I am still a child, well a big child!), so I have my christmas wish-list on amazon, as their is so much I want to learn. Unfortunately, I couldn't afford to get all the books from the wish-list (image above), but I have manage to order 6 books, and I another one pre-ordered that I will be looking forward to reading in January. Heres the list of 7 books I am waiting on:

iPhone Stuff...

11 - Beta Status ↑

I have covered a lot this week, but through my travels I have stumbled onto some useful links for looking at iPhone Apps:

Two great articles on marketing iPhone Apps from positivespaceblog.

I also purchased the Deep Green iPhone App from the App Store that Chris recommended in the lecture, a great fan of chess so I am loving this app but the app has given me some great user experience ideas such as:

Competiton

This week a fellow IMD student, Barry Corrigan, rang me and told me about www.gaastats.com. This is a very similar idea to mine in the concept of taking stats with a handheld device. Although their application is the PDA, but I feel I can create a much better application, in terms of design and functionality.

Plans for Next Week

Copyright by Danny Turley 2008 // IMD // 511