Entries Tagged 'Web Design' ↓

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!

You should always accompany any form that gathers personal data with an accompanying link to your websites Privacy Policy. Business Link have a good (and free) one you can use however its stuck in MSWord. The philanthropist in me has taken to providing this privacy policy in a ready to run, cut and paste format for all you web designers out there who love stock resources.

To use, simply search and replace the following items: [COMPANY], [DATE], [EMAIL] & [ADDRESS]

— Start Copy —

<h1>Privacy Policy</h1>

<p>This privacy policy sets out how &quot;[COMPANY]&quot; uses and protects any information that you give &quot;[COMPANY]&quot; when you use this website. </p>

<p>&quot;[COMPANY]&quot; is committed to ensuring that your privacy is protected. Should we ask you to provide certain information by which you can be identified when using this website, then you can be assured that it will only be used in accordance with this privacy statement. </p>

<p>&quot;[COMPANY]&quot; may change this policy from time to time by updating this page. You should check this page from time to time to ensure that you are happy with any changes. This policy is effective from [DATE]. </p>

<h2>What we collect</h2>

<p>We may collect the following information: </p>

<ul>

<li>name and job title</li>

<li>contact information including email address</li>

<li>demographic information such as postcode, preferences and interests</li>

<li>other information relevant to customer surveys and/or offers</li>

</ul>

<h2>What we do with the information we gather</h2>

<p>We require this information to understand your needs and provide you with a better service, and in particular for the following reasons: </p>

<ul>

<li>Internal record keeping. </li>

<li>We may use the information to improve our products and services. </li>

<li>We may periodically send promotional email about new products, special offers or other information which we think you may find interesting using the email address which you have provided. </li>

<li>From time to time, we may also use your information to contact you for market research purposes. We may contact you by email, phone, fax or mail. </li>

<li>We may use the information to customise the website according to your interests. </li>

</ul>

<h2>Security</h2>

<p>We are committed to ensuring that your information is secure. In order to prevent unauthorised access or disclosure we have put in place suitable physical, electronic and managerial procedures to safeguard and secure the information we collect online. </p>

<h2>How we use cookies</h2>

<p>A cookie is a small file which asks permission to be placed on your computer’s hard drive. Once you agree, the file is added and the cookie helps analyse web traffic or lets you know when you visit a particular site. Cookies allow web applications to respond to you as an individual. The web application can tailor its operations to your needs, likes and dislikes by gathering and remembering information about your preferences. </p>

<p>We use traffic log cookies to identify which pages are being used. This helps us analyse data about web page traffic and improve our website in order to tailor it to customer needs. We only use this information for statistical analysis purposes and then the data is removed from the system. </p>

<p>Overall, cookies help us provide you with a better website, by enabling us to monitor which pages you find useful and which you do not. A cookie in no way gives us access to your computer or any information about you, other than the data you choose to share with us. </p>

<p>You can choose to accept or decline cookies. Most web browsers automatically accept cookies, but you can usually modify your browser setting to decline cookies if you prefer. This may prevent you from taking full advantage of the website. </p>

<h2>Links to other websites</h2>

<p>Our website may contain links to enable you to visit other websites of interest easily. However, once you have used these links to leave our site, you should note that we do not have any control over that other website. Therefore, we cannot be responsible for the protection and privacy of any information which you provide whilst visiting such sites and such sites are not governed by this privacy statement. You should exercise caution and look at the privacy statement applicable to the website in question. </p>

<h2>Controlling your personal information</h2>

<p>You may choose to restrict the collection or use of your personal information in the following ways: </p>

<ul>

<li>whenever you are asked to fill in a form on the website, look for the box that you can click to indicate that you do not want the information to be used by anybody for direct marketing purposes</li>

<li>if you have previously agreed to us using your personal information for direct marketing purposes, you may change your mind at any time by writing to or emailing us at [EMAIL] </li>

</ul>

<p>We will not sell, distribute or lease your personal information to third parties unless we have your permission or are required by law to do so. We may use your personal information to send you promotional information about third parties which we think you may find interesting if you tell us that you wish this to happen. </p>

<p>You may request details of personal information which we hold about you under the Data Protection Act 1998. A small fee will be payable. If you would like a copy of the information held on you please write to [ADDRESS]. </p>

<p>If you believe that any information we are holding on you is incorrect or incomplete, please write to or email us as soon as possible, at the above address. We will promptly correct any information found to be incorrect. </p>

— End Copy —