Articles - Page 164

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.

Business / 29 Apr 2013

Simple Tips for Designing a Newsletter Template That Stands Out

Almost every business has an email newsletter these days. From retailers promoting sales, to organizations showcasing information and events, the email newsletter is one of the most popular marketing tools out there. And for it to really be effective, it must look good.

An almost unlimited number of free email templates can make it easy to just download something and send out an email, but you should really take the time to create a custom template for communications that represents your business and who you are. Your newsletter represents your work just as much as a website or printed product. Although getting started can be intimidating, it’s fairly easy to create a newsletter template, choose software for distribution and send your first group email. It is important to keep in mind that most people get a lot of email every day, so you must work to make your newsletter stand out.

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.

Business / 17 Apr 2013

The End of Keyboards: A Question of “When?”

On Wikipedia, the definition of a keyboard is a “typewriter-style device, which uses an arrangement of buttons or keys, to act as mechanical levers or electronic switches”. In an age where technology is seemingly magical in its state of advancement, our beloved peripheral is starting to feel more like a relic than a modern input device.

As attached as I am to keyboards, I have clear vision to the light at the end of the tunnel. With the prevalence of pen inputs, touch screens, voice commands and other new ways of using technology, its time for us all to admit; The keyboard era is coming to an end.

Graphics / 15 Apr 2013

Data Driven Design: A Simple Primer

Web apps are becoming ever-more prevalent on the internet. Some may argue that they are simply more complicated websites. Regardless of their definition; what happens when you are designing for large amounts of constantly fluctuating data?

There are a few examples of data driven interfaces and they all have to handle a lot of varied data that is constantly changing. The most common are admin areas and analytic dashboards. The data can take many forms; graphs, charts, tables or text. Each can be displayed in a variety of different ways depending on the context and meaning you are trying to convey with the data. One thing to remember is that you can rarely be sure of the length or amount of data you need to cater for; so think simple to start…

CSS / 12 Apr 2013

Focal Point: Intelligent Cropping of Responsive Images

The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more.

Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works.

Business Card Templates / 10 Apr 2013

Design a Business Card That Won’t Get Thrown Away

It’s an almost unavoidable part of doing business – the business card. While more people are beginning to ditch traditional paper cards for digital counterparts, the business card is still an integral part of doing business.

Cards are almost as commonplace as the handshake, and it’s something you’ll always want to have ready to hand when you meet a potential new client.

So what makes your card stand out from the pack? How can you design a card that won’t get thrown away minutes after the meeting? And how can your card best illustrate the style of your work?

Let’s delve into some suggestions and tips today.

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.

Business / 28 Mar 2013

Don’t Be a Pansy: Great Design Is About Making Decisions

What sets the great designers apart from the good ones? What goes wrong when a project with so much potential turns into something lackluster and subpar?

Decisions decisions decisions. Great designers recognize the key decisions that have the ability to make their projects special and have the courage to make those decisions. Read on to see how.

Business / 27 Mar 2013

How to Creatively Market Yourself as a Designer



Sometimes it seems like every time you jump online, you read about a talented new designer who’s making it big with their latest project. There are a lot of wonderful designers out there, and the constant showcasing of others’ skills makes it feel all the more like you’re lost in the crowd. It’s not enough anymore to have a solid portfolio and work experience; if you really want to stand out in today’s market, going the extra mile in marketing yourself can make all the difference in landing the perfect job, or getting some great freelance projects going.

When you’re considering all the ways that you could market yourself, the most important thing to take into account is how much of a time commitment you can realistically make. Don’t overstretch yourself with a daily blog entry or illustration unless you think you’ll be able to do a great job on it. There are many different levels of requirement for projects that can make a difference in your career; choose what works for you.

CSS / 24 Mar 2013

Using Checkboxes to Toggle CSS and Create Click Events

More and more lately I’ve seen developers utilizing tricks to create toggle states using pure CSS. This allows you to skip the JavaScript without sacrificing the interaction. How does this work? Is it an acceptable practice?

Today we’re going to examine two distinct methods for utilizing a checkbox to create a click event that swaps between two images using good old HTML and CSS. We’ll finish off with a brief discussion on semantics and the pros/cons of this technique.

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!