Good Website Design Values

Posted by Martin on November 2, 2010  •  Comments (0)  • 

To mention, a few considerations towards good web design:

  • Design
  • Ease of Use
  • Interactivity
  • Technology
  • Innovation
  • Content

So which of the above would you rate as foremost in the test of tests when it comes to deciding the greatness or otherwise of a website?

Ease of Use and the usability of a website is very important, if a site is hard to use then nothing else really matters, it needs to be user friendly, no matter how good it may look or what whiz-bang technology enhances it, if you can’t use the site then you will click out. Mouse clicking is a mandatory part of interacting with websites, unlike other media where the engagement may be more passive, so it is important to keep the user clicking through your website.

The website visitor tends to process information much like they would do in a normal street shop, making intuitive - sometimes impatient decisions, scanning the page for what they need. However it's been discovered that this behaviour does have a pattern, the "F - pattern".

Without going too much into detail it's fascinating to note that most users basically scan across the page roughly in the shape of an F - across then down, across again and then down.

By observing such known patterns and not making your users work too hard, you have a better chance of keeping the user engaged productively on the website. When I say 'not making your users work too hard' I refer to making life easy, not letting them have to guess what to do next or guess why they are on your site!

Users come to the internet because they want to feel in control, unlike TV where we are conditioned to 'switch off' before we have even switched on, it's only natural that if you belittle your user by making them have to ask too many questions about your website, they will soon bail out because they feel out of control. Users shouldn’t have to ask themselves questions like what to do next, so by eliminating questions in good design you are enforcing the flow. We all know that when an activity flows it is more enjoyable and time does indeed begin to fly.

Reducing barriers such as lengthy forms for a simple web enquiry can improve user spontaneity, having to squint to read ant like miniscule text can literally make your website seem too far away to be seen.

Interactive buttons & functions should be large and clear and there is no reason why they shouldn't be simplified into things like Step 1, Step 2, Step 3. You don't want to overload your visitor's thought process. They came to your site for information or to achieve something, not for the funky design - unfortunately, so the design should always serve as a purpose not as a distraction.

Unless of course the site itself is about the design or is clearly intended to make the visitor think outside the square, but even then there is merit in being original rather than obscure.

Content is very important, good content will override even an average or poor design, if users can find what they are looking for then they will be satisfied regardless of however bad the surrounding design may be. Good content is still at the mercy of presentation on the web, so good presentation of good content is even better.

Content is of course one of those nebulous things that may seem so obvious to have and yet so elusive to find. Good content on one website may considered bad on another website, if it is out of place or irrelevant. What was once good content could be bad if it is out of date. People turn to the net to find something or get something explained, so good content should strive to meet those goals proactively. Fulfill those expectations first.

Content is gold when it is in front of the right person, so yes content itself is prone to the dimension of the context it is seen in. That's where good Search Engine Optimizing is inseparable from the 'gold' of good content. If the basic optimizing of URL, titles and descriptions is honest and on target then the ill defined daemons of web surfing logic will not be against you in the first place.

Design, whilst I think I’ve made the point about it being second to Ease of Use and Usability, it’s still very important. A good design will stand the test of time and anything that lasts longer means less maintenance, fewer makeovers, and therefore costs in the long run will be kept down. Other key benefits in favour of spending more time and resources on getting a good design:

  • Users are more likely to remember a website with a nice design
  • Good design adds credibility to your service or product
  • Well designed sites can create a stronger identity for your business
  • Good design ideas generated through your web designer can be used in other media, e.g. print

Minimal web design ethics are here, for good reason it makes digesting information that much easier. Use your white space then, breathe easy in and around text, interactive elements and web graphics. As mentioned before web visitors tend to scan, not read, so lots of harmless white space can help the user to pick up on vital hot spots without having to think.

HTML5

Posted by Martin on November 12, 2010  •  Comments (0)  • 

HTML5 is the next major revision of the HTML standard, an advancement on the current HTML4 and intended to inhance the inherent powers of the simple yet reliable layout language.

One of the great things about HTML4 and XHTML - the slightly more rigid division of HTML was that what you saw was what you got, if you could write in HTML or XHTML markup you knew what it would do so because it was simple and literal and you understood the code.

HTML5 whilst being more powerful, is so because there’s more going on behind your code than just the code you write. An example might be JavaScript versus the jQuery pacakge, most of the actual code is out of sight, you are using someone elses tools to manipulate JavaScript. So the new web programmer may never really have a need to learn the essentials of languages like JavaScript, it sort of dumbs things down a bit.

Similarly with HTML5, it's ability to handle video and audio directly, whilst that's good news for accessability, means the ‘openness’ of source code is no longer quite as valid. Flash’s ActionScript - the language of Flash programming and the FLA and SWF file are used all over the web with the Flash Player.

Why would the W3C want to change their approach to just providing pure document types that everyone can then build on such as HTML4 and XHTML, to becoming more like a vendor of browser functionality.

Apple are keenly involved in the development of the HTML5 draft, via the WHATWG group formed in 2004.

Ever noticed in YouTube that the standard player is Flash Player - Adobe right. iPhone and iPad don’t support Flash directly, as of earlier in 2010. YouTube had to provide a format just for iPhone.

Ok so you can see where this is going, in order to control the web you need to control the source code.

In order to bring about "iWeb" domination you need to have hooks in the W3C, anyway lets hope this is not where it’s headed. The W3C will assert itself as the steadfast arbitrator of HTML5, providing a fair and open ground for everyone and Apple will continue to do what it does best – make nice gadgets.

Back to the detail

Although at this late stage in 2010 some browsers already have support for HTML5, it is in no way universal and mainstream inclusion via Candidate Recommendation by the World Wide Web Consortium (W3C) looks likely for 2012.

So if you’re in a rush to embrace HTML5 now in 2010, for the next couple of years it’s going to seem like browser wars are back as you discover that not all code is equal.

Lets’ just hope that HTML5 once the dust has settled is still the reliable, simple, universal markup you can always depend on.

What can you do with HTML5?

HTML5 builds on current HTML4, so old markup will still work, you’re just adding to it, although there will be some dropped elements e.g. ‹font› that have long since been handled by Cascading Style Sheets (CSS), so no drama there.

You will need to change the doctype tag though to:

ELEMENTS

Like HTML4 tags names but more like XML, HTML5 introduces specific elements to work with. This is what gives HTML5 the ability to be more in tune with the demand for a modern web application.

Here are the new structural elements released by the W3C:

  • section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
  • article represents an independent piece of content of a document, such as a blog entry or newspaper article.
  • aside represents a piece of content that is only slightly related to the rest of the page.
  • hgroup represents the header of a section.
  • header represents a group of introductory or navigational aids.
  • footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
  • nav represents a section of the document intended for navigation.
  • figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
    ‹figure› ‹video src="ogg"›‹/video› ‹figcaption›Example‹/figcaption› ‹/figure›
  • figcaption can be used as caption (it is optional).

Then there are several other new elements:

  • video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
  • embed is used for plugin content.
  • mark represents represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
  • progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
  • meter represents a measurement, such as disk usage.
  • time represents a date and/or time.
  • ruby, rt and rp allow for marking up ruby annotations.
  • wbr represents a line break opportunity.
  • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  • command represents a command the user can invoke.
  • details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
  • datalist together with the a new list attribute for input can be used to make comboboxes:
    ‹input list="browsers">
    ‹datalist id="browsers"›
    ‹option value="Safari"›
    ‹option value="Internet Explorer"›
    ‹option value="Opera"›
    ‹option value="Firefox"›
    ‹/datalist›
  • keygen represents control for key pair generation.
  • output represents some type of output, such as from a calculation done through scripting.

The input element's type attribute now has the following new values:

  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

For example where you once only had tags like ‹div› ‹/div› or ‹table› ‹/table› you now have ‹nav› or ‹footer› and ‹header› that bring with them their own structure and meaning. There is no doubt these will be used by search engines to categorise your pages content more precisely, you can take advantage of a new modular structure to web pages or ignore it at your peril. The ‹article› element for example will act more like an XML/RSS feed allowing search engines to search and separate articles within your pages and allow you to share your articles better across your social media blogs and other feeds.

The ‹progress› element is one exciting tag that, as it implies will monitor the download of page properties. Previous progress methods like the PROGRESS event in Flash or the XMLHttpRequest object in AJAX or just the good old wait in the dark until the browser stops churning may soon be streamlined with this simple built in element that does away with hand coded progress functions.

 

Recent Post

About Us

My Mates Place is run by WIGPIP Website Design & Development and is an ongoing source of articles on Website Design, Web Technologies and Online Business.

affordable e-commerce web sites