Rather than go straight into Web Semantics & how this relates to the Web and building semantics into HTML, I think it is important not to lose sight of what the word ‘Semantics’ actually means. It is not a word made up by Front End Designers but a general term used to describe the use of meaning.

A lot of people start using HTML without really understanding it. They see that they can attach a css file to some HTML and it starts to look pretty. HTML is one of those things that get misused way too much. You can get away with using a minimal variation of its features yet seemingly achieve what you want quickly. The browser doesn’t care what you put in it, as long as you can apply some sort of design. Over time, this kind of mentality has taken hold in some circles.

We should be thinking about the way we build things with HTML, whether we are a client or colleague of a Front End Designer and update our site through a CMS, or we are the ones who actually build Web sites, static pages or ‘templates’ that get put into a CMS for non technical people to update them. The future of the Web depends on it.

General meaning

According to Wikipedia, the term semantics is summed up as the study of meaning. In general everyday life, everything needs to have meaning whether that be language, objects – pretty much anything that exists.

The reason semantics is quite an open ended topic is because a lot of what it conveys is extremely subjective. As human beings, we accept that there is a commonly understood association with an object, word or phrase. Seeing the object or hearing the word or phrase, even feeling somethings shape or texture results in an emotional response, leading us to conclude what the object or phrase is as we put all the features together in our mind.

Phrases can mean the same thing yet have an underlying tone which can convey something else entirely. The word ‘Meticulous’ has a positive connotation which suggests that something or someone has a high attention to detail and wants to produce the best result possible, another word which has the same literal meaning is ‘Pedantic’. This has an altogether different feel about it. This can affect the way a message comes across. Choosing the right word is where semantics comes in.

The point here is that we all have a commonly understood perception of these things. The principle is that without the elements of an object, the object itself would have no meaning. If any one of the elements were missing, the object itself would no longer hold together and would become something else.

The Real World

As well as a general understanding of the phrases, objects can also have different connotations. Let me use a Bank as a real world example. It is generally understood that a Bank is a big building that holds lots of Users Bank accounts where our money has a large degree of security. If we change our object to that of a Piggy Bank, we now think of it with an altogether different connotation. None of the elements have changed and it is still a bank which holds a Users money yet we view it in a completely new way.

Unlike a lot of connotations we haven’t changed it in a negative way, just a different one. It is less intimidating and more fun. In effect, we have reduced the way we perceive the size of all the elements the bank contains. A piggy bank is commonly understood to have one user, a small amount of money and a lower level of security.

Semantic HTML

This way of defining things can and should be the same for the Web. Visually, we can achieve a lot through the use of graphics but if we don’t make use of Semantics, the Web page we build will have little meaning.

An HTML web page is essentially made up of lots of little bits of meaningful data. Presentation is absolutely essential though it should complement the data it is designed to present. For example, we can place an image on a Web page with very little HTML knowledge. This image may have lots of information on it yet mean very little to the Web.

Being able to identify and define what that information is, is vital to making HTML Semantic. Let me give you an example (time for some code I’m afraid!):

<a href="http://www.webegg.co.uk">
  <img src="images/logo.png" alt="Some vaguely meaningful text that pops up and annoys people" />
</a>

This is some html, which will allow users to click on it and be sent through to a link. As a Web Designer, if I am told that this link is an important part of the Web site I am building, it is my duty to try and do something about that.

<h1>
  <a href="http://www.webegg.co.uk">I know this will be very meaningful text to google but I want to see an image</a>
</h1>

h1 a{
	background: url("../images/logo.png") no-repeat left bottom;
	display: block;
	height: 100px;
	margin: 15px 0 0 0;
	text-indent: -9000em;
	width: 360px;
}

This is another way to create the same thing. Using a combination of more meaningful tags (the <h1> tag has very high priority in HTML) it is possible to give more meaning to the element. Are certain corners of the Web Industry trying to tell me not to worry about things like this, because to me, that just sounds lazy.

There are many more examples of this kind of technique and I’m always trying to think of better ways to make the content of Web sites I build more meaningful. I believe in doing things this way as I think should anyone who wants to get involved in designing Web sites with HTML. After all, who else is going to?

You don’t miss what you can’t see

It suddenly dawned on me that these poor people are sitting in front of their screens looking at an old browser. They don’t know about the improvements in these browsers because they can’t see what the interfaces look like. I’ve taken it upon myself to provide a visual of each major browser (all the ones I support during the build process) to use as a tool to show clients and users what they are missing. Click on any of the browser visuals below to see a larger version:

The Demo!

I should point out that this is quite advanced and some undertsanding of the finer points of HTML/CSS/jQuery are necessary in order to understand every detail. I even had to do quite a few modifications to my code highlighting to handle this, so please bare that in mind. It ain’t easy kids!

I made this a while back now for a small site where they wanted the interface to do all the work. They wanted to have a portfolio of projects they had worked on but had quite a diverse ‘jack of all trades’ category list to work with.

The following information was the kind of thing I had to work with from the start of the project (names of categories are made up to avoid conflicting with the real life project).

My brief was to create a ‘filterable list’ where the user would be able to click on each category item in turn to show and hide all the items under that category. I thought this was also a great idea and something I could use in other projects where I could develop the script and behaviour further.

The basics of the request were pretty straight forward to achieve. They basically wanted to be able to click on items and have items within the selected categories appear or disappear accordingly as part of the interface. Things like the jQuery Quicksand plugin or the Filtering Blocks demo quickly sprang to mind until I realised that they were asking for one extra vital component, the ability to select more than one thing at a time. None of these interfaces have the ability to do this and it requires much more thought and script to achieve.

Where the heck to start?!

My first action as with any slightly daunting project was to panic but this was shortlived. I then went about investigating why the above examples acted in the way they did and what the jQuery was interacting with on the page.

Once I started to understand this, I could start putting together some structure. Thankfully, I was working to a predetermined design (which always helps). This was unlikely to change so I knew I could confidently go to town on the jQuery without fear of repercussions further down the line. There are few things less heartening than to do a weeks work on something only for it to be scrapped the following Monday because someone changed their mind.

Panic over, lets begin

The best place to start with any project, if there is a design in place and it has been approved and double approved, build it! The behaviour can always be applied to the finished design so unquestionably, always build something you and the user of the site would be happy to use without any Javascript enhancements. Below is the HTML I ended up with:

The HTML

<!doctype html>  
 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>jQuery Multiple Filter</title>
 
 
  <!--  Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
 
 
  <!-- CSS : implied media="all" -->
  <link rel="stylesheet" href="css/style.css?v=2">
 
 
  <link href='http://fonts.googleapis.com/css?family=Lora&v2' rel='stylesheet' type='text/css'>
 
  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
 <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
 
  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/libs/modernizr-1.6.min.js"></script>
 
 
 
  </head>
 
<body>
<div id="container" class="entry">
 
 
    <div id="main">
        <div class="gradup">
            <div class="onethird plus right">
 
                <h3>Filter</h3>
                <ul class="filters showall">
                    <li><input type="checkbox" id="filterIDall" value="all" class="dynamicFilterInput"><label for="filterIDall">Show all</label><span>0</span></li>
                </ul>
 
        <h5>Customer</h5>
 
        <ul class="filters">
          <li><input type="checkbox" id="filterIDgoogle" value="google" class="dynamicFilterInput"><label for="filterIDgoogle">Google</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDyahoo" value="yahoo" class="dynamicFilterInput"><label for="filterIDyahoo">Yahoo</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDmicrosoft" value="microsoft" class="dynamicFilterInput"><label for="filterIDmicrosoft">Microsoft</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDgeewiz" value="geewiz" class="dynamicFilterInput"><label for="filterIDgeewiz">Geewiz Inc</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDapple" value="apple" class="dynamicFilterInput"><label for="filterIDgeewiz">Apple</label><span>0</span></li>
 
        </ul>
 
        <h5>Service</h5>
        <ul class="filters">
          <li><input type="checkbox" id="filterIDflat-design" value="flat-design" class="dynamicFilterInput"><label for="filterIDflat-design">Flat Design</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDworking-design" value="working-design" class="dynamicFilterInput"><label for="filterIDworking-design">Working Design</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDinteraction-design" value="interaction-design" class="dynamicFilterInput"><label for="filterIDinteraction-design">Interaction Design</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDback-end-programming" value="back-end-programming" class="dynamicFilterInput"><label for="filterIDback-end-programming">Back End Coding</label><span>0</span></li>
          <li><input type="checkbox" id="filterIDwriting" value="writing" class="dynamicFilterInput"><label for="filterIDwriting">Content Writing</label><span>0</span></li>
		  <li><input type="checkbox" id="filterIDadministration" value="administration" class="dynamicFilterInput"><label for="filterIDwriting">Administration</label><span>0</span></li>
        </ul>
 
        <h5>Year</h5>
        <ul class="filters">
          <li><input type="checkbox" id="filterID2011" value="2011" class="dynamicFilterInput"><label for="filterID2011">2011</label><span>0</span></li>
          <li><input type="checkbox" id="filterID2010" value="2010" class="dynamicFilterInput"><label for="filterID2010">2010</label><span>0</span></li>
          <li><input type="checkbox" id="filterID2009" value="2009" class="dynamicFilterInput"><label for="filterID2009">2009</label><span>0</span></li>
          <li><input type="checkbox" id="filterID2008" value="2008" class="dynamicFilterInput"><label for="filterID2008">2008</label><span>0</span></li>
          <li><input type="checkbox" id="filterID2007" value="2007" class="dynamicFilterInput"><label for="filterID2007">2007</label><span>0</span></li>
          <li><input type="checkbox" id="filterID2006" value="2006" class="dynamicFilterInput"><label for="filterID2006">2006</label><span>0</span></li>
          <li><input type="checkbox" id="filterID2005" value="2005" class="dynamicFilterInput"><label for="filterID2005">2005</label><span>0</span></li>
 
        </ul>
                <div class="filterThis"></div>
            </div>
 
            <div class="twothird plus left">
                <h2>Projects completed</h2>
 
 
 
 
 
 
                <div id="post-12" class="post-12 page type-page status-publish hentry">
                    <div class="entry-made played">
                        <p>Whoah! Thats a big fat Nullity. Try clicking a few more boxes ...</p>
 
                                                                    </div>
                </div>
 
                <div class="entry-made">
 
 
                    <ul id="holder-init" class="filterThis showThis">
                        <li class=" 2011 working-design microsoft flat-design">
                            <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                            <div class="caption">
                                <h3><a href="http://www.webegg.co.uk">Microsoft Homepage</a></h3>
                            </div>
                        </li>
 
                        <li class=" 2011 working-design microsoft flat-design">
                            <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                            <div class="caption">
                                <h3><a href="http://www.webegg.co.uk">Windows Promotion</a></h3>
                            </div>
                        </li>
 
                        <li class=" 2010 working-design yahoo flat-design">
                            <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                            <div class="caption">
                                <h3><a href="http://www.webegg.co.uk">Re-design of YUI</a></h3>
                            </div>
                        </li>
 
                    </ul>  
                </div><!-- .entry-content -->
 
            <div id="holderwrap">
 
 
 
                <ul id="holder" class="filterThis">
                    <li class=" 2011 working-design microsoft flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Microsoft Homepage</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2011 working-design microsoft flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Windows Promotion</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 working-design yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Re-design of YUI</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 back-end-programming microsoft flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Windows 7</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">YQL Interface</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Yahoo Blog</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Front End Development leaflet</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 administration yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">HTML File System</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Yahoo Answers</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2009 interaction-design yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Yahoo Mail</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2010 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Yahoo Weather</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2009 writing design interaction-design geewiz flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Transition Munition</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2009 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Yahoo UK</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2009 writing administration microsoft interaction-design flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">IE6 Downfall</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 back-end-programming interaction-design yahoo">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Sustainable Development Organisation</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2005 writing interaction-design yahoo">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Blog Post</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Presentation Slides</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2009 interaction-design yahoo flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Click Through Presentation</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 flat-design interaction-design yahoo">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Interface Components</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 working-design google">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Google +</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 interaction-design microsoft">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Windows Phone</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 interaction-design google">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Touchscreen Interface</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 apple google">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Merger Talks</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2008 administration apple">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Market Saturation Enquiry</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2007 flat-design google">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Google -</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2006 working-design microsoft interaction-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Microsoft Site</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2006 geewiz flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Quick Update</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2006 writing working-design microsoft interaction-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Company Progress Report</a></h3>
 
                        </div>
					</li>
 
 
                    <li class=" 2006 geewiz working-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="">Screenshot with iPhone</a></h3>
 
                        </div>
					</li>
 
 
                    <li class=" 2006 geewiz interaction-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Fixing Interface</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2006 writing geewiz">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Blog Post</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2006 geewiz administration">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Version Control</a></h3>
                        </div>
					</li>
 
 
                    <li class=" 2005 geewiz flat-design">
                        <a href="http://www.webegg.co.uk"><img src="images/testimage-smaller.jpg" alt="blog post" /></a>
 
                        <div class="caption">
                            <h3><a href="http://www.webegg.co.uk">Re-design on a Budget</a></h3>
 
                        </div>
					</li>
 
 
                </ul>
            </div>
        </div>
 
 
        <div class="clearboth"></div>
    </div>
 
</div>
 
 
  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
 
 <!-- scripts concatenated and minified via ant build script-->
 <script src="js/plugins.js"></script>
 <script src="js/script.js"></script>
 
 </body>
 
</html>

The main elements here are the

‘s and the

‘s. In order for the two to talk to each other, they have to have something in common. In this instance it is done with classes. In this instance I have used

elements to trigger a click event. This is purely because the design had checkboxes shown and it was better to tie the click event to something that was easy to reference checked or unchecked. This could just as easily be done with other elements, adding and removing classes and checking for the presence of them.

When a click is made on these elements, the jQuery runs through a series of thought out procedures:

1. If the ‘Show all’ checkbox has been clicked
   1. If it is and it is checked, make all projects appear
   2. If it is and its not checked, make all projects disappear
2. If not, is the selection checked
   1. If its checked, we must need to show all the elements with the same class as the value in the checkbox input. We need to show all the elements that match the selection, then make an array out of all the categories matching the selection. Then they are checked in the filter list to show the user what other categories share the project.
   2. If it got as far as this, the only possibility left is that something is being deselected. We need to hide all the elements that match the selection, then make an array out of all the categories matching the selection. Then they are deselected from the filter list.

I told you it was quite in depth and I have done my best to explain things. It may help if I actually show you the script.js file for it:

The jQuery

$(document).ready(function () {
 
    // Removes all filtered elements initially
    $("#holder li, .played").hide();
    $("#holder.showThis li").show();
 
    // Counts up occurances of classes and sets number of occurrences in filter list
    $(".filters li").each(function(){
        var $val = $(this).find('input').val();
        var $valcount = $("#holder ."+$val).length;
		$(this).find('span').html($valcount);
		//alert($valcount);
    });
 
 
    // Sets the number in the 'Show all' filter by counting the total amount of entries.
    var $itval = $("#holder li").length;
    $(".filters li input[value*='all']").parent().find('span').html($itval);
 
 
 
 
    // When clicking an item in the filter list, elements will appear or dissappear
    // depending on whether list item is checked or unchecked.
 
    $(".filters li input[type=checkbox]").click(function(){
 
 
        $('a.jqTransformCheckbox').parent().find('input[type=checkbox]').removeAttr('checked');
        $('a.jqTransformChecked').parent().find('input[type=checkbox]').attr('checked','checked');
 
        // next two lines remove the initial page content when a filter is clicked
        $(".entry-made").hide();
        $(".entry-written").hide();
 
        var selection = $(this).val();
        if (selection == "all"){
            //show all items
            if ($(this).is(':checked')){
                $("#holder li img").fadeIn('fast');
                $("#holder li").slideDown('slow');
                $(".filters li input[type=checkbox]").attr('checked','checked');
                $(".filters li").addClass('checked');
                $(".filters li label").css({'color':'#efefef'});
            }else{
                $("#holder li img").fadeOut('slow');
                $("#holder li").slideUp('slow', function() {
                    $(".played").slideDown('fast');
                });
                $(".filters li input[type=checkbox]").removeAttr('checked');
                $(".filters li").removeClass('checked');
                $(".filters li label").css({'color':'#40575F'});
            }
        }else{
            if ($(this).is(':checked')){
                $("#holder li."+selection+" img").fadeIn('slow');
                $("#holder li."+selection).prependTo('#holder').slideDown('fast');
 
                var stringOfClassNames = '';
                var thisClassString = $("#holder li."+selection).attr('class');
                stringOfClassNames = stringOfClassNames +' '+ thisClassString;
 
                var arrayClasses = stringOfClassNames.split(' ');
                $.each(arrayClasses, function() {
                    $('.filters input[value='+this+']').parent('li').addClass('checked');
                    $('.filters input[value='+this+']').parent('li').find('label').css({'color':'#efefef'});
                    $('.filters input[value='+this+']').attr('checked','checked');
                });
 
                $(this).parent('li').addClass('checked');
                $(this).parent().find('label').css({'color':'#efefef'});
 
 
                if ($.browser.webkit) {
                    $('#main #holder li').css({'position':'relative'})
                }
            }else{
 
                $("#holder li."+selection+" img").fadeOut('slow');
                $("#holder li."+selection).slideUp('fast', function() {
 
                    var stringOfClassNames = '';
                    var thisClassString = $("#holder li."+selection).attr('class');
                    stringOfClassNames = stringOfClassNames +' '+ thisClassString;
 
                    var arrayClasses = stringOfClassNames.split(' ');
 
                    $.each(arrayClasses, function() {
                        $('.filters input[value='+this+']').parent('li').removeClass('checked');
                        $('.filters input[value='+this+']').parent().find('a.jqTransformCheckbox').removeClass('jqTransformChecked');
                        $('.filters input[value='+this+']').parent('li').find('label').css({'color':'#40575F'});
                        $('.filters input[value='+this+']').removeAttr('checked');
                    });
 
                    if ($('.filters input:checked').length <= 0){
                        $("#holder li").slideUp('fast');
                        $(".played").slideDown('fast');
                    }
 
                });
 
                $(this).parent('li').removeClass('checked');
                $(this).parent('li.'+selection+' input[type=checkbox]').removeAttr('checked');
                $(this).parent().find('label').css({'color':'#40575F'});
 
                if ($('#filterIDall').is(':checked')){
                    $('#filterIDall').removeAttr('checked');
                    $('#filterIDall').parent().find('li').removeClass('checked');
                    $('#filterIDall').parent().find('label').css({'color':'#40575F'});
                }
            }
        }
    });
});

In conclusion, this is a great bit of Interface Design that I’m quite proud of. I do know there are a few slight improvements possible and I’m open to any comments but hope someone out there finds it helpful.

The Demo. Again!

These restrictions can range enormously. Some of them are understandable and are dependant on the wishes of clients and the budget they have to play with. Others in my view are more avoidable and if not dealt with can undermine the way a site functions or is received by third parties.

Budget

All projects have them and there is no point trying to shoehorn a large amount of work into a small budget as this will always lead to disappointment for the client. The process of building a Web site can be tailored to the budget if being looked at by someone who knows what they are doing. There is a certain amount of guess work involved in providing a timing estimate. I always over estimate. The difficulty here is that each discipline overlaps.

One in a BED, two in a FED

Firstly let me explain the terms BED and FED. BED stands for ‘Back End Development’ and FED ‘Front End Development’. In large companies, the two areas are usually dealt with by two seperate specialist departments. Back End Developers deal with the functionality of the site and the interaction between the server and the Web site. This usually means when users interact with forms, register on a site, post a request or product etc, a BED will be the one making the database that will hold all this information, talk to the site. Front End Designers, as hinted above, are usually called upon for everything else. The main issue here is that modern sites have many dynamic areas (which use data directly from a database) which constantly overlap both specialities. A popular way of dealing with this are systems called Frameworks (MVC), which aim to separate Front End and Back End code so they can be worked on separately. Without getting too technical, this is not fool proof because you have to get server data to and fro somehow.

There has been many a time where I have been happy to update a site myself for a client who doesn’t update regularly or isn’t particularly enthusiastic about the technical aspects of many CMS’s. I can’t say I blame them most of the time, many CMS’s aren’t particularly user friendly and sometimes I even comment my HTML and provide an instructional guide so they can update the HTML directly.

I just broke the site

This is something every Front End Designer hears regularly. It is easy to get frustrated with clients who break the layout but it isn’t their fault. The system they use should not allow them to break a layout. No CMS that I have used is immune to this problem. The inherent flexibility of HTML is difficult to control. There are so many combinations of HTML that are possible on a site that it is quite easy to update the site with content that ‘looks wrong’ or input a HTML tag that breaks the flow (and layout) of a page.

The other unfortunate part of this situation is that content added by a user is processed and inserted into a database, which means that it falls into the realms of Back End Development. Personally, in my full time job, I have found this situation to be one, if not the main topic that causes the most friction when building or maintaining a CMS driven Web site as part of a team. With the in depth knowledge of how the HTML should behave, a Front End Designer seems to be best placed to fix the problem, which they can if they can access the HTML and edit it without the CMS changing things. This is usually the reason why the original issue arises. As I said before, the Back end programming language is responsible for these kinds of issues and can only be resolved by knowledge from both BEDs and FEDs.

Usually a BED will provide finer control over single field inputs via the back end. There are only so many things a user can enter through using a single text input, a drop-down, check-box etc. The problem usually comes when putting large amounts of content directly into an editor field. WordPress has the best editor I have used but isn’t immune to its little quirks. Due to the fact I know HTML very well, I am able to work in the ‘HTML’ tab on the interface, which gives me much more control over the layout and design of my posts.

Many CMS’s, even under this setting, can add their own HTML, or strip things out without warning because it thinks it knows better than the user. I’d take great pleasure in providing a one stop answer to this predicament, however, the inherent flexibility of HTML means that there are simply too many combinations of HTML elements possible to control anything that is entered into a CMS. Saying that, there are projects run by people who care about this kind of thing.

Lock down

There is a solution which would seem to make sense if agreements can be achieved between FED/client and BED, which would be to lock down the amount of control a client has over the things they can enter through the editor. I’ve read many articles about the use of style guides. The University of Pennsylvania has an excellent and very clear style guide which anyone can view online. It is in the form of a mini site off of the main one and makes the style of headings, content and any other elements clear to anyone who might be using or updating the site. These seem to be the most sensible way of controlling the look and feel of a site throughout its life. They do not work however, if the site is not locked into them. By this I mean that everything surrounding the editing of the content is geared towards outputting what a style guide is advising, not what the CMS is dictating. Many editors are vastly out of date with Web standards and I realise what a mammoth task this is. I obviously don’t know if the styles of the Pennsylvania University site are ‘Locked down’ in the functionality of their CMS but it certainly makes things completely transparent with no grey areas over the agreed design of their Web site.

Other professionals who recognise the need for Web Style guides include the BBC, the University of Kent and of course Apple. Other organisations, largely due to the nature of their organisation, provide suggestions for styling, such as Yahoo and A List Apart. These are all great examples of how we should be planning out Web design, rather than having a ‘build to forget’ attitude. Personally, I don’t like seeing one of my designs broken and feel like I have failed if I cannot keep my own design under control.

For the purists

A tool I found recently after a frantic session on google was http://htmlpurifier.org/. This php project aims to take any content and make it standards complaint, no matter what it contains.
If there are mismatched html tags it will remove those that it sees fit, based on best practice. You can also stipulate allowed tags (something I strongly advise for any CMS). Its a shame there is nothing using asp that does something similar. One of the many reasons I never use the stuff.

A fair bit of planning went into the actual content of the screencast too so please be gentle with your suggestions on how I can improve my ‘delivery’, I am but a sensitive soul! I know I am not a natural ‘to audience’ speaker but after a few run throughs I am actually quite pleased with the result. I might tweek my lighting arrangement for the next one as its a wee bit shadowy in the background, suggestions on a Front End Design topic are welcome.

I really hope it helps to educate clients and collegues about the why’s and wherefore’s surrounding Semantics and if you want to browse the slides I used in this screencast, you can.

Browse through the slides used in my Semantics screencast or Play the Semantics screencast full size

I recently read a few articles on subjects like The cheapening of music (yes I know, not particularly Web related but you could think of the web in this way too) and also Nihilism, accessibility, and the preponderence of amazing co-incidences (I feel sorry for this guy!). There are more and more people who are starting to think this way and I tried to think why this might be.

There’s no time for creativity in a process, there’s no time for process in creativity.

It’s a catch 22. There is possibly a link between feelings like this and the fact that huge online companies such as My Space are in trouble. They have been around almost as long as the Web has, so how can this be? Could it be that even though there are lots of creatives working on making the site wow its users, they are a little bit shackled by the system, process and short project times. I suspect that has at least a small part to play.

Whoever you are doing work for whether that be your client or colleague, pride in what you do is a large part of it. Things are often trivialized before work starts on them. This means that when you want to tackle it in the best way possible, you can often feel a sense of defeat when you run out of time, opting for the quicker shortcut. Things can all too easily get pushed to one side so that a great idea turns into just another half finished gimmick.

If you ever talk to me, you’ll find that I’m actually a very quiet, unassuming person yet some people who have read my twitter profile tend to assume I’m this arrogant self centred know it all.

Modesty (IMO) has a role to play in all this. On my personal twitter account, I call myself a ‘Front End Demigod‘, which has also been commented on more than a few times. If you ever talk to me, you’ll find that I’m actually a very quiet, unassuming person yet I feel that some people who have read my twitter profile tend to assume I’m this arrogant self centred know it all. I find that fascinating, which is why I leave it on there. This literal sense of things is damaging and also why I’m not a big fan of things like Facebook. I use Twitter, which allows you to be much more succinct but does not lend itself to taking over your life. If you are modest about what you do, I believe it shows confidence in your ability. Of course, let people know what you are up to but give them a choice and it’ll be obvious how good you are. Shouting it from the rooftops is the best way to lose respect from your peers who are trying just as hard, probably more so. Nothing is set in stone and you can never know everything. Everyone, of course, has their own opinion, this is just mine and I’d love to hear yours so please do leave a comment.

Life – now there’s a word that sums up what this post is really about. Every time a techie task is dumbed down or trivialised, it gives the techie (person) involved in the task a sense of defeat before they’ve actually started. Emotion is a powerful thing.

I’m not just talking about the Photoshop or Illustrator experts either. Nothing exists until it’s created. You cannot foresee how you are going to create something until you are creating it and the odds are if you cannot find an example of something similar to inspire you, its going to take a long time. To create great work and think deeply enough to really make it work (properly), does draw on emotions more than those not involved in the creative process may think. There is no creative switch that you flick on but if respected and incubated, award & client winning work can be the result.

What a difference CSS makes

Left outset image. See right set image for explanation.

Firstly, your eyes aren’t decieving you. For my latest post I’ve decided to show you the power of ‘Modularisation’, a technique which attempts to simplify layout, mainly for the client. I was inspired after reading articles from people like Elliot Jay Stocks and Ethan Marcotte, who are in the priviliged postition of being able to do a lot of research into flexible layout techniques in CSS and who’s musings I find extremely inspirational. I’ve done this by making a few changes to my css and targeted this single post with it. Amazing really isn’t it. I’ve made things a little smaller to allow the layout to fit in this area and not lose proportion. If you want to view it at a larger size simply hit the (newly designed) expand button attached to the title of this post. In my experience it is a common request from clients to have more control over their content. They see professionally built sites more and more and are wise to what is possible. It is great that clients appreciate the fact that good design will have an impact on their site but they want to be able to do this themselves rather than pay for a new template to be built.

If I’m honest, there is no such thing as ‘content’ from a Front End Developers perspective. Any Web page is made up of elements which are part of the interface

Images go in a div with the classes “

pic size direction

”. “

size

” can be

one

,

two

,

three

,

four

,

five

,

six

, or

seven

, direction can be

right

or

left

. Captions go in a

p

.

The method I use here sets things up so that paragraphs and images intertwine to produce a layout which can be adapted fairly easily. It is well known among Front End Developers that the main layout elements of Web pages can have multiple things called classes added to them. Using this method and good communication between Front End and Back End Developers, it should be possible to integrate this kind of thing into any CMS system. This method is great because it involves building the classes on an element to allow more control over the layout. This is as opposed to adding styles directly to an element (called ‘inline’ styles), which gives a Front End Developer no control at all. I can be sure I am not altering anything else on the site because of the way I have written the CSS, more on that later.

Dude, where’s my layout?

By breaking out of the Modular layout (by closing the

wrapped around the modularised content), the original css for the page comes back into play. This is not using anything that most Front End Developers don’t already know. It is a way of doing things that allows you to create powerful layouts and styling by building classes into your elements.

If built into a CMS or other system, these classes could be added in a controlled manner, to elements through the back end to give fine control over layout for clients in a way that the Front End Developer can handle. This is much more attractive than being at the mercy of whatever content editor comes with a particular CMS. Most I have had to deal with use outdated methods to update content which leaves the edited page in a mess and riddled with accessibility and/or validation issues. As with the many cross browser issues we Front End Designers face on a daily basis, working with the elements on a page, rather than against them just makes sense – for everyone.

Some things never change

For inset images, add the class

inset

to the

pic

div.

As a Front End Designer, you can do whatever you are capable of using this method. There will probably still be limitations, just like building any other page. You might notice that as well as classes

.left

&

.inset

, I’ve also added

.leftinset

. This is to keep IE6 happy. I had to include margins for the right of the image and add a

display:inline;

to keep the layout in tact.

For images without captions, or captions set apart, add

solo

to the

pic

div, and move the caption

p

directly outside it using similar styles (e.g., “

caption two left

”).

Once this kind of system is put into motion, the limitations are few. Think of HTML elements as children that need to be controlled! If you let them have too much freedom, they’ll create merry hell. You obviously want them to enjoy themselves and be creative but you need to be the one in control because you have more experience and know all the pitfalls. If you keep them controlled, calm and know exactly where they are all the time, everyone is happy. Thats the kind of philosophy Modularization works on.

I’m not by any means suggesting that this method be used on each and every site but as you can see, it does create quite an impact. It complements the elements within the HTML and all kinds of different layouts and look and feels can be achieved, building a library of visual enhancements to give ‘content’ a unique look.

My involvement in the Web Industry has led me through many a twist and turn over the last 7 years or so. Having your own area on the Infinite Web was the basic phenomenon that draw me to it in early 2000. The idea that you can make your creations appear in Front of anyone in the world still excites me enough to want to be involved full time, over a decade later, in my every day work.

Something I’ve noticed over that time, as I learn more about it as I’m sure many of us have, is how this Web beast is growing and changing, with endless new technologies, devices & browsers arriving on the scene at regular intervals. This is also why webstandards.org was set up. Thanks mainly to them, browser manufacturers, Development software makers, Web Standards creators and other influencial Companies  now talk to each other, something that would have seemed impossible only a few years ago. With all this technology and data (and social networks!) vying for users attention, someone has to make sure it doesn’t get out of control and that is our job as people who make Web sites.

Thanks mainly to webstandards.org – software, browser & standards makers now talk to each other much more than they used to.

Get a grip

It all comes to a head when data is presented to the end user, which is where we need to direct more attention as all these browsers and devices become more widely used. By far the most popular way of presenting information on the Web is HTML or XHTML, whether that comes from a CMS template, a file or a database. We layout and style the HTML using CSS to make it look ‘pretty’, that is, in every possible browser and device we can, often with huge demands being placed upon us and having to make adjustments along the way. Even HTML itself is changing and as a Front End Designer who wants to make sites I build look and bahave in a way that engages the user, I also want them to be accessible and standards compliant in equal measure. Trying to add new technologies like HTML5 and CSS3 into this mix as they evolve, keeping everyone happy and adhering to Standards and Accessibility, is definately a challenge. It is also one that the future of the Web depends on and our clients will thank us for it. When their site does well into the future, it will be because it was built by someone with the correct mindset.

Supporting Web Standards

Without Web Standards, the Front End layer of the Web could become chaotic, ugly and bloated. Despite this, there are actually few sites that satisfy the standards, even with all the benefits that compliant sites can offer, although they may appear to look fine on the surface. This is why professional Front End Developers, Back end Developers, Usability Specialists, Creative Designers and many more, support Web Standards, doing what they can within their own discapline. Blue Beanie Day is the perfect symbol of that dedication. There is a facebook page to accompany this years Blue Beanie Day. If you have a twitter account and can use Photoshop, find a picture of a Blue Beanie, super-impose it onto your twitter avatar (or simply take a picture of yourself with a blue beanie on) and upload it to your account. If you tweet about this years Blue Beanie Day, also remember to use the #bbd4 hashtag. Its worth bearing in mind, if you keep those brains warm they can do great things.

Flash Of Unstyled Text is a phenomenon that occurs in some browsers when using the @font-face rule in css. The @font-face rule as I’m sure most professional Front End Designers already know, is one of the most hotly debated design tools that make using beautiful and more importantly accessible and selectable Typography, across browsers, even IE6, a reality! That is why this topic is so important to me.

Surprisingly, the two browsers you would expect to have got their act together on this issue are the ones where the FOUT issue is most evident – I shall name no names. You know who you are.

Firefox and Chrome, shame on you, you should know better

It occurs when you load the page. While the font is being loaded, a default system font is put in its place. Eventually, when the font has fully loaded, the @font-face rule kicks in, which is great, however, the sudden change in font makes for a juddery, ugly user experience causing a user to do a ‘double take’ to adjust their bearings on the content. If you aren’t using either of these browsers, have a look at the video below to see the differences in action using a hard refresh (Ctrl/F5) in Firefox 3.6.

Why do I care?

Truth is, if you’re asking this question, you aren’t interested in the users experience and building Web sites in the best possible way. As you were.

If you don’t recognise that the issue exists, I’m sure if you’ve used @font-face enough on your site, your client will point it out for you. If you are one of these people, you are probably one of those lazy so-and-so’s who is damaging the Web by not being passionate enough about finding the best solution from every angle.

For the professionals out there, you should have an idea why already. Your journey so far has somehow led you to click on a link to this article so you must be intrugued by the concept of FOUT in some way. When a user sees this happen, their reaction is never a good one. They expect some kind of lag as the page loads, it happens on every page on the web to some extent, however, content loading then changing is very distracting and if it can be tackled, it should be. Our job as a Front End Designers is to make the experience as good as it can possibly be whilst balancing Accessibility, Web Standards, design and many other concerns. Thats why we’re the most important and skilled guys and girls working in the Industry. Any professional should be thinking the same way, its for the good of the future of the Web (Thank you and goodnight).

So how do I fix it?

I’m glad you asked. While Mozilla and google are working on fixing this bug in their browsers, there are a couple of ways to tackle it.

I have investigated a few ways recently. Some involve hiding the entire page with javascript until everything has loaded, including the fonts. This is a feasable and rational way to do it although this can create another issue with page load times. If nothing is loading on the page, google can penalise you and no one likes a site that is too slow.

The best way is to use Google’s Webfont API. It works by loading up the font via javascript. Whilst it is loading the font it will hide any elements, which you need to specify via css, until the font is loaded, then show it. It means that the font will not appear at all until fully loaded, better than flashing between fonts IMHO.

Firstly we load the Webfont script straight from google and add a couple of necessary parameters so the page can recognise what fonts we want to preload. We need to seperate out the location of the @font-face rule to make sure the site is optimised. I haven’t tested it but I can’t see why you wouldn’t be able to leave your @font-face rules in your original css and create a new one for the Webfont commands.

We then create some css specific to this script. These css commands are called by javascript to hide the elements of your choosing while the fonts are loading. Once they have loaded, the css is altered to .wf-active which you style as you see fit. Its best to use the visibility:hidden; / visibility:visible; rules because this will not impact layout.

Just to tie up the loose ends, this is what is contained in the stylesheet.css file, the @font-face magic:

Is there a Demo?

Of course there is mon frere. Below is a link to the same page as in the demo video above. This has links to the two pages with and without FOUT.

View the effects of FOUT plus the solution

You often find that the Web sites of the very people you respect and want to learn from tend to do so free of charge – this blog itself aims to be such a thing. The Designers behind these sites can be extremely talented and experienced individuals. The unfortunate downside of these ventures are that as they grow and get more popular, it becomes harder to keep things going without some kind of funding, this is where advertisements come in. The inevitable happens due to the advertiser wanting a prime location on your site through which to show their wares and make it worthwhile for them to part with some of their childrens inheritence.

Here are just a small selection of sites I regularly visit for their informative, educational or inspiring content:

• http://www.webdesignerdepot.com/
• http://designshack.co.uk/
• http://www.unmatchedstyle.com/
• http://html5doctor.com/
• http://www.uxbooth.com/
• http://www.uxmatters.com/
• http://www.front-end-developer.com/
• http://www.w3schools.com/
• http://www.456bereastreet.com/

I could go on, these are just a handful of my bookmarks which as you can see, are riddled with advertisements. Some of them contain adverts below the fold, which isn’t quite so bad but for a fully rounded, smooth user experience, the design should not be compromised by them.

The flat world

In the real world, the flat world, we put most adverts in areas that are separated away from the rest of the content. By this I mean that you rarely find an advert dumped between, say, the title and first paragraph of a magazine article as on http://www.webdesignerdepot.com/, they are usually split off onto, say, the bottom half of the page, or on their own full page. The point here is that the design of an article itself remains untouched. I don’t know why it happens in this way as I’ve always been a digital only designer. Maybe it is because the designer of a flat printed magazine or billboard poster has more say in what they design, maybe they are allowed to say ‘no’ to anything they believe would undermine the impact of their design. If that is the case, we should be adopting this policy on the web. There is no reason that I can see, why Designers for the Web shouldn’t be able to have the final say over the design of a site in the same way as the flat world, with all our experience of usability, spatial awareness, colour placement and behaviour techniques. That’s a topic for another day though!

It is virtually possible

With a little thought, it is possible to hide adverts in Web pages. There is no way to hide adverts automatically and it would have to be done on a site by site basis. Again parallels with another industry saw the Tivo, a digital TV recorder that allowed you to skip adverts, fail to impress advertisers in the 1990′s. It’s hard to find articles that fully explain why it was axed, but my slightly cynical mind found a few pieces to the puzzle by reading an article on wired and another one on the bbc site.

To avoid this kind of back lash on the Web, I see no reason why Web Designers can’t provide a situation that benefits users and advertisers alike. On this very site, even though I have no advertising (yet) I have provided users with a button that, when clicked, hides all the unecessary content such as the sidebar, main menu etc and allows the user to concentrate on the article content. I tried hiding the adverts on most of the Web sites in the list above too (using firebug) and was impressed by the results, a moment of clarity one might say. You’d be amazed what these sites look like just by removing the ads. The designers original vision was laid out before me!

We’re NOT removing them

The key to this solution is that the adverts have to appear on the initial page load. This means that the user will see the adverts as per normal, however, they will have the option to hide them. Unlike the Tivo, where a users reaction to adverts appearing would immediately be to hit the skip button, users of these web sites would have to see the adverts and make a concious decision to hide them using a well designed button. This button would be part of the design of the underlying site, making it part of the user experience and therefore different for each Web site.

The combination of all of this, in my opinion, would have the opposite effect. Rather than drawing attention away from the ads, it would be saying, ‘OK, here are the ads, now do you want to hide them?’. I believe users reaction to this choice would be a positive one. This could only bring more visitors to the site.

This also avoids the ‘skip button’ mentality as the ‘remote control’ would keep changing in our situation because in effect, the remote control is any Web site you use this solution on.

This could also have a positive effect on the advertising Industry. Ad designers may feel more obliged to design a more pleasing ad so that users would be less inclined to hide them.

As I said earlier, I see no reason why we aren’t treating adverts in a similar way to the real world, even going as far as a lot of magazines do, pushing all the advertisements onto a separate page completely, giving the user the option of browsing through them.

Yes, the virtual world is more flexible than the real one, however, it is people that use it, so we must make it a nicer place to be. We should always have choices in life.