Entries Tagged 'Web Design' ↓

Well, this has to be a record, four posts in one day!

Here’s the latest bit of news, you can now download the new beta of IE9, Microsoft’s latest version of Internet Explorer.

Fingers crossed for full CSS3 support and that it’s Acid proof.

Download IE9 Beta Here

I’ve recently had to move machine whilst Microsoft figure out how the last Windows update has crippled my computer causing it to run slow and lockup/reset every 100 minutes (very annoying). The up-shot of this is that I am now working on a Windows Vista computer instead of my souped up XP configuration and as a result I am no longer able to access my standard suite of cross browser testing apps that are XP only.

I’ve tried to use online services but theyre slow and not very interactive however I recently came across a free solution that comes direct from Microsoft.

By using Microsofts free Virtual PC application you can quickly and easily run virtual machines preconfigured to combine versions of Internet Explorer and various operating systems. So with little effort, I am able to run a virtualised Windows XP with IE6 and IE7 preinstalled.

It works brilliantly.

One thing to note is that the virtual machines are time limited meaning that every so often you will have to download a new version.

Just discovered a great article on the BBC website outlining how Neville Brody’s Research Studio crafted the new website design.

It’s a great article because it goes into read depth about some of the decisions made and shows how difficult issues such a stext overlays on top of images were managed.

Simply inspirational for everyone.

Mr Brody was a twat when I met him a few years back… just goes to show you should never meet your heros.

Poached from QBN.com

I’m proud to announce the re-design of the Distinctive Chesterfields website as performed by both Adam (php genius) and myself.

View the Distinctive Chesterfields website.

It was a great challenge as we had to keep all of the content and site structure the same and had to work around a rather archaic CMS produced by the previous creator.

Some of the features of the new Distinctive Chesterfields website include:

• Improved product information pages
• Removal of some sales workflow barriers
• Combined brochure and swatch request pages
• Refocused international page contents

The new Distinctive Chesterfields site has been online for a few weeks now during soft launch and with only a few minor niggles, I’m glad to say the company has had its best month of sales to date, a fact that I’d like to attribute partially to the new design.

Just been emailed this great little istockphoto promo code for 15% off 50 credits or more.

Simply enter the code: M155U42

Simples *squeek*

I’m a massive advocate of never working for free. No pitches, no free samples, no work on spec.

And heres why…

If you’re a website designer youve probably experienced all of the above as clients try to buy a Farari for the price of a Scoda. I’m not hostile to customers, its just that with so many agencies and studios willing to work for free on the promise that they maybe possibly might get the job (at 1/2 the projected budget) it just makes no sense to me for our industry to keep doing this.

for more information visit No-Spec.com

Looking through Sitepoints HTML5 cheat sheet and I’m confused.

After spending the past 6 years working with XHTML, its strange that HTML5 supports some previously depreciated tags like <b> <i> and a couple of others. What I suspect to happen is that in the intermediate stage, that ‘tag-soup’ style development happens (again) and that to retain support for IE6 etc, HTML5 tags will be implimented in a non-structural way.

I will be working on a few HTML5 sample Wordpress themes (to be released free) for anyone that wants them as a way of geting to grips with the intricasies of the new HTML5 format.

It’s still a shame that we’re inhibited from working in CSS2 (let alone v3) as retaining backwards compatability is still a maxim of development work.

Today sees a significant change to your Google listings with google announcing its support for rich snippets including vCard and vCalendar. This is important as it gives us an edge to make our listings stand out from the crown, however the down side (yes theres always one isnt there) is that it arms Google withgreater understanding our our content which can be used to marginalise sites and even worse reduce them to a local listing.

hCard

Heres my quick guide to creating a semantic hcard for your site to be used where ever you put your address:

1.  <div class="vcard">
2.    <a class="fn org url" href="http://www.click4beds.co.uk/">Click 4 Beds</a>
3.    <address class="adr">
4.      <span class="type">Work</span>:
4.      <div class="building">Enterprise Works</div>
6.      <div class="street-address">Long Lane</div>
7.      <div class="locality">Honley</div>,
8.      <div class="region">West Yorkshire</div>  
9.      <div class="postal-code">HD9 6EA</div>
10.     <div class="country-name">England</div>
11.   </address>
12.   <div class="tel">
13.     <span class="type">Work</span> +44 (0)1484 666563
14.   </div>
15.   <div>Email:
16.     <a class="email" href="mailto:sales@click4beds.co.uk">sales@click4beds.co.uk</a>
17.   </div>
18. </div>

The Breakdown.

1. Tells Google to start a vCard
2. Sets a link thats a [fn] Full Name, [org] organisation that has a [url] website address
3. Starts the [adr] address content
4. Sets this [type] field to be a work address
5. Sets this [building] field to be the building name
6. Sets this [street-name] field to be the street address
7. Sets this [locality] field to be the town/city or village address
8. Sets this [region] field to be the county address
9. Sets this [postal-code] field to be the postcode
10. Sets this [country-name] field to be the name of your country
11. Closes the address content
12. Identifies content as a telephone number
13. Tells Google this is a work number followed by the telephone number itsself
14. Closes the telephone number content
15. Starts a container
16. Tells google that this is an email address
17. Closes the container
18. Closes the vCard

Adapted from microformats.org/wiki/hcard

hReview

If you read the original Google post above you’ll notice that theyre also displaying a review for this listing. They claim that this is a standard format widely used on the Interwebs so best keep your eyes peeled for something like the following which is used as a sample on microformats.org/wiki/hreview

1.  <div class="hreview">
2.    <span><span class="rating">5</span> out of 5 stars</span>
3.    <h4 class="summary">Crepes on Cole is awesome</h4>
4.    <span class="reviewer vcard">Reviewer: <span class="fn">Tantek</span> -
5.      <abbr class="dtreviewed" title="20050418T2300-0700">April 18, 2005</abbr></span>
6.    <div class="description item vcard"><p>
7.      <span class="fn org">Crepes on Cole</span> is one of the best little
8.        creperies in <span class="adr"><span class="locality">San Francisco</span></span>.
9.      Excellent food and service. Plenty of tables in a variety of sizes
10.     for parties large and small.  Window seating makes for excellent
11.     people watching to/from the N-Judah which stops right outside.
12.     I've had many fun social gatherings here, as well as gotten
13.     plenty of work done thanks to neighborhood WiFi.
14.  </p></div>
15.  <p>Visit date: <span>April 2005</span></p>
16.  <p>Food eaten: <span>Florentine crepe</span></p>
17.  </div>

Based on the break down from the HCard this is pretty easy to understand.

XFN

XFN is already sidely used on blog engines like Wordpress where it encourages you to identify link relations to your site using the REL attribute.

Heres the official list of regognised REL attributes microformats.org/wiki/existing-rel-values

It seems that Microsoft have decided to finally take the IE8 browser out of beta and its now available to download in its complete form (despite the fact that its still not secure – yet more secure than apple’s safari!).

Download IE8 (Final)

Just working on a wizard for the chesterfield site allowing people to configure their sofas before a final price is presented.

As part of this I need to illustrate a set of options with associated radio buttons for choice. I wanted the user to be able to click the image and/or text descriptions in order to make the selection and thought this simple technique would prove beneficial for people considering javascript and lots of junk code as my solution is really elegant.

The solution is simple and requires no associated scripting…

Just wrap it all in a label tag i.e.

<label for="foo">

  <img src="foo.gif" alt="alt text" />

  Descriptive Text

  <input type="radio" name="foo" value="Item Value" />

</label>

Now anything you click inside the label will automatically activate the radio button.

I know it’s a simple technique however im sure it will help ease someones pain of interactive form design!