Articles Archive

featured-sliding-nav-preview-demo

Code a Single-Page Sliding Website Layout With Fixed Navigation

preview single page sliding navigation tutorial howto

When constructing a simple webpage, it can often make sense to fit the content into a single layout rather than multiple pages. These single-page websites are beneficial when you have a small project or portfolio which needs some online presence. If you split up content into neat sections, then visitors might use a small sliding navigation to quickly advance along the page.

In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making.

September 4th, 2013 Posted in JavaScript
style-guide-lede

Do You Need a Style Guide?

style guide

It’s a simple question: Do you need a style guide? And it has a simple answer: Yes. Any brand, company, blog or webpage that wants to create and maintain consistency and a professional feel should have a style guide.

Style guides are a must for any publisher with multiple employees. This is especially important if more than one person will work on any brand elements (from the website to printed materials), and to ensure that transitions between employees are seamless in the eyes of users. Today, we take a look at well-documented style guide from MailChimp, and highlight things you can take away in creating your own document for the first time.

September 2nd, 2013 Posted in Business
remote-imgur-api-upload

How to Build a Dynamic Imgur Upload App Using jQuery & PHP

preview tutorial imgur mirror upload jquery php

Many new online web services are providing backend APIs for developers. These allow anyone to connect into a web app and pull out specific information (or push or change bits of data). Today we’re specifically looking at the API for Imgur.

In this tutorial I want to demonstrate how we can remotely mirror an image found elsewhere online and auto-upload to Imgur. It’s possible to create a form handling user-uploaded images as well. But I wanted to keep the demo clean without needing to move user content onto the server. This process is very simple once you understand how APIs work. Take a peek at my live demo to see exactly what we will be making, then follow along!

August 29th, 2013 Posted in JavaScript, PHP
digital-design-lede

10 Digital Design Terms You Need to Know

Digital-Design

Design jargon is everywhere. And you need to be able to speak the language. Working on digital projects has its own set of terminology. From dither to color values to fluid or fixed layouts, there are a few terms every designer needs to have a grasp of.

So we’ve made it easy for you, and put together a list of digital design terms you need to know. This list started as a top 10, but we added some bonus jargon for comparative purposes. How many of these terms are you already familiar with?

August 27th, 2013 Posted in Business
ds.dd.financial

Design Dilemma: Retirement Planning for the Freelance Designer

ds.dd.financial

Daniel A. writes: I’ve come to realize that I can never afford to retire and I’m scared! I worked some staff positions for about half my career and I have nothing to show for it. Two IRAs (Individual Retirement Accounts, usually set up by your employer) are gone.

Creatives are not great financial geniuses. It’s embarrassing to admit, but it’s the most necessary part of surviving as a creative, as well as a person. Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

August 26th, 2013 Posted in Design Dilemma
thetips-10

25 Useful Resources for Creating Tooltips With JavaScript or CSS

screenshot

Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.

We all agree on how great tooltips are, but how we go about implementing them can differ dramatically. If you’re at square one, looking for some tooltip ideas for your current project, you’ve come to the right place. We’ve got a whopping twenty-five different options that fall into two categories: JavaScript and CSS. No matter which method you’re looking to use, we’ve got the best techniques available, which you might want to enhance using OOP class techniques like JavaScript classes.

August 23rd, 2013 Posted in JavaScript
ELOX

15+ Inspirational Portfolio Designs

ELOX

As creative folk and freelance designers, we often want to show off our work to others — whether that be to clients, family, friends, or colleagues. Your online portfolio says a lot about your style and approach to work, and it’s an important thing to spend time tweaking and perfecting.

In this article, we’ll walk through 18 creatively designed portfolios to give you a few ideas for your next portfolio refresh. Flick through, enjoy the inspiration, and feel free to share your own examples in the comments!

August 21st, 2013 Posted in Inspiration
ds.dd.family

Design Dilemma: Should You Charge a Family Member for Design Work?

ds.dd.family

David L. writes: I’d like to know where I stand on a possible upcoming dilemma should the worst happen. I created a completely original piece, even hand drawing the letterforms, used for the company name. The first use of the logo was on a business card (which I also designed). It was later printed on a banner for a trade show and T-shirts. Since then, a website has been created (which I also developed), and print ads for nationally-published industry magazines (which I have also created… 3 in total).

August 19th, 2013 Posted in Design Dilemma
cssimagehovers-f

10 Easy Image Hover Effects You Can Copy and Paste

screenshot

Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.

Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.

August 16th, 2013 Posted in CSS
featured-image-rss-jquery-reader

Build an Automated RSS Feed List With jQuery

preview tutorial rss feed reader jquery google api

The typical process of creating a dynamic feed listing requires some type of backend language. Obviously this can work out fine if you are familiar with Rails or PHP, but I want to present a method for pulling RSS feeds via jQuery. The problem is accessing Ajax requests from an external server and then converting this XML information to something a bit easier to read.

We will be focusing on the Google Feed API which is a lot easier than it looks. There are a number of custom possibilities to play with the options and access other alternative themes. All we need to pull is the first page of the feed item results, along with each title and the URL link. Once you have this script working it is very easy to customize the layout and even include a bit of content from the feed! Check out my sample demo below to get an idea of what we will be creating.

August 13th, 2013 Posted in JavaScript
Subscribe
Membership