Most browsers (except IE) support at least some of the CSS3 properties that allow web design to become a much better process.

Instead of using images and complicated CSS you can specify a new CSS3 rule for say, rounded corners and they are generated by the browser thereby reducing load-time and sever requests. This is also better for accessibility as you don’t have to include empty alt tags for images that are for styling only.

The more CSS3 moves towards a standard, the more people are likely to implement aspects of it in their designs. These will mostly be in cases where the rounded corners or drop-shadow effects are not integral to the design but are nice to have, basically when people are ok with it not looking as good in IE.

Current state of play

As of right now – Safari, Chrome, Firfox, IE9 Preview and Opera 10.5 alpha have support for a large array of CSS3 specific styles. The downside with CSS3 as with all web design is that IE does not fully support it. Their latest stable browser IE8 has little support for CSS3 but IE9 which is currently in development does. The problem with IE9 is that it will only be available on Vista operating systems and above, not XP which a large percentage of companies still use. Meaning until people switch to IE9 then we won’t be able to fully utilise CSS3 (at least we’ll hopefully be able to ditch support for IE6 by then). In the mean time we will have yet another variation of IE to deal with and apparently this one renders text differently better.

The main benefits to CSS3 are that it allows the use of Javascript style functions natively in the browser. Things like animations and rotations blur the lines between Javascript and CSS and some people believe this is an error.

Another bonus to CSS3 is the ability to create slick looking graphics such as call to action buttons that don’t need to be created in Photoshop first. So editing them and A/B testing them becomes a lot easier. This is important for conversion design as well as usability testing although currently in the latter accessibility becomes an issue because of legacy browsers.

If you use the design method of progressive enhancement then this is entirely acceptable. Everyone can view the content in a semantic way with style and enhancements being added in layers with CSS and then Javascript. With this in mind it is logical to start experiment with what CSS3 can do.

Things to look forward to in CSS3

• Animations
• Rotation
• RGBA (Red, Green, Blue, Alpha)
• Font-smoothing
  • -webkit-text-stoke: 1px rgba(255, 255, 255, 0.0078125);
• Font-smooth:always;
• Text-shadow
• Border image
• Multiple borders
• Columns
• Multiple background images
• Background size
• Use any font
• Rounded corners
• Box shadow
• Gradients
  • -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
• New selectors
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
  • :first-child
  • :last-child
  • :first-of-type
  • :empty

For a full breakdown of which browsers support which selectors please visit http://www.findmebyip.com/litmus#target-selector

Should you use CSS3 now? is a post from: Tamar

Grids are simple things really, a series of invisible horizontal and vertical lines that create a frame, outline or margin within a space for the purpose of alignment. They are traditionally used in publishing to help align columns of text and images in a visual appealing way. This also aids readability.

“For best legibility, typographic manuals suggest that columns should contain roughly 60 characters per line.” – Wikipedia

The web is the new publishing platform.

From social media to traditional media making the transition, the web is full of rich content which needs to be cared for in the same manor. The content is no less important and may now in fact be more important with the fast-paced disposable culture the web has created. If you have content that you want to be read, it needs to be appealing to read. The human eye picks up on even the most subtle details and the brain mentally divides whatever you’re looking at into sections or blocks to easier processing. If understood correctly, designers can facilitate a much better reading experience for the user simply by organising their content into sections.

An example would be a simple two-column layout for a blog. One column for navigation on the left and another wider column for the body copy on the right. This simple division means that the body copy is likely to be read first as it is larger and more dominant on the page but the type of content in the smaller column will be interpreted as an aid to the content in the larger column. This is now considered convention and has reinforced this schema in the unconscious minds of internet users aiding in their use of sites and making them even more aware of content location.

Taking this a step further you can have multiple columns to show different types of content and even split similar content into even more well defined groupings. For this to work there isn’t actually any need for visible margins or design elements, the eye picks up on and follows the invisible margins of the content.

The site below is http://www.faustltd.com/ which only has a logo and one image yet looks visually very well arranged and appealing due to the left aligned text and the column split.

-

-

The only time this is not the case is if the content is aligned to the centre rather than to the left or right. This is a problem as the reader cannot know for sure where the next line of content will start and as such, will take extra time to read the content in a way that is unpleasant. This is still fine for headings and single lines of text or non-sentence based text.

What does this mean?

Taking this into consideration we can apply simple publishing methods to the web. The most obvious is to split long or different types of content into columns or sections. Newspapers frequently use complex column structures to break up different stories of different lengths. Moving on from this you can increase the number of columns within the sections and have text flowing from one to the other. The current standard of the web is such that Javascript is needed to fulfil this but CSS3 is just around the corner and has just such functionality.

What else?

You’re not just limited to text. Other design elements can reinforce the grid such as images, visible structural lines and even background images. As long as the main lines follow a grid, elements can extend beyond and can create a very aesthetically pleasing layout. A common theme is to have a grid layout with a featured image at the top extending slightly outside of it’s container. This happens simply because the design has both a formal grid based layout and some freeform graphics softening the edges.

-

-

-

If you didn’t notice grids before, you will now

Chances are, if you’re not a designer, you haven’t really thought about the layout of a web page but you will have noticed if a design is displeasing and if it’s difficult to use. Now you understand the power of the grid you will see them everywhere.

If you are a designer and want to get to grips with CSS based grids then happy birthday as listed below are a few top tools to help you out.

Tools to help you out

Let’s start with some frameworks.

960 Grid System – “The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem”

1kb Grid – “Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.”

For a framework that goes beyond the standard grid templates and moves into typography then the easiest to use is Grid Designer 2. It allows you to set (and visually see) the grids based on your inputs as well as letting you customise the fonts and sizes used in each column.

Another option is to use a Javascript to do the work for you. There is a very elegant implementation here http://blog.creativityden.com/fluid-grid-using-jquery/

The last tool is a javascript bookmarklet that you can drag to your bookmarks bar (once you’ve visited the link it will explain how it works) and overlays a transparent grid over whatever web page you are on. You can even adjust it!

960 Gridder

You can create some really nice effects using a grid. Have a look for yourself.

-

-

-

-

-

I’m livin’ in a box… a CSS grid based box is a post from: Tamar

Well one of the largest blogging services, Wordpress, recently announced a significant upgrade to their systems in the form of PubSubHubub. What this means is that now, instead of RSS readers like Google having to constantly ‘ask’ your blog if it has any new content – Wordpress will ‘push’ the content to the reader.

Why is this a big deal?

Until now it has been difficult to get blogs to the real-time standard as they are checked at intervals requiring network traffic and system resources (all be it not very much) and it could be up to a few hours before your blog traversed the ether into your subscribers’ hands. Now this should be instant (within a few seconds).

The demo shown below deemed ‘cheesey’ by Wordpress themselves illustrates the point and highlights the importance of this change.

-

-

This back end upgrade only works if you have your blog hosted on Wordpress.com and not your own domain. If you have your own domain and host a Wordpress blog, you can download a plugin which gives your blog the same functionality and has it’s own built in hub. Zero configuration needed.

This is an important move in the direction of real-time content delivery for bloggers and is another interim step while a new standard deployment method is established.

Wordpress ‘pushes’ blogs into real-time is a post from: Tamar

For those unfamiliar with the term white space, here is what Wikipedia have to say about it:

“White space or whitespace refers to the blank (white) area between written characters or graphic regions.” – Wikipedia

This is a fundamental aspect of design and yet one that can sadly be all-too-often overlooked. Below are some examples, click the image to go to the site in question.

Common misconceptions:

White space is wasted space – absolutely not. While content should be the focus of the design, the amount of content and the effect of the content needs to be carefully balanced. Some of the most important content can be given a greater impact by letting it sit in a minimal design. The layout and design should be appropriate for the content.

-

-

a

White space has to be white – not really, white space is a general term given to the area between more prominent design elements which, really, can be on any background so long as it does not intrude on the layout. The importance is the space between elements. Imagery can become part of the deisgn.

A great example of a bold design and still respecting white space (or in this case greyspace)

-

-

White space means minimal – ou contraire. While minimal design does use a lot of white space, you can in fact show a lot of content if the design uses white space effectively in an easily understandable way.

Below is an example of a layout with a lot of content but due to the spacing it seems entirely manageable. Below are all my unread RSS feeds (over 1000 as Google keeps reminding me) and my Twitter stream combined into an easily digestible layout. This is called Feedly and is available as a plugin for Firefox and Chrome. It illustrates the point beautifully that a lot of content can also look good if spaced correctly.

-

-

Other good examples of large amounts of content in a good layout are design blogs. They are updated several times daily, have a myriad of sections as well as advertising so need to be able to accommodate large quantities of content and still be manageable by the reader. Smashing Magazine and Fubiz are two great examples.

-

-

-

Some basic do’s and don’ts of white space:

Do – use even spacing and alignment for effective placement of elements

Don’t – necessarily use even spacing, use appropriate spacing. For example when pairing headings to content, the content should be biased towards the heading with a noticeable, if subtle, grouping.

For example, comments. In the following example you either have to scroll to the top or bottom to see whether the poster’s name is aligned to the top or bottom of a comment.

-

-

If the alignment was made more obvious with uneven spacing, it becomes a lot clearer.

-

-

Do – use imagery to aid the design and add a focal point.

Don’t – use an image just to fill a space

Do – show the appropriate amount of content

Don’t – add all the content, just because there is space too. If there is more content that you need to add then consider rewriting parts to more concisely and succinctly convey your message.

The bottom line is that design aids content – be it a one word message or a thousand page document,

“design without content is decoration” – Zeldman

An understanding of white space and spacing in general means an understanding of the positional aesthetic, even clutter can look good.

If there’s one thing to remember about white space is that it is not simply the absence of content. It is the subtle (and all-too-often overlooked) spacing that aids good design.

The wonderous (and sometimes forgotten) world of white space is a post from: Tamar

Will it actually be as good as the hype suggests?

Well here’s a breakdown of the features of the iPad:

1. The screen is a 9.7″ high resolution screen capable of displaying HD content
2. Processor is a 1GHZ A4
3. Available in 16, 32 and 64GB versions available with optional 3G
4. The keyboard shown is a larger version of the standard iPhone QWERTY layout
5. Comes complete with the latest wireless N connectivity
6. Using pixel doubling means that existing apps can be run full screen
7. Starting price of $499
8. Released internationally in June / July

You have to look hard to find a product that Apple released that wasn’t a hit in recent years. The only thing even close that springs to mind was the Motorla ROKR featuring an iPod music player. Firmware and poor transfer speeds meant it was a poor user experience but I imagine Apple had little control over those aspects. A few years later they released the iPhone anyway which blew the competition out of the water and still does.

The iPad is more of the iPhone than the ROKR and looks to continue the trend of ‘must-have’ gadgets. The price is right for people to get one for no other reason than they want one. Do you really need a reason?

Tablets, didn’t we already have those?

There have been tablet PCs before. Some laptops have the ability to completely rotate the screen and become tablets, so what’s wrong with those? Well for a start they aren’t sexy, they aren’t skinny and they aren’t very usable.

Apple has a knack for design objects that people want even before they know what it object is. A case of “I’ve seen it, I want it, what is it?”. To do this continually is a great credit to the Apple design teams, it would be really interesting to see their cutting room floor, so to speak, and drool over some of the ‘could-have-been’s and the ‘what-if’s.

It boils down to the new Apple tablet being a small enough form factor, fast enough processor and widest sppeal to be the best mobile computing system ever.  This is not just a computing device, this is a multimedia entertainment device… and it’s sexy as hell!

User experience

The user experience is, as expected, very sleek and smooth. Scrolling looks quick and responsive as well as being super-smooth. The UI is borrowed and updated from the iPhone and that is one of the best mobile UIs around today. What that means is there really isn’t much innovation regarding how you would expect to use it. Maybe that’s a good thing, it means no learning curves to make the most of the device and a familiarity with an established user experience.

iWork and Keynote run on the iPad but Keynote only in landscape mode, which makes sense as slides are normally in this orientation. This is fine for showing slides but what happens when you need to edit the slides? It’s as simple as double tapping and using muti-finger gestures similar to browsing the web. In the demonstration, Phil Schiller shows how simple it is to do even advance tasks such as masking.

Moving through slides, pages and photos is as simple as tapping on the right hand side of the screen. Again, the UI is truly a thing to behold, with care and attention covering even the smallest of details.

This has been in development for the last 10 years and as such, there was no way it would see the light of say unless it was perfect. There is a lot of coveting of Apple devices and this will be no different, it IS the way tablets should be and will raise the bar for any competitors. Dell are working on their own tablet but it will most likely be more… PC.

The competition

The iPad is now directly competing with all portable DVD player, all media players, all tablet PCs and all e-book readers. The iPad not only uses the app store but will have it’s own book store called, surprisingly enough, iBooks.  iBooks will undoubtedly create a massive push for content to be converted to e-reader format from the iPad’s competitors such as Kindle.

The Kindle is approaching e-reading as its primary focus though and the technology behind that is designed to replicate the contrast of real paper while the iPad has an HD high res screen and capable of showing more than just books.

What else happened?

What else was revealed at the Apple press conference? Well far too long was spent talking about iWork for the iPad and there were a lot of tweets about how boring people felt listening to how to use a spreadsheet with multi-touch. Other than that, nothing else happened. This was all about the ipad.

Let’s talk about the cons

Unfortunately this is nothing we haven’t seen before. There are no new ‘wow’ features and it looks very similar to the iPhone, just bigger. Nothing as revolutionary as was expected.

The release for international sales looksto be June / July time. The US data plans are $14.99/month for 250MB or $29.99/month for unlimited, both through AT&T and will be locked.

The basic 16GB version, while being only $499, does NOT include 3G. For this you have to pay an additional $130 on top which I’m sure most people would want and will probably not be too phased by paying more.

Generally speaking, these ‘cons’ are really just nitpicking. The number of pros far out-way the cons and with delivery in 60-90 days. I’m sure many people have already spent the top price of $829.

In conclusion

A portable, high definition, sexy multimedia entertainment device that starts at $499. Fantastic! It will do to the e-reader and PMP market what the iPhone did to the phone market – take it to a new level.

However, on the face of it, the iPad is a giant iPhone. The UI is the same, just bigger and you have to make compromises if you want to use it as more of a MacBook than an iPhone with potentially fiddly gestures.

Check out the newly updated http://www.apple.com/ for more details.

A big thank you to Gizmodo, GDGT and Engadget for providing live blogging services and credit for the images go to them where appropriate.

Oh, and it can also be used as a picture frame.

The Apple iPad – Paper is finally dead is a post from: Tamar

Let there be light!

The main thing to realise is that all browsers are not created equal. Older browsers lack support for new technologies (CSS3 / HTML5) and render pages in sometimes odd ways. They also tend to be less forgiving with various structural models and dynamic scripting languages like JavaScript. Something often forgotten is that some users may decide to turn off features in browsers or may be impaired in a manner which affects their browsing habits.

Examples include:

• disabling JavaScript
• disabling images
• not using a mouse
• using a screen reader
• using a text-to-speech device

Now while it is near impossible to include in a design every aspect that could affect the way someone experiences a website, there are things that can be done to improve the experience where possible.

Graceful degradation

“Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.”

– Fluid Thinking, by Peter-Paul Koch

Graceful degradation is finally being addressed as the wrong way to approach the problem – design utilising the most advanced features of a browser and where a browser is not capable of implementing those features, a compromise needs to be made. The testing of older browsers is often done towards the end of the development cycle. More often than not this results in a less pleasing site for those using older browsers. This mainly affects IE6 which is still widely adopted throughout the corporate world. Using this approach focuses on using the latest technologies and not considering the experience for people with older browsers, disabilities or with certain functionalities disabled.

So how do you add bells and whistles to a site while maintaining  focus on usability and experience? The answer is in the design process. By first focusing on what ‘everyone’ will see and use, you can address the broadest issues. Bear in mind that a good experience with a site does NOT mean pretty pictures (although they can help) and a person can have a good experience on a simple site, for no other reason than being able to do what they want to do with ease and no interference.

Progressive enhancement

Leading on from core usability is the inclusionof  features to improve the experience for those people who are able to experience them – this is known as ‘layering’, starting with semantic  (X)HTML, wrapped in some CSS and finally some JavaScript on top.

“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

– Wikipedia

There is a far more tasty explaination using an M&M that defines the same point:

“Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands).”

– Aaron Gustafson

Good for SEO too?

When you write rich, semantic (X)HTML you are making life easier for search engines to index your site. It is written in a predictable, organised fashion and as such means the search-bots are more likely to pick up on any extra information as well as index it in the way it is intended. If you think about a search-bot ‘seeing’ in a similar way to a screen-reader, they generally only read text and links and with progressive enhancement you have given them both the best opportunity to get the most out of your site.

In practice…

It’s difficult to keep this in mind when you want to use newer technologies to make your life easier. CSS3’s rounded corner declaration or shadow facility would be great, but what happens when you meet a browser that doesn’t support it? As long as the contrast of text to background is suitable and the corners are not an integral part of the design then they will just have square boxes and normal text – something that doesn’t affect their experience too much and won’t affect the usability in any way.

White text on a white background using the shadow declaration on the other hand… well… only search engines will see that.

The browsing experience – Not everyone sees what you see is a post from: Tamar

To try and improve the effectiveness of the Tamar blog, it was thought important to draw more attention to the related posts to reduce bounce rate.

The best option seemed to be to take the related posts from being just a list and make it larger and more visual. Sometimes a title of a post just isn’t enough to describe what the post is about so the addition of an excerpt similar to the homepage of the blog was included.

To reduce the page scrolling needed in order to view the new larger, more visual related posts, the section was columnised and a thumbnail of an image in the related post was added to the top.
Finding the plugin

After searching for a while and finding a few good, yet unsuitable plugins, I stumbled across ‘Best Related Posts’. Its modesty aside, it is very simple and effective, giving complete control over how the code is output. The downside is that the default setup meant that the plugin used nested tables(!).

Now I’m not sure how old this plugin is but it works with Wordpress 2.8 so it was quite surprising to see nested tables used. The deisgn worked but because of the use of nested tables it was best to change the output to suport CSS.

I thought I would impart my wisdom and show where to get the plugin and how I converted it to CSS. Very simple and offers limitless customisation (with related posts).

How to create great related posts

• Click the link to download Best Related Posts for Wordpress.
• To install it simply extract it and upload the folder to the plugins folder of Wordpress - /wp-content/plugins/
• Then go to the plugins tab of the Wordpress admin section and activate it.
• In the settings tab, click ‘Best Related Posts’ and it brings up the settings for the plugin.
• So, lets delete the table rubbish and add some HTML. I kept it simple but there are many more things you can do. Click the image to see a screenshot or copy and paste the code below it into the relevant sections.

Heading:

<h3>If you liked this post, you should also like these:</h3><div id="related-posts">

Body:

<div class="related-item">
<a href="{link}"><img  src="{image}" width="110" title="{title}" alt="{title}" /></a>
<h4><a href="{link}">{title}</a></h4>
<p>{excerpt}</p>
</div>

Footer:

<div class="clearfix"></div>
</div>

Explaining the HTML

In the ‘header’ section I have an H3 tag with the title letting people know what will follow. A more natural phrasing was used to connect more with the user rather than just saying ‘Related Posts’.

After the H3 tag there is a div tag that creates the element in which we will work. I have given it the ID related-posts which is very original – I think you’ll agree.

The ‘body’ section will be repeated depending on how many posts you choose to show, so you can only use classes. I have created a new div element and given it a class of ‘related-item’. We will reference these in the CSS in a moment.

Next there is a link element that has not changed from the default – this gets the permalink of the related post and creates a link, then it puts an image inside it.

Only the width is specified for the image as we want to scale it proportionally. If the height were specified as well then the image would become distorted.

I have also added the title and alt tags for accessibility and web standards compliance. These will just contain the title of the post it is linking to.

The plugin allows the use of {link}, {image}, {title} and {excerpt}. You can move these around to your hearts content for customisation. They are pretty self explanitory.

In the footer I’ve added a clearing div (explained in the CSS below) and also closed the div tag opened in the header.

Now for the CSS

This is where the magic happens.

#related-posts {
margin:10px 0 0 0;
}

.related-item h4 {
font-size:12px;
}

.related-item {
width:20%;
float:left;
margin-left:auto;
margin-right:auto;
}

.related-item p, .related-item h4 {
width:110px;
}

h4 {
padding: 0;
margin: 10px 0 5px 0;
}

.related-item img {
border:1px solid #CCC;
}

.clearfix {
clear:both;
}

I have given the whole ‘related-posts’ div element a top margin to push it down a bit from the content above.

I wanted the header element to be the same size as the text so have given it a size of 12px.

The related-item div element has a width of 20% and auto margin-right and margin-left to ensure they space themselves equally. The 20% is based on 100% of the available width divided by the number of related items you specify in the setting. I chose 5 so 100/5=20.

The paragraph and h4 tags need to have a width set otherwise the content will over run the images. So set this to the same width the image has in the body output section in the settings for the plugin.

There needs to be some more space between the image and the h4 tag, so I added the styling for the h4 element. This will be site-wide unless you add ‘.related-item’ before it if it conflicts with other styling.

Finally, to extend the parent div (related-posts) to the bottom of the longest div inside it (related-item) you need to add a clearing div. This is an empty div that clears both sides and ‘fixes’ the parent div.

Position the related posts

To add this plugin to your theme you just need to find the ’single.php’ file which can be done thorugh the built in editor. In the Appearance tab, click editor and look on the right hand side for ’single.php’ and click that. Within the template look for <?php the_content();?> (yours may be slightly different) and add the follwing after it:

<?php if ( function_exists( 'boposts_show' ) ) {
boposts_show();
} ?>

This basically says, if the plugin is turned on then do what it does, which is print the HTML we added in the plugin settings, to the page.

Now sit back and relax, you’re done. You can continue to play around with the stlying and there are many great examples of related post designs dotted around. Have a Google.

As there are not enough images in the Tamar blog posts, we have to go through and add them before we show the image containers above the related post titles. It still looks better and means we now have the choice to add images later very simply.

To do this simply add a line of CSS to hide the image div element:

#related-posts .related-item img {
display:none;
}

This is the old related posts section:

You can see the new related posts below this post. Tell me, which entices you more?

Drawing attention with related posts is a post from: Tamar

What gives us inspiration?

This all depends on what’s on our minds at the time. If you’re a photographer and you see a photograph you like or a technique you haven’t seen before, you might think “I might I’ll try something like that” but at the same time think “I don’t like that part about it, so I’ll replace it with something else”. If you’re a graphic designer however, you might think “That’s an interesting use of typography” and try and illustrate something resembling it. The point is that whether you know it or not, you have been inspired by something that you’ve seen and most likely it has been drawn upon some of your work.

Does this mean people are really just re-creative? Regurgitating ideas they have already seen? Is this being creative and does it even matter if it looks good and does its job?

Are there any truly creative ideas?

It depends on how you view the world. I like to think that every idea is creative regardless of how it came about. The more important question would be ‘do I have any uniquely creative ideas?’.

Creativity can come from a variety of places and people. The question of uniqueness raises the point of doing something nobody has done before, but not necessarily doing it well. There have been some really interesting, creative and unique ideas but they just don’t ‘work’, either due to poor implementation or lack of thought behind it. There are many articles about such mistakes that are dotted around various design blogs as a warning to other designers not to make the same mistakes.

Someone will see these warnings / ideas and make them better, improve on them or incorporate the good aspects of them into their own designs.

Imitation is the best form of flattery

How true is this? It ultimately depends on the motive and the character of both parites involved. If someone copies you for their own benefit, then this isn’t creative or constructive.

If you like my work, then tell me. If you use it as inspiration for one of your designs then great! I want to see it so tell me. If you copy my work to such a degree that there is no creative input from your side then that is tantamount to plagiarism and I will lose all respect for you.

The bottom line is I want to inspire people and I want to be inspired. Most people in a creative industry feel the same which is why I enjoy working within it.

Save inspiration for later

Someone recently suggested I make a note of my inspiration in a digital scrapbook on my desktop and take screenshots of sites / designs that I like the style of and think I might be able to use later. That way I won’t just forget about something I have been inspired by, I will have a reservoir of inspiration that I can dip into every now and again to take out the best bits I need and tailor them into the current project.

Remember…

Design, no matter in what form, can be inspired and itself inspire.

Inspiration – How do you get yours? is a post from: Tamar

Typical questions with accepted ‘fixed’ answers.

‘What is 2+2?’ – The only answer is 4 (unless using a strange form of maths).

‘What is the capital of England?’ – The only answer is London and there is no other response.

There is only one answer that is correct and as such it is relatively easy to find an answer. What happens then, when you ask a subjective question or one based on a specific context?

‘Where is a good place to eat?’ or ‘Is the film 9 any good?’ – If you Google the first, it points you to Yahoo! Answers as the top result and if you Google the second, it comes up with things from ‘negative scanner’ discussions about film negative types on Flickr to ‘the 9 sassiest black women in film’.

Did anything good come out of it?

Now this isn’t completely without merit, there are some sites listed in the results that would match the queries I have asked more, but don’t appear near the top. The first search about places to eat suggests an article by The Observer about the ‘100 best places to eat this summer’. It’s good, but it’s not the one. It’s four years out of date and while many of the places in the list are probably still open, it is not specific enough to my query. In other words it didn’t understand me or relate it to my current situation.

The second has a brief article about the film (the right film) and even has a video review which isn’t bad but it took some extra time to find. This is one person’s opinion and while it may be accurate and reflect my own, I was looking for a more authoritative review or one that averages ratings like IMDB.

The point is that I want Google et al. to know exactly what I want.

Improve the results = kill all humans

Now I could do things to increase the likelihood of the search hitting the desired outcome such as adding speech marks around specific phrases or adding in my location but the important difference I could make would be to rephrase so as not to be asking a question, to ‘de-humanise’ the search.

So ‘Where is a good place to eat’ could become ‘good places to eat in Chiswick’ (which sounds like it’s only part of a sentence) and ‘Is the film 9 any good’ becomes ‘9 film review’ (which sounds like nothing anyone would say in conversation.

The first result for ‘good places to eat in Chiswick’ provides a list of restaurants in Chiswick from TopTable.com, ordered by rating and giving details of the type of cuisine and average cost. Perfect. Even without the ‘good’ search term I am presented with a page about Chiswick with emphasis on cafes and restaurants.

The first result for ‘9 film review’ is ‘9 – Film Review’ from Hollywoodreporter.com which contains a very balanced review that was written yesterday, exactly what I wanted.

Why can’t I just ask a question?

So why, when I ask a question, do I not get the answers I want and only when I talk like a machine do I get the exact matches? Well the answer may lay in talking like a machine… to a machine. Google understands the relationship between keywords and how to rank pages to make sure the pages at the top of the results are the most authoritative, but it doesn’t understand context.

“Right now, Google is really good with keywords and that’s a limitation we think the search engine should be able to overcome with time,”

“People should be able to ask questions and we should understand their meaning, or they should be able to talk about things at a conceptual level. We see a lot of concept-based questions — not about what words will appear on the page but more like ‘what is this about?’. A lot of people will turn to things like the semantic web as a possible answer to that.”

Marissa Mayer (Google Vice President of Search Products & User Experience) from an interview with IDG News Service in October 2007.

What does this mean then?

Generally, the current level of search is fine. People who know how to search for things on the internet tend to use Google and tend to do a few variations / combinations of search terms to hone in on a result matching what they want. While time consuming, the method of just typing in keyword combinations is quicker than asking a whole question.

So how can Google supplement its dominating search algorithms with semantic understanding? With more and more information about ‘you’ and your browsing habits spanning more than one website (Facebook connect for example), is it possible this could reach further and be more tightly integrated into the process of searching? There is already location-aware search.

If this is the case then where is the line drawn between accurate and contextually accurate search results, and privacy of our information?

Would you let Google know everything about you in order to get perfect search results?

When will the web know what I want? is a post from: Tamar

Put simply, the real-time web is instant. You do something and the system you are interacting with knows what you have done, does what it does and lets the rest of the web know with near zero delay. A good example of this would be Twitter. You post your Tweet and seconds later your Tweet appears in search results and all your followers can see it. Facebook has similar qualities but applied in a much wider range of interactions yet based on the same principles.

Imagine all of your online experiences having the same kind of response. The web would become less linear and more like a conversation. This is already happening with Twitter becoming so popular but fundamentally Twitter is talking about things and not interacting with them.

The challenge is to use the real-time qualities the web offers in things other than social media.

If you build it, they will come

There are a few technologies being explored in the creation of the real-time web.

The first is XMPP (Extensible Messaging and Presence Protocol) which is the most popular at the moment and is based on instant messaging which has a proven track record. This is what Twitter uses.

The second is SUP (Simple Update Protocol) which was developed by FriendFeed (recently purchased by Facebook) which works in a similar way to RSS but integrates a ‘push’ technology and notifies you when there is something new for you.

Another contender is GNIP (http://www.gnip.com/) which is designed to sit in between the services that are updated, and the applications expecting updates, providing one access point to multiple streams of real-time data.

This means that applications can be developed that don’t have to actively check each service like they do at the moment. Facebook for the iPhone is likely to be the first to achieve push notifications through a mobile application with any real demonstration of large scale deployment. Even Google’s recent push email update for the iPhone has been plagued with problems of inconsistency with the notifications.

Searching in real-time

There are a few tools that you can try to test the current state of the real-time search. Most of them use Twitter or other social network sites for their up-to-the-second results as these are the places that provide the most of that type of information.

There is a site called Scoopler (http://www.scoopler.com/) which is a real-time search engine. It sounds impressive but again it’s really only a searching sites like Twitter and Delicious and pulling out two sets of results. One set showing the most recent results (mostly from Twitter) and the other showing the most popular results, a good combination and the only way real-time search could really ever work; traditional search results supplemented by up-to-the-second results.

A similar effect can be achieved with a Greasemonkey script (available here) that integrates a Twitter search into Google results to show you related Tweets to your query. While most results tend to be irrelevant, you do find the occasional Tweet that is helpful, especially when trying to find answers or information about problems or current events.

Then there is the problem of accuracy and authority. Real-time search is all about searching for the most recent, up-to-the-second information. As the information is so new there is no way to determine if the information is accurate or relevant in the way that Google does so well. Twitter has tried with trending topics but some are perpetuated with Tweets asking why something is a trending topic.

What about Google?

Google is closing the gap between traditional and real-time search with the ability to filter your results by time including ‘recent results’, ‘past 24 hours’, ‘past week’, ‘past month’ and ‘past year’. They introduced an option to set a specific date rage to search and also the option for results from the previous hour. It is unlikely Google will go any further due to the types of content their search engine indexes.

If the real-time is the way forward, how does this affect SEO? The current process of SEO involves keywords, anchor text, URL structures, link building etc. but the only thing likely to survive into real-time search would be keywords. Something that, by itself, is incapable of giving any real benefit except showing you the most recent matches. Google and most of the major search engines would probably argue that there is more benefit in finding sites naturally through links because a site that has no links is likely a site not worth indexing. Perhaps a combination of social recommendations from friends / people you follow, recent results and authoritative sites could work.

But what happens when someone spams the real-time web? Considering the search results are chronologically ranked in terms of freshness, there may be very little people could do to avoid it. Twitter has struggled with this and a number of spam Tweets have, at times, become trending topics. Could it be as easy as adding a CAPCHA form before posting? Would that have a detrimental effect on the experience of Tweeting? And what would happen with all the third party applications that make Tweeting a pleasure?

There is certainly room for more real-time applications and ways to utilise the unique, searchable and instant qualities of real-time but it is most likely going to be geared even further towards the social aspect of the web. It will be interesting to see how new distribution models form through the real-time delivery of data to applications.

In conclusion, if Google thought real-time search was a good idea, I’m sure they would have already done it and the most useful aspect of the real-time web will be that of content delivery. The traditional web indexing and SEO techniques will live to fight another day. That is until the web gains intelligence. What happens when the web truly understands what you want?

Is real-time the future of the web? is a post from: Tamar