Web International Awards

payday loan

23

MAR 2010 15

Impressive web forms. From coding to validation!

Screenshot of WebRaptor's request quote form

Preview of the tutorial

Quite some time ago I have published the first part of this series. Today I'll tackle coding a good webform, styling it, client-side and server-side validating. The first part of the tutorial was extremely popular, and that's why I chose to merge parts two and three, which anyway are closely related.

PS: You'll need some patience digesting this tutorial as it turned out to be really complex.

The code I am about to present here is the one that has been used in our contact and request quote forms from our newly released web development website, just as the jQuery slider tutorial published a few weeks ago was used in our portfolio section.

Getting dirty with xhtml

I am not going to code all different label positioning options presented in the first article (inline, left-aligned, right-aligned, top-aligned). The one I chose for our website and will be showcased over here is the one with top-aligned labels.

I chose top-aligned labels because the page layout where the form is implemented doesn't allow a lot of horizontal space. The bonus was that potential clients could process it fast. Being a form with just a couple of fields, the vertical space required by the form is decent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form action="contact-us-process.php" method="post" accept-charset="utf-8" id="contactform">
	<fieldset>
		<label for="name">Full name : </label>
		<div class="field">
			<input type="text" name="name" value="<?=$name?/>" id="name" class="v-required" />
		</div>
		<label for="email">Email : </label>
		<div class="field">
			<input type="test" name="email" value="<?=$email?/>" id="email" class="v-required v-email" />
		</div>
		<label for="phone">Phone : </label>
		<div class="field">
			<input type="text" name="phone" value="<?=$phone?/>" id="phone" class="v-required v-digits" />
		</div>
		<label for="message">Message : </label>
		<div class="field">
			<textarea name="message" class="v-required">< ?=$message?></textarea>
		</div>
		<label for="security">One plus two: </label>
		<div class="field last">
			<input type="text" name="security" value="" id="security" class="v-required v-security"/>
			<small>Sorry, we asked as we do not like spam</small>
		</div>
		<span class="clear">&nsbp;</span>
		<input type="submit" name="submit" value="Send the message" id="submit" class="button all-rounded" />
	</fieldset>
</form>

As you can see, all elements are wrapped inside a singular fieldset, and each input field is wrapped inside a div.field block element. The reason why all input areas are wrapped inside a div is because I wanted to add that nice border to each input element, border which needed to be consistent through input fields, textareas, select elements and more. As you'll see in a couple of minutes, the styling is achieved with just a few bits of CSS.

Close up shot: fancy borders around input fields

You may also ask what's up with the bits of php coding that are embedded in the input elements — the code that's emphasized above. You'll find out soon enough when we reach the final point of this tutorial: server-side validation.

The CSS

Without any CSS the form described above would look terrible, so let's see what we can do to make it shine!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#contactform { display:block; padding:0 0 1em 0; }
#contactform label,
#contactform input,
#contactform select,
#contactform textarea,
#contactform .field	{ display:block; float:left; clear:left; }
#contactform .field	{ padding:0.5em; border-radius:0.4em; -moz-border-radius:0.4em; -webkit-border-radius: 0.4em; 
					 background:rgb(228,228,228); background:rgba(51,51,51,0.1); }
#contactform .field span.error{ display:block; float:right; color:#FF0000; text-indent:0.5em; }
#contactform .field span.ok	{ display:block; float:right; color:#339933; text-indent:0.5em; }
#contactform label { margin-top:2em; }
#contactform input { width:20em; height:2em; line-height:2em; }
#contactform select { width:20.5em; }
#contactform textarea { width:30em; height:8em; line-height:2em; }
#contactform input,
#contactform textarea { color:#333333; line-height:2em; padding-left:0.5em; 
						font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; }
#contactform small { float:left; clear:left; }
#contactform .last { margin-bottom:2em; }

As we have a top-aligned form, all elements should flow beneath the one before it. We do this by floating all of them to the left and clearing the left side (lines 2-6). The field class is applied to divs that wrap all input elements. The one I said will be used to add a nice consistent border to input elements throughout the webform.

On line 7 we add padding to the field element, round the corners (if browsers support it), then set a transparent background, with fallback for browsers which do not support RGBA. I have used background instead of background-color because the later won't make the fallback RGB work.

The two span elements styled on lines 9 and 10 will be used for inline validation. Error messages will have the error class while confirmation messages will have the ok class. We need some space between different label & input groups in the form, that's why there's a top margin for each label.

On lines 12 to 14 we set the widths and heights of the input elements, while on lines 15 and 16 we style the appearance of basic input fields and textareas. The font-family is inserted here because textareas seem to have a mind of their own, and using em sizing will trigger unexpected results because of the font used. Choose a font that's different than your body's font and the textarea, though having the same specified size as a regular input field, will not have the same width as an input field.

CONTINUE READING

16

MAR 2010 0

Enhancing UI with scrolling events – good or bad?

Screenshot of João Andrade's website header

Scrolling wheels are usually used to navigate up and down or left to right on a page that is larger than the default viewport of the browser. However, by using JavaScript one can enhance the user interface of a site or webapp and reprogram, if I may say it like this, the default behavior of the scrolling wheel.

Good scenarios

If a web document contains textareas or block elements with overflow set to auto and the content inside these elements extends the area of the element itself a scrolling bar will appear, be it horizontal or vertical. By default, users will be able to scroll inside these elements by pointing the mouse inside the element's borders and use the scrolling wheel. If positioned outside the element when using the scrolling wheel the entire page will scroll. This is a good feature. Moreover, it is what users expect to achieve given these circumstances. And this works without developers doing anything.

Bad scenarios

Many modern websites use inline slideshows or sliders to showcase more content in less space, from photo galleries to product features and more. However some sites enhance these sliders in such a bad way that they completely screw up user experience. Check out João Andrade's website and try to scroll down to the bottom of the page where a contact form is located — contact form which is the selling point of his website. Unfortunately you get stuck in the header of the site because there's an enhanced "awesome" slider which moves to next or previous slides based on how you use the scrolling wheel.

This feature is bad because it redirects the default behavior of the scrolling wheel away from the page scrolling bar, and if you're not quick in reactions you'd think that the site is buggy. This feature would probably be ok if the slider would be properly delimited from the rest of the page and the slider's numeric controls would stand out, just as a textarea or block element that overflow delimit themselves nicely due to the scrolling bar that pops out near the right border of the element. Currently, the slider on João Andrade's website blends in beautifully inside the page.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

9

MAR 2010 0

Quick tips to improve your site’s appeareance

I have seen a lot of websites developed by web development companies in Romania and not only which have big flaws in terms of typography. Choosing a good font stack may be sometimes hard, but choosing the right font size, leading, measure, tracking and word spacing shouldn't be that hard. And this is what we're going to talk about in today's article.

Font size

Adobe Caslon Pro screenshot

Leading, measure, tracking may sound a bit fancy for some, but font-size should be in every designer's vocabulary. Font size shouldn't be chosen on the fly. You should test the fonts of your chosen stack on different sizes, all in close proximity as you may find some really good combinations.

It would be best if you kept a constant ratio between heading tags, paragraphs, subheadings and so on. For example, if your heading size is X and your subheading size is 75% of the heading size, it is probably good enough to have body text size set to 75% of the subheading's font size.

Good proportions are always good, but you should also look for visual artifacts. For example, setting a small font-size for a serif font may mean loosing the serifs all together. Serifs work best in larger font sizes, while sans-serifs look ok in small sizes too.

Leading

Leading example in typography

Simply put, leading is line height. Or if you fancy Wikipedia's version, leading is the amount of added vertical spacing between lines of type. Some rookies may refer to it as line spacing. You should always check if the descenders of one line of text do not overlap with the ascenders of the next one. If they do, your leading is to low. If they don't your probably fine, but you should also look for white space. A leading of 1.5 times greater than the font size is a de facto rule. However, different fonts, especially if embedded using javascript libraries like Cufon or similar technologies can be rendered oddly and require a bigger attention.

Measure

Typography measure example

Measure refers to the number of characters on a line of type, or simply put, its length. You should be careful what measure you use because to few chars on a line and the users will have to turn their eyes to fast. A measure to high would make hard for them to read the text and go towards the next line when reaching the end of the current one. A good measure would be around 65 chars a line, but you should be ok if you use somewhere between 45 and 75 chars a line. Chars include punctuation marks and spaces. Nothing is left out of counting.

I usually use char counting tools to check my measure which usually resides to All World Phone's word and character count tool.

Tracking

Typography tracking example

Tracking or otherwise said letter spacing is important because of the ligatures that typefaces have, especially serif ones. Ligatures are combinations of at least two distinct letters which may be hard to read if placed to close to each other. Some ligatures could be the following combinations: AV, vv (v-v), w (one w), co and others. After you chose your typeface, make sure there's enough space between letters so that users can easily read and distinguish letters from one another.

Word spacing

Word spacing is not important as tracking, but a general rule of thumb says if the measure's low, then word spacing should also be low, and if measure is high, word spacing should also be high.

Further reading

You should definitely check out our first article on typography, dealing with uppercase and lowercase letters. Once you're done you should also check out Smashing Magazine's awesome typographic patterns and best practices post. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

4

MAR 2010 5

Awesome Slider demo and source codes

Slider screenshot

Just two days ago I published a tutorial on building a custom slider with jQuery using XML to store data. You've asked it, and today I am publishing a demo of the slider and also releasing the source code.

Demo & source codes

You can check out live versions of this slider on Evenimente by Niki website's homepage and soon on the new version of our web agency's website.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

2

MAR 2010 20

Make your own jQuery slider using XML

Slider screenshot

Just a few days ago I had to build a slideshow on a website I developed. However, I couldn't find a proper slider that would work exactly as I wanted it to. The end result was that I coded a custom slider, and I am sharing the process with you. By the end of this article you'll be able to create a jQuery powered slider that uses XML to store information.

Why XML

I used XML because not all slides needed for the website contained vital information. Only the first slide contained critical information. I used XML because it allowed me to keep a clear and short source code that search engines would definitely like.

Progressive enhancement?

If javascript were turned off then the slider wouldn't work and it wouldn't load any content from the XML. The slider's canvas would be left blank. To fix this issue the first slide of the presentation is also included inside the html source of the site and is replaced via javascript, if available.

Slider description

I needed the slideshow to be dynamic — support variable number of slides. I also wanted the slider to have numeric controls and no thumbnails or any other gizmos. I also wanted to have all sorts of html tags inside the slides, not just images or movies. I also needed the slider to move forward on a given interval. And all these features were implemented, and you will be able to do the same by the end of this article.

HTML structure of the slider

1
2
3
4
5
6
<div class="splash">
	<div class="splash-content">
		This will hold the content in place, be it one image or a lot of HTML
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

The main .splash div will hold both content and slider's controls in place. The .splash-content div will wrap the actual content of the slider. The reason I used class attributes instead of id attributes is because I wanted to be able to insert multiple sliders inside the same page. But if I have multiple sliders, I need to make sure that each of them has unique content and that controls do not interfere from one to another. To do that, I added unique IDs to the outer splash div.

1
2
3
4
5
6
<div class="splash" id="unique_id_here">
	<div class="splash-content">
		This will hold the content in place, be it one image or a lot of HTML
	</div>
	<div class="splash-controls">&nbsp;</div>
</div>

Basic styling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.splash-controls
{ 
display:block; 
height:2em; 
margin:0 auto; 
margin-top:1em; 
}
.splash-controls a
{ display:block; 
width:2em; 
height:2em; 
color:green; 
background:rgb(51,51,51); /* Internet Explorer fallback color */      
background:rgba(51,51,51,0.1);
text-align:center; 
line-height:2em; 
float:left; 
margin-right:0.5em; 
text-decoration:none; 
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius: 1em;
}
.splash-controls a.selected	
{ 
color:#FFF;
}

The reason why I didn't provide any styling to the outer div or the content wrapper is because I want it to take the shape, size and styling of the content loaded from the XML. If there's some HTML, applying some style here may get crippled because of the content loaded. With the above CSS rules, the controls will show up as circles in modern browsers. If you want this feature in all browsers, perhaps you should use some background images instead of rounded corners and RGBA.

XML structure

<?xml version="1.0" encoding="utf-8"?>
<slideshow>

<slide>
	<content>
		<![CDATA[
	images, youtube videos, plain html, anything you like
		]]>
	</content>
</slide>
<slide>
	<content>
		<![CDATA[
	images, youtube videos, plain html, anything you like
		]]>
	</content>
</slide>

</slideshow>

The CDATA inside the content tag is there because otherwise HTML wouldn't be requested correctly by the javascript we are about to indulge with. With that said, let's move on to some jQuery.

Adding jQuery functionality

A neat way to have multiple sliders on the same page and throughout the site would be to use a plugin or a function that can handle the task. I chose the later and constructed a function that takes as arguments the ID of the slider and the XML filepath. The ID is nothing else but the id attribute we assign to each slider.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function AwesomeSlider(selector,xml)
{
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		return false;
	});
}

items variable will hold the total number of slides our slider contains. The content array, initialized to a size of 10 objects will contain the content of each slide. We only read the XML once, not every time someone clicks a control to move to next slide or when the timer says so. control variable is in fact a string containing HTML source being built to hold the slider controls. The count variable will hold current slide's number.

By using the $.get request we get all the contents of the XML file, then loop through each slide to get it's content and construct the slider's controls. The if on line 20 checks if we're currently on the first slide, and if so adds a selected class to the current anchor tag — for styling purposes.

Once we've looped through all slides and gotten their content, we set the content from the first slide into the HTML (line 24) and insert the controls into the HTML as well (line 28). As controls are added inside the DOM after page is loaded, simply binding them with jQuery's .click() event handler will not work. Instead we use the .live() handler.

Once someone clicks a control, we need to get the ID of the slide they wish to move to. That ID is stored in the control anchor's rel attribute. Once we have the ID, we then move to next slide (line 34) and prevent default behavior for links by using the return false; on line 35.

Strangely, the function we just tried to call doesn't exist (the one on line 34), so we create it. The updated source looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
function AwesomeSlider(selector,xml)
{
 
	function Slide2Next(selector,count,content,items,slideID)
	{	
		if(slideID>0) count = slideID;
		else if(count<items) count++;
		else count = 1; // reached the last slide, get back to first
 
		$(selector+' .splash-content').animate({opacity:0},1000, function(){
			// faded out, changing content
			$(selector+ ' .splash-content').html(content[count]);
 
			// animating
			$(selector+' .splash-content').animate({height:'toggle'},1000, function(){
				// change style of controls
				$(selector+' .splash-controls a.selected').removeAttr("class");
				$(selector+' .splash-controls a[rel='+count+']').attr("class","selected");
				// fading back in
				$(selector+' .splash-content').animate({height: 'toggle'}, 1000, function(){
					$(selector+' .splash-content').animate({opacity:1},1000);
				});
			});
		});
                return count;
	}
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		return false;
	});
}

The Slide2Next function also works if the slideID is not provided, or null. We need this for the upcoming feature — moving to next slide after a set delay. The if statement on the 6th line checks if slideID is provided. If provided, count variable will now hold the ID of the slide the user wants to move to. If not, the count variable will be incremented by one, if not on the last slide. If slider's on the last slide, count variable will be reset to 1 — the first slide.

We then fade out current slide (line 10), we then set new content according to required slide ID (line 12), then toggle the height of the content div inside the HTML (line 15). We change the state of controls on lines 17 and 18 and on lines 20 and 21 we toggle the height back and then fade in the content.

But I still didn't add the timer to the slider which is actually quite easy. We add three new lines at the end of the main function inside the .click() event handler and just after it. The final source looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
function AwesomeSlider(selector,xml)
{
 
	function Slide2Next(selector,count,content,items,slideID)
	{	
		if(slideID>0) count = slideID;
		else if(count<items) count++;
		else count = 1; // reached the last slide, get back to first
 
		$(selector+' .splash-content').animate({opacity:0},1000, function(){
			// faded out, changing content
			$(selector+ ' .splash-content').html(content[count]);
 
			// animating
			$(selector+' .splash-content').animate({height:'toggle'},1000, function(){
				// change style of controls
				$(selector+' .splash-controls a.selected').removeAttr("class");
				$(selector+' .splash-controls a[rel='+count+']').attr("class","selected");
				// fading back in
				$(selector+' .splash-content').animate({height: 'toggle'}, 1000, function(){
					$(selector+' .splash-content').animate({opacity:1},1000);
				});
			});
		});
                return count;
	}
 
	// slider
	var items = 0;
	var content = new Array(10);
	var control = '';
	var count = 1;
 
	$.get(xml, function(data)
	{ // get contents from xml
 
		$(data).find('slide').each(function()
		{
			// populate array
			items++;
			var $slide = $(this); 
			content[items] = $slide.find('content').text();
			// create controls
			if(items==1) control = control + '<a href="#" class="selected" rel="'+items+'">'+items+'</a>';
			else control = control + '<a href="#" rel="'+items+'">'+items+'</a>';
		});
 
		$(selector+' .splash-content').html(content[count]);
 
		// add controls
 
		$(selector+' .splash-controls').html(control);
	});
 
	// control is clicked
	$(selector+' .splash-controls a').live('click',function (){
		var slideID = $(this).attr('rel');
		count = Slide2Next(selector,count,content,items,slideID);
		clearInterval(slideInterval);
		slideInterval = setInterval(function(){ count = Slide2Next(selector,count,content)}, 10000 );
		return false;
	});
 
 	var slideInterval = setInterval(function(){ count = Slide2Next(selector,count,content)}, 10000 );
}

On line 63 we set the Slide2Next function be called every 10 seconds. On line 58 and 59, we reset the interval back to 10 seconds after the user has clicked a control. We don't want bad functionality such as the following: User comes to site; user clicks a slider control after 9 seconds; new slide is loaded then faded out because due to the timer that calls for the next slide 1 second later.

To create the actual functionality for this slider, add the HTML, create the XML, load the jQuery script above then set the slider by adding into your javascript document the following command (it should be on document load): AwesomeSlider('#unique_id_here','path_to_your_xml_file.xml');

Demos

You can check out live versions of this slider on Evenimente by Niki website's homepage and soon on the new version of our web agency's website.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

23

FEB 2010 0

The Smashing Book is indeed… Smashing!

Image of Smashing Book's inline page

For most of you who already got the book it wasn't probably a painful process. Unfortunately, there are always a couple of exceptions to the rule, and I was "lucky" enough to be stuck with one. I pre-ordered the book way back in the late summer of 2009, because I wanted to get my hands on the book as soon as it was out. That turned against me, as the book that was sent over got lost in traffic. It was shipped on the 2nd of December last year, and it was late January 2010 and nothing smashing got stuck into my mailbox.

I didn't know what to do, and I sent over an email to Smashing Magazine's team. It was just a short brief line telling them it's almost two months since dispatch day and I still have nothing, together with my mailing address. I got a reply in less than 24 hours that said something like: "We're sorry, the book was lost in transit. But here's a tracking code of a new airmail shipping". Four days later, a couple of weeks ago, I got the book. Found the time to digest it, and here's the results.

Package

I think those great guys and girls at Smashing Magazine are Mac fans, because the book was awesomely wrapped. Getting it out of the package after such a long waiting time almost felt like getting my first Apple product out of its box. The quality of the paper is awesome, unlike many other books I got my hands on, which usually were more expensive too.

User interface design in modern web applications - Dmitry Fadeyev

The first chapter of the book is about user interface design, and was written by Dmitry Fadeyev who publishes the Usability Post. I've been reading his blog ever since he started it because it is packed with a lot of valuable information. On such grounds I didn't expect this chapter to be any less valuable. Unfortunately for me, reading Dmitry's chapter felt like reminding myself things I already knew. I am an avid reader and researcher on anything that deals with user interfaces and experience, and everything that Dmitry wrote in his chapter felt so familiar.

However, for someone who's new to this portion of the web, this chapter will make you pop a lot of questions. Questions on whether your websites and web apps have high standards or not. Questions whether your users feel great using your solutions or not. This chapter contains information about the little things that make everything feel so much better.

The art and science of CSS-Layouts - Kayla Knight and Jacob Gube

The second chapter of the book starts without intensity, but as you keep reading things get more complicated. Fixed, fluid, hybrid, adaptive or elastic layouts are all in there, and if you're still using only fixed-width layouts this chapter will make you think twice before going with them in the future.

Web typography: Rules, guidelines and common mistakes - Alessandro Cattaneo, Yves Peters and Jon Tan

I never thought that design, and typography ( to be more precise ), has to deal with math and mathematical formulas. This chapter will make a shift in your thinking with regard to typography and layouts — only if you're not some typography guru and this chapter will make you fall asleep.

Packed with a lot of unknown, unheard terms, this long chapter unfolds itself gradually, and the authors behind it did a great job explaining beforehand what they were going to talk about. I think this chapter is the best place to start your regular reading on typography.

After you're done with the Smashing Book's typography chapter, I really recommend this article published by Smashing Magazine on mathematics applied to designs. It contains a wonderful follow up story of the aforementioned chapter.

Usability principles for modern websites - Andrew Mayer and David Leggett

This chapter starts with a lot of information and guidelines that simply put is common sense. Or at least it seems so for me. If you don't know this stuff by now, I hope you didn't put a lot of websites up in the cloud by now. But as you approach the end of the chapter, there's some nice insights on different studies, possibly unheard principles and rules. Unfortunately, I'd have to say that this chapter somehow contrasts the quality of the first three chapters of the book.

The ultimate guide to fantastic color usage in web design, usability and experience - Darius A Monsef IV

This chapter was by far the easiest to read since I started the book. It does contain a lot of technical information, but the amount of perfect examples picked by Darius to emphasize what he's trying to point out is overwhelming. It starts with some basic information, advances to a few quality examples and by the time you finish the chapter you feel like you need to go to an art gallery as soon as possible.

If I were you, I'd leave this chapter alone and read it as if it were the last one in the book. After all, the Smashing Book contains 10 different stories, not connected to each other, so you can read them in any order you'd like.

After completing the book, I must say that the chapters do have some kind of flow, and maybe it's best if you read them in the order they are presented.

Performance optimization for websites - Rene Schmidt

I can't believe I am actually saying this, but as chapters go by, each one seems better than the ones that came before it. Rene Schmidt did a great job in the chapter he wrote. It is packed with server-side and client-side optimization techniques that you really need to know. If the chapter were a bit more complex, you could have switched from a dedicated managed server to an unmanaged one.

Design to sell; Increasing conversion rates - Dmitry Fadeyev

After reading the first chapter Dmitry wrote in the Smashing Book I was little disappointed, merely because I didn't learn new tricks. However, this second chapter of his was a bit more advanced, if that's the right word for it.

I liked the sell "solutions and benefits" concept instead of "services and features", and it was great to find out more about this technique.

How to turn a site into a remarkable brand - Chris Spooner

By the time you reach this chapter, you finally realize that all these stories told by each chapter of the book were carefully chosen. The book starts with basic website building techniques and covers the entire process in detail. Therefor, this chapter on branding is interesting because it points out a few things that can turn a website into a huge success. This chapter alone would have been a great way to end the book.

Learning from experts; interviews and insights - Steven Snell

I'm sure all of you, who would consider buying any web development book, read from time to time interviews with experts in the field. The Smashing Book also contains a chapter dedicated to chatting with some important figures in the web development industry. However, these interviews seem a bit different. Most online published interviews don't really pack useful information, detailed techniques, but instead have a more personal touch. The interviews published in the book seem more technical than what I was used to reading online. There are no "how's your typical day like?" questions. There's more questions like "what are the first steps when beginning a client project?"

Behind the curtains: The Smashing Magazine story

After the insights shared by great designers and developers in the previous chapter, getting to know what Smashing Magazine really is and how it evolved since it was launched was great. It is always inspiring to see how two people can turn something simple, basic and unknown into a fabulous success such as the Smashing Magazine.

Top chapters

  • 1. Performance optimization for websites - Rene Schmidt
  • 2. The ultimate guide to fantastic color usage in web design, usability and experience - Darius A Monsef IV
  • 3. Web typography: Rules, guidelines and common mistakes - Alessandro Cattaneo, Yves Peters and Jon Tan

Final words

The Smashing Book is shinny and nice. Sometimes though it is too shinny such that text in inline pages is glowing making reading it really hard unless you change your light bulbs or light angle.

It's clear that the book is a result of a community, not one or two authors. Because of that, the quality of it's chapters range from chapter to chapter. On the other hand this makes the book more enjoyable as its style changes often. Bored of one author's way of laying out information? Don't worry, the next one will be totally different.

To conclude, the Smashing Book is indeed... Smashing!

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

18

FEB 2010 1

Get rid of unused elements in your designs

Webia's old header with the unused, non-functioning slider

Just in case you didn't realize, a couple of days ago I have removed the unused header here on Web International Awards. When the blog got redesigned last year in March, that header was planned to hold huge thumbnails — if huge thumbnails is correct. However, things took off and I didn't have time to finish the header and really implement post thumbnails for the most popular articles that we've published.

Finally, I got some spare minutes, and I completely removed that ugly header and awful message it contained. The reason why I am giving this advice is that soon after the unused header was removed, the number of pages/visit improved with around 20%, and that can't be just a simple coincidence.

Webia's new header with the unused, non-functioning slider removed

Therefor, be careful to keep the main content of your sites as high as possible. Perhaps if I fully developed the features of the header it would have resulted in better traffic towards older articles, but I think it is more important to keep new visitors as long as possible on current articles.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

16

FEB 2010 0

Don’t abuse of uppercase letters

Uppercase vs lowercase reading

Have you tried reading the above two lines? The one that contains only uppercase letters seems to be harder to read, doesn't it? Well, it is true. Uppercase words are harder to read. Throughout this post I will highlight some facts that back up this statement.

First of all, lets see when we should be using uppercase letters and words. Capitals are used for capitalization, emphasis, acronyms, names and alike. You see a trend don't you? Capitals shouldn't be used in body copy or just simple lines of text for that matter.

uppercase text

Uppercase letters do not contain ascenders or descenders, which are proved to help recognition. Keyword here: recognition. Some researchers state that people read easily lowercase text because the brain recognizes some words due to the ascenders and descenders found inside them. Your brain recognizes words just by taking a glance at them, before actually reading the entire word. Uppercase letters don't have ascenders and descenders so in order to grasp a word you have to read it in its entirety, because the brain won't recognize it as easily as it does in the case of lower case letters.

Lowercase text is easy to read

Moreover, in typesetting, when an acronym contains many letters, small-caps are used instead of full capitals to avoid overemphasizing the word. Furthermore, it is generally accepted that in digital media such as emails, websites, using allcaps is considered shouting. You wouldn't like your visitors to feel as if you were shouting at them, don't you?

Next on Typography

This was the first article in a series on typography. Next article will contain information about measure, leading, tracking and word spacing. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

9

FEB 2010 6

Buttons and usability

The other day I was talking to a friend about destructive actions in web forms, web apps, or any kind of apps for that matter. With any destructive action such as cancel, exit or delete comes great responsibility for the developer.

Delete links and buttons

You're responsible for each user who's frustrated because they accidentally clicked your delete button, and there's no way to restore their deleted work. This problem usually resides around web apps because only a few web apps offer undo / redo behaviors.

mailchimp delete action confirmation question screenshot

Mailchimp asks for delete confirmation, as you can see in the above screenshot. To make things worse, the popup takes ages to load, so the interface doesn't go as smooth as you'd want. Moreover, the confirm and cancel buttons are in close proximity. What if I accidentally click delete, than accidentally click confirm?

Cancel buttons in forms

The same goes with forms and their cancel buttons. Many forms have cancel buttons although I don't see their point. If you wish to cancel what you've done in a form, you simply go to another page or hit the X button.

fivecentstand.com forms with usability issues as submit and clear buttons cannot be distinguished

However, some insist and put a cancel button in the form. Moreover, they don't just put it in a remote area of the form, they put it right next to the submit button. This inevitably leads to users accidentally clicking it instead of the submit button, which means even more frustrated users.

As you can see in the screen above, Five Cent Stand exaggerated with their creativity. Of course, their form is lovely, but can you see how close and similar are the send and clear buttons? You can barely see there's two distinct buttons. Really, really bad solution.

X or close buttons

Then there's the X (close) button which a few years ago was used only in desktop apps. Since the new rich user interfaces available on the web, a large number of web apps have lots of windows, and you guessed it, X buttons. The problem is nobody asks or tests if the clicks on these buttons are accidental or not. Making such check ups would be hard. And if you can't, you should check with the user if they meant it, which leads to our next problem.

What if we asked users if they really like to perform that destructive action (X, delete, cancel) or not? This sounds so Windows right? Moreover, this would frustrate and irritate even more users than before.

Microsoft word asking if you really want to quit

The percentage of users actually wanting to click those buttons is way higher than those who do it by accident. This means they'll get pissed of with you for asking them for confirmation all the time.

Is there a solution ?

It has to be, and here are some suggestions I thought might work. Let's start with the X button. One click may be unintended. How about a double click? I don't think that one could double click by accident. Even if that happened it would be just one user not plenty of them! The overall experience of almost everybody would definitely improve.

One solution for the forms canceling button would be placing it somewhere remote, far from the submit button, and styling it differently. What about delete buttons? A solution I think could work great is inspired from the Apple iPhone/iPod collection.

iPhone's slide to unlock and slide to on/off controls

What if we developed delete and cancel buttons in a "slide to delete" fashion? Clicking them won't do any harm, but clicking and sliding for 30 pixels or so would trigger the event? Now wouldn't that please anyone?

Feedback

Please share your thoughts on this topic in the comments section. If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

6

FEB 2010 0

Publishing schedule

Web International Awards post schedule thumbnail

It is almost one year since I relaunched this website, and as the 9 months stats show, it has been a good journey. I didn't put any advertising or funding what so ever to promote the blog except writing the content you're familiar with. But I want more, and I think that in order to achieve more from this blog, some proper management is required.

As you've seen, there were times in the past months when there were a lot of articles published just days after the last, and times when there were no articles published for weeks to come. I don't like that, and this is the change I am announcing today. From now on, there will be at least a weekly post, published on Tuesdays. I hope not to stop here and see more posts come published each week. Hopefully there's going to be one on Tuesdays and one on Thursdays or Fridays, but Tuesday's a promise.

Next on Web International Awards

This next Tuesday we are going to talk about buttons, links, and a lot of usability. We'll be studying a couple of websites, devices and applications, and see how we can improve user experience by improving simple buttons.

Upcoming

To take a glance at what's going to be published in the near future, I am going to write a couple of articles about usability. It's a trend huh here at Webia? There's going to be a smashing review of you guessed: the Smashing Book! There's going to be the second part of the awesome forms article and more! Stay tooned.

Page 4 of 11« First...23456...10...Last »