Authors ›
Jake Rocheleau

Jake Rocheleau

Jake is a writer and user experience designer for both web & mobile. He has been publishing on the Internet for over 5 years writing tutorials on jQuery, CSS3, and PHP web applications. You may find out more information on his website or follow his recent tweets @jakerocheleau.

JavaScript / 17 Jun 2013

Create a Simple Autocomplete With HTML5 & jQuery

A quick Google search will yield plenty of handy autocomplete plugins — there’s even an option shared by jQuery UI which comes bundled with the library. However today I want to look into an alternative solution. The jQuery Autocomplete plugin released by DevBridge has the exact functionality that I find most appealing.

The styles will automatically highlight words as you are typing, and results appear in the dropdown menu at the bottom. This tutorial is a brief introduction to using the plugin by loading content from a JavaScript array. It is possible to load Ajax content from a backend file or from content out of the database, however for this tutorial it is easier to work with local data. Check out my sample demo to get an idea of what we are trying to build.

CSS / 6 Jun 2013

Building CSS3 Notification Boxes With Fade Animations

Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. I think alert messages are very commonplace, because the default JavaScript alert boxes tend to be pretty intrusive and poorly designed. This leads developers down a path to figure out which solutions would work out better for a more user-friendly interface.

For this tutorial I want to explain how we can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM. As a fun added feature, I have also included buttons where you may click to append a new alert box into the top of the page. Check out my sample demo to get a better idea of what we’ll be making.

Freebies / 4 Jun 2013

30+ Innovative New jQuery Plugins

Many web developers are jumping into the sea of open source code projects. New plugins and frameworks are released almost every day. And when you are busy at work it can be tough keeping up with all the newest releases.

In this showcase I have put together over 30 different jQuery plugins worth a mention to all web developers. Developing a website interface can be tough and certainly requires careful precision. Developing on top of any open source project means that you are not reinventing the wheel. Plus you’re not the only one left to catch bugs in the code. And since jQuery is one of the most stable JavaScript libraries available, these plugins often work hand-in-hand to provide a seamless user experience.

JavaScript / 3 Jun 2013

Create a Modal Window Login Form Effect Using jQuery

The hidden modal window technique is a great solution for dealing with interface elements which are not particularly necessary on the page. Social networks can use modal windows for private messages and forms which are only being used by members of the site. This is also true for blogs and magazines which have an author login page separate from the main website. Modal windows are much easier than creating new windows in JavaScript because everything is displayed in the same window using HTML markup already on the page.

I want to demonstrate how we can build a custom modal window based off the jQuery plugin leanModal. The plugin is completely open source & free to use under the MIT general license. I like this plugin more than others because it just gives us the “bare basics” without too much customization. This leaves room to update the modal window via CSS and still utilize some extra parameters in jQuery.

CSS / 7 May 2013

How to Code an Expanding HTML5/CSS3 Search Input Field

A common user interface style for Apple and WordPress has been the expanding search field. Whenever a user clicks to focus, the field will expand wider, then contracts when the user de-focuses. This technique has become popular because it saves room on your page when the search isn’t being used. But it also highlights the search field when it is in use, which catches the user’s attention and lets them know the website is responding.

In this tutorial I want to demonstrate two different methods for building an expanding search field. The first is using basic CSS3 transitions which are only supported in newer web browsers. This works great for simple designs, but there is no way to check if the user has entered data strictly via CSS. In the second field we will use JavaScript to expand, and then only shrink back if the user hasn’t entered any text. It is a small yet fascinating piece of UI which can blend nicely into any website project.

CSS / 1 May 2013

How to Build a Responsive Slide-Down Navigation Menu

After a long period of researching mobile responsive layouts, I’m spent quite a bit of time experimenting with various UI designs. One major hotspot on the page is often the website’s main navigation. Users want quick access to your content pages — and this will always be the case, either on a full monitor or a smaller mobile responsive screen.

For this tutorial I want to demonstrate how we can use a combination of CSS3 media queries along with some jQuery to manage a sliding navigation menu. The links will appear as normal on the frontend but drop into a hidden menu after resizing below 600px. Instead we see a little menu pull-down icon which will toggle open and closed on command.

CSS / 24 Apr 2013

Creating Content List Columns Using Entypo Font Icons

There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.

In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.

CSS / 8 Apr 2013

Helpful HTML Form Feedback With CSS3 Transitions

Designers may have noticed an ever-increasing use of CSS3 transition properties. Website interfaces have been dramatically improved with custom animation styles, all without the need for JavaScript (when used sensibly, of course!)

In this tutorial I want to demonstrate how we can build animation effects in HTML5 input fields. I’ll be designing a simple contact form with a couple of fields and a textarea. Using the CSS3 :valid pseudo class it is easier than ever to customize text inputs. Check out my live demo example to get an idea of what the final product looks like.

JavaScript / 20 Mar 2013

Simple Steps for Creating a Fixed Navigation Bar

When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.

In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!

CSS / 4 Mar 2013

Unique CSS3 Header Styles for Copyfitting Typography

All of the newer properties emerging from CSS3 specifications have been immensely helpful in constructing more advanced UI designs. Webpages have been seeing a dramatic overhaul in the methods used to build typical layout styles. Notably typography and buttons/form elements are seeing the largest makeover – and with more developers launching open source projects there appears to be no end in sight.

For this tutorial I want to demonstrate how we can build a few sample headings into a basic webpage. I am using mostly CSS3 effects on the top navigation bar, along with the typography in the page. All of these techniques should carry over into the newer standards-compliant web browsers. Plus there are so many various design techniques you may duplicate and apply into any project. Be sure and check out my live demo to get an idea of what we are trying to build!

Freebies / 12 Feb 2013

30 Brand New Creative VIP PSD & CSS Design Resources

Loads of new freebies and open source codes are placed online every day. Web & mobile designers can learn a lot by studying newer interface trends and design layouts. Creative VIP is one such website which publishes freebies and premium content. This is an excellent resource for designers who want to dig a bit deeper into constructing usable layouts for the web.

In this roundup I have put together 30 of the latest freebies from Creative VIP. You will find both PSDs and HTML/CSS codes mixed in with each other. Some resources actually offer both graphics and the code together! But no matter what items you’re looking for, this showcase is bound to have something cool.

CSS / 4 Feb 2013

Creating a CSS Thumbnail Grid With a Dynamic Flyout Menu

When presenting data in a grid you often lose the ability to include extra information. Aside from appending dynamic menus or hover effects there is very little room to include metadata on each item. I want to use this tutorial as a thought process into the user experience of image thumbnail grids.

We will create a small flyout menu holding additional information on the image. This includes the image name, original source URL, and author URL. The beauty of this example is that we will be creating the dynamic effect using only CSS3 properties. Mostly all standards-compliant browsers will support dynamic CSS3 animations and these look fantastic! But even without animations, the flyout content will still work properly and degrade naturally for an all-around enjoyable user experience.