Browser Compatibility - Are Your Sites Cross Compatible With Other Browsers?!

Browser compatibility is a big thing which can sometimes be over-looked ...and makes me ask the question - 'Why can't Firefox, Internet Explorer, Google Chrome, Safari, Opera and all the other browsers just be friends?!'

I'm probably going to be waiting quite a while for my question to be answered so in the meantime I'm just going to have to check that my site works on the main 5 browsers which are - Firefox, Internet Explorer, Google Chrome, Safari and Opera.

Thanks to Browsershot.org, which checks browser compatibility and cross platform browser, I've managed to check my site to make sure its cross compatible with more than just the 5 above and older versions of each browsers. I also went into the trouble of downloading Google Chrome, Safari 4 and Opera 10 to test the whole site works.

...Now comes that bad news... All the layout are fine but my Javascript gallery doesn't work in Safari 4! So this is one element to look at. Another point that is different across the 5 browsers is the way it deals with the Javascript attached to the 'Remove Style' button.

Using the same code, here are the outcomes of each browser. As you can see, Firefox and Opera get it right!

Speakers Corner Website - LIVE

It's been two days of solid work but I has finally paid off, and I'm really happy with the final product.

My website was designed for Speakers Corner -

'A bar on the corner of Penrhyn and Abergele roads in Colwyn Bay (just west of The Central pub), Speakers Corner offers a wide selection of smoothies, coffees, juices and alcoholic drinks, as well as cakes & hot ciabattas, art exhibitions and an eclectic mix of great bands of an evening.'

Below are images that link to the XHTML pages. All pages are valid XHTML 1.0 Transitional and CSS Level 2.1 as checked by The W3C Validation Service.

My Javascript elements include the following -

• Change font size (Small, Medium or Large)
• Change style (Removes the linked style sheet and replaces with background colour blue and font colour yellow to make it easier to read, see last image)
• Photo gallery (Simply photo gallery using Javascript display a larger version of the thumbnail when clicked on)
• Lightbox (Added to enlarge images on the 'Music' page)

The Lightbox element was added as an extra.

Creative criticism welcomed!

Late Night Worker

As you can see, it's 2.30am and I've been working on my website all evening. I've completed the home page, about us and contact page by working off the initial XHTML valid home page to create the two other pages, which in their turn will also need validating. I'm three pages down and three to go! The music, art and events page will probably be done tomorrow as the matchsticks holding my eyes open are starting to break under the pressure.

I'm also needing to add in the coding for one of the Javascript elements which will be the ability to remove all CSS attached and just view a simply text version of the site. This will be on all pages.

Here is a final screenshot of the home page only. After completing the whole site, I will hopefully upload it for public testing and critique.

Quick little peak...

Here is a quick little peak at my index page for Speakers Corner's website, a bar in my home town of Colwyn Bay in North Wales. (No doubt subject to change)

Website Wireframe

Here is a quick wireframe for my Speakers Corner web design project -

Main points for index page -

• Clean & simple design (Similar to http://purplerockscissors.com/)
• Good use of large photos/images (Within the events highlights)
  
• Simple to navigate (Navigation at top right)
  
• Use of Javascript elements within the site
• Key information displayed on right hand side (Opening times, telephone, email)
  
• Easy to contact/network with Speakers Corner (news/twitter feed)

Points to consider -

• Band/DJ profiles (Links to their sites - good use of networking)
• Speakers Corner to be considered as a brand? tag line?
• Link their Twitter feed to the site to keep up to date with events

CSS
http://csszengarden.com/

Seminar 2 - Design Exercise 2, Research & Development Task

Building - Structure - Environment

Ideas...
Ysgol Bod Alaw - My old primary school
Oriel Mostyn Gallery - A gallery in Llandudno, North Wales
Victoria Pier - The Pier in my town of Colwyn Bay
Mase Studios - Recording studio that I used to use with my band

Speakers Corner
'A bar on the corner of Penrhyn and Abergele roads in Colwyn Bay (just west of The Central pub), Speakers Corner offers a wide selection of smoothies, coffees, juices and alcoholic drinks, as well as cakes & hot ciabattas, art exhibitions and an eclectic mix of great bands of an evening.

It is the place to be for alternative thinkers and smoothie drinkers; as well as lovers of music, art and all things entertaining, enlightening and filmed.'

Source - http://www.bebo.com/Profile.jsp?MemberId=6985007077

Speakers Corner Facebook Group - http://www.facebook.com/Speakers.NorthWales

Interesting websites I've just spotted -
http://www.wireframe.co.za/
http://eng.designerbreak.com/2009/tutorial/wireframes-and-concept-planning-a-website/
http://hello.hotgloo.net/index.html
http://www.frieze.com/magazine/