Matthew Knott

How do you come up with unique, effective website designs if you've never had any formal training?

To be honest, this is something I really struggle with. Perhaps it's just me, I'm never 100% happy with any of my designs, but then I see some of the trash out there and think, well, it's not so bad after all. My mother was an artist, and a really good painter, I on the other hand have a head filled with great designs and scenes that I'd love to articulate but just can't. I think this is probably common amongst many people, but how do you solve it?

Inspiration

Firstly, you need inspiration. I've been wanting to redesign this site for a number of months, mainly because I was getting bored. I can imagine some designs, but they all tend to be much of a muchness. By that I mean that there's nothing new, nothing to make you say, wow this is a unique design. So if you can't come up with a unique design, you're going to need inspiration.

I tend to go to alistapart.com and look at the websites of the authors for inspiration. Click around a dozen or so, and make a note of the features you like the most in the following categories:

 

• Layout The general positioning of major elements.
  
• Colours The colour scheme, specifically in regards to layout and fonts.
  
• Details Design features, little details that add to the overall feel.
  
• Features Page elements such as recent posts, tag clouds etc.
  
• Fonts A key area, what fonts do you like for specific areas of your page. Typically this would include, menu, article and header fonts.
  

 

Wire framing

Once you've completed your due diligence, you can move on to wire framing. Grab a piece of paper and a pencil and start sketching out the layout you have in mind. Use a ruler if you're using a grid layout and like me aren't particularly good at sketching straight lines.

When you've got a design on paper that you're happy with, you should transfer it into a vector drawing package like Fireworks or possibly Photoshop, depending on your preference. This will allow you to get mock elements in place and see how your design holds up on the screen with your choice of fonts and colours. If you need some padding text then head over to lipsum.org.

Constructing a template

This is usually the most exciting stage, and possibly the most frustrating. You create a html template based upon your design. I can't offer you too much guidance here, other than these key tips:

• Use CSS for layouts, not tables
• Make sure your fonts can be resized
• Use the correct html markup based on an objects function (See here to understand what I mean)

Dynamic site?

If you're building a dynamic site, in php or asp etc., you need to start identifying common elements and splitting them out. What I mean by common elements is code that repeats and changes little or not at all depending on which page you're on. This includes items such as the header, footer, navigation, dynamic blocks of code such as recent posts. Split these out into include files, I tend to use the format of IncludePurpose.inc.php to make it easy to identify what you're including on your page.

Feedback

Once you've completed your design, host it somewhere and start getting some feedback from people, ask friends but don't be afraid to drop a mail or two to people in the know, people recognised for great layouts, see what they think about your design and collect some constructive feedback. However, at the end of the day this is your design and if you like it, then don't worry, because website design, like any art form, is never universally appreciated, and you shouldn't expect it to be.

Tags: Standards Design css Wire_Frame Wireframe Layout Art Colours Colors Fonts Sketch

The HTML equivalent of an Anderson Shelter, a meta tag that makes IE8 render websites in an IE7 compatibility mode, has been released by Microsofts Nick MacKechnie in his blog this week.

I'm not sure whether I should say "thanks for the heads up" or "why the hell should I have to?". I mean, my site is standards based, I specify my doctype, and there should only be one way of displaying that document.

So yet again, after spending years slowly adopting web standards, Microsoft has yet again come out with a version of internet explorer that adds their stubborn feature set, prioritised above features that make it easier for developers to develop cross-browser compatible sites.

I really did think that this was Microsofts chance to build on the progress they had made with IE7, but no such luck. A couple of months ago I tried out IE8, and when I hit IBM's W3 intranet, All I got was a little blue bar at the top of the page, and nothing else. The majority of sites I've looked at with IE8 do not handle well, so this meta tag is going to be compulsary.

Perhaps Microsoft should absorb the cost that will be incurred by local business to have this line of code inserted into every page of their website, there bust be billions of pages of markup that will require changing, so profitable times ahead for web developers.

Tags: Standards Microsoft Web_Standards IE7 IE8 Developers Selfish Doctype W3C Stubborn

Web standards is a passion of mine. They are the guidelines set down for a document type, and should be followed. Being a devout standards follower can bring you kudos and appreciation, but your efforts may be let down by the web browser used to view the site.

Poor support for web standards in Internet Explorer mainly, and older versions of Safari, amongst others, means that your site may loose much of it's shape and pizzaz.

Until now, the challenge of the web designer has been to tailor their styles and code to be cross-browser compatible. Ultimately, you may have to reign back some of your design and functionality, sacrificing the overall product, but what if the situation was turned upside down.

Imagine if some of the biggest websites started blocking browsers that would not display their site correctly? It's not unheard of for a site to carry a disclaimer that it will only work properly in Internet Explorer, but you just do not see complete blocking at browser level, and because of this, there is no incentive for Microsoft to release patches for their slightly older browsers (which still dominate the browser demographic).

This type of motion would have to be started by a major site, one that could sway enough opinion and also encourage more users to upgrade, faster than if the smaller sites embarked on such a mission.

Legally, the site ultimately has impunity from prosecution on the grounds of discrimination because the browsers are not technically capable of displaying the content correctly and consitently, and therefore can be blcoked from viewing the content.

Morally, there is always going to be the desire to be open to all, but I think a day will come when major sites will force a browser upgrade before granting access.

Technically, there is a level of satisfaction derived from creating a site that renders near identically on multiple browsers, but the time it takes to achieve this compatibility, and time is money.

Tags: Standards Safari Web_Standards Browser Internet Explorer Leverage Web Giant Accessibility Blocking Discrimination

I currently use a rich text editor called Tiny MCE to write the articles for this site. When I started using it, I thought it was the bees knees, but I've come to find it has more than its fair share of drawbacks.

For one, I find myself circumventing it more and more, it strips my code tags, removes / from the beginning of internal links, and completely strips http://www.mattknott.com/ which can be annoying when you are referencing content from multiple locations!

In addition to all of this, I go into html mode a fair bit adding in syntax to try and maintain xhtml 1.0 strict adherence. There has to be an easier way.

This week I'm going to have a stab at a solution based around tag suggestion, similar to the Dreamweaver code editor, triggered by <, a list of tags appears, and refines as I continue to type. Clicking a tag will insert the text I want, the way I want it, including alt tags and title tags for images and links respectively.

I will post an update as to how I get on, as it's going to be a bit of a challenge, but with any luck it'll be something to expand upon in the future.

Tags: Syntax Standards Rich Text Editor RTE Rich_Text_Editor Dreamweaver Web_Standards Suggest Tag

When building an accessible standards-based website, many developers feel it is sufficient to pass their pages through the w3c page checkers for xhtml etc. It is fairly important for your pages to pass these tests as much as possible, however, I believe that you need to go beyond the standards and look at whether or not your markup is suitable for purpose.

What I mean by this is that you need to look at each element on your rendered webpage and ask yourself if you've used the correct markup to display it. Often, designers will use spans to list items, instead of a list object, or div tags to display tabulated data instead of a table.

Correct use of tables

Whenever you want to display tabulated data, do not be afraid to use a table. The witch hunts of the CSS revolution focused on the use of tables for page layout and structure, but used correctly they are still the most effective way of displaying your data in a flexible grid layout. The question is are you coding your tables correctly? The traditional method of creating a table was as follows:

<table>

<tr><td>Header 1</td><td>Header 2</td></tr>

<tr><td>Metric 1</td><td>100</td></tr>

<tr><td>Metric 2</td><td>200</td></tr>

<tr><td>Metric 3</td><td>300</td></tr>

</table>

This works, but the best practice for creating data tables is:

<table>

<thead>

<tr><th>Header 1</th><th>Header 2</th></tr>

</thead>

<tbody>

<tr><td>Metric 1</td><td>100</td></tr>

<tr><td>Metric 2</td><td>200</td></tr>

<tr><td>Metric 3</td><td>300</td></tr>

</tbody>

<tfoot>

<tr><td>Total</td><td>600</td></tr>

</tfoot>

</table>

This approach makes your code easier to understand by both screen readers and developers alike, plus when css is turned off, your data retains it's structure.

 

Lists

When you cast a critical eye over your site, you might notice that many of your page elements are actually lists. Site navigation is a list of destinations, likewise site maps are better displayed in a list object, about us pages often list statistics. These are all comment situations where list object should be used but are not.

You can craft an effect top level navigation using an unordered list:

<ul>

<li><a href="home.php">Home</a></li>

<li><a href="blog.php">Blog</a></li>

<li><a href="contact.php">Contact Us</a></li>

<li><a href="links.php">Links</a></li>

</ul>

The magic then happens within the CSS.

ul {

display: block;

width: 100%;

overflow: hidden;

list-style: none;

margin: 0px;

padding: 0px;

}

ul li{

display: block;

float: left;

overflow: hidden;

margin: 2px;

padding: 0px;

}

ul li a:link, ul li a:visited {

display: block;

margin: 0px;

padding: 15px;

}

ul li a:hover {

display: block;

margin: 0px;

padding: 15px;

background-color: #CCC;

}

Summary

These are just two common areas of markup that are overlooked, but there are many more, It's worth brushing up on the markup available to you so that you can ensure you always choose the best markup for the purpose.

Tags: Tutorial Standards css Tables Lists Markup Tabulated

This article really encapsulates a lot of the things that frustrate me about Microsoft's "I know best" attitude to it's web browsers. The purpose of the W3C Standards is to facilitate a common experience across all-platforms and browsers.

This site is something of an ongoing project for me, I've tackled advanced apache configuration through my work with mod_rewrite, cloud trees, which were mild challenges, but nothing compares to the sheer hair-pulling that comes from trying to get your site looking good cross-browser. This site, for example, great in Safari, Firefox, Internet Explorer 7, and Opera, yet I have margin issues in Internet Explorer 6.

This is frustrating as a developer because it means valuable time is wasted trying to flush out happy mediums, often forcing compromises on excellent designs.

IE 7 represented a step forwards in terms of compatibility, but there is still a long way to go before developers can rest assured that their site will look the same in each and every major browser.

My particular problem related to the infamous margin-doubling bug in IE6 when working with floated elements. This is documented in numerous websites, and the recomended fix is to use display: inline.

This resolves the issue, although totally against W3C guidelines. Plus, if you're using an element that requires the display property to be set to block, you have even more tinkering to do that will probably force you to deviate further from the set standards.

After some experimentation, I found that the display: inline-block existed, fixed the bug, and retained the properties of a block element insofar as the padding etc was still correct.

Tags: Standards Browsers Microsoft Design Safari Firefox Opera IE Internet_explorer css inline-block inline display property