℃

Degrees Celcius Celsius

☀

Sun

☃

Snowman

☄

Comet

☎

Telephone

☑

Tick box

☒

Cross box

☠

Danger

☣

Biohazard

☭

Hammer and Sickle

☮

CND, Peace

☺

Smiley Face

✌

Victory

☂

Umbrella

Data Source: http://www.bigbaer.com/reference/character_entity_reference.htm

Picture Source: http://www.flickr.com/photos/ezioman/2319362523/

It has many features, like the forgotten password page and the registration page. If you’re running a very small site but would like a login system for certain content, I would strongly recommend Quadodo.

Login

Registration

Config

Quadodo Site

Download

It’s available for download here: http://www.quadodo.net/downloads.php

1. Valid Code

Valid code means that browser doesn’t have to make, create and merge your code to make it work. A page with the correct DOCTYPE and structure will render quicker within the browser, it also helps with browser compatibility.

XHTML and HTML Validator – http://validator.w3.org/

CSS Validator – http://jigsaw.w3.org/css-validator/

2. Reduce the HTTP Requests

As well as the time it takes to download a file off the server it also takes time to request the file, so the less actual requests you make the faster it will be. A brilliant example of this is CSS sprites which combine multiple images into one and use the CSS background property to only show the portion of the image you require.

A Guide to Reducing HTTP Requests – http://www.dailyblogtips.com/speed-up-your-site-reduce-the-http-requests/

CSS Sprites Tutorial – http://css-tricks.com/css-sprites/

CSS Sprite Generator – http://spritegen.website-performance.org/

3. Compress Images, CSS and JS Even Further

Images, Javascript and CSS can all be compacted into smaller files without loosing any functionality. The Yahoo! site Smush.it compresses images even further than the Photoshop “Save for web” option.

To compress CSS there are easy to use websites such as Clean CSS and CSS Drive Compressor. These site will remove unneed spaces, semicolons and returns from your CSS files usually decreasing the file size by around 13%.

The site Javascript Compressor is the simplest way to cut the size of those large javascript files.

4. Use JS Libraries and link to Google’s CDN

Using javascript frameworks like jQuery, MooTools and Prototype means that you need less odd bits of javascript here and there, a javascript framework can usually do the same job while compacting it into an easy line or two.

Once you have a framework and you want to use it on your website it is an idea to use the version hosted by Google on their servers over at Google Code. This can save your load time because if it’s all hosted at the same place it might not need to be downloaded at all because it might have been cached.

5. Javascript at bottom

This is a really simple, yet effective tip. A few years ago I would always start a page with the standard DOCTYPE, HTML, title, meta, css, javascript then body but now it’s realised that it’s better to add them to the bottom of the page as they are not usually needed until last of all. A prime example is the Google Analytics tracking code which they recommend sits at the bottom of the page.

6. Firefox Addons

Using Firefox addons like Firebug and the Web Developer Toolbar can seriously help you when optimising your code. Firebug enables you to check how long it takes for a specific file to be requested and load plus much more while the Web Developer toolbar allows you to disable images, CSS and javascript to see how your website looks and works without them and once again much more.

As pointed out by ‘sampada’ in the comments IE Add-ons such as IE developer Toolbar can also be very useful and help with cross-browser testing.

So there we have it, some nifty ‘lil tricks to get your website in front of the people who matter faster. Any comments? If so leave them below.

1. Spanghew

A colourful gradient sequence designed for a black background, I’m currently using this background as my twitter background.

Download Original Background Image [45k]

CSS Code:

Examples:

2. Circuitry

Original design by stallio on Flickr under the Attribution-Share Alike 2.0 Generic licence. This circuit board gradiented into a light yellow is great for technology related websites.

Download Original Background Image [30k]

CSS Code:

Examples:

3. Chimp

Another one of my Photoshop works this colourful piece with subtle sprouting grass looks amazing.

Download Original Background Image [29k]

CSS Code:

Examples:

4. Nights Sky

This is the background I personally use on my website, it has small stars on a black background portraying the nights sky. I also made a small moon to sit in the top right corner (see here).

Download Original Background Image [24k]

CSS Code:

Examples:

5. Clouds

Not a big, overcrowding background it just sits best right at the top of the page. I think it looks good simply because of its simplicity.

Download Original Background Image [5k]

CSS Code:

Examples:

This work is licenced under a Creative Commons Licence.

Here are some of the new features and elements to HTML5:

The audio and video element allows you to easily embed videos and audio without the need for flash while retaining certain features like autoplay and loop. A great example of where this is being used is: http://www.dailymotion.com/openvideodemo it doesn’t use flash only HTML5, JS and CSS3.

These structural elements are a great way to slove the over use of divs and classes which are always used to the excess in modern HTML.

This is a javascript controlled drawing area allowing you to make graphs easily. A example of the canvas element with RGraph can be found at http://www.phpguru.org/static/canvas.html.

This replaces the original DOCTYPE and HTML elements, combining the two into one streamline starting point.

All of these elements are deemed outdated and have been removed, mainly because there is a better or more efficient way of doing them.

Is the world ready for HTML5?

Well, it’s getting there. With recent progressions in the browser industry a hand-full of these tags are now supported but still only with the latest versions. So if you’re considering developing a new site, HTML5 is still a long way from main stream.

Image by: churl on flickr

Additional Resources:

http://www.phpguru.org/static/html5
http://www.alistapart.com/articles/previewofhtml5/
http://webdesign.about.com/od/html5/a/html_5_whats_new.htm

Analytics

Ever wondered how many people actually look at your website? This is a key tool in developing your site around your users. It’s free and easy to try, just go to: http://www.google.com/analytics/

Alternatives:

• http://www.haveamint.com
• http://www.crazyegg.com

Browser Compatibility

Yes, you could just install multiple operating systems and a huge array of web browsers but browsershots.org makes the whole process a lot easier. Just visit www.browsershots.org and start testing your website.

Alternatives:

• http://ipinfo.info/netrenderer/index.php

Accessibility

Validate those web pages to gain their full potential, a cleanly validated page can help with search engine rankings and speed. To check your pages go to: http://validator.w3.org

Alternatives:

• http://wave.webaim.org
• http://jigsaw.w3.org/css-validator

Load Times

It’s difficult to know exactly how long your website really takes to load, because the second time you load the site it will always be faster due to caching. This tool from websiteoptimization.com puts each section, such as images and CSS, into their own category allowing you to see what needs to be improved, and what’s fine as it is. Find this tool here: http://www.websiteoptimization.com/services/analyze/

Alternatives:

• Firefox + Firebug + YSlow
• http://tools.pingdom.com

I´ve discoverd recently a great resource for web icons which will drastically improve your web interface. It includes over 700 small images (16×16) and I quote:

“And all for a low low price of $0.00. You can’t say fairer than that.”

They can be found at famfamfam.com

They are licenced under the Creative Commons Attribution 2.5 License so usually require a back link to their site.

Photo Source: Gaetan Lee

1. <html>, <head>, <body>, <title>

The fundamental basis of HTML, they simply have to be mentioned here.

2. DOCTYPE

As mentioned by the w3, an XHTML document consists of three parts, and this is one of them. The DOCTYPE tag allows browsers to instantly recognise how to interpret your page, rendering it correctly. It should be the first line in your document, yes even before the HTML tag.

3. <link rel=”stylesheet” src=”example.css”>

CSS is powerful, make the best use of it by creating an external stylesheet and linking your pages to it with the link tag.

Photo Source: davestfu

4. Header’s <H1>, <H2>, <H3>, etc.

It’s a benefit to SEO (search engine optimization), it’s a heck of a lot neater than using DIV tags all the time and they are versatile. Why not?

5. Good old <Meta> tags

They were more popular in the past but with an improvement to search engines they have become less popular. I still strongly advise them, a quick <meta name=”description” content=”"> and <meta name=”keywords” content=”"> on each page can greatly improve your SEO.

6. Extra:

This one isn’t needed I just thought it was quite cool so decided to add it to the list.

Example:

Code:

Principles

• 19 Things NOT To Do When Building a Website
  http://www.josiahcole.com/2007/02/14/a-webmasters-19-commandments
• 8 Web Design Tactics to Help You When You’re Stuck
  http://www.seomoz.org/blog/web-design-tactics
• A List Apart: Whitespace
  http://www.alistapart.com/articles/whitespace
• 9 Essential Principles for Good Web Design
  http://psd.tutsplus.com/designing-tutorials/9-essential-principles-for-good-web-design/

Colour & Text

• Color and Typography in Good Design
  http://www.colourlovers.com/blog/2007/12/19/color-and-typography-in-good-design
• ColorJack: Sphere
  http://www.colorjack.com/sphere/
• Become a Master Designer: Rule Three: Contrast, Contrast, Contrast
  http://www.gomediazine.com/design-tip/rule-three-contrast-contrast-contrast/

CSS

• How to make sexy buttons with CSS
  http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
• 53 CSS-Techniques You Couldn’t Live Without
  http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
• 70 Expert Ideas For Better CSS Coding
  http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

Images & Icons

• Inspire Yourself: 50 Remarkable Favicons
  http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/
• Crystal Clear Icon Set
  http://commons.wikimedia.org/wiki/Crystal_Clear
• FAMFAMFAM Icon Set
  http://www.famfamfam.com/lab/icons/silk/

Design

• 30 One Page Websites
  http://tutorialblog.org/one-page-websites/
• 30 Dark Designs You Should’ve Seen
  http://www.smashingmagazine.com/2007/01/13/30-dark-designs-you-shouldve-seen/
• 7 Surefire Web Design Styles that Work
  http://thinkvitamin.com/features/design/web-design-isms-7-surefire-styles-that-work/
• 10 great Web site designs/redesigns of 2007
  http://news.cnet.com/8301-17939_109-9835960-2.html