20 Breathtaking Examples of Infrared Photography

Posted on November 19, 2010 by Senior Web User Interface Experience Designer

Infrared light is invisible to the human eye, but with the use of special filters this light can be captured by a camera. This type of photography can produce stunning results and images that posses a dream-like appearance. The part of the spectrum used in infrared photography is referred to as near-infrared as opposed to far-infrared, which is used in thermal imaging. To give you an idea of the type of effects that can be achieved, and to inspire you, I’ve gathered 20 Breathtaking Examples of Infrared Photography. Enjoy!

Thaib Chaidar

Posted in Inspiration | 8 Comments

Increase Your Website’s Results with Less Work

Posted on October 26, 2010 by Senior Web User Interface Experience Designer

Want to increase your website’s results with less work? A simple way to do this and get higher conversion rates, more subscribers, more members, and more sales, is by using the 80-20 rule.

What’s the 80-20 rule? Also known as the Pareto principle, the 80-20 rule states that 80% of your results comes from 20% of your efforts. Specifically to your website, 80% of your desired results comes from 20% of your website’s elements. The rest of the 80% of elements give you only 20% of your desired results, yet they take up the majority of your site.

80-20-rule

By identifying the 20% of essential elements and then trimming the rest, you’ll devote the maximum amount of space to the elements that matter. With 100% of your visitor’s attention pointed towards the elements that deliver results, they’ll be more likely to read/subscribe/join/buy/whatever. Thus, you can increase your website’s effectiveness with the 80-20 rule.

So how do you get started increasing your website’s results with the 80-20 rule? Here are 3 simple steps:

3 Steps to Using the 80-20 Rule for Your Website

1. Decide on Your Website’s Desired Results

Before you get to using the 80-20 rule to make your website more effective, first decide what it is your website is trying to accomplish. What are your desired results? Be as specific as possible. It’ll only help you to more easily increase your website’s effectiveness once you start using the 80-20 rule.

Are you trying to get more users to sign up and start using your service?
Do you want readers to share or perform some other call-to-action (such as donating, filling out a form, or going out into the world to do something)?
Are you looking for qualified leads to sign up to your mailing list?
Do you want more sales of your product or service?
Or something else entirely?

Once you’ve decided on your website’s specific desired results, it’s time to roll up your sleeves and dig into the next step: actually using the 80-20 rule.

2. Identify the 20% That’ll Achieve 80% of Results

Now that you know your website’s specific desired results, identify the 20% of your website’s elements that will deliver 80% of the desired results.

Be it:

Copy and/or blog content
Opt in email form
Call-to-action buttons
Social sharing links or buttons
Donate and/or buy button
Account creation or signup form
And whatever else

Remember: these are the handful of elements that actually contribute to your desired results.

So, a signup form and copy explaining to the visitor why they should sign up would fall into the 20%. Social media widgets, social sharing links, and an email opt in form wouldn’t. On the flip side, if your desired result was to spread whatever your website offered, then the social sharing links and social media widgets would take priority and fall into the 20%.

The important thing is to not treat every website element with equal priority. That’s sometimes hard to do – it’s your website, you can’t see it objectively, and you think everything on it is important. But not every website element is created equal.

Be as objective as you can be, take a hard look at your website with your desired results in hand, and identify those 20% of elements that’ll give you 80% of those results.

3. Trim the Other 80% From Your Website

Okay, by now you’ve identified the 20% of essential website elements. Now it’s time to grab those digital pruning scissors and start trimming the rest. Get rid of the other 80% of elements from your website.

This is the 80% of website elements that only give you 20% of your desired results:

Extra menu items and pages
Sidebar and footer elements
Widgets
Unnecessary social sharing buttons (that don’t give you much traffic)
And whatnot

Like with step #2, be honest with yourself here. Not all website elements are created equal, so try to be as objective as possible when identifying and then removing these 80% of elements from your website. The more ruthless you are, the better. This is for the good of your website – the more ineffective elements you get rid of, the more space and focus is left for the 20% of those effective elements that’ll get you much more desired results.

But wait: why get rid of these 80% of elements? After all, they are still giving you 20% of results, which is better than nothing. While that’s technically true, the title of this article is increase your website’s effectiveness. Meaning, while these 80% of elements aren’t worthless, they aren’t worth much either.

And here’s why the 80-20 rule increases your website’s effectiveness: by getting rid of the ineffective elements, you give more space and visitor’s attention to the ones that do.

Use 80-20 Rule to Increase Your Website’s Results

Increase your website’s results with less work by using the 80-20 rule. Decide what specific results you’re trying to achieve with your website, identify the 20% of essential elements that’ll give you 80% of those results, and trim the rest of the elements from your design.

By using the 80-20 rule, you’ll be well on your way to increasing your conversion rate, getting more subscribers/members/sales, or whatever else your desired results are.

To recap, here are the 3 simple steps to using the 80-20 rule to increase your website’s results:

Decide on your website’s desired results
Identify the 20% that’ll achieve 80% of results
Trim the other 80% from your website

Over to you: has the 80-20 rule helped your website? How else have you been able to increase your website’s results with less work?

Share|

Posted in Website Content, website design | Tagged website usability | 4 Comments

How to Identify a Font

Posted on October 19, 2010 by Senior Web User Interface Experience Designer

What is the font used for the title of Friends? How about the typeface of that old copy of Moby Dick you picked up at that garage sale? The back of your Starbucks pastry bag? And please tell me, how can you find the font on a worn out birthday card that your client wants you to replicate?

Graphic designers are consistently asked to use a client’s nameless favorite font. Thanks to the typeface renaissance spurred by increasingly fantastic font tools and talented foundries, the font identification game is getting harder by the minute. Unless you happen to be a first-class typeface aficionado, you probably aren’t going to be able to call the latestGothicsans serif, such as Avenir, Geogrotesque, or any of the approximately 100,000 other fonts available today, by name.

Thankfully, the font culture boom has also spurred some excellent solutions to solve the identification problem it has created. You can track down your ITC Cinderella using the following things:

Internet identification tools,
Exhaustive print catalogs,
Or the crowd-sourced expertise of the Internet’s font lovers.

Identification Tools

These web-based identification trees should be your first recourse in finding the name of a font. By posting an image of the font, or by answering questions about your mystery font’s features, you help the font identifier winnow the sea of typefaces until only your desired font remains.

The most popular image-based font finder is MyFonts’ playfully named What The Font! The identification engine does a bang-up job of finding a typeface, and if it fails, the engine refers you to the typeface forums so the local typophiles can take a crack at identification, as well.

What The Font!

When you don’t have an image, your best bet is a game of 20 Questions with Identifont. Try it now! Open your nearest book, and find its font. (No peeking at the colophon!) Chances are, you can do it within a few minutes.

Identifont

Books

If you have neither a font sample nor a photographic memory, your best bet may be to flip through a font catalog to pick the best match. Fortunately, there are books made especially for the task of font finding. Try the original Yellow Pages for fonts, Rookledge’s International Type Finder. The book’s secret power is the special sidebars highlighting a font’s most distinguishing features. This is great news if all you can remember is the font’s breathtaking ascender.

International Type Finder

Real People

Science sinks millions of dollars into face recognition algorithms, but they’ll never replicate the powerhouse combo of an eye and a brain. Same goes for font recognition—the only thing that can beat a font nerd is a giant horde of nerds. Once again, the Internet provides!

Most font sites have helpful forums. Two that merit special mention are the font lovers at Typophile.com and Flickr’s font identification forum. If they can’t find your font, it might not exist.

type id forum

The three-pronged arsenal of Internet tools, typeface catalogs, and crowd-sourced font knowledge should be able to meet your font-finding needs. The elementary school optimists were right—you can solve any problem with books, technology, and the help of some kindly nerds.

Share|

Posted in Design | Tagged website content | 5 Comments

Increase Your Website’s Effectiveness with Confident Copy

Posted on October 13, 2010 by Senior Web User Interface Experience Designer

Want to increase your website’s effectiveness? To have a higher conversion rate: more of your website’s visitors become subscribers, customers, members? You can increase the likelihood of that happening by having your message be more clear and confident. In other words: increase your website’s effectiveness with confident copy.

It might seem like forehead-slapping common sense, but a lot of web designers, freelancers, and entrepreneurs get caught up in design tweaks, form designs, and other details that don’t matter nearly as much as simply being more confident with their message. By simply having more confident copy, you can increase the likelihood of that next visitor converting into a new subscriber, customer, or member.

And you do want more subscribers/customers/members which will translate to more money, don’t you?

3 Reasons Why You Need Confident Copy

1. More Visitors Will Check You Out

If you’re confident in what you’re offering on your blog or website, chances are visitors will be confident in checking it out.

2. Be More Visible Amidst the Noise

You increase your chances to cut through the overcrowded internet space – there’s so many choices that people tend to go with the one that seems most confident and definitive.

3. Increase Chances of Making More Money

Unshaken confidence in your message will make it much much more likely that your visitor will convert: become a subscriber, a customer, a member. And that means potentially more money for you.

People Want Confidence, So Give It to Them

People want their content they’re consuming to be confident. Clear value, bold message.

People want copy they’re reading to be confident, so they’re assured that they’re at the right place. That they’re:

About to subscribe to the right blog
About to buy the right thing
About to sign up for the right service

Just like how people want their bands to be confident. There’s a reason that the biggest and boldest artists are often the soundtrack to more people’s lives than other popular artists that are simply passing trends for most.

So be like a big bold band. When you write, be confident. – confident in your content, your value, your offer.

Be Bold With Your Value

Don’t hold back your self-belief in your offering. Be bold with your value. No wishy-washiness. No vague opinions. No beating around the bush. Forget about using “maybe”s and “possibly”s – replace your vocabulary with “most definitely” and “completely” and the like. What are you trying to say? What’s the message, the point, the value to the reader? Just say it. And go to the edge with it.

Don’t think – know.
Don’t ask them to consider – ask them to do.

Write like you mean it.

It’s About Them, Not You

Never lose focus of who you’re writing for: the visitor, which is a prospective reader, subscriber, customer, member. Readers want confidence. But they also don’t care about you. They care about themselves and what you can offer them. Get it? They don’t want vague, safe and nothing-new articles or books – they want bold, clear value. Confident writing. But they want it to benefit them. They want your awesomeness to help them, not to read about how awesome you think you are.

Self-Belief, Not Arrogance

Have self-belief. Don’t have arrogance.

There’s a huge difference between arrogance and self-belief:

Self-belief is thinking you’re the greatest in the world, giving you confidence to go for the big win.
Arrogance is making sure people know you’re the greatest, always putting it in front of their faces.

You shouldn’t be arrogant, but you should believe that you’re the best in what you do.

Don’t Let Your Ego Use You

When you write, you need to be confident, but you also need to get your ego out of the way. Use your ego – don’t let your ego use you. Let your ego fuel your self-belief. Don’t let it fuel arrogance.

Use self-belief to make your writing more confident. With clear value and a bold message. Don’t let arrogance make the writing about yourself and how confident you think you are. Be confident. But write confidently for the people. The readers will be happy for such clear value and a bold message. You’ll be happy for making such awesome stuff.

Share|

Posted in Website Content | Tagged website usability | 11 Comments

Simple Flow: Minimalism in Web Design

Posted on October 6, 2010 by Senior Web User Interface Experience Designer

There are so many techniques when it comes to web design, it’s hard to get a full grasp on all of them. Minimalism is one of the few which stand out from the crowd in a seemingly ubiquitous flow. The trend follows the concept of keeping things simple and easy to work with.

Removing clutter from pages helps users focus their attention on the things that really matter. Page content, images, contact information, and the presentation hierarchy that removes gradients and web 2.0 distractions. Check out a few of the ideas below in regards to minimalistic designs and see how you can incorporate these into your own projects.

How Does Minimalism Work?

The idea of minimalism in designs is not a new one. In fact, it’s been present in the art community for centuries. With the move into digital design we find things to be a bit different as the objects we’re designing are constantly changing.

Minimalism works by playing on your visitors keen attention, or rather lack thereof. Most visitors who visit your blog or website will not spend more than a few seconds on the page, maybe a few minutes if you’re lucky. This isn’t because they truly don’t care or hold apathetic viewpoints towards your content. Rather in our world of fast-paced action users know how easy it is to jump from one website to the next in almost an instant.

Playing on these pieces to your users attention span by placing content is easy to read layouts is the basis behind which minimalistic designs are built. You will frequently see much more typography and white space with fewer images and buttons as distractions.

Although there isn’t any guidebook for running minimalistic designs there are plenty of guidelines to follow. Additional white space is one such idea, along with the removal of unnecessary page elements.

Less is More – Adding Space for Readability

Designs where “less is more” often don’t turn out too good. Most commonly you’ll see designs like this running blank white pages with black text and a logo – not exactly the most exciting website around.

When grasping the concept of minimalism you have to understand how white space ties into your content. All that additional padding and space where there isn’t anything to look at – that’s called white space. It gives the reader’s eyes a break from so much content and helps them skim through text a lot easier.

A good way to envision this is to consider a common textbook, maybe one from your favorite History course in high school. Generally these will contain large blocks of text with images and diagrams placed every so often. These are good examples of layouts with almost no white space (and they’re pretty hard to read, go figure).

One of my favorite blogs is written by Fred Wilson at http://www.avc.com/. His design is one such example of utilizing white space to enhance the appearance of text on a page. Although I wouldn’t label his blog theme as entirely minimalistic it does hold attributes of proper padding and white space, all key properties of minimalistic designs.

Elements of Simplistic Typography

Digital text is truly the most important aspect of any website. Unless you’re running a video or photo-viewing application the reason you have visitors to your page is to read content, so that content had better be presentable.

From a minimalists view of things content should be the main focus. This means all of these flashy newsletter signup boxes and live Twitter feeds are just distractions from what visitors really want. These elements aren’t totally bad or should be thrown out the window. They just don’t hold a place in true designs based on the concepts minimalism.

The two main elements when it comes to typography are headers and paragraph text. They both require plenty of white spacing as mentioned above, but they also need to stand out to your readers. Adding margins to your headers will visually separate them from the rest of your text. Contextually you may consider adding different properties to your headers such as italics, underlines, resizing or recoloring, too.

Paragraphs will generally stand out on their own as large blocks of text. You can make them easier to read by increasing font size and adding more space between lines (known as line-height). Keep your font colors much darker than your background but not so dark they contain deep contrast and hurt your eyes when skimming. Mess around with color choices to find the perfect in-between before moving on.

Keep your Layouts Unique

The truly exciting principle which keeps minimalism alive and thriving is how unique layouts can be. When all you (as the designer) have to worry about is context you are free to move things around at will. No longer are you stuck to a rut of 2 or 3 column layouts. You can break out of the mundane and really show off some creativity!

This doesn’t imply you can just throw elements together and come out with a beautiful design; far from it. We can consider as an example the portfolio of Berit Somme, an illustrator based out of Norway. His design boasts a powerful header and footer area with central content containing his digital works on display. All of the basic webpage elements are still there in one form or another, but it’s how they are applied in a creative way that truly makes the design.

When looking back on these styles there are only a few things to consider. Ensuring your goals have been met is a big one. Page content should also be easy to read and easy to skim through. There are plenty of showcases for minimalism to be found all around the web. These can be very helpful when looking for inspiration to get started.

It’s a truly diverse world out there as the field of web design advances into the future. Consider the ideals of a minimalistic viewpoint when starting your next web design, even if you don’t plan to go all-out. Many of the concepts held within minimalism can be applied to all website projects to relieve clutter and clarify the purpose of your design.

Share|

Posted in website design | Tagged website design | 2 Comments

Giant Collection of Add-To-Cart Buttons

Posted on September 28, 2010 by Senior Web User Interface Experience Designer

Back in 2007, Get Elastic posted a handy collection of add-to-cart buttons along with some analysis of the label text and use of icons. I thought it would be useful to revisit this topic and so I gathered together over 200 add-to-cart buttons, including many from the top online retailers.

Add-to-cart buttons

As you can see from the collection above, add-to-cart buttons come in all sizes and colors, with a selection of choices for button text. Let’s see what trends emerge from all this variety.

Button Color

As far as color is concerned, add-to-cart buttons mainly come in red, blue, gray/black, green, orange, pink, or yellow.

Gray/black and red are the most popular color choices at about 20% of buttons, followed by green and blue at just over 15%. Regardless of the button color, white is the overwhelming choice for button text.

Add-to-cart button colors

Button Shape

Buttons were all rectangular in shape, but when it comes to the finer details, rounded corners beat out square corners almost 2:1 in terms of popularity.

Add-to-cart button corner style

Button Text

Looking at the breakdown of button text, ‘add-to-cart’ is the runaway favorite with 56% of buttons opting for this label. It’s worth noting that this is a largely US-centric collection, and that ‘add-to-basket’ is more common in the UK than in the US.

Add-to-cart button text

When it comes to writing button text, ALL CAPS is the favorite with 53% of buttons using this style of formatting.

Add-to-cart button text case

Button Icons

The use of icons is almost a 50/50 split, although buttons without an icon are slightly more popular than those that use an icon of some sort.

Icon use in add-to-cart buttons

For those buttons that do include an icon, a shopping cart is most popular (40%), followed by some type of arrow (28%).

Icon style in add-to-cart buttons

Share|

Posted in Ecommerce | Tagged ecommerce, website usability | 4 Comments

Neon Text Effect With jQuery & CSS

Posted on September 14, 2010 by Senior Web User Interface Experience Designer

Tutorialzine is the home to some of the best web development tutorials on the net. Our focus has mainly been on the coding side of web development, but often creating a good design is equally important.

Step 1 – Design

Today we are creating a neon glow text effect with CSS and jQuery. The first step to achieving this effect, is to create a background image, which contains two slightly different versions of the text. jQuery fades between those two versions creating a smooth transition effect.
To create the colorful background image, you first need to open a new Photoshop document 650px wide and 300px high, with a background color of #141414. Use your favorite typeface to write your heading. I used Century Gothic with a size of 60px.
After this Ctrl-click the text layer’s icon in the layers panel to select it.

Ctrl+Click on the Text Layer

Use the Rectangular Marquee Tool while holding Shift+Alt to limit the selection to a single word of the text.

Shift + Alt to Limit the Selection

While everything is selected, create a new layer, name it gradients and make it active by clicking it.

Create a new Layer

Choose the Gradient tool from the toolbox, and color the words one by one using the technique discussed above to switch the selection between the individual words. These selections limit the effect of the gradient tool and with the “gradients” layer being the currently active one, all changes made by the tool are saved there.

Gradients

After you finish the heading, duplicate it below the original and apply a different set of gradients. Align the two versions of the colorful heading one above the other, so that it is easy to switch between them by simply providing a different value for the position of the background image in the CSS part.

The Finished Background Image

You can find the PSD file that I created for this tutorial in the download archive.

Step 2 – XHTML

The XHTML markup is really simple, you just need a container (the #neonText H1) which holds the two versions of the background.
demo.html

`1`	`<h1` `id="neonText">Neon Text Effect With jQuery & CSS.`

`2`	`<span` `class="textVersion"` `id="layer1"></span>`

`3`	`<span` `class="textVersion"` `id="layer2"></span>`

4 </h1>

Layer1 is shown above layer2, and lowering its opacity will create a smooth neon glow effect as the background image of the span below it fades into view.
For SEO reasons, we are also providing the content of the image in plain text. It is neatly hidden from view with a negative text-indent.

Step 3 – CSS

The styles, used by the effect are also pretty straightforward. The two spans share the same background image we did in step one, but by specifying a different background position, we show only the top or the bottom part of the image.
styles.css

`01`	`/* The two text layers */`

`02`	`#neonText span{`

`03`	`width:700px;`

`04`	`height:150px;`

`05`	`position:absolute;`

06 left:0;

07 top:0;

08

`09`	`background:url('img/text.jpg')` `no-repeat` `left` `top;`

10 }

11

`12`	`span#layer1{`

`13`	`z-index:100;`

14 }

15

`16`	`span#layer2{`

`17`	`background-position:left` `bottom;`

`18`	`z-index:99;`

19 }

20

`21`	`/* The h1 tag that holds the layers */`

`22`	`#neonText{`

`23`	`height:150px;`

`24`	`margin:180px` `auto` `0;`

`25`	`position:relative;`

`26`	`width:650px;`

`27`	`text-indent:-9999px;`

28 }

The #neonText container is positioned relatively, so that the absolutely positioned spans inside it are shown exactly one on top of the other. Also notice the negative text-indent, which we are using to hide the contents of the container.

Step 4 – jQuery

The last step involves setting up the transitioning animation. As we are using the jQuery library (which we include in the page with a script tag), a couple of useful methods are made available – fadeIn and fadeOut, which we are using the code below.
script.js

`01`	`$(document).ready(function(){`

02

`03`	`setInterval(function(){`

04

`05`	`// Selecting only the visible layers:`

`06`	`var` `versions = $('.textVersion:visible');`

07

`08`	`if(versions.length<2){`

`09`	`// If only one layer is visible, show the other`

`10`	`$('.textVersion').fadeIn(800);`

11 }

12 else{

`13`	`// Hide the upper layer`

`14`	`versions.eq(0).fadeOut(800);`

15 }

`16`	`},1000);`

17

18 });

The function inside of the setInterval statement is executed once every second and shows or hides the first span layer. With this our slick neon glow effect is complete!
Download & Demo
by:http://tutorialzine.com

Share|

Posted in Programming | Tagged Programming | 22 Comments

5 Useful jQuery Snippets for your Website

Posted on September 6, 2010 by Senior Web User Interface Experience Designer

jQuery is a popular JavaScript library which is used by many developers and applications. While using jQuery you need to write less code, writing functions is less complex and there are a lot of plugins you can use for free in your web application. Even if you code everything by yourself, you need only a few rows of code to create nice and powerful features for your website

A graphical despiction of a very simple html d...

Image via Wikipedia

Populate select menus with jQuery and Ajax

One of the most powerful jQuery function is the Ajax Suite. This example shows how-to populate a second select menu based on the option from the first select menu.

Just in case we have this select menu with the main categories:

`1`	`<form><label` `for="category">Choose: </label>`

`2`	`<select` `id="category"` `name="category">`

`3`	`<option` `value="fruit">Fruit</option>`

`4`	`<option` `value="grain">Grains</option>`

`5`	`<option` `value="vegetables">Vegetables</option>`

`6`	`</select>`

7 </form>

If someone has changed the value for this select menu, we want to show the equivalent menu inside the span element with the ID “subcat”. To do this we use this jQuery snippet that makes an Ajax request to a PHP file called “getSubCat.php”. After the select menu is changed a loading image will show up (in case of slow Internet connections), the PHP script is called and the sub-select menu becomes visible.

`01`	`$(document).ready(function() {`

`02`	`$('#category').change(function() {`

`03`	`var` `category = $(this).val();`

`04`	`$.ajax({`

`05`	`type:` `'GET',`

`06`	`url:` `'getSubCat.php',`

`07`	`data:` `'cat='` `+ category,`

`08`	`dataType:` `'html',`

`09`	`beforeSend:` `function() {`

`10`	`$('#subcat').html('<img alt="loading..." src="loader.gif">');`

11 },

`12`	`success:` `function(response) {`

`13`	`$('#subcat').html(response);`

14 }

15 });

16 });

17 });

The PHP code we are using for the file called getSubCat.php:

`01`	`array('Apples',` `'Pears',` `'Cherries',` `'Oranges',` `'Kiwis'),`

`02`	`'grain'` `=>` `array('Wheat',` `'Corn'),`

`03`	`'vegetables'` `=>` `array('Tomatoes',` `'Beans',` `'Peas',` `'Peperoni')`

04 );

`05`	`// use a database instead, this array is only some simple demo data`

`06`	`if` `(!empty($_GET['cat'])) {`

`07`	`if` `(array_key_exists($_GET['cat'],` `$data)) {`

`08`	`echo` `'`

`09`	`<select id="subselect"` `name="'.$_GET['cat'].'"> <option value="'.$key.'">'.$val.'</option>`

10

`11`	`</select>`

12

13 ';

`14`	`}` `else` `{`

`15`	`echo` `'Array-key doesn\'t exist';`

16 }

`17`	`}` `else` `{`

`18`	`echo` `'Invalid request';`

19 }

20 ?>

This is a simple example on how you can use the Ajax function, the function has much more features which makes it a very flexible function.

Disable/enable the form submit button with jQuery

On pages with registration or order forms you like to treat the visitor to accept some terms of service before he/she can continue the form. A very nice function to do this is, to disable the submit button until the visitor has clicked some check box (like: Click here to accept the TOS). The following snippet will enable/disable the submit button after the check box is checked or not.

`1`	`$('#accept').click(function() {`

`2`	`if` `($('#buybtn').is(':disabled')) {`

`3`	`$('#buybtn').removeAttr('disabled');`

`4`	`}` `else` `{`

`5`	`$('#buybtn').attr('disabled',` `'disabled');`

6 }

7 });

Together with this function, we use the following HTML for the submit button:

`1`	`<input` `id="accept"` `name="accept"` `value="y"` `type="checkbox"> I accept the conditions!`

`2`	`<input` `disabled="disabled"` `id="buybtn"` `name="Submit"` `value="Send"` `type="submit">`

Simple photo gallery with thumbnails

If you’re looking for a light-weight photo gallery function, this snippet is for you. The function works very simple: If the visitor has clicked a thumbnail the value from “href” attribute is passed to the “src” attribute from the bigger image. Thats all, check the jQuery code and of course the HTML example.

`1`	`$("#thumbs a").click(` `function() {`

`2`	`var` `changeSrc = $(this).attr("href");`

`3`	`$("#detail").attr("src", changeSrc);`

`4`	`return` `false;`

5 });

`1`	`<img` `alt="big view"` `id="detail"` `src="img/1.jpg">`

2

`3`	`<a` `href="http://www.blogger.com/img/1.jpg"><img` `alt="thumb 1"` `src="thumbs/1.jpg"></a>`

`4`	`<a` `href="http://www.blogger.com/img/2.jpg"><img` `alt="thumb 2"` `src="thumbs/2.jpg"></a>`

`5`	`<a` `href="http://www.blogger.com/img/3.jpg"><img` `alt="thumb 3"` `src="thumbs/3.jpg"></a>`

Show and hide HTML elements based on Radio selection

jQuery has great functions which show or hide HTML elements. This example is about to show some additional list based on a selection which is made by checking a radio button. The script checks first if “the” button is checked and shows the additional container, otherwise it hides the “this” container.

`1`	`$('#payments input[type=radio]').click(function() {`

`2`	`if` `($('input[name=payment]:checked').val() ==` `"creditcard") {`

`3`	`$("#cards").show();`

`4`	`}` `else` `{`

`5`	`$("#cards").hide();`

6 }

7 });

The HTML snippet has a radio group and a DIV container which becomes visible when the radio with the value “creditcard” is checked.

`1`	`<ul` `id="payments"><li> <input` `id="creditcard"` `name="payment"` `value="creditcard"` `type="radio"> Creditcard <br>`

`2`	`<div` `id="cards"><label` `for="cctype">Choose one: </label><br>`

`3`	`<select` `id="cctype"` `name="cctype"> <option>...</option> <option` `value="master">MasterCard</option> <option` `value="visa">Visa</option> <option` `value="amex">American Express</option> </select></div></li>`

`4`	`<li> <input` `name="payment"` `value="paypal"` `type="radio"> PayPal</li>`

`5`	`<li> <input` `name="payment"` `value="wire"` `type="radio"> Wire/transfer</li>`

6 </ul>

Count clicks for Google Analytics using jQuery

The last snippet is an easy way to count clicks from external links within a DIV container. Without the requirement to add additional Google Analytics code to your link elements, it’s possible to count those link clicks in Google Analytics.

`1`	`$('#mylinks a[href^="http"]').click(function(){`

`2`	`pageTracker._trackPageview('/outgoing/'+ $(this).attr('href'));`

3 });

This tiny function will count the links from a DIV container with the ID “mylinks” like:

`1`	`<a` `href="http://simpay.org/">PayPal Payments</a> \| <a` `href="http://www.finalwebsites.com/web_hosting_promotion.php">Wordpress Hosting</a>`

Share|

Posted in Programming | Tagged Programming | 7 Comments

5 tips to show users where they are on your website

Posted on September 2, 2010 by Senior Web User Interface Experience Designer

Your homepage is not always the first page people see. Lots of visitors find your site via Google and immediately end up on a detail page. Or maybe they’ve clicked a link on another website. A link that doesn’t necessarily mention your website’s name.

Letting people know which site they’re on and where they are on that site is pretty basic usability stuff, but that doesn’t mean it isn’t important.

1. Logo and company name in top left corner

Put your logo in the top left corner. If your logo doesn’t contain your company name, put your name directly underneath the logo. Do this on every page. That way, people immediately know whose website they’re on.

Don’t think putting your logo on the right side will make you special. Sure, you’ll be different, but not in a way people appreciate. You’re just making it harder for them to know which website they’re on.

Ogilvy puts its logo in the bottom right corner. Because that’s not where people expect it to be, it will take them longer to see it.

Not mentioning your name or logo at all is of course not the greatest idea either.

Without a logo or name in the top left corner, it’s not easy for visitors to know they’re on the website of the Museum for Industrial Archeology and Textile (MIAT) in Ghent.

2. Breadcrumb

A great way to let users know where they are on your website, is via a breadcrumb. A breadcrumb shows you where you are on a website by visualizing the site’s hierarchy, from the homepage to the current page.

3. Clearly visible page title

A page title has to stand out. Use a larger font size and perhaps even a different colour than your regular text colour.

Put the page title always in the same, clearly visible place: at the top of the content part of the page, left-aligned.

Use the same term as the one you use in your menu, or at least start the page title in the same way. Inconsistencies can be confusing.

The Belgian province Flemish Brabant puts the page title or header where it should be: at the top left of the page’s content part, in a larger font size and different colour than the regular text.

4. Navigation: active item in a different colour

Navigation plays a very important part in telling people where they are on a website.

An easy way to show users what main and sub-category of the navigation they’re in is putting the active category in a different (background) colour.

On the site of Amnesty International it’s very clear which main and sub-category of the navigation the user is in.

5. Title tag

Another small but not unimportant element that can help users determine where they are on a website is the title tag.

Share|

Posted in website design | Tagged website usability | 4 Comments

35 High-Quality and Free Concrete Textures

Posted on August 29, 2010 by Senior Web User Interface Experience Designer

Concrete textures are great for adding some character to your web and graphic design projects. In this post we’ll feature 35 concrete textures from various sources. If you see something you like, click on the image and you will be led to the source. Be sure to read the license or terms of use, especially if you are planning to use it for a commercial project.