Probably the most commonly requested requirement for a website is the ability for the client to add and edit pages. It sounds such a simple requirement, but in reality it’s really tricky to get the balance right between functionality, flexibility and the level of technical skills required.

There are literally hundreds, probably thousands of CMS platforms out there. Some are very generic such as Drupal and Joomla, and can be molded into practically any kind of site.

Both Drupal and Joomla are open source applications, built by an army of mostly unpaid contributors who continuously update the codebase, adding new features and extra functionality. These applications are great in many ways, but personally, from a coding point of view I find them far too generic and bloated for most situations. While they do provide pretty much everything under the sun in terms of functionality, they include this at the sacrifice of usability. In some ways they are almost too clever for their own good and can be taken straight out of the box and setup by anyone with enough patience to learn how everything works.

There are other content management systems out there which are more job specific, and in some ways I think this approach makes them actually more usable. We’ve created several websites based around the Wordpress blogging platform. I love Wordpress, it’s a highly supported package and you can have a new blog up in a matter of minutes. This blog you are reading right now is powered by Wordpress. Plugins are freely available and themes applied quickly and easily giving you a brand new website in no time at all. I actually prefer using Wordpress as a platform for certain types of websites as it just about gets the balance right between functionality and usability, but even then I don’t think it’s perfect.

As a web developer who builds websites for a living it’s very difficult to put myself in the place of the average small business owner. Unlike us they live and work in the ‘real world’. Logging into and updating a website is something that needs to be so simple, quick and intuitive that forgetting how to do it just isn’t a question, because it’s so obvious.

My hunt for the perfect CMS has led me down many paths over the years, but perhaps inevitably it’s my love of coding and building applications that has resulted in the development of our own solution, SimpleCMS.

SimpleCMS Unique Selling Points (USPs)

• Admin can view the website they want to update rather than having to use a separate admin interface.
• Updating pages is as easy as clicking an ‘edit’ button whilst viewing the page in question.
• Add pages is as easy as selecting ‘add page’, selecting if it’s a top level or sub page, giving it a title and entering the content.
• No restriction on the page type or content. Your page can be anything you like, it’s up to you. You aren’t restricted by any particular format or content type. Although all default styles are controlled by the globally defined style sheet.
• Pages instantly appear in the menu for the rest of the world to see. There’s nothing complicated or confusing to worry about.

SimpleCMS Is Ideal for

• Small business brochure or content websites that follow a basic page/sub page format, and need to be quick and easy to update.

SimpleCMS Isn’t

• In any way confusing or complicated to use
• Going to be the perfect solution for more complicated websites, ecommerce stores or social networking websites.

I think if you try to make a piece of software all things to all people it will inevitably end up being overly complicated and confusing and there’s just no need. If you keep it simple, quick and easy you can take the pain out of updating a website.

If you’re interested in having a play with SimpleCMS take a look at the demo website and have a play. I’m sure you’ll find it really quick and easy to update the pages. Don’t worry if you mess up the site by editing and deleting pages. It will reset itself every hour on the hour, so go for it, just don’t write anything rude please! Anyone found spamming will be hunted down, so play nice please.

If you have any suggestions send them this way.

There are a few basic things to consider when building a site that’s mobile friendly. It’s all pretty common sense when you think about it, and infact I’ve found most of these rules simply apply as good ‘general’ rules anyway. I.e. Use of good quality well-formed code, css based design and semantic markup. But there are also a few extra tips you can use to make the user experience that little bit better for the mobile user.

Use the Correct Character Encoding

It’s important to tell your browser what character encoding your content will be in. This appears on the first line of each XHTML Basic page for example
<?xml version=”1.0″ encoding=”UTF-8″ ?>

UTF-8 is a good choice as it includes quite a wide range of characters.
ISO-8859 is another commonly used character set

<?xml version=”1.0″ encoding=”iso-8859-1″?>

You can also include this as a meta tag
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

Doctype

The document type (doctype) tells the browser how the page needs to be rendered, including the rules and how strictly to follow these rules.
Here is an example of a doctype declaration for XHTML Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Use Well-formed Code

All the code your write should be well-formed and valid code. Depending on the rules you choose to follow and how strictly these rules are applied, as defined in your doc type declaration above. XHTML has the following requirements.

• All elements should be closed. I.e. <br /> <p>Blah text</p>
• All elements must be properly nested. I.e. <p><strong>Title</strong></p>
• The alt attribute must be used for all images. I.e. <img src=”blah.jpg” alt=”My Image” />
• Text should appear within a block level element and not directly in the body. I.e. <body><p>My paragraph</p></body>
• Inline elements should always nest with block level elements. Inline elements include the span tag for example, which should therefore be nested within a block level element such as <p> or <div> tags.
• All attributes should appear within double quotes. I.e. <img src=”blah.jpg” alt=”My Image” />
• All elements and attributes should use lowercase. Just keeps things looking neat if nothing else!

Avoid using tables for layout - CSS based design

CSS evangelists have been harking on about this for years now. But when developing for a mobile device, where the page size is all important, makes this even more relevant. Most professional web designers have been coding 100% CSS layouts for a while now, so this shouldn’t come as much of a shock.

Use accesskeys in the Primary Navigation

This is about the first rule which I think most traditional web designers making sites for a computer would perhaps not consider. But using accesskeys could make navigation on a mobile device considerably easier.

<li><a href=”home.html” accesskey=”1″>Home</a></li>

This links the “1″ key on the mobile device to the Home link.

Use Ordered Lists for Navigation

Again something most professional web designers using CSS layouts will be quite confident with.

Link Phone Numbers

One of the benefits of the Mobile Web is that its users primarily view it on their phone, so allowing the user to quickly and easily make phone calls is a pretty cool idea.
<a href=”tel:+12065450210″>+1 206 545-0210</a>
Like any hyperlink, any text could appear between the <a> element to initiate a call. However, the recommendation is to display the phone number.

Caching

“Limited bandwidth and high latency can reduce the usability of Web sites on mobile devices. Using caching information effectively can reduce the need to reload data such as style sheets, images and pages, thus improving performance and reducing cost of use. It can also prevent the reuse of content where this is not appropriate, for example content that is adapted for one device should not be re-used by different devices. Devices and network caches are both affected by caching information.

How to do it:
Set expiry times in a way that is appropriate to your application. Consider using Cache-Control: public to allow sharing of pages between devices, Cache-Control: private to allow re-use but only by the requesting device and Cache-Control: nocache to prevent caching.”
- W3C Mobile Web Initiative

Tab Order

Consider the order of elements on your page by either completely avoiding the tabindex attribute and allowing the browser to determine the logical order of elements, or by specifying the order explicitly. Either way it’s worth checking the page works as expected when tabing through links and other elements.

Labels on Forms

It’s good to use the <label> tag to link labels to form elements. I typically build forms using a definition list, as this represents in my opinion a semantically correct markup for a form which also looks perfectly ok even without any styling at all.

References

Mobile Web Developer’s Guide from dev.mobi

W3C’s Mobile Web Initative

Mobile Web Best Practices 1.0

A websites navigation is one of the most important aspects in it’s design. Making a site easy to navigate and intuitive to the user, while at the same time interesting and original is always something to aspire to. This article by smashing magazine gives a nice little overview of some of the latest trends currently in use and a great showcase for inspiration.

I love the way Facebook works; there are so many subtly clever gizmos that just make the whole experience that little bit smoother and pleasant. One feature I particularly like is the image grabber. For those that don’t know, if you enter a URL while writing a private message in Facebook, the site cleverly goes off to the URL and grabs all the images it can find for you. You can then select the image you want to include alongside your message. It’s a really sweet use of Ajax; subtle and very effective. This gave me the idea to develop a similar tool for use with our social shopping site. You can see the script in action here. It’s a simplified version of the code in production, but it works ok as a demo. (and please excuse the repeat of this paragraph on the demon page).

Some great links to resources for design tutorials, inspiration, tools, code libraries, browser bugs, galleries, templates, articles and web forums.

http://www.softwaredeveloper.com

Anyone who has ever made a website, then tried to make it look the same for everyone will have come up against the nightmare that is cross-browser compatibility. Things are no doubt easier than they used to be. Back in the days of ie4/5 and Netscape you practically had to have different versions of your website, or atleast different javascript files. Nowadays the main issues tend to be around CSS and often relate to IE’s inability to abide by the rules. Much of this has been fixed in IE7, infact off the top of my head I can’t think of any issues I’ve personally had with IE7, but unfortunately there are still bazillions of IE6 infected computers which the poor web designer is obliged to support.

In the past I’ve used many a hack to get the job done, but a ‘nicer’ way of doing things is to use conditional comments. Why not take a look for yourself on Bruce’s website.

http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/

Wow! Here’s an amazing video by Dr Shai Avidan and Dr Ariel Shamir to support their paper on ‘Seam Carving for Content-Aware Image Resizing’.

It’s a few minutes long, but it’s worth watching to the end - where they make people disappear! Ooh!

To be able to seamlessly extend or contract an image, without causing distortion - priceless!

I’d highly recommend watching it.

User interface design is critically important when designing good and useable websites. It’s often something that’s overlooked or taken for granted by the general public as they use a site, but the basic principles are often applied by designers almost without them realising. Good design more often than not goes hand-in-hand with good user interface design and is a result of creating interfaces which people find intuitive and straight forward to use.

Some basic points to bear in mind when creating a website design:
(more…)