But that’s just not very cool is it? Twitter uses a system where you dont need to click next. The way that their content is delivered, the newest content is always at the top. Twitter might be a “micro blogging” system at heart, but this idea works with regular blog content as well. I have seen it in action on Tumblr and I have even implemented it on my own Opinion & Discussion website.

We will be using PHP and Jquery to create a similar system.

1: Lets start with setting up our initial data set.

We are just going to pull 25 records from MySql and drop them into a list.

<ul id="Results">
<?php
$getFirstList = mysql_query("SELECT * FROM tableName ORDER BY id DESC Limit 25");
 
while($listData = mysql_fetch_array($getFirstList)){
	echo "<li> Your Data goes Here! </li>";
	$lastId = $listData['id']; //just get keep the last ID of the set.
}
?>
</ul>

Above is a quick list and a simple way to grab the last ID of the result set, we are only getting 25 rows at a time right now so we dont need to be too complex.

2: The trigger.
We need a trigger to action the call for more results. I’m assuming that your 25 results will require the user to scroll to see them all, and with that in mind the trigger will be the final LI element in the list.
Before the closing UL tag, insert this:

<li id="more<?php echo $lastId; ?>" class="morebox">
	<span id="<?php echo $lastId; ?>" class="more"></span>
</li>

This list item will have the ID of the final result making it unique.

3: Ajax processing.
We need a page that will load our extra results. This is a simple PHP/MySql query based on the variables that we send it. Here is a simple example:

<?php
 
$lastId = $_POST['lastId']; 
 
$getMoreList = mysql_query("SELECT * FROM tableName WHERE id > '$listId' ORDER BY id DESC Limit 25");
 
while($listData = mysql_fetch_array($getMoreList)){
	echo "<li> Your Data goes Here! </li>";
	$lastId = $listData['id']; //again, just get keep the last ID of the set.
}
?>
<li id="more<?php echo $lastId; ?>" class="morebox">
	<span id="<?php echo $lastId; ?>" class="more"></span>
</li>

In this, we regenerate the trigger with a new ID.

4: jQuery to tie it all together.

There is only a few steps here so I wont break it down too much. This is what we are going to do:
1: Initiate the script when the document is ready (document.ready function)
2: We set the container variable to “window”, and begin the function by looking for a “scroll” action. jQuery makes this simple by using the .scroll() method.
3: Once we scroll, the ID of the trigger is set. If there is an ID then we can proceed.
4: We check the element’s position by using a custom function called belowFold(). This essentially checks to see if the trigger is NOT on the screen.
5: If it’s on the screen we continue by setting the trigger contents to show a loader.gif image. We then do a simple POST to the PHP document that will load our next set of results. The only data we need to post is the ID of the LAST list element in the first set.
6: If the post was successfull, we load the new LI elements into place and remove the previous used trigger.

Of cause if there is no ID, we set the trigger to be empty as there is no point loading nothing.

The extra belowFold() function.

$.belowFold = function(element,container) {
        if (container === undefined || container === window) {
            var pageFold = $(window).height() + $(window).scrollTop();
        } else {
            var pageFold = $(container).offset().top + $(container).height();
        }
        return pageFold <= $(element).offset().top;
    };

This is a simple funtion that just checks the height of the window against the position of the trigger.

Here is the complete jQuery function:

$(document).ready(function(){
 
	var container = window;
 
	$(container).scroll(function() { 
	var element = $(".morebox");  
	var ID = $('.more').attr("id");
		if(ID){		             
			if (!$.belowFold(element,container)) {
				$("#more"+ID).html('<img src="/images/loader.gif" />');
				$.post("/more.php", { lastmsg:  ID },
						   function(data){
							$("ul#Results").append(data);
							$("#more"+ID).remove();
						   });
				}
		}else{
			$(".morebox").html('');
		}
	});
 
$.belowFold = function(element,container) {
        if (container === undefined || container === window) {
            var pageFold = $(window).height() + $(window).scrollTop();
        } else {
            var pageFold = $(container).offset().top + $(container).height();
        }
        return pageFold <= $(element).offset().top;
    };
 
});

And thats it.

Lets take a look at some outstanding uses of JavaScript (and their other supporting languages).

Apple’s mobile me website is using a combination of canvas tag and thousands of lines of JS to acheive its outstanding interface effects.

Amazing. Simply amazing combination of JavaScript and CSS. You have to hand it to dragoninteractive, they really know how to turn heads with their experiments.

Seriously cool setup. Page scrolling, interactive everything and all with JavaScript.
Just navigating around this website is a great user experience. This to me breaks the ‘flat page’ feel that a website can have.

The cloud moving background that gives this website its dimension is using a JavaScript background positioning system. Scroll down to the footer and you will see the same thing with a nice city horizon. It give the website a great visual experince.

Not only is this website pretty, the page curl in the top right is a neat JavaScript effect.

Fuel’s website shows a great use of color transitions and movement. It’s simple design and clean navigation lets your eyes be filled with the smooth transitions, resulting is a very professional experience.

While the effects are not very “fancy”, they are elegant transitions and fades that all use JavaScript and CSS to deliver a very nice website that has class.

This portfolio website has simple actions, but with the help of JavaScript and CSS it is delivered with a solid app feel.

MonoFactor uses a nice scrolling system that shuffles both content and showcase images in two different areas.

And just for fun, to show the power of what can be done. Here is Wolfenstein 3D using javascript and the canvas tag.

So after looking at these fine examples of creative business cards. How important is a business card to you?

We can all benefit and learn from these examples. What this shows is that when you are developing a website it’s the idea that is important. When you craft your idea, be it a blog or a service, getting the function right is the most important step. Once you have the website working as you want it, refining the design becomes a task of updating the look the a more modern feel while accommodating for extra features.

It’s the golden rule of SEO, Content is king. And it when it comes to service websites content, being the functions, is king. Nail this and then refine your design.

So lets take a look at the design evolution of Twitter.

As with most projects, it all starts with a sketch and the idea is born.

Almost all early concepts are nice and basic to allow all the user functionality to be refined and mastered.

Initial designs take form using a color system and logo with main elements placed.

Another design revision sees the entry of the Twitter bird

Possibly the first design of what we all know Twitter to look like now.

And now we have the latest,  most “movable” front page of Twitter. It’s stylish. I’ts dynamic. And it shows what Twitter is all about.

While the Internal view of Twitter has also changed a bit, here is the major change in their layout structure and functionality

So without delay, here is some great Halloween inspiration from deviant art.

One of the best ways to learn is through example. So here is a small list of websites that you can keep an eye on and get some great free WordPress themes.

These are free themes and we encourage you to download them and learn form their structure and then create your own themes with a better understanding of how they come together.

http://www.woothemes.com
Woo Themes are one of the best theme creation companies around. All their designs are solid and the code behind their themes are clean and professional. While Woo Themes sell great themes they also offer some free themes.

http://newwpthemes.com
NewWPThemes.com is a leading and trustworthy free WordPress themes provider. All themes listed are 100% unique, designed and developed by their staff, 100% free for personal or commercial use and licensed under creative commons license. All of their themes are updated, supported and always compatible with latest WordPress versions.

http://www.skinpress.com
Skinpress.com offer high quality free wordpress themes that support widgets, adsense and banner advertising slots. Their templates also have twitter support.
They also offer blogger, zen cart, website templates and flash intro files.

http://freebiesdock.com
FreebiesDock.com is a collection of completely free design resources. All the products you’ll see there are created exclusively for FreebiesDock and you won’t see them anywhere else.

http://wpcrunchy.com
Wpcrunchy is a place where you can find premium quality wordpress themes. All themes come packed with handy features to get your website up and running with minimal effort.

http://www.organicthemes.com
Organic Themes offer a variety of beautifully designed premium WordPress themes for businesses and blogs. Although Organic Themes are mainly a paid theme website, they do offer some free wordpress themes and they are great quality.

http://www.freethemelayouts.com
FreeThemeLayouts.com provides premium WordPress themes absolutely FREE! They have great designers and expert WordPress coders who work together to create outstanding themes.

http://themes.rock-kitty.net
themes.rock-kitty.net is a website where you can upload and share your wordpress theme creations. All their themes are free to download and use.

http://wordpressthemesbase.com
Wordpressthemebase.com have a collection of wordpress themes ranging from simple clean designs to the more advanced. Most of their layouts have a similar blog style theme.

So what can you do? Crazy layouts? As much movement as you can fit in? Actually no. You need to work on your common elements in design and let the content speak to its audience. You need to apply attention to detail and raise the standard of your design skills.

I will run thought some common elements and how you can improve them.

1: Forms
Forms are one of the most common and important interaction with your audience you will have. This is a great place to start styling into your own custom manor. Everyone knows that text boxes and textareas are bland and buttons grey and ugly. You might already be styling your forms with some color and borders but why not add some custom backgrounds and make your forms come alive. The simplest way to do this is just applying a background to the element with CSS. Here are some examples.

*note, IE has a issue with text-indent so if you want to offset the button text try this method:
background-image: url(‘buttonBackground.png’);
line-height: 999px; /* Set the line height higher than your image height */overflow: hidden; /* Hide the text */

2: Backgrounds
This is an area where you can really lift the look of your website. By designing a large background you can easily create an atmosphere for your website and give some visual depth to your work. Be sure to keep the file size as low as possible and you will enter a whole new style of design. Take a look at how a website can be transformed with large detailed backgrounds.

3: Menus
When it comes to navigation you don’t want to over complicate it, make sure that it is still usable by the average user. What you can do to spice up your navigation is use background images and stylish dropdown menus where they are needed. Here are some examples of great navigation design that is both clear to understand and visually pleasing.

4: Images
A simple way to add life to your content is to add images. But don’t settle for images with a single border, why not add an overlay to make the image more in line with the overall design of the website. These effects are generally a PNG image that is positioned on top of the image using CSS. Take a look at these great examples.

6: Video
When embedding video into your website it is often preferable to use YouTube as the host. This is for many reasons but the most important is you don’t want to put the drain of streaming media onto your client and leave them with a huge bill at the end of the day.

YouTube’s default embed code is far from pretty so what you want to do is use their API to make your own player.
Using the YouTube Player API you can make yourself a chromeless player. From there you can style your own player and adding the functions that you want. These can all be controlled via javaScript and Actionscript if you wish to control the movie with flash. By using this method you would be able to create player controls to any style.

5: Footers
We all know that a footer is a great place to store quick links and contact info. But if you build on the theme of your website and make the footer a feature in itself you then keep the user from feeling like they have hit the end of the page. Instead you open them up to another sub section of the website where they can navigate to other content. Take a look at these fine examples of footer design.

If you apply these practices and attention to detail then you will create far better website design that don’t interfere with the content that is being delivered. Instead you will create a rich user experience for your audience.

http://www.colourlovers.com

Colour Lovers is a community of people who share colours, pallettes and patterns.
This is a great website to get yourself some fresh ideas about what colors to use in your designs.

http://dribbble.com

Dribbble is a community of designers who like to share what they are currently working on.
Right now its invite only, so cross your fingers this opens up!

http://flikode.com

Flikode is a code snippet bookmarking website where you can find bits of code in any language. It also has a help and discussion section so you can have some community support.

http://my.lovelycharts.com

My Lovely Charts is a great online app that lets you well…create charts. I find it useful to make site-maps and other layout diagrams.

http://www.colorcombos.com

Color Combos is a simple website where you can view and test how colors look together. Simple to use and with a huge library of color combinations this is a great addition to your web toolkit.

http://new.myfonts.com/WhatTheFont

Ever wonder what font is being used in an image? Or have you been supplied with a logo to recreate but no fonts? What The Font is your saviour. Just upload your image and it will try and detect what font is used.

http://www.favicon.cc

A simple way to create a favicon. Just upload your image and it will generate an ico file for you.
Or you can try your hand at using their editor.

http://www.stripegenerator.com

Stripe generator is a simple way to create tile background stripes of any style for your website. This is a real time saver! They also have a library of user generated stripes.

http://ajaxload.info

If you are ever needing a loading GIFfor you ajax application then look no further. Ajax Load has a good library of loaders in different shapes. You can also set the color that you need the loader to be in. Fast and handy!

http://www.bgpatterns.com

BG Patterns is exactly as the name suggests. It has a library of patters that can be used for background images.

http://browsershots.org

Browser Shots is a great tool to test your website in a lot of browser conditions. Simple to use and with great results, just select the browsers you want to test against and enter you domain name. The results usually take about 30 minutes to display.

http://sxc.hu

SXC is a community driven image stock exchange. Most of these images are free to use and are high resolution.

http://lipsum.com

When you are pitching to a client it’s handy to have dummy content. A good standard is to use lipsum text. At lipsum.com you can quickly generate as many paragraphs of text to suite your project.

http://validator.w3.org

If you want your website to be 100% web standard, then run it through the W3C validator. You can also find CSS and RSS validators on their website. It gives detailed responses to errors in your markup.

http://tools.pingdom.com

Pingdom offers a page load timer and breakdown of the files that are called from your website as it loads. At its simplest form, it gives some great insight into how your page loads and where you might have a bottleneck file that is holding things up.

http://dafont.com

DaFont is the number 1 place to find fonts. With a great categorisation system and the ability to type in your own text to see the result, this is the perfect font website for designers.

http://www.mockflow.com

Mock Flow is one of the easiest online wire-framing services around. When you need to draft a layout quickly and that is visually pleasing to the eye, then don’t go past this website. It will be a great asset to your toolkit.

You see its the imperfections found in fabrics, paints, wood and stone to name a few, that set off a design giving it a realistic atmosphere.

While it may be tempting to use a lot of elements to try and bring your website to life it can often end up overloaded, distracting and hard to use. Take a look at some of the websites in our design inspiration gallery and other css galleries around the Internet and you will see that most of the top design all use a variety of texture styles. The best you can see actually seem to lift the content off the page and create depth in their design.

So where do you use textures in your website design?
You want to keep it simple and stick to backgrounds, menu bars, footers and sidebars. If you want to use textures in your content area just be careful and make sure that your text is still 100% readable and not a strain to the eyes.

From the examples you can see below, the best way to use quality textures is to keep them simple and not distract your users from the content they are actually using your website for.

http://www.imagineplus.in

http://www.curiousromain.com

http://arandown.com

http://fortysevenmedia.com

http://www.przeznaczenie.eu

http://bestblogbox.com

http://www.motherearthbrewing.com

http://trentwalton.com

http://jameslaicreative.com

http://www.dnadarwin.org

http://jaredcampbell.com

http://www.healthyharvesthydro.com

You can find a good source of free textures at websites like http://www.sxc.hu and http://www.texturelovers.com

Daz 3D is a leader in the 3D software industry, providing affordable, yet powerful 3D software including Bryce – a 3D environment and animation package, Carrara – a complete 3D modelling, animation and rendering package, DAZ Studio – a FREE 3D digital art creation tool, Hexagon – a ploygonal modelling software and Mimic – a lip-synching application.

With DAZ 3D you can easily enter the 3D industry and build you skills! Plus they have a great community of support and sharing.

The use of an avatar or mascot on your website (or any product for that matter) can greatly increase customer loyalty just through the recognition value that they create. Not only that you can easily run themed competitions and create merchendise as extra revenu streams all based on that little charater that you hold dear to your business.

Not convinced? just have a look at reddit.com. Their little Reddit Alien  has taken a lot of the Internet world by storm over the years and they have quite a range of merchandise for this little guy. You can get Reddit shirts, usb drives, bobble heads, soap and not to mention the fans who go on and make soap, cookies and other random stuff!

A mascot can help build a personality to your business, so have a think about it next time your thinking of an addition to your business model.

Here are some website that we think have great little mascots that theme their websites.

At Very Inspirational we try to help our community out by running small interviews to give you some insight into how these great artists work.

We hope you enjoy this quick interview with Alber Lo, a fantastic UX web designer & visit his website.

Hi, my name is Albert Lo, founder and owner of albertlo design. I have been living the dream as a Freelance UX web designer /contractor for just over a year now and live in a leafy suburb in the UK. i like to collect urban vinyl toys in my spare time.

How did you get started in web design / development?

I originally started in Art and Design and excelled in this field when I was younger. I loved painting and sketching…Art class was my favourite subject. I progressed into Web Design as my area of expertise after completing a Multimedia Computing degree.  I knew from the course I didn’t really enjoy pure coding but I found I could combine my creativity with some coding by designing for the web.

How do you start your design process?

I don’t really set any rules for a process as it depends on the project. Generally, if i’ve seen something that has inspired me, I tend to sketch out any ideas on paper first. I sometimes roughly sketch out some wireframes and maybe even doodle until I’m happy with my design. It’s important to understand what the project is and by sketching, it allows me to puts things into perspective. Sometimes, depending on the work and project, I use a mind-mapping session for inspiration. Sometimes, I just jump into Photoshop and experiment with any assets I have been given, and this can spark an idea and develop further.

Where do you go for design inspiration?

Design inspiration comes from anything, A lot of inspiration has come from what I have seen while traveling. I like to look for inspiration outside the realm of the web such as architecture, shop interiors, graphic design and photography. I  also find inspiration from reading magazines. I think finding inspiration is very personal, everyone has their own way, and the beauty is there are no set rules to follow in how you find inspiration.

Recently, I purchased Little Snapper for Mac and I can archive images that I like or find inspiring, which can then be useful for future projects. This has become a really great tool and timesaver.

What is in your toolset? What cant you live without while you design/develop?

My physical toolset comprises of a Moleskine sketchbook, a pencil, biro and Sharpie. I need these to start doodling or sketching ideas out before I start designing digitally.
I don’t think I can live without my MacBook pro, I use it all the time and carry it with me as I prefer to use my own equipment, much better than someone giving you some outdated and old machine to work on.
The Adobe suite is a must these days as it is seen as a standard in the industry. My most used programs are Photoshop CS4 and Illustrator CS4.
Other things I can’t live without is music to work to and twitter to keep in the loop. This can be distracting for some people, but I guess it simulates my working environment and takes my mind off things if it’s all getting too intense.

How do you think your design style has changed over the years?

I think my design style has evolved over the years from influences I encounter. I still strongly believe colour evokes human emotion and I think this has intensified over the years.

I am continuously discovering new techniques and methods so my design style is bound to change in many ways.

What are your best methods for finding/attracting web design clients?

I find participating in social networking and networking of any kind can be really good methods of finding new clients. I have found that it is sometimes who you know, not what you know, that will land you a job, so be ready to hand out your business cards. You never know who you might meet and you never know where it could take you.

I have found word of mouth is the most powerful tool to attract new clients. You are more likely to get a response if you have worked with someone previously and they can recommend you for a job.

Since you first started in your career, how do you think has the web industry changed?

The web industry has changed at such a fast pace, it’s hard to pinpoint how it has changed. For me, the biggest change is the way people code their sites, moving away from table layouts to CSS. I think this has made a huge difference in how the web is now defined in terms of design nowadays. The boundaries of design are being pushed daily.

What do you feel are the most important skills for a designer to have/develop?

Empathy and people skills, master these and you are set to deal with anything, whether working agency side or client side as half the battle is convincing people. Obviously it is also important to have talent but I think it will only take you so far.

Knowing and developing composition and colour combinations is important. Grass root skills stay with you but you also need to develop further and remain on top of news and technology, as well as design trends.

What do you brand yourself as? Web Designer, Web Developer or other?

I brand myself as a Freelance UX web designer / contractor.

What tips would you offer to new designers?

My tip for new designers is to gain experience in the industry as soon as possible; paid or unpaid. It will enhance your portfolio and give it credibility. It can be difficult but keeping up the good work will eventually pay off as people will see you as being pro active.

The fail whale, as a design idea, has made it OK to occasionally fail in your website. No longer is a 404 a complete catastrophe. All you need to do is create yourself a nice, fun error page to let your members know its not the end of the world. Do it right and you might just end up with your own iconic 404 page when your website grows.

As a tribute to the fail whale, here is a collection of wacky, weird and unusual interpretations of the Fail Whale image.

Visit Origami Instructions for some tips and instructions on origami.

And possibly the best I have ever seen!

This post is about taking the time to look at the beauty of the little creatures that live amoungst us.

Using Custom Fonts
Thanks to CSS we can safely use custom fonts on websites now. Just keep in mind that not all browsers support the use of otf,ttf or eot files. But don’t let this stop you, just make sure that you have a backup default font that still fits with your design. If you cover all bases then you wont have users suffer a horrible website if they are stuck on old browsers.
These are simple to create and implement using a conversion tool like ttf2eot and then use the @font-face to embed the file reference into your style sheet.

The user doesn’t need the font on their system, so don’t forget to upload it to your server.

Define a style guide
This may sound silly and like a no brainer, but how many of you actually design a style guide for the websites you are building. The style guide is the key to consistency and will end up playing the key role in linking online to offline works.

The first step is to ask your client if they already have a style guide. If they do, great! Use it! If they don’t, then design one for them.

You should always define a few different levels of header (h1,h2,h3) styles, paragraph, lists and links. Get all these together with your color guide and plan it all out. The end result is going to be a much cleaner and visually appealing website that will just flow from content to graphic elements with consistent style.

Don’t forget to include the custom fonts you want to use in the style guide. This should be handed to the client so they can apply it to their other works.

For more information, Jina Bolton wrote a great article on writing an interface style guide.

Font Sizing
Getting your font size right is crucial to getting your message delivered. You want to make sure that your slogan/catch frase/branding statement/whatever is what the users eyes are drawn to. Then the headings then the text. It’s all simple and most of us do it anyway, but when this is all thought out and planned it just works a lot better. Get the font sizes right and you wont have confusion on where you should be looking.

So, set out your hierarchy of importance and choose the right font sizes for your message.

Readability
This is one area that gets overlooked sometimes. I’m not saying that you must have a white background and black text, but for readability the lighter background and darker text is a winner in almost all cases. If you do go for a dark background, take a look around at some examples and look at the color combination that are being used. There are some good ways to make light text standout on a dark background without hurting your eyes.

Keep your line spacing neat and don’t cramp as much as you can into a space. Open layouts are much easier to read. Don’t forget that people often skim pages rather then sit and read, so cater to this with quick lead ins to read more. This allows you to keep your pages neat and tidy, making for a clean layout.

Examples
Here is just a few examples of websites that I feel have great typography and cover all areas I have mentioned above.