As almost any web designer worth their salt, and a large percentage of web developers will tell you, to be fully considered a web designer you have to have some background in code. Not to the depth that full on developers must, but it really is unfair to the rest of those working on a website with us if we do not have some knowledge in a handful of key areas. Which is where these web design tutorials come in.

In this post we have gathered a handful of useful tutorials from these various areas of code that designers should have their hands in. We have standard CSS and CSS3 tutorials, HTML5 and also Javascript tuts as well. A little something for all three of the main code branches that web designers need to always be improving their grasps on. We hope that you find these web design tutorials helpful in your next or current project!

CSS Tutorials

30 CSS Best Practices for Beginners – CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.

6 Ways To Improve Your Web Typography – Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

3 Easy and Fast CSS Techniques for Faux Image Cropping – This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

Build Multi-level Multi-column Multi Menus with pure CSS – works perfectly in most browsers, including IE 6, using absolutely no javascript

CSS Absolute Positioning: Create A Fancy Link Block – some tricks to create a fancy link block that make our links more attractive.

How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags.

CSS3 Tutorials

CSS3 Minimalistic Navigation Menu – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

CSS3 Tutorial: Sleek Card Pockets using CSS Only – learn how to create web card pockets using some great new CSS3 techniques.

CSS3 Animated Vignette Buttons – This tutorial uses a patterned background and places vignette-style .pngs over the top which are animated using transition.

CSS3 Music Player Menu – This tutorial maximizes power of CSS3 to create a CSS Music Player Menu with a Photoshop-like effect.

3D Animation Using Pure CSS3 – This tutorial uses the perspective property to create the 3d effect and transform and transition, to animate it.

Create a Swish CSS3 Folded Ribbon in 5 Minutes – Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes.

HTML5 Tutorials

HTML5 : The Basics – This tutorial introduces HTML5 and its basic features as well as explains the key differences from HTML 4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Have A Field Day With HTML5 Forms – Take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.

Preparing for HTML5 with Semantic Class Names – A brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements.

Drag and Drop – This tutorial will teach you how to create a HTML 5 page that uses the new drag and drop feature.

How to Make an HTML5 iPhone App – This tutorial will show you how to create an offline HTML5 iPhone application, specifically, a tetris game.

Create Vector Masks Using the HTML5 Canvas – This tutorial looks at how to use the canvas tag and clipping to create images that aren’t so rectangular.

Javascript Tutorials

Javascript – An easy introduction – Javascript is used to add interactivity and functionality to a site. It has many uses, from detecting the viewers web browser to validating form input.

Nested Arrays in Javascript – Like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays.

jQuery for Absolute Beginners – Fifteen video tutorials that teach you EXACTLY how to use the jQuery library. Start by downloading the library and eventually work up to creating an AJAX style-switcher.

iPhoto-like image resizing using Javascript – This tutorial uses the script.aculo.us slider control to capture input values, then converts those values into something useful.

Learn How To Detect Browser in Javascript – In this tutorial you will learn how to detect the browser in javascript so that you can then serve the suitable information.

Words Validation with Javascript – This tutorial will explain you how to filter out inappropriate words from being updated or sent from your website.

(rb)

  

Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content.

CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs.

Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials.

Horizontal CSS Menu Tutorials

1. Advanced CSS Menu Trick

View Tutorial | Demo

2. Elegant Drop Menu with CSS Only

View Tutorial | Demo

3. Bulletproof CSS Sliding Doors

View Tutorial & Demo

4. Tabbed Navigation Using CSS

View Tutorial | Demo

5. Create an Advanced CSS3 Menu – Version 2

View Tutorial | Demo

6. Create a Slick Menu using CSS3

View Tutorial | Demo

7. How to Make a Smooth Animated Menu with jQuery

View Tutorial | Demo

8. How to Make a CSS Sprite Powered Menu

View Tutorial

9. Simple jQuery Dropdowns

View Tutorial | Demo

10. Designing the Digg Header: How To & Download

View Tutorial | Demo

11. Dynamic Page / Replacing Content

View Tutorial | Demo

12. Create a Fun Animated Navigation Menu With Pure CSS

View Tutorial | Demo

13. How-to: DropDown CSS Menu

View Tutorial | Demo

14. Flexible CSS Menu

View Tutorial & Demo

15. Creating a glassy non div navigation bar

View Tutorial | Demo

16. CSS Sliding Door using only 1 image

View Tutorial | Demo

17. CSS UL LI – Horizontal CSS Menu

View Tutorial

18. How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

View Tutorial | Demo

19. A Different Top Navigation

View Tutorial | Demo

20. Create a Cool Animated Navigation with CSS and jQuery

View Tutorial | Demo

21. Navigation Bar

View Tutorial & Demo

22. CSS: drop down menu tutorial

View Tutorial | Demo

23. RocketBar – A jQuery And CSS3 Persistent Navigation Menu

View Tutorial | Demo

24. A Great CSS Horizontal Drop-Down Menu

View Tutorial & Demo

25. Overlay Effect Menu with jQuery

View Tutorial | Demo

26. Grungy Random Rotation Menu with jQuery and CSS3

View Tutorial | Demo

27. Rocking and Rolling Rounded Menu with jQuery

View Tutorial | Demo

28. Slide Down Box Menu with jQuery and CSS3

View Tutorial | Demo

29. Advanced CSS Menu

View Tutorial | Demo

30. CSS3 Dropdown Menu

View Tutorial | Demo

31. How To Create A Simple Drop Down Menu With CSS3

View Tutorial | Demo

32. Pastel color menu with dynamic submenu using CSS

View Tutorial | Demo

33. Creating an Animated CSS3 Horizontal Menu

View Tutorial | Demo

34. Tutorial to create a Beautiful, simple, horizontal CSS menu

View Tutorial & Demo

35. CSS Sprites2 – It’s JavaScript Time

View Tutorial | Demo

36. Image Menu with Jquery

View Tutorial | Demo

37. How to Code an Overlapping Tabbed Main Menu

View Tutorial | Demo

38. Pure CSS Horizontal Menu

View Tutorial | Demo

39. Pure CSS Menu With Infinite Sub Menus Tutorial

View Tutorial | Demo

40. Animated horizontal tabs

View Tutorial & Demo

41. CSS Sprite Navigation Tutorial

View Tutorial | Demo

42. Create your own drop down menu with nested submenus using CSS and a little JavaScript

View Tutorial | Demo

43. CSS Drop Down Menu Tutorial

View Tutorial & Demo

44. Nicer Navigation with CSS Transitions

View Tutorial | Demo

45. CSS Navigation Menus

View Tutorial

46. Pure CSS Fish Eye Menu

View Tutorial | Demo

47. How to Create a CSS3 Tabbed Navigation

View Tutorial | Demo

48. Create an apple style menu and improve it via jQuery

View Tutorial | Demo

49. Create a multilevel Dropdown menu with CSS and improve it via jQuery

View Tutorial | Demo

50. Sweet tabbed navigation using CSS3

View Tutorial | Demo

51. Create an Advanced CSS Menu Using the Hover and Position Properties

View Tutorial | Demo

52. Sexy Drop Down Menu w/ jQuery & CSS

View Tutorial | Demo

53. How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

View Tutorial | Demo

54. CSS Express Drop-Down Menus

View Tutorial | Demo

55. Professional Dark CSS Menu

View Tutorial | Demo

56. Creating a Simple yet Stylish CSS Jquery Menu

View Tutorial | Demo

57. jQuery Drop Line Tabs

View Tutorial & Demo

58. Animated Menus Using jQuery

View Tutorial | Demo

59. Make a Mega Drop-Down Menu with jQuery

View Tutorial | Demo

60. Animated Navigation with CSS & jQuery

View Tutorial | Demo

61. Horizontal Subnav with CSS

View Tutorial | Demo

62. Mega Drop Down Menus w/ CSS & jQuery

View Tutorial | Demo

63. CSS dropdown menu without javascripting or hacks

View Tutorial & Demo

64. CSS Drop Down Navigation Tutorial

View Tutorial

65. Sleek Pointer Menu 2

View Tutorial & Demo

66. CSS Overlapping Tabs Menu

View Tutorial | Demo

67. Horizontal CSS Menu With Icons

View Tutorial | Demo

68. Creating a Multi-Level Dropdown Menu using CSS and jQuery

View Tutorial | Demo

69. Create The Fanciest Dropdown Menu You Ever Saw

View Tutorial | Demo

70. Create A Speaking Block Navigation Menu Using Pure CSS

View Tutorial | Demo

71. Horizontal CSS List Menu

View Tutorial | Demo

72. CSS3 dropdown menu

View Tutorial | Demo

73. Making a CSS3 Animated Menu

View Tutorial | Demo

74. How To Create A Clean CSS3 Navigation Bar

View Tutorial | Demo

75. How to Create a Modern Ribbon Banner Navigation Bar with Pure HTML/CSS3

View Tutorial | Demo

Vertical CSS Menu Tutorials

76. CSS Pop-Out Menu Tutorial

Tutorial | Demo

77. CSS graphic menu with rollovers

Tutorial | Demo

78. Vertical CSS Menu With a ‘Behavior’ File

Tutorial | Demo

79. Super Fantastic CSS Navigation Image Rollovers

Tutorial | Demo

80. Vertical Menu with Hover Effect using CSS

Tutorial | Demo

81. How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Tutorial | Demo

82. Simple CSS Vertical Menus

View Tutorial | Demo

83. Create a Social Media Sharing Menu Using CSS and jQuery

Tutorial | Demo

84. CSS3 Minimalistic Navigation Menu

Tutorial | Demo

85. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Tutorial | Demo

86. Awesome Cufonized Fly-out Menu with jQuery and CSS3

Tutorial | Demo

87. Two CSS vertical menu with show/hide effects

Tutorial | Demo

88. Animated Drop Down Menu with jQuery

Tutorial | Demo

89. Clean and Attractive jQuery Vertical Menu Tutorial

Tutorial | Demo

90. Nested Side Bar Menu

Tutorial & Demo

91. CSS menus

Tutorial | Demo

92. Simple Vertical CSS Menu

Tutorial

93. Sliding Jquery Menu

Tutorial | Demo

94. Reinventing a Drop Down with CSS and jQuery

Tutorial | Demo

95. Drop-Down Menus, Horizontal Style

Tutorial | Demo

96. CSS Vertical Navigation with Teaser

Tutorial | Demo

97. jQuery style menu with CSS3

Tutorial | Demo

98. Green Vertical Navigation Menu

Tutorial | Demo

99. CSS: Sexy Vertical Popup Menu with CSS

Tutorial | Demo

100. Uberlink CSS List Menus

Tutorial | Demo

Overview

We hope you have enjoyed this list of CSS navigation menus and found something useful for your site (We made a point of including a mix of different menu styles: basic menus, flashy menus, menus which use jquery, menus that use pure CSS etc). If you know of any other great CSS menu tutorials, please feel free to share them in the comment area. :)

  

jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool. Apart from being a lightweight cross-browser JavaScript library that simplifies HTML and Ajax interactions for rapid web development, it also gives sites that sleek look while also representing important data in a very attractive way.

You should always keep in mind that once a user lands on your site, the fist thing s/he does is to navigate and check out the content. If your site lacks in providing the user an attractive navigation, s/he will loose interest and will be clicking on that ‘Back’ button within seconds — even if the content on the site is excellent. Hence to stand apart you need to make your menu on your site different and appealing to users.

We’ve collected some tutorials to help you understand how to give your menus that stunning visual effect and animations. Please feel free to share any sites you’ve discovered that have been developed with jQuery. Enjoy!

Scrollable Thumbs Menu with jQuery
In this tutorial you can learn how to create a fixed menu with scrollable thumbs which you can nicely control with your mouse:

Sweet Menu
Sweet Menu takes an ordinary list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system:

Creating a Fancy Menu Using CSS3 and jQuery
Here you can see how a fancy menu can be created with the help of the new CSS3 features along wth jQuey:

Rocking and Rolling Rounded Menu with jQuery
In this tutorial you can make use of the rotating and scaling jQuery patch from Zachary Johnson to create a menu with little icons that will rotate when hovering:

Slick Drop-Down Menu with Easing Effect Using jQuery & CSS
Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool:

Thumbnails Navigation Gallery with jQuery
Here is a great tutorial on how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation:

Collapsing Site Navigation with jQuery
A collapsing menu that contains vertical navigation bars and a slide out content area can be created like this:

jStackmenu
Here is a jQuery UI widget for Stack Menus. Click here to find out more:

Create Your Own “kwicks” jQuery Effect
Check out this tutorial to find out how you can create your own kwicks jQuery effect:

Overlap that Menu!
In this tutorial, you can learn how to achieve overlapping effects to your menu:

Overlay Effect Menu with jQuery
In this tutorial you can learn how to create a simple menu that will stand out once you hover over it by covering everything except the menu with a dark overlay:

jQuery Multicolor Animation Drop-Down Navigation Menu
Check out this tutorial on how to create a multicolor drop-down navigation menu with jQuery:

jQuery Floating Menu
A simple navigation menu that “follows” page scrolling and expands on mouse over — made with CSS and jQuery:

Kwicks for jQuery & a Horizontal Animated Menu
Here is a walkthrough where you can see the final result of using Kwicks. A jQuery plugin that builds a horizontal menu with a nice effect like Mootools but much more customizable and versatile:

Fading Navigation Menu
Here is a simple, neat navigation menu using CSS sprites and a bit of jQuery code to give it a visually appealing fade effect:

UI Elements: Search Box with Filter and Large Drop Down Menu
A tutorial that will show you how to create a search box with a filter and a large drop-down menu:

jQuery Convertion: Garagedoor Slider Navigation Effect
Learn how to turn your menu to jQuery and give it a Garagedoor slider navigation effect as well:

Create Bounce Out Vertical Menu with jQuery
A simple bounce out vertical menu is created here with the help of a little bit of CSS3 and jQuery Framework to create a vertical menu which on mouse hover gives a nice bounce out sliding effect:

Slide Down Box Menu with jQuery and CSS3
Learn how to create a unique sliding box navigation. The idea here is to make a box with the menu item slide out, while a thumbnail pops up:

LavaLamp Plugin
This plugin has some attractive features like targeting and container options, automatic default location, vertical and horizontal morphing:

Little Boxes Menu with jQuery
A nice display of little boxes that animate randomly when the menu item is clicked. It then expands and reveals a content area for some description or links:

Horizontal Scrolling Menu Made with CSS and jQuery
Here is a tutorial that explains how to make a horizontal scrolling menu made with CSS and jQuery:

Beautiful Background Image Navigation with jQuery
Learn how to create a beautiful navigation that has a background image slide effect. The main idea here is to have three list items that contain the same background image but with a different position:

Awesome Cufonized Fly-out Menu with jQuery and CSS3
One of our favourites! Here is a full page cufonized menu that has two nice features:

(ik)

  

Not that this is universally true, but some people look haphazardly into a field before deciding to dive in. We do the odd bit of research, investigating the ins and outs, slowly developing expectations about this new arena of work. Expectations are not necessarily bad to have; they can be a powerful motivator. But sometimes our expectations are shattered by a development that we never saw coming.

“Shatter” sounds a bit dramatic, but a situation can certainly get derailed. Regardless of whether this changes the course of your career, it can still knock the wind out of you. Perhaps worst of all, you can’t really prepare for something that you didn’t expect. That is where this post begins. What’s past is prologue, and many of you are bound to have reflections on how those twists and turns of yesterday can help guide your development today.

When we’re hit by something that wasn’t on our radar, our expectations can shatter. (Credit)

Once again, we turned to our social media friends and followers for examples of unforeseen changes in the design and development world that tripped them up. Hopefully, by going over some of these pitfalls, we can be better prepared for the next ones — or at least be prepared for their fallout. With the way communities are constantly developing, changes are bound to surprise us, but if we are aware of how quickly they can occur, we might just be better able to adapt to them.

A Better IE

“Did someone say ‘standards-compliance’? Well, it couldn’t have been Microsoft. Oh, it was?”

A chill ran over the World Wide Web as we heard the news — and saw the proof — that Internet Explorer was going to comply with the standards that the rest of the Web had been adhering to for a while. And it took only the ninth iteration of its browser for Microsoft to finally reach the shore from which the rest of us have been waving to them.

Years after setting sail on the cyberspace waters, IE finally lands on the shore we have been occupying for years. (Image credit)

Many in the design and development community have long given up on the Microsoft crew, and many had vowed to stop catering to the IE crowd by not adding the extra code and tweaks that previous versions of IE required. So, when Microsoft announced that IE9 was bound for the market, you can imagine that the community was waiting with less than baited breath. Then news filtered to the public about the bells and whistles it would have, and people became shocked at the prospect of IE becoming compliant.

Lesson Learned
So, what did we learn from this development that we never saw coming? With enough pressure and time, suckage can end. There was a time when Microsoft was setting the agenda and didn’t have to comply to anything. It was on top, and no one could challenge its grip on the market, so it saw no need to change. But all that is past. It is finally stepping up to the plate.

What our Friends and Followers Said

• IE9 is remotely good!
• Internet Explorer is supporting open standards.
• IE9 as we know it now.
• An excelling IE9.
• Internet Explorer becoming a fairly standards-compliant browser.
• IE9 being pretty awesome!
• IE to support recent fancy stuff like HTML5 canvas, video, audio, clean CSS3 and more to come with IE9.
• Microsoft’s commitment to Web standards in IE9.
• Internet Explorer actually getting better (IE9 looks promising… let’s just hope).
• Yes, IE9, and especially its download manager!!

Mobile Web Explosion

“A Web you can take anywhere? Are you talking sci-fi?”

Not exactly, although we weren’t exactly prepared for this by Back to the Future 2. The mobile Web has been a game-changer for the design and development community, and it caught many of us by surprise. It doesn’t seem to be slowing down either. Quite the opposite: the market is growing by leaps and bounds. What some assumed to be a fad has forged an entirely new direction for the market.

For the longest time, the trend was to expand our viewable spaces. Designers planned for a larger Web, breaking out of the standard 960 grid, believing that the Internet would be grandiose and viewed on large screens. Things took a turn, and the Web was narrowed to much smaller mobile devices. The mobile Web exploded and seems to have created a virtual black hole that is pulling countless surfers in. People have fallen in love with the idea of taking the Web wherever they go, and they aren’t looking back.

Lesson Learned
While increasing the size of viewing areas is still a trend in its own right, few of us expected so many people to opt for a compact Web. Convenience outweighs presentation at times, and many want constant access to the Internet. Basic often beats bulk.

What our Friends and Followers Said

• A mobile revolution.
• The explosion in mobile Web and applications!
• Designing for browsing on mobile devices (cell phones mainly).
• Designing for cell phones! When I started in Web design, I’d never have guessed that.
• Web browsing on small (mobile) devices.
• I definitely didn’t see mobile browsing being at the level it is today (Thanks, Apple!).

Social Media Dominance

“Why would anyone care about a blogging platform that limits you to 140 characters?” “Who cares about social networking? We’re running a business, not a high school.”

I wonder how those words tasted when they were eaten? Social networking dominated the Web almost as soon as it hit the scene, and it continues to attract more users than most of us could have imagined. The many social media outlets and groups out there have brought us connectivity as well as insight into the communities that use them. Who saw that coming?

Dozens of social media networks are gaining traction, creating new avenues for marketing in the process. They are attracting not only veteran Web users, but also millions of people who previously saw little or no use for the Internet. No wonder these networks are dominating the market: they satisfy a need that so many didn’t realize they had.

Lesson Learned
What have we learned? That most people think in 140-character bursts of thought? Not exactly. Rather, we’re seeing the power of this connectivity and the way the Web can provide a global fabric of social communication. Many of us miscalculated the appeal of a socially interactive Internet, but now we see that it is unstoppable. You can’t stop the signal, as Joss said.

What our Friends and Followers Said

• Twitter! I thought micro-blogging and other social media arms would be a passing fad. Boy, was I wrong.
• The omnipotence of Facebook.
• More than half a billion people using a website (Facebook).
• Facebook advertising around the ground at Old Trafford against Liverpool on Sunday. Mad!
• Facebook addiction.
• Massive social media sharing on every pixel online.
• Social media overkill.
• With that, the herd of Social Media “experts.”
• Twitter proving to be popular/useful.
• Twitter. I still don’t see any redeeming value to it, even for reciprocal linking.
• Social media integration.
• Hundreds of thousands more people trying to earn XP and levelling up (Farmville).

Overall Market Stability & Growth

“You mean I can make this my job? What are you smoking?”

So many people never really saw the design and development fields growing so rapidly into a stable and secure job market. Thousands have committed to a career in a field that was once considered better suited to supplementary income or a lucrative hobby. The market now provides an endless supply of work opportunities and continues to evolve.

Everyone knew the Web would be big, but not everyone recognized the need for professional designers and developers to make the most out of people’s experience on it. This stability and growth came as a surprise, albeit a welcome one. The broad and helpful community that has populated this market might explain both the stability and growth. The community has built a solid foundation for the coming generations.

Lesson Learned
Is there a lesson here in our underestimation of the market — aside from what it tells us about our self-esteem (although that’s part of it)? As with the mobile Web and social media, perhaps the lesson here is not to dismiss an emerging market before considering its full implications and potential applications.

What our Friends and Followers Said

• Just about unlimited opportunities.
• Here in my country: the respect!
• Now it’s actually a real job!
• To actually earn my living with website development.
• The growth of the now enormous Web dev community and its amazing generosity. Couldn’t have become the designer I am today (being self-taught), and the better designer I hope to be in the future, without it.
• Well, I was going to say HTML5, but then when you really look at it as a whole, I guess you can infer that all of us never really saw a big market for virtual goods (in this case Web design and development). I was very surprised to see how it kept on growing to this day, and I have high hopes for the future.

Farewell XHTML — Hello HTML5

“What is this nonsense about the return of straight HTML? XML-based code is the wave of the future!”

Or so we thought. As we’re seeing, things don’t always work out the way we expect. When the coding standard went from HTML 4.01 to XHTML, many abandoned ship and cut down this x-citing new path. Some even called XHTML the future of HTML, doubting that HTML would have a significant version after 4.01. They believed the Web had gone the way of the X.

No one expected us to retreat from the path of XHTML. (Image credit)

After nearly a decade of XHTML ruling the Web, HTML5 promises to change all that. We might have to say farewell to the X after all these years. Cue the dropping jaws and shocked expressions. Evidently, XHTML had not taken as strong a hold as we had thought. The standard is now revisiting its roots.

Lesson Learned
Is the lesson here never to give up on the source mindset? Or that the original will persevere in the end? Or better yet, that we should learn to move forward without putting all our eggs in one basket? If we learn that, we will have learned something valuable from this detour.

What our Friends and Followers Said

• The end of XHTML.
• Leaving the XHTML path (HTML5).
• HTML5 form validation. Or rather HTML5 itself.

Bargain Bin

“No one goes bargain hunting for design and programming. Quality always wins out over cheap and quick… right?”

Apparently not. This is another of those dynamic and well populated fields that many people never expected to face. Lo and behold, as in almost every other business market out there nowadays, you will come across people who want bargain-bin pricing from their designers and developers. Some even expect bells and whistles with their bare-bones pricing.

When the economy nosedived a few years back, many people could no longer afford top-shelf design and development. This sad truth, coupled with the slice of the public that undervalues the contributions of these professionals, opened a segment of the market that not only tolerates this undercutting but practically encourages it. Bargain-bin services have cropped up all over the landscape to capitalize on a demographic that is in crisis and, for lack of a better word, cheap.

Lesson Learned
The lesson here is obvious, though perhaps not to those who were caught off guard by this trend. There will always be people who undervalue work that they themselves cannot do, either because they do not really understand what is involved in the process or because they are just dismissive. And there will always be those among us who are willing to satisfy these demands to turn a profit.

What our Friends and Followers Said

• That there are people out there willing to do it so cheaply.
• Those free downloadable templates! Now anybody can just get a nicely designed template, eliminating the need for a custom Web designer.
• Build-your-own-website-for-free website services. People will simply click, drag and add content, and they now have their own website!

Apple vs. Flash

“This idea of community will steer the market, and collaboration between the major players will be the way forward, right?”

Not if Apple has anything to say about it. Talk about shockwaves: many of us never saw Apple’s battle with Flash coming. Potentially deep-sixing a major player on the Web before its prime was a bold move. The field of battle has become anything but friendly as both houses make their play to shape the future of the Web.

Flash has long been a favorite of many designers and developers, while being disliked by just as many. So, it was inevitable that the day would come when we would have to choose whether to commit to or abandon this technology. That day came sooner than we expected; once Apple dominated the mobile Web and app market and turned on Adobe. Flash is not supported on the iPad or iPhone, to the chagrin of some critics, and Steve Jobs made some rather unflattering statements about Flash’s stability and usefulness in the wake of HTML5.

Lesson Learned
The market can change unexpectedly when its leaders suddenly decide to turn the tables. Expect the unexpected is particularly apt here. As one company gains dominance in a market segment, it can effectively twist and turn us however it likes.

What our Friends and Followers Said

• Flash going away.
• Apple’s failure to support Flash on iPhone/iPad.
• The death of Flash.
• Adobe and Apple hating each other!
• Apple not adopting Flash!
• Steve Jobs saying ‘No’ to Flash.

Jumping on JavaScript

“Oh, please. JavaScript is a flashy fad. Give it time; it’ll fade into the ether.”

A fad it is not. In fact, as pointed out by one of our social media friends quoted below, JavaScript has become so prominent in so many applications both on and off the Web that it has become a near necessity. For years, it has been enhancing the experience of millions of users, creating a more dynamic Web.

In the beginning, some designers and developers saw little use for this technology beyond a bit of dazzling. Others saw its raw potential and took the reigns, working hard to elevate our experience of the Web and beyond, and making JavaScript a go-to language for so many developers.

Lesson Learned
In discounting JavaScript so quickly, perhaps we should learn to be not so hasty in judging the usefulness of every new tool that comes along. We should instead devote adequate time to examining the technology and exploring its potential applications.

What our Friends and Followers Said

• JavaScript becoming essential. I ignored it for years, thinking it was just good for flashy effects.
• The rise of JavaScript.
• Server-side JavaScript.

The Persistence of jQuery

“JavaScript is a complicated language, and we just have to accept that in order to use it. There’s no getting around it.”

Well, that argument might have held up until 2006. But then one tool hit the scene to change all that. jQuery arrived and sent waves rippling through the community. Suddenly, this cross-browser JavaScript library was barreling through the ranks to become the most popular library.

jQuery didn’t take long to cement its status as number one. (Image credit)

In a matter of years, jQuery was created and used on nearly a third of the most trafficked websites. Clearly, there was no stopping it. Opening doors for developers in so many areas, jQuery became another one of those wonderful gifts to the community. Couple that with its open-source licensing, and it is easy to see how it has scaled such heights in so short a time.

Lesson Learned
Looking at the ingenuity of those responsible for the success of jQuery, we can draw a lesson about how we as a community can come together to build better access to popular languages, such as JavaScript. Never underestimate our desire to cut out as many steps from a process as possible and make life easier for ourselves — not to mention the momentum such efforts can generate.

What our Friends and Followers Said

• jQuery to an extent.
• The possibilities! Thanks to jQuery and the brilliant minds behind it.
• jQuery.

An Animated CSS

“CSS is impressive, to be sure, but it’s all about styling. Leave the animation to JavaScript!”

Well, not so much anymore. Since about 2007, Webkit devotees and others have been developing the means to enable elemental animations via CSS. And with CSS3, what many in the community thought would remain a dream is becoming a reality.

CSS is a powerful and popular language for styling websites, and no one ever doubted its adaptability, but the emergence of an animation module still surprised a few of us. Despite the crude animations generated in the early days of CSS, these more fluid JavaScript-like transitions are still quite an interesting development. Another shining example of the leaps and bounds by which the design and development community grows, ever moving forward.

Lesson Learned
Any new lessons we can learn from this? Not really, other than touching on some of the ideas already discussed. Here again, we see that we cannot underestimate the inventiveness of people in this industry. It it one of the main reasons for the dynamism and growth that have brought such stability and scope to the market.

What our Friends and Followers Said

• CSS3 animation.
• CSS transitions. But oh, what a joy they are!
• CSS3 animation!

More From our Friends and Followers

Before turning the discussion over to you in the comments section, we wanted to share a few more comments from our friends and followers about surprises that caught them off guard. Thanks again to all of those who participated in this dialogue and to all those about to contribute!

• Photoshop CS5 Content Aware.
• The death of the Web.
• Chrome was a complete shock when it got released. Really don’t know how they kept it so quiet.
• Clients from hell.
• 1. Google doing Web fonts. 2. How easy they are to implement!
• Flash actually being used.
• The enjoyment I get from building shifty out-of-date-code HTML email campaigns. Seriously. A/B testing them and seeing an increase in conversions is awesome.
• Wait… you’re serious??
• Custom-colored scroll bars are not so hot anymore.
• In-browser location detection.
• The number of “professional” Web designers who can barely string together some HTML/CSS.
• Seeing websites in 2010 that are still being made with HTML tables… Argh!

Related Posts

• The Current State of Web Design: Trends 2010
  Offers a look at where we are in the field today.
• The Web Design Community Offers Advice to Beginners
  Another great post that looks at some tips from our friends and followers.

(al)(ik)

  

By Jeremy Davis

It’s been said that the key to a civilization’s success is mastery of the food system. Unless a group of people can effectively control the basic needs for survival, they will never achieve greatness. Likewise, before CSS skills can be expanded to an advanced level, the basics must become instinct to any CSS coder. Develop these habits and you lay a solid foundation to apply advanced CSS techniques.

1. Use a Reset Stylesheet

This habit (along with a few others) is one frequently mentioned as a CSS best practice. The goal of a reset stylesheet is to reduce inconsistencies among browsers by explicitly setting styles to most of the HTML elements. This ensures that things like font sizes and line heights all render the same on different browsers. Also, the reset clears the default paddings/margins that some browsers have.

Not only does having a reset stylesheet account for browser inconsistencies, it’s good to use them to give each site a known foundation when coding. Keeping the foundation the same for all sites will speed along the development.

The reset from Eric Meyer and the Yahoo reset are the most comment resets used. Futher customizing one of those resets might be needed to accomodate for specific website needs.

2. Use CSS Shorthand

Using shorthand CSS declarations will lead to quicker coding and debugging. It might also save some errors from mistyping multiple declarations.

When a rule has multiple similiar declarations for a single selector, such as

border-top: 5px;
border-right: 10px;
border-bottom: 15px;
border-left: 20px;

they can be combined into one line, such as

border: 5px 10px 15px 20px;

The trick to remember which position controls which direction is TRouBLe: Top, Right, Bottom, Left.

The main declarations that use shorthand for are border, margin, padding and background.

Bonus: Hex Shortcut

Six hexidecimal digits used for CSS colors can be condensed down to three if they are grouped in identical pairs.

For example, #FFFFFF can be written #FFF, or #990055 can be written #905, but #F091A4 cannot be shortened since the pairs aren’t identical.

3. Document Your CSS … As You Go

Going back and commenting code is one of those quixotic things that most fool themselves into thinking they will do. Get in the habit of making good commenting practices while writing styles.

To add a comment in CSS it’s as simple as putting /* Your Comment Here */

Things to comment

Stylesheet Header
This comment briefly states what the stylesheet is for, who wrote it and when. A table of contents might also be needed for larger stylesheets.

Code sections
Put a comment header above large portions of code for things like global styles, headers, sidebars, main content and footer to help delineate them.

For example,

/****************************************/
/*             Sidebar                  */
/****************************************/

Problem declarations
Put comments next to declarations that have know issues in certain browsers, such as

input[type=textbox] /* IE6 Problem */ 

Dependent declarations
Put comments next to things that are dependant on other areas. So if there is a fixed height on a declaration that might need to be adjusted if the content changes, put a small comment next to it, stating what conditions must happen before it will need to adjust.

4. Add a Color Legend

When working on smaller CSS files, keeping track of color hex values isn’t too hard. But as stylesheets start getting 2000+ lines it becomes significantly harder to keep track of which value is for which color. Adding a color legend helps ensure that the wrong colors don’t get used.

The best place for the legend is up in the stylesheet header, underneath all of the other documention.

For example,

/*
/* light blue: #4595be
/* dark blue: #367595
/* special link red: #9F1212
********************************/

5. Remember Where Absolutely Positioned Elements are Relative To

Positioning elements absolutely is something that tends to frighten some CSS beginners, but there is one principle to remember with this declaration that solves most of the trouble.

When a selector has a postition: absolute declaration the webpage is treated like a xy grid. By default, the 0,0 position of the grid is at the very top and left position on the webpage. So by moving the absolutely positioned element to the left 10 pixels and from the top 20 pixels, it’s starting from the top left of the webpage, regardless of where the element sits in the HTML.

That is not usually the desired functionality. What usually is desired is to have the element positioned relative to the selector’s parent or another containing element. To do that simply add position: relative to the desired relative container element. Doing that remaps the 0,0 position on the xy grid from the top of the webpage to the top left of the containing element.

The example below demonstrates how the red box gets positioned differenlty depending on whether the blue container has position: relative or not.

Remembering position: relative should ease most frustrations caused by basic absolute positioning.

6. Avoid Using CSS Hacks

Unfortunately for web designers, there are bugs in some browsers, mainly IE6 and IE7, that cause some styles not to display as they are supposed to in accordance with CSS specifications. In order to combate these inconsistencies, some people write erroneous declarations, hacks, that take advantage of these browser flaws in order to do things, such as hide styles from particular browsers

There are many fancifully named hacks for all the equally fancifully named CSS bugs, but using them can cause problems. Not only do hacks clutter the stylesheet with oddball declarations, it also keeps the stylesheet from validating.

Also, hacks tend to introduce more problems overtime as new browsers are released.

Instead, use conditional stylesheets to target specific browsers.

7. Use Margins When Styling Layouts

Although this habit isn’t one often mentioned, it’s one that helps maintain a consistent layout among different browsers without having to add more declarations to get them all in sync.

The main idea is that instead of adding padding to a container element, add margin to the container’s children to get the same result.

So, instead of

#main-content { padding-left: 10px }

add

#main-content { }
#main-content #left-column { margin-left: 10px }

Although there is nothing particularly wrong with using padding, in my years of building websites I have had consistenly fewer cross-browser problems when I stick with styling layouts with margin.

8. Contain Floats

When floating an element, add overflow: hidden to its containing element.

A common example is,

ul {
	overflow: hidden;
}

ul li {
	float: left;
}

If the container didn’t have overflow:hidden issues arise when setting margins or borders to it. This also clears the float so that elements below it can flow properly in the HTML structure.

Some suggest doing the clear in HTML by adding

<div style="clear:both"></div>

below the floated element, but doing that defeats the purpose of separating a webpage’s style and structure.

It’s also more time consuming than adding overflow: hidden.

9. Add display: inline To Floated Elements

This habit is one that fixes a IE6 problem called the double-margin bug without having to use a CSS hack. On floated elements, IE6 doubles the margin of the element. So a margin of 10px becomes 20px.

It’s easy to imagine the havoc an error like this can cause to a layout. Some of the floated items either become hidden or they push everything below it down.

Even though IE6 is on its way out and a majority of designers aren’t taking the time to get sites looking perfect in IE6, this is a quick habit to learn to make a site better viewed for those poor people still on IE6.

Just get in the habit of adding

display: inline /* IE6 Problem */

every time something is floated.

10. Get Comfortable with Sprites

Sprites mask the viewable space of a larger image, then when an event occurs, typically a :hover event, the viewable space of the image changes to show another portion of the image.

Not only are sprites more efficient by requiring fewer HTTP calls for images, but they add more polish to website designs. Most often sprites are used to create stylish navigation menus.

Using sprites in a design might take a bit of trial and error to get the hang of it, but it’s such a valuable skill to have that it’s worth the effort required to get the concept down

Further Reading

• The Mystery of CSS Sprites: Techniques, Tools and Tutorials

11. Have a Consistent File Structure

Take the time to create and organize all of the typical files used for a typcial website development project. Create one master template file structure and copy/paste it every time a website needs to be built.

My organization is as follows:

The ‘Website Name’ folder gets renamed to the website name that I’m about to begin work on. That folder contains all of my HTML files for the site, along with the ‘assets’ and ‘styles’ folders.

The ‘assets’ folder typically holds larger document files like PDFs that might need to be downloaded from the site. I also keep editible versions of images I’m using, such as PSDs or Fireworks PNGs, in case I need to modify something.

The ‘styles’ folder is broken into the three subfolders: css, images, javascript.

• css – holds all the css files, such as reset.css, layout.css and main.css
• images – holds all the images for the site
• javascript – holds javascript libraries, plugins and main.js

I use this file structure for most of my webpages and because I’m consistent I know exactly what paths to use when needing to do things, such as put a background image in my CSS.

Some might disagree with my structure, such as having javascript under ‘styles’, but the main point is find a file organization that works for you and get in the habit of consistently using it to make coding faster and more accurate.

12. Indent Your Styles

Adding indentation to a stylesheet can keep complicated stylesheets looking clean and make finding areas of code easier. Add indents to show a parent/child hierarchy.

13. Use Pixels for Font Sizes, Not Ems

This habit is usually a hot button topic with most people having a strong opinion for either fixed font sizes or relative ones.

In hopes to curtail a probably backlack, let me plainly state, “Using a fixed font size, like pixels, leads to fewer CSS frustrations than using a relative font size, such as ems or %.”

In his article Coding Like It’s 1999, Cameron Moll petitions for pixels and says,

The burden of calculating relative units throughout a CSS document is replaced by the convenience of absolute units

Relative font sizes were a good idea a few years ago so that people with different browser font sizes could have a site’s content adjust to their browser’s font size. But now most browsers can zoom and adjust more intelligently so a relative measurement isn’t neeed for that purpose anymore.

Relative measurement becomes a problem because the font sizes inherit the parent’s measurement as it cascades down.

For example, body { font-size: 62.5% } makes a font-size: 1em declaration equal to 10px.

If #blog-content needs to be 14px, the rule is

#blog-content { font-size: 1.4em; }

Now the if the H3 tag inside of #blog-content needs to be 20 pixels, one might assume

#blog-content { font-size: 1.4em; }
#blog-content h3 { font-size: 2.0em }

would be right, but that’s where the relativity problem occurs. Because that 2.0em is now relative to the 1.4em specified on #blog-content, so it is actually font size of 28px.

Keeping up with relative font sizing can get confusing. Stick to using a fixed unit of measure for font sizes to prevent undue troubles.

14. Limit Pseudo Classes to Anchor Tags

Most modern browsers don’t struggle with this problem, but it is an important one to remember if a website still needs to be viewable on older browsers, such as IE6.

The problem is that older browsers only recognize pseduo classes, like :hover, on the anchor tag element, a.

So something like

#header ul li:hover { background-color: #900 }

won’t work in IE6.

This issue could cause real functionality problems, if things like dropdown menus are to appear based on the li:hover event. People viewing the site on IE6 would never see the dropdown and thus, might have a hard time navigating the site.

A solution is to use jQuery for those types of effects.

15. Avoid Selector Issues

Be sure selectors have enough weight to prevent unwanted cascades.

The way the browser determines what style is to be applied to an element with multiple declarations is determined by its specificity

The more specified a CSS selector is the more weight that rule carries. The rule with the heaviest weight is the one that gets applied to the element

If some rules are being applied as desired, check to see if the problem is with its specificity. It might be as simple of a solution as adding an #id-name to the beginning of the selector.

Use element selectors when possible.

Instead of

main-content .main-header

use

#main-content h1

Be careful when grouping selectors.

Grouping selectors can be a time-saving method when dealing with non-relative declarations, like

.main-content div, .main-content p {
	color: #000;
}

But it can cause trouble when using a relative declaration, such as

.main-content div, .main-content p {
	line-height: 1.3em;
}

Because now all of the text within the div gets a 1.3em line-height applied to it, but now any p elements within a div get an additional 1.3em added to them.

Also, sometimes grouping multiple selectors can add more weight to them than is desired, which in turns causes other desired styles not to take place.

* Write Better HTML

Bonus Tip! A great way to become a better CSS coder is to improve your HTML coding.

Avoid div-itis by wrapping divs around everything. Learn to style the elements with element selectors, such as h1, ul and p.

Use a proper DOCTYPE to avoid sending browsers into quirks mode.

Try to code as much HTML as possible before adding any styles. Doing this brings more thought to the overall structure of the webpage and causes syntax problems to be spotted and fixed instead of covering them up with styles.

Further Resources

Here are some articles that further explain some of the basics CSS principles mentioned here.

• 7 Principles of Clean and Optimized CSS Code
• The Mystery of CSS Sprites: Techniques, Tools and Tutorials
• Mastering CSS Coding: Getting Started
• Powerful CSS Techniques for Effective Coding
• 53 CSS Techniques You Couldn’t Live Without

About the author

Jeremy Davis is a recent college graduate working as a designer and front-end developer for a public school system. He (in)frequently blogs about web design, web development and technology on his personal blog. He is also *currently accepting more Twitter followers.

*offer ends soon, act fast.

  

By Louis Lazaris

The web form has been one of the most discussed elements in web design for more than ten years now. We can’t help it. Call-to-action functionality often leads users to a form; purchases are made using forms; users register or subscribe using forms — the uses for forms are endless.

While it is fairly easy to slap together a form in HTML, it’s not as easy to code, style, and design your form in a manner that makes it usable and accessible to the majority of users. Since forms play such a large role in website conversions and success rates, the tips below, as well as the resources provided at the end of this article, should prove valuable for developers creating and coding web forms.

Two-Column vs. One

This decision will generally depend on the content of the form, but it’s often preferable to avoid a two-column layout if the form is fairly simple.

Below is a good example of a simple form that places each label above its related form element.

What are the benefits to this type of form layout, as opposed to a two-column form? First, the form labels have plenty of space to allow for future changes to the text inside them. A two-column form could be limited in this regard, and might require the entire form to be restructured if changes are made. Another benefit is that the form is not as cluttered looking, having plenty of whitespace in the label areas, so it’s easy to read and easy to associate the labels with the fields. Additionally, the background color given to each label/field pairing makes the form more visually inviting.

By contrast, look at the two-column form below:

Especially because of the left-aligned text and lack of color, this form doesn’t have the same clean, visual effect as the previous example. In fact, the vertical space between the labels and the fields is somewhat distracting, giving the sense of multiple entities, when in fact a simple form like this should visually be presented as one grouped entity.

It’s not impossible, however to achieve a clean, organized look with a two-column layout, as shown by the example below from Chapters Indigo Books:

So, although there are no definite rules for the general layout of your form, effective guidelines include avoiding a two-column layout for simple forms, and aligning the text labels right if a two-column layout is used.

Use Inline Form Validation

Recently Luke Wroblewski wrote about the effectiveness of inline form validation on A List Apart. To quote directly from that article:

Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation.

jQuery Inline Form Validation, Because Validation is a Mess is a step-by-step tutorial describing how to use jQuery to add inline validation to a lengthy form.

Really Easy Field Validation

Dexagogo provides a simple script that can be used to add inline validation to your forms. The demo example is not the prettiest, but of course it can be customized to suit your needs. The script uses Scriptaculous for the fade-in effect.

Group Related Fields

With a lengthy form, you’ll be limited as to what you can do to improve its usability, but grouping related fields together to divide the form into manageable visual components will make the form a little less intimidating. Thus, the form will be perceived to be easier to fill out, even though it will probably take about the same amount of time as a form that has no grouping of fields.

To group related fields, use <fieldset> and the optional <legend> element, as shown in the code below:

<form id="form" action="register.php" method="post">

	<fieldset>
		<legend>Basic Info</legend>
		<div>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		</div>
		<label for="password">Password:</label>
		<input type="text" name="password" id="password" />
		<div>
		<label for="password-confirm">Confirm Password:</label>
		<input type="text" name="password-confirm" id="password-confirm" />
		</div>
	</fieldset>

	<fieldset>
		<legend>Address</legend>
		<label for="address">Address:</label>
		<input type="text" name="address" id="address" />

		<label for="address2">Address (cont'd):</label>
		<input type="text" name="address2" id="address2" />

		<label for="zip">Zip/Postal:</label>
		<input type="text" name="zip" id="zip" />

		<label for="city">City:</label>
		<input type="text" name="city" id="city" />

		<label for="country">Country:</label>
		<input type="text" name="country" id="country" />

	</fieldset>

</form>

The <fieldset> element by default has a border, which can be changed, and is often removed in a CSS reset. Below is an example of a single form that is divided into two sections using <fieldset> and <legend> elements:

Cosmicsoda Registration Form

Unfortunately, the display of the border on the <fieldset> is not the same across all browsers, so it is usually best to disable the border in your stylesheet and create a custom border by some other means. This will also affect the look of the <legend> element, so it’s rare to see the use of these two elements nowadays. But the <fieldset> can still be used to group elements, and custom borders and headings can be included to provide the same basic effect. The <fieldset> and <legend> elements also have the added benefit of contributing to a form’s accessibility.

Clearly Indicate Required Fields

It’s common to indicate required fields by means of the asterisk symbol (*) in a different color than the rest of the text, so the required indicator stands out. Although most sites nowadays include this indicator, some still fail to use it properly.

The explanatory text that describes the purpose of the asterisk should be placed immediately above the form that is to be filled out, so the users see it before they begin filling it out. Some sites have used the asterisk character somewhat like a footnote indicator, placing the description of the asterisk below the form. The example below from the Elderluxe contact page demonstrates this poor placement of the the text that explains the meaning of the asterisk:

Elderluxe Contact Form

The example above has two problems: the asterisks are the same color as the rest of the text, and the explanation of the asterisk is near the bottom of the form. In many instances, asterisks alone would be enough, without any explanation, but if your target audience is not as computer-savvy, you will likely want to include at the top of the form a brief description of what the asterisk means.

The example below from Office Depot’s registration page demonstrates a properly-placed asterisk description:

Office Depot Registration Form

Although the example form above does have problems (left aligned text, small type, little use of whitespace), it clearly indicates required fields and explains the meaning of the asterisk before the user begins filling it out. This is especially important in this example, since the first three fields are not required, thus the user can safely skip them.

Fancier Checkboxes, Radio Buttons, and Select Elements

Forms can look awfully dull, especially since the styling of <select> elements, checkboxes, and radio buttons is limited in most browsers, and it is impossible to use CSS alone to style those elements to look exactly the same in every browser. Fortunately, there are a number of JavaScript library plugins and code that allow developers to include fancier, cross-browser form elements that degrade gracefully.

jQuery Checkbox allows you to insert custom checkboxes and radio buttons into your forms. I don’t particularly care for the look of the radio buttons in this case (they look nothing like radio buttons), but it’s one option to consider.

jQuery Image Combobox is a fully skinnable image-based replacement for the browser’s usually-ugly <select> element.

Giva Labs mcDropdown jQuery Plug-in is an intuitive, keyboard-accessible, easy-to-implement replacement for a typical <select> element that allows for nested data.

Display a Hint When a Field Gets Focus

Complex forms with many different fields can be easier for the user to fill out if some help text is given. Of course, you don’t want to overwhelm the user with one or more paragraphs of text above the form explaining what the fields are for.

As a simple alternative, you can write some JavaScript (or use a customizable plugin) that will display a custom tooltip-style message to explain form elements that might be confusing, or that require a certain type of input (for example, a username that only allows letters or numbers and must have at least 6 characters).

jQuery Input Floating Hint Box is a simple plugin that displays a fully-customizable floating hint when a field gets focus.

DHTML Goodies Form Field Tooltip is another variation of the form field helper text that displays the helper text based on what is entered in the form field’s title attribute.

Be Generous with Whitespace

As mentioned earlier, forms can look ugly and cluttered if the elements in the form are not displayed in a clean, usable manner. We generally think of the use of whitespace in our overall site design, but the same principle can be applied within a form, even down to the smallest details.

You can improve a form’s design by adding appropriate amounts of space around field elements, giving the elements themselves a larger and more usable size, and also allowing plenty of space inside text fields by using padding in your CSS. For example, try typing some text into the two fields below.

With just a small difference in size and padding, the second input field has a more usable feel. When multiple text fields appear in the same form, this can make quite a difference in how the overall experience is perceived, even though technically it might not make a whole lot of difference as far as how long it takes the user to fill it out.

It also helps to allow text fields to have plenty of visible characters. A name field especially should have plenty of space to allow for longer names. Overflow of characters will start pushing the text out of view, so it’s best to have enough space to accommodate longer names so that the user can more easily spot mistakes. The example field below demonstrates how a longer name would be cut off.

A text field that is similar in size to the ones in the previous example would be more appropriate and would allow for longer input to be entered without the risk of cutting anything off. The same principle would apply to a search box that may potentially receive long queries as input.

Make Your Forms Accessible

The topic of accessible forms could easily encompass an entire article and much more, but here are just a few tips to ensure your forms are more accessible and usable to a diverse audience.

• Use the title attribute for inputs, to assist those using screen readers
• If a label doesn’t wrap around the field it is associated with, use a for attribute that matches the accompanying field’s id
• Set a tab order using the tabindex attribute on each element
• For the tab order, increment the tab numbers by large amounts (e.g. “10, 20, 30…” instead of “1, 2, 3…”), to allow for later additions that don’t require rewriting all the tab indexes
• For radio buttons and checkboxes, put the label after the associated element so screen readers read the item first and the word “checkbox” or “radio button” second
• Use the <optgroup> tag to group <select> items
• Use the accesskey attribute on form elements, to allow keyboard access

Further Reading

• Creating Accessible Forms
• Beautiful Forms – Design, Style, & make it work with PHP & Ajax
• HTML Forms and Input on W3Schools
• 25 Web Form Optimization Tips
• Accessible Forms
• Web Form Design: Modern Solutions and Creative Ideas