Articles - Page 172

Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.

CSS / 22 Feb 2012

Responsive Design: Why You’re Doing It Wrong

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.

Inspiration / 17 Feb 2012

Developing a Color Scheme and Color Management Tips

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.

CSS / 16 Feb 2012

4 Fun CSS Image Effects You Can Copy and Paste

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.

CSS / 15 Feb 2012

Twitter Bootstrap 2: Bootstrap Goes Responsive

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.

Inspiration / 14 Feb 2012

100 Awesome Logos With Script Typography

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.

HTML / 13 Feb 2012

Save Loads of Time by Writing Your HTML With Haml

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.

Navigation / 10 Feb 2012

15 Impressive CSS and PSD Navigation Menus

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!

Layouts / 10 Feb 2012

Practical Tips for Utilizing Columns of Text in Your Layouts

Designing around large blocks of type can be tough and more designers are taking the “fewer-is-better” approach when working with columns and large blocks of text. When using a mass of type, such as in a book, text-laden website or print project, much of the emphasis is more on the readability than the actual look of the type.

Typefaces are important but even more important can be the number of columns used in combination with the words. The number of columns you use in a project can vary depending on a number of factors such as typeface and style used, type of project, font size and gutter width and proportion of other elements.

CSS / 8 Feb 2012

Three Super Easy Ways to Pull Off a Masonry Layout

Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

CSS / 7 Feb 2012

Convert a Pricing Table PSD to HTML and CSS

Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

CSS / 6 Feb 2012

Code a Useful Expanding Vertical Navigation Menu

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

CSS / 3 Feb 2012

5 Online Playgrounds for HTML, CSS and JavaScript Compared

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.