Improving User Experience with Modern Web Development Techniques

We are always looking for new ways to improve user experience on our websites and landing pages, so keeping an eye out for new technologies to improve what we do is always top of mind. Below is a list of some new, and some not so new, techniques that we find work really well for us.

Media Queries

First and foremost is the Media Query. Although certainly not the newest Web development technique — it’s definitely one of the best. A Media Query is a CSS3 technique that allows specific CSS properties to only be applied to an element when a certain condition is met. These conditions are defined by the screen width of your browser and it allows websites to respond and display content in the best possible layout for the screen width you are using while viewing the website.

Searchable Select Boxes

One issue we run into a lot is displaying long lists of items within select boxes. Country lists are often a good example of this. If a user does not see his country at the top of the list, he could have to scroll through a list of hundreds of items just to find the one he needs at the bottom of the list. Well, you no longer have to worry about that with some of the cool jQuery plugins available such as Selectize that allow you to turn a long list into a searchable list. You can still click on the list and scroll as usual, only now, you can also start typing and the list will automatically whittle down the options to just the ones that match your search text. This is a great way for letting users quickly find what they are looking for, without a lot of hassle.

Drag and Drop Tools

Some of the newer drag-and-drop tools are great to have in the toolbox when it comes to online application development. The ability to drag and drop list items into specific orders and to be able to indent and outdent them as necessary makes certain tasks a breeze and quite frankly, fun to do. A current favorite of ours is Nestable — another great tool for drag-and-drop functionality for file uploading. Forget the old days of clicking the browse button and having to find the file on your computer. Now you can simply drag any file straight from your desktop to the browser and your job is done. Tools like Dropzone make this functionality easy to set up, providing a cool user interface for the user that works well in modern browsers as well as older ones.

Fixed Headers and Footers

Not the newest design technique — but one that has become more and more popular over the past few years — is the concept of fixed position headers and footers on websites. This just means that when you scroll down the page, the top navigation will follow the user down the page giving him quick access to links to your website’s interior pages. This is very helpful on newer sites that have typically become much longer than sites five years ago. Especially convenient are the headers that shrink as you scroll down the page so they are not taking a lot of the page’s vertical real estate. Aside from the fixed header, another useful design technique to apply is a fixed footer bar. This is a good way to keep a prominent call to action (contact us button, phone number, email signup form, etc.) in front of the user at all times, no matter his position on the page. It’s also a very unobtrusive way to place these elements on a page — as they don’t muddy the page layout with additional content.

Screen Recording Tracking Code

One great way we have found to improve the user experience of websites we’ve built is to install a screen recording code on all pages of the site such as Inspectlet. You’d be amazed at what you can find after watching hundreds of real users navigate your site and try to find what they need. Things you never thought users would struggle with often turn out to be the things they do struggle with (and vice versa).

We’ve learned a lot about how to improve the user experience of our website with this handy tool, and I’m sure you will as well.