My name is Kirstie, I started at Distilled in April 2010 and I am a PHP Developer with a particular interest in all things open source. My specialities lie in PHP5, Object Oriented design and build, application architecture, 3rd party integration, Magento, Zend Framework and Systems Analysis. In other words, I’m a nerd! I’m currently working on a Magento project, the first Magento project for Distilled.

So what is Magento?

Well in technobabble Magento is an open source application that is build upon Zend Framework. What it means to you however is a fully integrated and free application to make your online store.

Magento was originally designed to give businesses a platform on which they could provide an online solution for their commercial aspirations while also providing a highly extensive “Back Office” to administer the site from site design to product and order management. Along with this, Magento comes with a fully functional user area which is account management for your customers.

So why Magento?

Cost

The community edition of Magento is free. That’s the best kind of price! You can pay for support if you want to, however the developers working on your Magento site will normally be able to find the answer for you. The community behind Magento is vast.

Platform

You can run all of your sites off this one platform. The benefits of this is that all your orders and products are all in one place for your convenience. This is a nice little feature for large companies that have their stores in several countries and/or have different sites catering to different needs but want a central catalog. As an example, for a rather well known music company, Magento was implemented for 78 stores and 9 sites. It was still super fast, easy for the client to configure the catalog and pretty much ace.

Newsletters

Manage all your subscriptions to Newsletters in your back office. You can send emails through Magento, but as it is an Ecommerce platform and not a mass mailer, I would suggest keeping Magento to its original purpose.

Customer Management

Customer management can be done by your users through the Account Area on your site, but you can also carry out customer management for all your users through the Back Office available in Magento. You can edit, add, delete customers as well as using it as a base to hold all your information you need. You can extensively search your customers within the Back Office.

Happy Developers!

This platform will please your developers. It has clean, manageable, expandable and efficient code that they can manipulate completely for you. Developers hate badly built systems and as a developer, I am always happy to take on a Magento project!

SEO

Magento is an SEO friendly application with tagging, clean HTML, clean URLs and site navigation. While Distilled is super amazing at SEO anyway, Magento makes the task of creating an SEO friendly site just that little bit easier.

Virtual Products

You can have virtual products as well as actual products. Magento handles downloadable products very nicely and has functionality built in to handle the delivery of these products to your users.

Merchants

Major merchants are built in ready for you to configure and use in Magento. This saves time for your project considerably considerably as 3rd party integration can be a very time costly activity.

Bespoke Features

Any bespoke features you want such as featured products, complex delivery options, dynamic product carousels and pretty much anything you can think of can have a decent amount of time spent on them. This is due to the fact that your development team are not rewriting the wheel with yet another complete Ecommerce solution without the necessary time available to make it amazing.

Design

Magento can be completely optimised with regards to design so it can look exactly how you want it and more importantly, the best way your store can be viewed by your users. Since Magento has this ability, it is completely possible to use magento only as a store front should you wish to and keep your existing site on its current platform. Magento does however have a CMS built in so that you can have your whole site within the application.

Awesome Magento sites include: http://shop.zend.com/eu/ | http://www.lodgerfootwear.com/ | http://www.tcho.com/

Developer Magento tips to follow…

For more information: http://www.magentocommerce.com/

What is your Twitter background? A random photograph strangely filling only a quarter of the screen? Or perhaps a slightly pixelated company logo in the top left hand corner? Or maybe you’re a minimalist… just a plain colour background for you?

We have been doing something fun with our Twitter Backgrounds, read on to find out more.

We have developed a FREE Twitter background template available to download. This will help you design a background the works well with the current twitter design:

FREE Twitter background template

This work is licensed under a Creative Commons Attribution 2.0 UK: England & Wales License. All we ask is if you use this image on your website or blog that you link back to this blog post.

This template will help you to design your background with Twitters existing layout in mind. The template helps to ensure that all the important information you need to include is visible even at small browser widths.

At Distilled we have been trying to make our Twitter backgrounds more cohesive, both with each other and with the Distilled brand. We want to promote our company in a fun and visually appealing way  - you can see the background in action via our list of Distilled staff on Twitter.

This is how we applied this template to the Distilled brand:

It is important to design your Twitter background with the existing twitter layout in mind. The main column on Twitter is centred regardless of browser size. The main column has a triangular notch at the top (giving it a speech bubble affect) that points towards the centre of the letter ‘w’ of the word t’w‘itter.

When designing a Twitter background the constraints to consider are:

• Any copy within the background must be clearly visible at the smallest of browser sizes.
• The Twitter logo has a transparent background behind it; this must not conflict with the design. This means keeping any other copy lower than the Twitter logo level (20px) from the top of the page.

This is something that Will had not considered on this old Twitter background:

Will Critchlow’s old Twitter background

• The background should be a different colour from the main Twitter column. This helps to ground the text on the page and also to clearly show the columns width which prevents copy looking like it is floating in the middle of a massive expanse of white space.
• A pattern or colour should continue to fill the whole width and height of the page. using a limited amount of colours or repeating a pattern will keep file size, and therefore loading time, to a minimum.

First it was important to design a format that could easily be applied to everyone as an individual. Everyone should still feel their Twitter page was theirs so individuality was important. It was decided that everyone would have an illustration of their choice but the rest of the background would be a uniform design. The template design incorporates the Distilled colours and the individual names are styled the same way as the Distilled logo. People visiting both a Twitter page and the Distilled website should make a connection between the similar visual styles:

Twitter background template

The person’s name is aligned vertically to ensure that it is visible even at smaller browser widths.

Our Twitter background at a small browser size

The image should be visible within the darker grey section within the page structure but as this is a very small area the main content of the image can extend to the end of the lighter grey square. The width of the Twitter central panel is 765px wide. Positioned here within the 1024 average, you can see that the most important information the name and Distilled website address is still clearly visible.

I have provided the Distilled team with a style guide so that they can easily make the side bar and other elements on their twitter page fit in with the background design and the Distilled brand guidelines.

Check out Will on Twitter

Distilled on Twitter

Tom Critchlow on Twitter

Andy Davies on Twitter

Stephen Fry is, by most standards, a power user on Twitter. His Twitter background has an illustration and a few image links to other websites. The illustration includes his interests, and the links to other sites are great too, if only they were more easily visible! The problem is that your browser has to be at a wopping 1263px width to be able to view this important information.

Stephen Fry’s Twitter background at 1263px

Unfortunately, knowing the screen size of your users is a constant battle as it is always changing. One of the most widely used website formats is a 1024px width and roughly 50% of internet users are thought to have a screen this size or smaller. Therefore, roughly speaking approximately 50% of Stephen Fry’s visitors will only see a few random letters of the background copy.

Stephen Fry’s Twitter background at an average screen size

Sticking to our template guidelines ensures that important information is visible at small browser widths:

Unfortunately Stephen Fry’s important information is hidden with the browser at this size..

Stephen Fry on Twitter

Feel free to visit us all on Twitter and check out what we are getting up to. I would love to hear what you have done with your Twitter background, and also how you get on using our FREE Twitter background template

Happy New Year, and welcome back to the Distilled blog.

Over the holiday season, and with a bit of down-time, many people had the chance to pick up some new skills or look into something that they’ve never had time to before.

Tom arrived back in the new year having learned some basic CSS, and asked me to recommend a few CSS techniques that can be used to add visual interest to websites / blog posts, and that are particularly SEO friendly. (As such, the techniques suggested don’t help with layout, site theming, etc – but can be added to your site/blog’s styles to allow some interest to be added to pages relatively easily.)

All the techniques can be seen in action on the accompanying CSS Techniques Demo Page.

Why?

Didn’t you hear? The blog post is dead. In a world of boring blog posts, standardised Twitter layouts, and homogeneous microblog templates, you have a chance to stand out. You don’t have to go to the lengths of Gregory Wood or Jason Santa Maria and produce a new layout for each article (though, those are some hot sites), but some appropriate visual embellishments may help encourage people to read the whole article – and remember to revisit your site in the future.

CSS Resources

First, a couple of tutorials and references to help you get your head around CSS:

• CSS Basics and CSS Dog have beginners tutorials that list all the basics
• W3Schools and Sitepoint have CSS reference pages that may come in handy
• There are printable ‘cheat sheets’ supplied by LeslieFranke (html) and AddedBytes (png / pdf)
• For more advanced techniques or for inspiration, read through A List Apart’s CSS section

Also, I’d highly recommend the Firefox plugin Firebug, to help you step through any site’s HTML & CSS; looking at how certain designs or effects were created can greatly contribute to your understanding of the principles and techniques.

Techniques

I won’t go into too much detail about how these snippets work – they should be fairly self explanatory and working to understand them is a good exercise. Similarly, I’m not going to dwell on cross-browser fixes here, because I don’t want to start crying.

Don’t forget to open the CSS techniques demo page now, to see the techniques in action while you read the descriptions below.

Link icons

A nice easy one to start, that highlights links which pointed to external pages. It’s really as simple as this:

CSS:

a.offsite {
    padding-right: 12px;
    background: transparent url(offsite.png) no-repeat right center;
}

HTML:

<p>Please follow <a href="http://twitter.com/Distilled" class="offsite">Distilled</a> on Twitter.</p>

Putting Content in the Centre

HTML’s development has left a legacy of incorrect tags & properties that survive in the online conciousness – in particular those for horizontal / vertical alignment. I mention this quick technique because it’s correct, it’s useful, and I’ve applied it to some of the following examples, and wanted to ’show my working’ here.

CSS:

.centered{
    display: block;
    margin: auto;
}

HTML:

<img class="centered" src="kitten.jpg" />

Image Framing:

A subtle frame around images can improve the look of a post. Modify the colours and size of the padding to match the theme of your site.

CSS:

img.frame{
    background: #ddd;
    border: 1px solid #999;
    padding: 4px;
}

HTML:

<img class="frame centered" src="kitten.jpg" />

Image Captioning:

An extension of a simple frame is to also include an image caption in there. This code is about as simple as I could make it. The width of the ‘frame’ needs to be (at least) the size of the image, and could be set using inline CSS, or in the CSS file if every captioned image is likely to be a similar size.

CSS:

div.frame {
    background: #ddd;
    border: 1px solid #999;
    padding: 10px;
    text-align: center;
}

div.frame div{
    font-style: italic;
    font-size: 0.8em;
    margin-top: 10px;
}

HTML:

<div class="frame centered">
    <img src="kitten.jpg" />
    <div>Caption here</div>
</div>

Drop Shadow:

There are a variety of CSS techniques for highlighting content with a ‘drop shadow’. Perhaps the most polished is A List Apart’s Fuzzy Shadows. The code below delivers a sharp shadow on a floated item, that is particularly easy to implement.

CSS:

.img-shadow {
  float:left;
  background: #ddd;
  margin: 10px 0 0 10px
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  margin: -10px 10px 10px -10px;
  padding: 4px;
 } 

HTML:

<div class="img-shadow">
    <img src="kitten.jpg" alt="test"/>
</div>

Revealed Content:

This is a simple way to hide content that is only revealed when the user hovers the mouse over the heading. Without using Javascript it’s impossible to create fancy slide/fade reveal techniques or display the content when the mouse moves away, but it’s still useful for not overwhelming a post with content.

CSS:

.revealer .content{
    display: none;
}
 
div.revealer:hover .content{
    display: block;
}

HTML:

<div class="revealer">
    <h2>Title</h2>
    <div class="content">
        Content
    </div>
</div>

Pull Quotes:

A particular quote from a post or article can be highlighted in a pull quote – just like in the magazines!

CSS:

.pullquote_r{
    border-left: 0.5em solid #999;
    float: right;
    font-family: serif;
    font-size: 2em;
    font-style: italic;
    margin: 0 0 0.5em 1em;
    padding-left: 0.5em;
    width: 9em;
}

HTML:

<p class="pullquote_r">Quoted text goes here</p>

Quote Boxes:

These boxes are a great way to present a particular idea such as a quote or testimonial, and don’t use images to display the large quote marks.

CSS:

.quotebox{
    border:4px solid #DDDDDD;
    margin: 20px auto;
    padding:10px;
    width:70%;
}
.quote {
    font-size:125%;
    line-height:140%;
}

.quote:before, .quote:after{
    color: #999;
    font-family: serif;
    font-size: 5em;
    font-weight: bold;
    line-height: 0px;
    vertical-align: bottom;
}

.quote:before {
    font-family: Times New Roman, Times, Georgia, serif;
    content: '\201C';
}

.quote:after {
    font-family: Times New Roman, Times, Georgia, serif;
    content: '\201D';
}

.quotebox .author{
    font-style:italic;
    margin-top: 2px;
    padding-right:1em;
    text-align:right;
}

HTML:

<div class="quotebox">
    <div class="quote">
        Distilled are experts in SEO who listen to your needs and make excellent, thought through recommendations. They have a great team and together they deliver fantastic, well rounded advice.
    </div>
    <div class="author">
        Stephen Tallamy, <a href="www.locatetv.com">Locate TV</a>
    </div>
    <div class="clearfix"></div>
</div>

Rounded Corners:

The most clear visual aspects of Web 2.0 were a scarcity of vowels and an abundance of rounded corners. The examples page that accompanies this post shows three different methods of creating the effect; the results in my browser (Firefox on XP) are indistinguishable from each other.

In the past, I’ve used tools that create the images and code required for rounded corners such as RoundedCornr and SpiffyBox. DevWebPro maintains a list of similar services.

However, these days I often prefer to avoid having lots of additional markup, even at the penalty that not every visitors gets the full ’rounded corner’ experience. As such, I’d suggest that you consider a couple of options.

The -moz-border-radius and -webkit-border-radius properties, based on CSS3, should appear correctly for most visitors – there’s some more details on css3.info. I’ve also been satisfied using a Javascript solution: the jquery.corner plugin is an exceptionally simple-to-use addition to jQuery, and particularly suitable if your site is one of the 36% that has already chosen to use the framework.

Legibility guidelines for dyslexia often conflict with usability conventions for websites. My challenge was to find a way of designing a website that adhered to both sets of rules.

Background:

Just before embarking on the new website design for the British Dyslexia Association I read Steve Krug’s book ‘Don’t make me think’ on usability. I was excited about putting my new found knowledge into practice.

I entered the design kick off meeting with my usability hat firmly on, but unfortunately left with it slightly askew.

The problem was whilst gibbering on about usability I found many of my ideas got knocked down as they contradicted dyslexia conventions.

The final home page design:

For example:

In my naivety I suggested underlining links to highlight what was click-able. However, underlining is a dyslexic nightmare because it jumbles up letters and makes words considerably harder to read. I also queried the client’s reasoning behind the cream background (thinking to myself that it looked quite dated) only to find that cream backgrounds with black copy work well together by softening the glare and improving legibility.

Designing for dyslexia means making things really clear and simple, removing all the frills and pretty little elements that are often used. In the words of Steve Krug ‘keeping noise down to a dull roar’; for a dyslexia website you should aim for a quiet whisper.

It was clear that I was going to have to go back to square one with my attitude towards this website design and take dyslexia into consideration.

An Inner Page Design

Dyslexia:

Dyslexia is a specific learning difficulty which mainly affects the development of literacy and language related skills. This means that the typography and layout of the design needed due care and consideration.

Leaving dyslexia conventions to one side for a moment it was still important to step back and ask myself – Who is this website for?

Well… the website is for dyslexic people obviously, but also parents, teachers, professors, employers and other people researching on the behalf of dyslexic people; the website had to ensure that it met all of these peoples needs too.

As designing for dyslexia generally means designing simply and obviously this should mean that people without dyslexia can also use the website easily… so long as usability is not impaired in the process.

The solution was to consider these points when designing:

Imagery – Imagery helps to break up content from a usability perspective but also can describe what something is without the need for so much reading.

Columns – We suggested the use of columns was a bad idea. If they’re long this means scrolling down and then up again to access the rest of the article. Unlike a newspaper, websites can only show a certain amount of copy at once; screen size and scrolling means articles are chopped into sections as you read. So from a usability perspective columns were a bad idea but from a dyslexia perspective a blessing, because shorter line lengths of 70 – 80 characters are easier to follow. We over came this issue by having columns but keeping them short eliminating lengthy scrolling.

Paragraphs – Keeping paragraphs short and to a minimum helps with both dyslexia and usability.

Leading – Having dyslexia means that things can get jumbled more easily. Increasing the leading (width of white space between lines) will help to separate each line from the next, making finding your way from the end of one line and to the beginning of the next much easier.

Typography – Minimum text size is even more important here, sticking to 12pt or even perhaps 13pt is a must.

Links – try to emphasise these without underlining them – one way to do this is by having arrows leading towards click-able items.

Colour – we used colour strongly throughout the design as a means of clearly dividing up the sections and also keeping cohesion when linking through to inner pages.

Less is more – no fancy backgrounds or additional elements that are not absolutely necessary.

A combination of all these elements helped us to generate a clear and successful design that the client and hopefully the users will love.

View the website at BDA Dyslexia

In my last blog post I outlined my experiences from the morning of FOWD 09, if you haven’t read it, I suggest reading it here first. If you have then great: read on.

Image copyright Gabi Moore, http://www.gabimoore.com

After lunch I was looking forward the talk by Sabrina Dent “Throwing Client Collaboration Out of the Window: The Stalinist Web Design Model”. My main reason for wanting to see the talk was that the title suggested it would be controversial. As it happens, it wasn’t. Don’t get me wrong, Sabrina delivered her material very well, but I don’t think a lot of the concepts she was delivering were relevant to the majority of people. Her main idea was to eliminate choice from the client as they are not the expert. Also saying ‘no’ to clients so that if they really want what they are requesting they will push for it. But the reason I think it was out of most people’s scope was that you had to have a lot of experience and credibility for this methodology to work, which only comes from using the traditional methods. Also I believe that this approach could create a lot of conflict between you and the client and pen you as a trouble maker in the industry.

Then came Folkert Gorter’s talk “Participatory Evolution: Excerpts from a decade of Interaction Design on the Web”. From Folkert’s work I was expecting big ideas, but I feel it failed to deliver. The main narrative was Folkert showing the audience his personal portfolio. Lots of interesting examples, but it seemed like he was looking for a job and not teaching the audience anything new. One of the main points from the talk was the process of developing a concept, but it wasn’t a clear point at all.

Photo by Vectorfunk

With over 13 years of experience Simon Sankarayya was clearly going to be a good presentation. “13 years and 13 things I have learned about computers” outlined key events in the history of his career. Like Folkert, Simon chose to deliver a presentation around his personal portfolio, unlike Folkert key points were made about the evolution of the web we know today. Stand out moments involved the MTV2 website that his agency created. Later that same branding moved on to be used as the TV brand. Despite the fact this talk taught me nothing new, it was a very clear and an interesting presentation.

A very big hitter in the industry, Molly Holzschlag, rounded off the day. A key player in the WASP consortium, and an advocate for web standards everywhere. Her talk “The Future of Web Standards: Is There One?” tackled the big issues with web standards today. She championed the idea of supporting old browsers not by versioning, but by providing progressive enhancement. Not a new idea but an important one none the less. Although it was delivered with real passion and energy I couldn’t help but feeling one major issue was left out. How do we as an industry convince and educate clients about progressive enhancement in a way that will allow us to use it? (Any comments on the issue, please feel free to share).

Overall I found the day thoroughly enjoyable. As with every year, there are stand out talks , this year I’d personally say Robin Cristopherson wins on that front. His talk has convinced me that a lot more research needs to be put in with end users to see which techniques we are using hinder the experience for them.

Well done to the Carsonified team for putting on a great event, I look forward to seeing what next year brings. If you are interested in listening to any of these talks you can find them at http://events.carsonified.com/fowd/2009/london/content

The Future of Web Design (FOWD) is a great way to keep in contact with the latest trends and issues in the web industry. Every year we gain access to leading thinkers in the field; this year was no exception.

Image Copyright Carsonified 09

The day started off with a surprise presentation from Danny Somekh on “Agile Branding & Creative Development”. Taking the concept of agile programming beyond programming and using it as part of your full creative process is something new. Danny presented a clear and confident argument on how we as ‘creatives’ can use the process to enhance the commitment and quality of the final products, achieved through the right levels of client engagement with a good team of collaborators behind it. The key point that I got from this talk was that creating a safe environment for creative ideas helps nurture creativity in a way that will show in the final outcome. This is something I believe to be very true and often over looked.

Next up was a powerful keynote address from Jim Coudal from Coudal Partners. Jim’s talk looked into creativity and how we use various techniques to gain creative ideas. He introduced the notion that when coming up with ideas or solving problems we always have one constant and one variable. Jim went on to talk about ways in which we can find the constants that we need by looking back into the past, or looking around into the wider world through discussion with others. Always hold onto that initial enthusiasm, because there might be a reason why you get bored of a project. These are key ideas that I think help in the creative process, but a lot of what he was saying seemed to me to be things we tend to do intuitively.

Then came Megan Fisher on “Designing Effective Mobile Interfaces”. Megan took us through more of a beginners’ guide to designing for the mobile web, citing Mobile Web Design by Cameron Moll as the chief inspiration for this talk. If you have read the book then you won’t have found much in the presentation new. A few key concepts were made clearer, such as identifying key areas on the site that mobile users will want to access being a great way to figure out the flow of the page. Keep mobile site design using single columns as you have to take into account small screen resolutions. I think a lot of these ideas are very key to desiging for the mobile web. Unfortunately, nothing new was brought to the table with this talk.

Photo by Vectorfunk

Goodbarry are well known for putting personality behind everything they do, so I was looking forward to the next presentation by Brett Welch. “Beyond Pixel Pushing: 3 Steps to Building Better Websites and Happier Clients” was a very funny and useful talk. Brett outlined a clear methodology for adding value to your projects by using a process he liked to refer to as BUSTA. Helped along the way by Busta Rhymes this point was put forward very effectively. The main idea behind this methodology seemed to be in getting the business more involved with their online strategy; an idea that has been presented before but one that I fully agree with. If a business has a clear online strategy there is always a higher chance that their website will succeed.

Up next Mark Boulton, founder of one of the UK’s most high profile agencies. Mark’s presentation on “Typography’s not on the Web, it IS the Web” was a very informed talk on the state of typography today. Beginning his presentation with a personal background on how he was taught by professionals in the print industry, Mark went on to explain why typography is where it is today. He ended his talk by addressing the issue with font embedding. A key point he made is that everyone has the ability to be a designer. Clients will want to add style to their pages, but as professional designers you should help people make good design decisions. An issue that I can totally agree with after observing how clients like to use our content management system; there is definitely room for research into this approach.

With my interest in the area of accessibility, I was really looking forward to the next talk by Robin Christopherson.“Designing for All in a Web 2.0 World” was one of the most insightful talks I’ve ever been too. Robin is blind and went through his presentation showing us examples of the stumbling blocks that he has to face on a day to day basis on the internet. When using Google Mail on a screen reader, it was shown that there were several empty elements on the page that were read out, something a company that large should know about. What transpired is that a lot of disabled users share the same needs as users of mobile devices. If we were to sign post the more accessible versions of the site for disabled users, those users would have a greater enhanced experience. This is something I really feel needs to be researched further.

Last up before lunch was Mike Kus, Carsonified’s very own graphic designer. As expected his slides were very well designed. “Graphic Design: The Forgotten Web Standard” looked at the issue that all the talk about standards and code across the web tends to neglect discussion on the design stage of the process. He moved through the talk discussing various key ideas on the medium failing to hold onto one main thread. He ended the session with a sped up version of his design process, proving that design isn’t instantaneous. I didn’t really come away from this presentation with any really insightful points, but found that the idea of creating more discussion around graphic design reiterated key ideas Jim Coudal and Danny Somekh were saying earlier.

In part two I will be discussing the second half of the day with talks from, among others, Molly Holzschlag and Simon Sankarayya. Click here to read it

Design for the web is considerably different to designing for print. This post discusses ten ways they differ and explains how we at Distilled design for the web.

As a web designer, I’m constrained by the build. Not all designers and developers follow the constraints that I’m used to, but Search Engine Optimisation (SEO), Accessibility and Usability are key features which dictate the conventions we use.

Firstly, for those of you who don’t know let me explain what these terms mean:

SEO – All our websites are designed and built with SEO in mind. SEO is the process of increasing the amount of traffic a website receives by improving its ranking within Search Engines. This optimisation primarily involves finding and using key words and building links.

Accessibility – We build with accessibility in mind to ensure that people of all abilities and disabilities can use our websites. This covers visual impairments, mobility and auditory problems.

example the Nike website
This website has especially poor accessibility, and people who use screen readers are likely to have javascript disabled so would consequently view this web page like this:

Nike website with javascript disabled

When it should look like this:

Nike website with javascript enabled

Usability – This involves making websites easy for visitors, without requiring them to need specialised training. Any visitor to the site should be able to use the website’s features and understand the functionality in seconds; a website should be self explanatory. Following certain widely used conventions will aid this process.

So, getting back on track, if Accessibility, SEO and Usability are high on your agenda take note of our Top 10 tips for Web Design (and how it differs to print).

In print any font can be used, but on the web specific fonts have been chosen to ensure the font is likely to be present on a wide range of computer systems. If a non-web-safe font is used then it is likely that it will just be substituted anyway. There is very little control over this so it is wise to choose from the limited choice that is available. Web safe fonts only apply to copy that is editable. If your copy is an image then it will not be visible in search engines which is a bit of a no-go when it comes to SEO.

On the web using lots of very large high quality images especially background images will cause excessively long loading. People get bored very quickly on the web so this increases the likeliness of a high bounce rate. There are still limitations for print design, but these concern different issues.

When images are prepared for the web they are all either squares or rectangles even if an image is visually an obscure shape it will be prepared as a square or rectangle. A perfect example of where this hinders a design is: Silvercube

The original design had copy coming up to the diagonal slant on the imagery, however, diagonal copy is very hard to reproduce within the build; each line would have to be in a separate box to create the diagonal affect. This is especially hard when working with content manager systems.

A separate text field would have been required for each line.

The design had to be changed so that the copy was in a straight column, this has left quite a strange gap, where there is no content:

If you think of website design in a building block fashion it really helps to make everything a little clearer. In print design images can easily have copy floating over them.

Diagonal lines on the web generally cause distortion because of the square format of pixels. Lines can often look jagged and appear to have notches within them as opposed to being smooth.

Notches created when the lines cross over pixels.

Below is an enlarged section of line ‘2′, enabling us to see where the line is distorted as it crosses over pixels.

Close up of pixels in example ‘2′

This is not always the case but it is something to consider when preparing the images for web that they are at a high enough resolution. Print isn’t concerned with pixels but instead dpi (dots per inch). Higher resolutions of 300dpi are used as apposed to 72dpi (for web); this ensures imagery is clear.

Print design allows you to design for any style format you desire. A4, A3 or a massive banner. Web design on the other hand has limitations regarding the width of the website this is usually between 800 and 1024px wide. Confusingly this width is ever increasing as the majority of the general publics monitors become larger with larger resolutions. The height of a website however is limitless but peoples patience with scrolling may be less so!

With print the use of subtle gray hairline thin copy is often seen as clean and minimal design. The web has been built as a user friendly environment catering for everyone even people with visual impairments. Some browsers have minimum text sizes to ensure copy is legible for everyone; this could alter your design significantly once it is live. Below is an example of how tabbing up enables people who are visually impaired to see a website in various sizes.

Original size

Larger

Much larger

When sending files to print you will have a relatively good idea of how the output will look and large print runs are proofed to ensure a high quality finish every time. The web on the other hand has limited control on how the user sees the final website. The design you see can differ considerably in different browsers, much cross browser testing has to be done prior to the launch to ensure websites can be viewed as consistently as possible.

Print. Whether it is a poster or a page in a book, usually the whole page can be viewed at once. Web pages differ. The fold limits what can be viewed at once. Everything above the fold can be viewed without having to scroll. The fold consequently means that all the most important elements on a website need to be positioned above this point, so considering the hierarchy of elements is even more important.

When printing block colour, difficulties can arise with colour banding and colour bleeding into non colour filled spaces. Web block colour backgrounds can hinder legibility. Why are there still websites out there that use bright red as a background colour! White text on a dark background creates an optical illusion making it seem bolder than black copy on a white background. This can be particularly confusing for people with learning difficulties, letters get jumbled and long blocks of text can become confusing.

It has been proven that people have a shorter attention span when searching for something on the web than they do when trying to locate something in print. This is really where usability come into play. Ensure you really organise information well and present users with choices in an obvious way (conventions can really come into their own here). Remember if people don’t find what they are looking for easily they will get tired and navigate away from your site very quickly.

Keeping these ten points in mind will help when designing a website, especially if you are looking at a career change from print to web. These points should minimise the difficulties often experienced when turning designs into a working website.

A couple of words collided for me the other day. The first was conversation, which Ciaran wrote about recently, arguing eloquently that the word is being horribly misused by marketers. The second was controversy, which has, for a long time, been discussed (and implemented) all over the place as, in part, a means to generate buzz.

I studied a painstaking Latin module at uni and have never quite got rid of the need to break words down to be able to fully understand them. A form of versus appears in both conVERSation and controVERSy. Versus has several meanings, but the root comes from the Latin ‘to turn’. Now let’s take this with the ‘con’ of conversation and the ‘contro’ of controversy. Basically, con means ‘with’ and contra means ‘against’ So there we have it: conversation means ‘to turn with’ and controversy means ‘to turn against’.

I find it very interesting how these two words mean such different things in everyday use and yet how close they are etymologically. It’s difficult to have one without the other, particularly in a medium such as ours where so much relies on the communication of ideas. It’s all about the push and pull of engagement.

But of what earthly interest is this to all you marketers out there? What about a word that’s even closer to your hearts? Conversions. A word that is essentially made up of the same stuff as conversations and controversy. Turn with and against those you interact with and you’re one step closer to converting them.

Quick headscratcher this one – on a wordpress blog I’m looking at in my top content report I see visits to an image:

This image has been posted to reddit and has received lots of traffic from there which is why it stood out. My question though, how are these visits being tracked in analytics? There’s no javascript being called on the page since the page just consists of the image?

Is the google analytics plugin doing a server side google analytics call? It’s possible but I think unlikely.

Am I being dumb? Anyone else seen this?

I just read a very interesting blog post from the Rimm-Kaufman Group about the changes that Google had made to Broad match keywords and the resulting effects. In the article they point out how the performance of broad match terms has gone down and that they have been noticing some troubling incidences where the broad match ads have been appearing when better and more closely matching keywords (and therefore adverts) have been available.

They believe that this started happening with the change to a ‘1st page bid’ rather than a minimum bid, Google is ignoring/not seeing some of the more exact terms with lower bids and is instead posting the broad match adverts. This idea certainly tallies with what I have been seeing in my analytics; looking at the actual search queries for broad match terms has thrown up example after example where there was a better matching keyword and ad group for the search. The result of this is that we, the advertisers, do not get the most suitable advert appearing for the viewer, Google have less relevant search results and that in turn will make the search less efficient for the consumer. Hopefully with Google now aware of this problem a solution will be forthcoming before too long and broad match will no longer cannibalise other keywords’ traffic. In the meantime it means adding a lot of negative keywords to keep the boundaries up between ad groups. Perhaps we can use this as an opportunity to ask Google for some areas we would like improvements made such as;

• Separate broad and advanced match types where broad match would act more like the old version.
• Allow bidding on the Search Partners network on its own. Although in the UK the Search partners rarely seem to work as well as the main Search network, if given the chance to work on this traffic with independent bids then perhaps more value could be taken from it.
• Ad serving where ‘optimise’ would favour the best converting advert based on statistical significance rather than the best CTR.
• Search Query Reports without ‘other unique queries’.
• More flexible version of the conversion optimiser with more parameters when setting CPA.

In the long term if Google gives us greater control over how and to whom we advertise then adverts will be more relevant to the searches, campaigns will become more profitable, PPC budgets will go up and Google would be the ultimate beneficiary.