Articles - Page 186

CSS / 20 Nov 2013

Creating a Custom HTML5 Audio Element UI

HTML5 has made many things simpler in web development, one of which is using embedded audio. Today, we’re going to work through the process of completely customising the HTML5 audio player element, which can adapt to older browsers with fallbacks. It’s a simple method that’s easy to build upon and tweak.

The open source project MediaElement.js is wildly popular, and has even been built into the core of WordPress since version 3.6. It allows you to embed any HTML5 audio or video using a native player interface which can dynamically adapt into a Flash/Silverlight player when needed. I was really impressed to see all the features and it seems to be one of the more advanced solutions for handling legacy browsers. We’ll be using that as a starting point!

CSS / 15 Nov 2013

Build a Super Easy CSS Slider With Thumbnails

Today’s project is another exploration of the types of practical applications that you can achieve with a little ingenuity and some fairly basic CSS. You’ll be blown away by how much you can achieve with just a few lines of code.

The final result with be a great way to display a strip of small image thumbnails that the user can hover to see larger images. Let’s dive in and see how it works.

Design Dilemma / 13 Nov 2013

Design Dilemma: When You Just Can’t Do Anything Right

Have you ever worked at a place where no matter what you do, whatever you design, or whatever you suggest, you’re wrong, but they don’t fire you? There’s a good reason why, and here are some funny (but odd) reasons, along with advice no one would think of to ease the tension.

An interesting email was sent to me from a young designer who is ready to quit design because her boss keeps putting down her design abilities, and it’s making her very depressed. It’s a very common problem in the design industry, so, join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

CSS / 11 Nov 2013

How to Create Unique Block-Style Radio Inputs With jQuery

Input buttons are used in web forms where a user needs to select one option from a larger collection. This often happens with unique values like newsletter subscriptions, profile settings, and submission categories. I have always liked the old-school Digg-style input buttons where you click a link to choose your story category.

In this tutorial I want to demonstrate how we can build a similar interface using CSS3 and jQuery. All of the input radio buttons are still present within the form itself, but they are hidden on the page. Instead we update the selected choice using JavaScript and even have the possibility to display this value in HTML (or return it to a backend script). Check out my sample demo to get an idea for what we are building.

CSS / 8 Nov 2013

Build a Freaking Awesome Pure CSS Accordion

Who has two thumbs and loves to push the bounds of CSS? This guy. Let’s jump into a project that does just that. It’s pretty experimental and won’t pass the semantic police, but it’ll teach you a heck of a lot about advanced CSS tactics and will be tons of fun.

What we’re going to build is a pure CSS horizontal accordion slider. You’ll be able to insert as many slides as you want, each with unique content and each accessible via a click event, all without a lick of JavaScript. Impossible you say? Never!

Business / 7 Nov 2013

Food-Based Web Design Tips to Make Visitors Hungry

It’s the same routine every date night: “where are we heading for dinner?” To the web we go, looking for restaurants around us that whet our appetites. And the places we always seem to hit after this dinner search are the locations with websites that just make us hungry.

Certain techniques, from color to photos to imagery, are common among the best food-based websites. These sites employ a specific strategy designed to make you hungry. Today we’ll look at how photography, colors, shapes, vivid copy and simple design are used to make mouths of website visitors water.

Design Dilemma / 5 Nov 2013

Design Dilemma: Dainty Designers — Grow a Pair!

There are some designers who just can’t say “no!” to a client. While it’s painful to hear their stories, do they affect the industry for others? Do you need to develop some iron clad nerve to protect yourself?

This is the story of a designer who keeps being called into endless meetings by a client who picks her brain for a new line of product packaging, but still hasn’t committed to her as the designer on the project, nor has the client paid her for her time. I gave her some advice, so perhaps she’ll follow it? Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

CSS / 1 Nov 2013

How and Why to Build Your Own Design Calculators

Design is a complex beast, web design doubly so. There’s a lot more than visual harmony and balance to consider, it’s often the case that you have to dig in and perform some real life mathematics (gasp!).

Oddly enough, I love thinking about this stuff, so much so that I actually build my own calculators rather than use the tools available from other developers. Today I’ll show you how and why to build your own design calculators so that you can master the numbers behind your designs.

CSS / 30 Oct 2013

How to Build a Minimalist User Profile Layout With Content Tabs

Dynamic content is a big part of modern web design. Whether this is hidden in the page or pulled out of a database, you can improve space in your layout by reorganizing important content elements. This is true of many situations and it works great on user profiles. Oftentimes users will have a myriad of information presented on their page which can be easily digested through the use of tabbed navigation.

In this tutorial I want to demonstrate how we can build a minimal user profile layout design. This is mostly centered around a small set of navigation links, which dynamically change the display between bits of content.

Depending on the purpose of your website, these content sections may be split to include photos, videos, followers, and other related information. To get an idea of what we’re building take a peek at my live sample demo.

Business / 25 Oct 2013

7 Tips for Becoming a Successful Stock Author

The draw for selling digital stock goods is immense. You make something, upload it to a site, and watch the money flow in again and again through repeat sales. What designer, photographer or developer could resist?

Unfortunately, the reality of the situation is that there’s no guarantee that your hard work will yield you a single cent. In fact, it could very likely be a phenomenal waste of time! Today we’re going to discuss some tricks of the trade that will help your foray into this market is a successful one.

Design Dilemma / 24 Oct 2013

Design Dilemma: The Scope Creepy Client

We received a comment to the Design Dilemma article, “How Do I Fire a Client… Legally?” that piqued our interest, so we followed up, and learned about one of the worst situations any designer had faced in recent memory. This wasn’t just a crazy client, or exploding scope creep — it was blatant threats, and emotional, and financial slavery for the designer. Just reading the email from the designer was sickening.

We decided it was well worth relaying the entire story to our readers, so, join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

Inspiration / 22 Oct 2013

The Design Process: How Do You Get Started?

Sometimes the toughest part of a new project is actually getting started. In fact, just this small step can be a process in itself.

As designers, we all have different processes and habits, but there are a few common things that everyone can do to make getting started that much easier (and hopefully result in more efficient use of time, and a better end result).