Articles Archive

Responsive Design: Why You’re Doing It Wrong

February 22nd, 2012    14 Comments

responsivecontent-4
screenshot

Responsive design isn’t a fad that arose because of a cool CSS technique, it’s an answer to a problem. Always remember that and constantly ask yourself whether or not you’re really adequately addressing that problem. If you’re using copy and paste to insert your media query breakpoints, your solution might be flawed.

Let’s discuss why media queries exist and how we can leverage them to truly solve the quandary of the ubiquitous web. Let’s talk about why you should let your content determine the breakpoints of a layout, not hypothetical screen sizes.

Read More

The Brutally Honest Tale of My First Web Design Meetup

February 21st, 2012    9 Comments

meetup-3
screenshot

You should connect with the web design community in your area. At least, that’s what you keep thinking. It’s one of those bucket list items that you always mean to do but never really get around to pursuing. As someone tirelessly dedicated to brining you the scoop on all things design related, I took the plunge for you.

I researched local gatherings of web designers, chose a group, made the drive and talked to real people face to face about their pursuits in web design. I’ll walk you through the entire experience, including that inevitable part where you’ll simply decide not to go, so you can follow in my footsteps and do something similar in your area. Was it difficult to find a meeting to attend? Was the entire experience a socially awkward nightmare? Do I recommend it? Will I go back? Read on to find out.

Read More

Weekly Freebies: 20 Really Cool Retro Web Elements

February 18th, 2012    5 Comments

wf-retroweb-f
screenshot

Every week we search all over the web and bring you a handpicked selection of the finest design freebies around. We do all the research and you reap the benefits!

This week’s collection of freebies contains twenty irresistible retro and vintage web design elements. We’ve got everything from icon sets to badges and background patterns. Be sure to add these to your collection of resources so you can bust them out the next time your design needs to resemble something from a bygone era.

Read More

Web Design Critique #76: IdentyMe

February 17th, 2012    4 Comments

DSCRT-75-f
screenshot

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is IdentyMe, a free virtual business card service. Let’s jump in and see what we think!

Read More

Developing a Color Scheme and Color Management Tips

February 17th, 2012    5 Comments

colorpost-1
screenshot

Building a website can come with a few unexpected hiccups, one of those being color. Understanding color choices, and how colors may render on different computers is the first step to ensuring that your site has the look you intended.

In addition to finding and selecting colors that work for you, it is wise to develop and manage a color scheme for your project. It is simple to create a set of swatches in common image software such as Adobe’s Photoshop or Illustrator and organize colors in such a way that they are easy to find and use.

Read More

4 Fun CSS Image Effects You Can Copy and Paste

February 16th, 2012    8 Comments

imagetreatments-f
screenshot

Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time.

Today I’ll walk you through creating some extremely simple and fun CSS image tricks. From polaroids to vignettes, you won’t believe what we can pull off.

Read More

Twitter Bootstrap 2: Bootstrap Goes Responsive

February 15th, 2012    11 Comments

bootstrap2-f
screenshot

Recently, we published a piece titled 5 Incredibly Useful Tools Built Into Twitter Bootstrap, which took a look at the basic structure of Twitter’s Bootstrap framework and walked you through implementing some of the major components.

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Read More

100 Awesome Logos With Script Typography

February 14th, 2012    3 Comments

scriptlogos-f
screenshot

What do script typefaces suggest in a design? Will they make your design dainty or masculine? Timeless or retro? Goofy or sophisticated? Would you believe me if I said all of the above and more?

Today we’re going to look at a massive, handpicked selection of logos from Logopond that all use script and cursive writing in some form or another. The point is to showcase the incredible versatility of these types of fonts. The next time you’re designing a logo and wondering if a script is appropriate, you’ll be able to come back here and browse the various themes that different types of scripts can suggest.

Read More

Save Loads of Time by Writing Your HTML With Haml

February 13th, 2012    5 Comments

hamltut-f
screenshot

Odds are, by now you know all about Sass and its brethren (LESS, Stylus, etc.). Love them or hate them, these CSS preprocessors are making a big splash in the development community. In many ways they represent a faster, more efficient way to write CSS and if you get on board, you’ll no doubt appreciate the flexibility that they bring to your project.

Once you get bitten by the CSS preprocessor bug, you’ll inevitably start look at HTML and wondering why it has to be so cumbersome. Why doesn’t someone drastically simplify the way we write markup? It turns out, the same people that brought us Sass have done just that with a language called Haml. Today we’re going to take a look and see how to use Haml to completely change the way you write markup.

Read More

Weekly Freebies: 15 Impressive CSS and PSD Navigation Menus

February 10th, 2012    3 Comments

wf-nav-f
screenshot

Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download.

I’ve included both CSS and PSD menus so whether you’re just looking to create a mockup or need something fully functional, we’ve got you covered. Enjoy!

Read More