Articles by ‘Jake Rocheleau’

30 Best Free Calendar & Datepicker jQuery Plugins

Some might assume that an Internet loaded with free code would breed indolence. Yet it seems developers are willing to contribute their help to projects more than ever before. JavaScript libraries are a microcosm of the larger open source community – specifically jQuery with its ever-growing popularity and easy learning curve.

One such area of broadened potential would be jQuery-based calendars for websites. Although date & calendar interfaces have sparse usage, they come in handy for very specific circumstances. And when building a site that requires this type of interface you’ll be happy to know there are dozens of open source plugins available.

I’ve catalogued the 30 best free jQuery plugins that offer datetime functionality. Some are more developed than others and each plugin has its own set of benefits. The best part about using open source code is that it’s easy to customize for your own purpose. So peruse through this collection and take a look at any plugins which pique your curiosity…

Read More »

Ultimate Guide to HTTP Status Codes and Server Error Messages

Most of us are familiar with the gut-wrenching, nerve-wracking error codes like 404 and 500. But did you know that not all HTTP status codes and server error messages are mean and scary? Although some of these numbers could appear in the tech remake of Nightmare on Elm Street, others should evoke a sense of excitement and jubilation! But these “good” status codes are rarely visible to the average Internet user.

So this leads us to one final question: How do all these status codes work?

In this guide you’ll find all the necessary information to understand the concepts behind HTTP status code messages. Whether you’re a designer, developer, or just a curious Internet fanatic, this information should be useful to people of all backgrounds. It is my goal to clarify the process of website requests and how the web server passes information to your machine…

Read More »

Ultimate Guide to Color Theory for Designers

If a picture is worth 1000 words, then how much can we say about an interface? Well it turns out quite a lot, and there’s often many different topics worthy of discussion. One such topic is color theory which comprises the basic techniques of picking a matching color series.

This guide explores the subject of color relative to web and graphic design. The information is meant to be introductory while also getting into more applicable topics for digital designers. Advanced color theory is something best learned through practice rather than theory, but in order to improve, you have to start somewhere. Along with helpful tips and ideas for designing with color, you’ll also find plenty of valuable resources interspersed throughout the article…

Read More »

Ultimate Guide to Responsive Web Design

When I think of responsive web design I think of Transformers: Websites in Disguise. With one set of code you can build a website layout that runs flexibly from desktop to mobile. But instead of fighting off Decepticons we’re fighting an even worse antagonist known as bad design.

Responsive web design is still a fairly new concept which has grown in popularity because it fills a void. Back when CRTs were crushing our desks and cryptic dial-up tones connected us to cyberspace it was a pleasure just to access the Internet. Design was important but didn’t have a prodigious overzealous support group…

Read More »

The Ultimate Guide to Parallax Scrolling: Best Practices, Examples and Tutorials

The idea of parallax design is simply an awareness of movement. More specifically, the word ‘parallax’ is used to describe the perception of distance between objects while moving along a line of sight. For example the objects nearest to you in space will seem to move quicker and more dynamically than “background” objects. So parallax is just a measurement of the difference in position between 2 points from the viewer’s perspective. Since the objects aren’t really moving it’s just a type of illusion like 2D animation.

One of the simplest ways to understand design is through example. Let’s take a glimpse into specific trends used to create parallax design features in website layouts.

Read More »

Designing a Responsive Navigation Your Users Will Love

navigation_example

The process of creating a website should always start with general ideas. These turn into wireframes or low-fidelity mockups to give the designer a sense of direction. It’s fairly straightforward but the creative process requires a large visual library of existing layouts to understand which interfaces are usable and well-designed. Navigation is a huge part of web design and deserves a lot more coverage.

Responsive web design has slightly changed this creative process over recent years. Now designers are much more focused on grids and fluidity. Accessible responsive layouts should be flexible and naturally update to any screen size. Nav menus can be tricky because shortening a collection of links will often require completely revamping the UI.

In this post I’d like to cover some general tips and guidelines to help designers work with their own ideas for responsive navigation. The brainstorming stage is pivotal to every other stage which comes afterwards. Once you have a workable concept it becomes easier to envision the full design and composition of a responsive website…

Read More »

How To Wireframe iOS App Interfaces using Photoshop

fireside-ember-app-wireframes

Much like building a website, mobile app design is a very detailed procedure. Although it may not be sociological rocket surgery(some might say otherwise) but even the best app designers will spend years studying the craft and still have a lot to learn. One of the earlier stages in both website & mobile app design is called wireframing.

This is a bare-bones template of the layout which includes the most important page elements. Content should be kept to a minimum used sparingly on an as-needed basis. Wireframing pushes a direct focus onto the experience – basically how a user will interact with the application. Many designers prefer to draw these by hand but there’s always an option to design wireframes using graphics software.

In this post I’d like to offer an introductory guide to wireframing for iOS apps, and specifically how this can be accomplished using Adobe Photoshop. Other programs like GIMP or Sketch also work just fine. The goal would be to create a layered wireframe which can be edited and rearranged to fit a working mobile app prototype.

Read More »

Popular Design Trends for Responsive Navigation

The mobile responsive website layout has become a very common apparatus for designers. Building a layout is never easy and each website generally requires a unique solution. Responsive design incorporates both desktop and mobile devices to provide a uniform browsing experience. I have seen a lot of fantastic examples showcasing responsive web design trends.

In this article I want to focus particularly on navigation menus. To build a responsive navigation you need a technique for handling the resize down to lower resolutions, or consequentially handling the expansion for wider desktop monitors. Check out these various techniques which are my choices following the most popular ideas for responsive navigation. There are obviously some other solutions out there, but this collection should give you ideas for getting started with your own responsive designs.

Block-Level Menu Links

Consider navigation menus which are using single box-style links in an orderly fashion. As you resize the window, these boxes either need to shrink or re-organize themselves. Block-level responsive menus are those which are designed to always keep the links showing in various positions on the page.

william csete portfolio website layout inspiration

Read More »

How To Code Unique Avatar Photo Styles with CSS3

The popularity of social networking has converted a lot of websites to be more user-centric. This means you can find loads of new profile features and direct-connect OAuth apps through Twitter, Facebook, Tumblr, Pinterest, and others. Typically the profile photo is a common facet to each profile webpage design. Photos or avatars can be uploaded by the user, and sometimes pulled directly from their other accounts online.

In this tutorial I want to demonstrate 5 specific user avatar styles with CSS3. You may utilize any of these features on your own website or startup idea. Design trends have been advancing where new CSS properties are becoming much more widely supported. This means frontend developers can start really pushing the boundaries of how we style media in webpages. The user experience of a profile page is definitely a good place to start.

How To Code Unique Avatar Photo Styles with CSS3

Read More »

Displaying JavaScript Modal Windows using Bootstrap

It is true that Bootstrap has grown to include supporters from all around the globe. As there are plans for a Bootstrap 3 release I want to go into detail for one topic in particular. The Bootstrap JavaScript effects are not always useful to developers, so JS files are not necessary for running the whole framework. But they do provide quicker features to define common UI elements without having to reinvent the wheel.

I want to focus this tutorial on using modal windows within a typical webpage. We just need to include two files out of the Bootstrap framework. And the JS codes are not overly complicated to understand. My example demo allows users to dynamically update the background color, so this does admittedly have some more sample JS then you will need. But it is an excellent introduction to adding these brief components into any ordinary website.

Displaying JavaScript Modal Windows using Bootstrap

Read More »
Page 1 of 3123