Client - Footworks - user testing

Footworks is 98% complete and so before signing off the product you can check out the final site here:

footworksbysue.co.uk

Whilst you're at it, fill in this quick questionnaire and let me know what modifications you would like implementing.

@

client - Footworks user feedback suggestions

One important lesson learnt through user feedback has been that they couldn't find their way back to the homepage once they had clicked into the site.

More familiar users of the web would typically identify the logo as housing this link, and indeed, this was how I initially coded it for Footworks by Sue.

However, taking the comments on board, I decided to better illustrate the capabilities of the logo.

However the first person to use this modified version believed 'home' to be part of the company branding/naming. In short, it wasn't an effective solution.

Fortunately the follow up solution was very easy to implement. The navigation options in the site work because they are all laid out in an easy to follow format. With a spare place under the information column I added a 'homepage' link.

Now when people want to get back to the site's first landing page, they will typically search around the other existing options that they know to work and find this additional one.

And such to say, the homepage link issue hasn't been mentioned again.

@

Client - Footworks XHTML validation

It was important to try and achieve validation for Footworks site as it better ensures correct rendering across browsers.

-----------

In my quest for validation, XHTML Strict, the most demanding validation testing - it took a bit of effort, the first problem regarding making a whole div a hyperlink.

The problem lies in the fact that divs aren't allowed to have a hyperlink wrapped around them, like this:

It breaks the rules set out for XHTML Strict.

It was eventually after reading this forum thread that I discovered why: http://www.webmasterworld.com/forum83/5857.html.

A quick change to the code, making the inline content have the hyperlink attached, and applying a 100% width/height, and making the targeted <> tag { display : block } means that this problem is eradicated and the homepage validates.

--------

Unfortunately, there is one page that does not get the green tick for validation on Footworks.

The Contact page uses a plugin called Contact Form 7. It's versatility makes it a great plugin - you can basically get the contact form to have the input fields you want, the correct input types you expect, error messages written exactly in the correct tone etc. Great...

However, the creator has made each of the input fields a list item. For some reason, he has failed to apply these list items in an unordered list tag wrapper. Hence, the fail.

I did try going into the plugin codings, looking at the php and javascript but failed to locate where this list was generated. I don't believe this to be that bad a fault though, minor really.

-------

In all the site validates all apart from this contact page. I am content with this, and will look into seeing if the plugin can be fixed.

@

Client - cross browser testing issues

I've had to tackle a few minimal Internet Explorer bugs, but this time, Internet Explorer (no doubt through a fault) is rendering text correctly whilst the others (Firefox, Chrome, Opera) do not.

How I want it to look:

How it shouldn't look:

What is strange is that this unordered list works on other pages. I have checked and I believe that it is an issue to do with

not wrapping?

SOLVED:

I managed to overcome this problem by removing the float:left on the

and adding a big margin-left so that it clears the images that are a consistent feature on most pages.

------------------

Elsewhere, Internet Explorer 7 has been playing up, true to form.

The padding or height of the showreel was being ignored. This was easily fixed with a conditional styling statement at the top of the page.

-----------------------

The shadow effect that I have applied around the outside of the master div is not completing at the bottom of the page's content. Instead it runs off the bottom of the screen.

I managed to get it so the bottom shadow is displayed through informing IE7 to impose margin-bottom:0px on the sideshadows. The problem lies in the fact that I can't set a strict height for the side shadows as they expand with the content on the page. Overflow:hidden doesn't work.

Out of frustration, and with regret, I have had to turn off the shadows for IE7.

--------------------

Lastly, IE7 is clipping longer sections of the custom font text found in the navigation bar.

If you look you can see it on foot health and foot health tips. I attempted to fix this by increasing the width of the line, increasing the padding and altering the word-spacing. The problem lies in the fact that SIFR reproduces text in the same size area that the default font, in this case Arial takes up.

After trying out a number of the Javascript options, I had not made any progress. Altering the styling in one place means it disrupts the rest of the browsers.

Fortunately the documentation page for sifr3 proved quite detailed in allowing slight adjustments. After trying tuneWidth, fitExactly and a few others, unsuccessfully, I tried letter-spacing, combined with tuneWidth and have managed to find an inbetween that fits both IE7 et al. Phew.

--------------

Ultimately this all signifies the benefits people can get from having the latest browser version.

@

Client - without SIFR styling

As part of the design, I incorporated SIFR so to continue the content management approach. When my client changes the text in the Wordpress interface, the text on screen, in this custom font, will change also.

So far three components in the page design are powered with the custom font Nilland.

Navigation:

Introductory text:

Individual page headings:

The complication arises when a user doesn't have Flash , or have turned it off. Thankfully SIFR degrades, but it still requires checking what the site will look like, and style as necessary.

----------------------

Navigation:

Fortunately it isn't that bad. Georgia isn't that far off width-wise to Nilland. The hyperlink underlines just need removing though to neaten up the navigation. Also, they need the grey shade used elsewhere so to aid consistency.

INTRODUCTORY TEXT:

Again, here it is perfectly reasonable replacement. However, not being a fan of Georgia bold, I tried altering it to font-weight:normal; and much prefer the results:

Notably the hyperlinks are in a darker colour that the rest of the site. This was simply addressed, whilst the underline is kept to indicate slightly better that it is a link.

@

Client - SEO with HOBO

After signing up, and downloading the HOBO Search Engine Optimisation e-book, it is detailed and informative, with a contents page that allows you to easily dip in and out on what you want.

Having some experience already in SEO, I was able to tick off some objectives before reading:

1. Submit site URL to Google, Bing
2. Produce, and upload a sitemap. This can be done via a generator, which makes the task simple. (Make sure to link the Webmasters to this sitemap)
3. Add the site to Google Analytics so I can track performance, where visitors are coming from, how long they stay on certain pages
4. Add the site to Google Webmaster Tools and Bing Webmaster Center to identify keywords, crawl errors, HTML suggestions
5. Include descriptive
6. Add
7. Use tags incrementally, to identify important sections in the site. These were the main page title, contact link, inner-page titles, useful links

I've still got the majority of the 150 page PDF to read through to hopefully scour more incite.

The first one that surprised me was the author's suggestion to not bother submitting your site's URL to Google. Fair enough, I hadn't and the search result still showed up. However, switch to Bing and it couldn't be found, so site submission was necessary here at least.

@

Client - clashing colours

I've realised that through choosing orange contrasted with green I was limiting my colour options elsewhere on the site. On the top of the homepage I am trying to implement the phone number. After having used too much orange, I have tried to contrast with a green phone button but it looks awful.

I tried changing the banner than heads the slideshow. Here's what I mean:

None of these really go. For now, I've had to keep the all orange look.

Obviously the eventual pictures that go into the slideshow will affect the perception of the page.

Any suggestions?

Opacity in IE7/8

Debugging proves to be what a web designer spends most of their time doing.

On the homepage, the slideshow which demonstrates what people can expect to find on the inner pages uses an alpha value to apply opacity.

Unsurprisingly, IE doesn't yet support the rgba tag yet.

UPDATE - just realised that rgba is a CSS3 tag and so older Firefox etc won't even support it. This means using the less useful opacity tag which unfortunately makes all children within have opacity too :( Help provided here. The opacity damages legibility so I'm going to just provide a PNG for as a background-image.

I found a developer online who has coded a quick app to translate the regular background-color: rgba(229,124,19,0.7); but for Internet Explorer 8,

into

{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2E57C13,endColorstr=#B2E57C13);zoom: 1;}

which you can stick in conditional comments for IE.

This works for IE8, but not IE7. Grrr

@

Client - mid-build browser testing

I haven't done it this way before, but I decided to look up the site midway through it's build and check it in the other browsers. It makes sense really, you can tackle problems as they occur. Development lesson learnt.

As can always be relied on, Firefox, Chrome, Safari all rendered as I wished the design to be laid out. Nothing really surprising there.

----------------

Opera seemed on the whole fine, but the line-height on the sIFR was off a little on random links. Nothing massive, but a little strange.

---------------

IE8 managed to tackle all the main site features well, which is encouraging, but struggled on the slideshow plugin. This may be a faux pas on my part. I used RGBA, a CSS3 feature I believe, and so this doesn't work in IE8. This can be easily remedied though by using opacity tag instead.

-------------------

IE7 starts the typical run of IE errors. The divider line is incorrectly positioned, top right for some reason. Bizarrely this doesn't happen in IE6? Also, the shadow effect that I have built around the main div holding the content continues off the page. This needs to stop when the main div does.

Again, the orange alpha layer has been omitted. I expect this to work when I use a special IE stylesheet and select opacity instead. That is if opacity works for IE!!

Applying a GIF with transparency and background-repeat:repeat applied does not work either. I believe this is something to do with how the slideshow code works.

----------------

Internet Explorer 6 again has proved the bain in the build process.

The background image doesn't allow the content div to sit on top. Instead it was found at the bottom of the page. The shadow effects can be seen bunched together above, and obviously don't work as they are transparent PNGs.

I'm actually considering whether to ditch IE6 support. With today's browser choice, users will be encouraged to update to IE8. I will try to get the master div to sit atop the background, but other intricacies will require extra attention. Then again, considering the target market, it could well be that they are the type of people who don't update their browsers and ignore security updates... ??

@

Client - book now buttons

The more I look at the word 'book' the more I feel like saying it like those up North.

In terms of suitability, I tried a range of suitable fonts:

Vag Rounded

Georgia

Nilland (the typeface used in the main design)

Steinem (popular free typeface doing the rounds at the minute)

---------------

These seemed a little too boxy, so I rounded the corners:

As can be seen I also tried using the contrasting green as I thought these buttons are important features on the page and so would suit being highly contrasted.

--------------------

I think these may prove too contemporary and not formal enough for the site, but I'm pleased with the peeled sticker look. If not used here, always useful on a different project. They would certainly stand out on the page, helped by the big bold type.

-------------

Shall forward to the client as part of a mock up to see which she likes the look of.

@

Client - website building commences

Despite my client being on a two week hiatus, I have gotten hold of the server details and so began installing the Wordpress CMS.

The homepage template is up and available now. Until I get content through from Sue it's more or less the shell.

You can also visit the site, a work in progress, on this link, www.footworksbysue.co.uk

-----------

The background image is not 100% confirmed as on larger monitors it distorts being about 1000px wide. I could remedy this in Photoshop, or alternatively I have found a few more images, which are slightly different but would add some interest to the backdrop. I'm awaiting feedback on this.

For now though, the green leaves of nature provide a fresh lift to the page and contrast nicely with the orange that is used in the main body of the site.

---------

Having used sIFR before, I was able to implement it this time without much trouble. The only issue I experienced was due to the custom typeface Nilland not having a bold style in the original typeface package. I have since created a strengthened version, and had to pretend that it is a different font in the configuration script. It has achieved what was sought after for the navigation links headers.

--------

Elsewhere, to achieve a full background image, I located a plug-in called Supersized. This proved a little more tricky.

The benefit of using this plug-in is that it forces the browser to render all of the picture, not a zoomed version as can happen when users have a lower resolution.

However, both myself and Sarah experienced trouble in that it would retain the landscape ratio of the image and force a white border, both at the top and left of the page when the browser window was resized. After an hours testing, it whittled down to swapping the advised 'absolute' position with 'fixed' for the big background image.

Having researched into it a bit, "a fixed position element is positioned relative to the viewport, or the browser window itself." (CSS Tricks) Obviously this is what we were after, rather than absolute which "allows you to literally place any page element exactly where you want it".

------

So far so good. Once my client returns from her two weeks of exams I will be able to collect some content and start forming the site.

Obviously being a CMS, I will eventually need to create a user manual to allow her to operate the site herself.

@

Client - website costs #3

The Creative Store again offers a reasonably consistent package to that which I am providing for my client:

5 page HTML website from £525 plus Vat
8 page HTML website from £765 plus Vat
12 page HTML website from £1055 plus Vat

WHAT WE INCLUDE:

• A telephone conversation or meeting at our offices with one of our account managers
• Design two proposals based on information provided about the websites you like. We will then combine your logo, photos and colour scheme into the design work. On feedback from you we will make minor adjustments to the chosen design
• Registration of a FREE .co.uk or .com domain name if required or site set up pointing to your existing domain name
• Choice of horizontal or vertical navigation
• Latest HTML standards
• Choose your pages and add-on options
• Unlimited web page links
• Basic SEO (search engine optimisation) is included such as addition of page titles, main headings (H1 tag), meta description and meta keywords for each page
• *6 months FREE web hosting including fully backed up data at all times
• Online web statistics to track visitor information and site hits

Content management system

We offer our own DoubleQuick content management system. This gives you the following functionality:

• Ability to set up pass worded administration rights for specific personnel
• Administrator can add new user, edit or delete a user
• Four different levels of access
• Ability to content manage the body copy and images within the site
• Ability to create new pages under existing parent pages using existing templates from within the site
• Ability to set page order of new pages
• Ability to create links and upload PDF’s
• Ability to set and alter meta description, meta keywords, page titles, H1, H2 and alt tags for SEO the cost of adding this to the site would be £375 including a one hour training session at our offices.