This week we have yet another fun and simple CSS project for you to hone your coding chops on. This time around we’ll be creating the illusion of a page with one corner that has been folded over.

With the power of pseudo elements, we’ll create some CSS triangles that we can then push into place to create our page fold. Once we’re all finished, you’ll be able to simply apply a class to any div to add in the effect.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Concept

Demo: Click here to launch.

Recently, I wanted to add a little bit of character to a simple text container and decided to try folding over one of the corners. With the help of an image, this is a pretty easy task. However, if we’re attempting to go a pure CSS route, it takes more time and effort.

The method that I came up with is surely not innovative, but I thought it was interesting enough to share here. Basically, what we need, in addition to a rectangular box, is two triangles. We’ll push these triangles into the positions shown below.

Once we have the triangles into place, we can change the top triangle to the same color as the background, and suddenly we’ve got our nice little page fold effect. Pretty easy!

Now that we have a plan in place, we can begin building our shapes using CSS. There’s really no great built-in methodology for creating triangles with CSS so we’ll have to turn to some border voodoo.

The HTML

To get started, create a div like the one shown below. I’ve thrown in a headline with a paragraph, one class for general page styles that we might want to reuse elsewhere and finally one class to apply the page fold effect (tl stands for “top left”, we’ll create another for a top right fold later).

<div class="page foldtl">
  <h2>Headline</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

</ br>

That’s all we’ll need for now. Let’s jump over to our CSS and get this thing styled!

Page CSS

For the CSS, we’ll start by coding up the general look of our little page without the fold effect. I started by giving the background a nice dark color, then moved on to styling the actual page class. Give it a width, height and margin, and assign white to the background color.

As an optional step, I included a very subtle background gradient. As always, this takes an ungodly chunk of code if we’re trying to play nice with as many browsers as possible. If you feel that it’s not worth it, simply ditch the gradient.

body {
  background: #272822;
}
 
.page {
  background: #fff;
  width: 250px;
  height: 330px;
  margin: 50px;
 
 /* Optional Gradient */
  background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

</ br>

Now that we’ve got the basic container styled, it’s time to make the text a little better. For the h2, I made it nice and large and scooted it pretty far from the top so that it won’t get in the way of the page fold. Also, I used the Google Web Font Lilita One. Embedding this is as easy as copying and pasting the code given to you on the page in that link.

Finally, to finish off the text, I added some padding to the paragraph, set its font and made brought its color a few shades back from black to help set it off from the headline.

.page h2 {
  padding: 85px 0 0 20px;
  font: 400 35px/1.5 'Lilita One', Helvetica, sans-serif;
}
 
.page p {
  padding: 10px 20px;
  font: 12px/1.5 Helvetica, sans-serif;
  color: #4b4b4b;
}

</ br>

Progress Check

At this point, you should have a nice little page something like the one shown below. It’s not much to look at right now, but it’s a solid start.

CSS Triangles

Before we proceed, we have to learn to make a triangle with CSS. To begin this process, create an empty div and give it a class of “triangle”. Now set both the height and width to zero but apply a really thick border to the bottom and the left sides (use two different colors). Here’s the result that you’ll get:

As you can see, this has created a square that’s split diagonally from the bottom left corner to the top right corner. Each border corresponds to one of the triangles that result. Now watch what happens if we turn one of those borders transparent:

There you have it, a triangle made with pure CSS. We can even tweak the direction of the triangle by applying borders to different sides:

Make sure that you set the transparent border to the direction that you want the hypotenuse to be facing. So if you want it to face right, make the right border transparent. The reverse is true for the other borders. If you want the hypotenuse to face down, set the top border. If you want it to face up, set the bottom border.

Check out this Tinkerbin to see an example of all four options at work.

Folding the Page

Now it’s time to use this knowledge to fold the page over. To do this, we need to follow three steps. First, we’ll style the “foldtl” class that we set up before. Next, we’ll add one triangle using the :before pseudo element. Finally, we’ll add the second triangle using the :after pseudo element.

.foldtl {
  position: relative;
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}

</ br>

As you can see, all we’ve done for the main class is apply relative positioning (this helps the absolutely positioned triangles) and set a box shadow. As a side note, this project is much easier without shadows, but I wanted to make sure you knew that it could still work. You just have to make sure that the shadow is offset enough that it doesn’t stick out on the side with the page fold.

Now it’s time to create our first triangle. Call up the :before pseudo element, set its contents to nothing, absolutely position it to the origin, then use the triangle code we just learned above.

.foldtl:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

</ br>

As you can see, I set the size to 70px and the color to #eee, which is a little darker than the page color because this is the triangle that creates the fold over effect. Once again, the shadow has to be significantly offset to look right.

Cutout the Corner

To finish up, we need to position our second triangle to cut out that top left corner. This uses pretty much the same syntax as the last one, only the color of the triangle is the same as the body and the direction has been reversed.

It turns out that this step isn’t really necessary, see the Update section below for more information.

.foldtl:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-right: 69px solid transparent;
}

</ br>

With that, our page fold effect is all finished! Here’s what it looks like:

Flipping It Around

Now that we’ve finished our top left page fold, it’s time to flip it around and see if we can pull off the same thing on the other side. The syntax is almost identical, just offset from the right instead of the left with your absolute positioning and flip your triangles around.

.foldtr {
  position: relative;
  -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
}
 
.foldtr:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-right: 70px solid transparent;
  -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
}
 
.foldtr:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-left: 69px solid transparent;
}

</ br>

One thing that might trip you up here is the shadows, you’ll need to flip those as well otherwise the illusion will be ruined. This picture illustrates what I mean:

See It In action

Now that we’re all finished, it’s time to test drive this bad boy. Keep in mind that because we’re using :before and :after, IE7 and before won’t play nice. There are fixes available using JavaScript if that’s a major concern for you.

Demo: Click here to launch.

Update

Here’s the thing, sometimes a project like this makes sense in your head when you code it, then you come back later and realize that you were doing it all wrong! That’s exactly what happened here. Right after publishing this, I noticed that since my border trick split into two triangles on its own, I really didn’t need to go through the step of adding the :after section at all. The information above is still great to learn from so I’ll leave it alone, but here’s a better way to pull this off.

All we need to do is take the border that we were making transparent and set it to the background color. That alone serves as our second triangle, letting us cut off the :after section completely.

.foldtl {
  position: relative;
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
 
.foldl:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-left: 70px solid #272822; /*Set to background color, not transparent!*/
  -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

</ br>

Live and learn folks, live and learn. Always go through and make sure your code is as concise as can be. Sometimes you make dumb mistakes (I sure do). Don’t get discouraged, instead take comfort in the fact that there’s almost always a better way to do something and each time you find one, you’re making yourself a better coder.

Be sure to check out the updated Tinkerbin to see this new and improved version.

Conclusion

Thanks for reading this tutorial on how to create a page effect with CSS. I hope you found the information to be useful and are now fairly comfortable wielding both CSS triangles and the :before and :after pseudo elements.

Leave a comment below and let me know what you think and be sure to check back soon for more great CSS walkthroughs.

QR codes are all the rage… aren’t they? Their presence certainly seems to have increased in recent years, indicating an impressive adoption rate among marketers. But does that mean that you should be using them? If a client asks you whether or not using QR codes is a good idea, what will you say?

Join us as we take an honest and critical look at both sides of the QR debate so you can decide for yourself whether or not you should be designing with QR codes.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is A QR Code?

The core concept behind a QR Code (Quick Response Code) is absolutely nothing new: it’s basically a barcode. If you were born any time in the last three or four decades, you’ve see barcodes nearly every day of your life. Just like any barcode, a QR Code can be used to store encoded pieces of information that can then be decoded by a special reader.

One big difference is that standard barcodes are made to be read with a beam of light while QR Codes are meant to be seen as an image. The scanner essentially takes a picture of the QR Code, then aligns the picture using specific identifiable patterns and finally uses the rest of the pattern as a binary code.

They might look random, but if you look close you’ll notice that all QR Codes share four very specific squares. These are used to give the scanner information on the alignment, rotation and skew of the code so that it can be sure to interpret the information correctly.

The benefit here is that QR Codes can be scanned very quickly at multiple orientations and angles. They can also store quite a bit of information in a really small area.

The real potential for QR codes was realized when someone had the revelation that just about everyone carries a potential scanner in their pocket. Any cell phone with a camera and basic web capabilities can easily read and respond to QR Codes.

The Promise

The promise of QR Codes, as presented to potential clients, is nearly irresistible. In print, your space is always limited. Whether we’re talking about a company brochure or a bus stop ad, there’s a pre-defined amount of space to communicate your message.

Beyond this, your message is typically 100% static and has little to no actual interaction with the customer. It’s just a passive pile of ink and you can’t do much with it.

With the web though, everything changes. Space is virtually unlimited, interaction capabilities are limited only by your imagination and the holy grail of marketing becomes possible with technologies like social media: sustained, continual customer contact.

A Gateway Drug

The question of course is how to use limited printed media as a gateway to the unlimited and magical world of the Internet. QR Codes are one potential answer. “They’re easy to use and fun!” At least, that’s the sales pitch.

When you add a QR code to your boring old bus stop ad, suddenly it becomes an interactive advertising piece. A bored public transportation user will see it, point their phone at it and instantly be taken to a web page or even a video with more information.

To make sure all of the right buzzwords are used, QR Codes are pushed as social media friendly. You can use them to gather Likes on Facebook, Follows on Twitter, Pins on Pinterest; the list goes on and on.

Liftoff

QR Codes have this strange sort of cult following. Designers and marketers everywhere jumped on board and brought lots of creativity to an idea that originally began as a way for Toyota to track vehicles through the manufacturing process.

Today you’ll find QR codes in the strangest places. As the centerpiece for guerrilla marketing campaigns the world over, QR codes have been spotted on brick walls, shirts, telephone poles, belt buckles, produce, baked goods, tombstones and just about everything else you can imagine.

There’s even a Tumblr blog called “WTF QR Codes” which is dedicated to showcasing the ridiculous nature of QR Code advertising. Stop by and scroll through the results for a few minutes and you’ll instantly see how bizarre this form of marketing has become.

Good or Evil?

Some people see QR Codes as a modern advertising marvel on the verge of ubiquity. Others see them as a hopeless gimmick that future generations will no doubt laugh at us for even attempting.

As a designer, you should have a stance on the subject. This should of course be an educated, intelligent stance, not an off the cuff judgment. When a client comes to you with a question about QR codes, you’ll either come off as snide and derogatory or an informed expert. To make sure it’s the latter, let’s go over a few common questions.

Are They Easy To Implement?

Back when I was a full time designer for retail store brands, creating a barcode was sort of a pain. I had to purchase specialized and often expensive software, type in a very specific sequence of numbers, find a way to make sure it actually worked; it certainly wasn’t the most difficult part of my job but is wasn’t the highlight of my day either.

With a QR Code, the process is entirely different. There’s really almost no work on your part. Just Google “free QR Code generator” and you’ll find a bunch of websites that allow you to instantly create a QR code. Just type in a URL, choose a size and you’re good to go. If you want to test it, pull out your smartphone and any number of free QR scanning apps.

The bottom line is that QR codes couldn’t be easier to create. They size is also pretty flexible and since they’re squares they’re quite easy to integrate into a design.

Are They Easy To Use?

It’s hard to argue that QR Codes aren’t easy to use from the perspective of the person creating them, but what about from a user’s perspective? This is a matter that’s highly up for debate.

If you talk to someone in favor of QR Codes, the process sounds simple: just pull out your phone and zap the code. That’s all there is to it! It couldn’t be any easier right?

However, if you talk to someone who isn’t a fan of QR Codes, you might hear something drastically different. According to this crowd, the process is much more complex:

• Pull out your phone.
• Search for your phone’s built-in QR Code reader (oh wait, there isn’t one).
• Search for that QR code app that you downloaded one time, the name of which escapes you.
• Realize that you deleted that app ages ago because you never used it. Go to app store, search for and download a new free QR Code reader.
• Take a nap because you’re exhausted at this point.
• Launch app and wait for the camera to initiate.
• Hold phone up to QR Code.
• Wait for browser to launch and page to load.
• Tadaah, a web page! Wasn’t that easier than typing an a URL?

Obviously, this process is overflowing with hyperbole, but it makes an interesting point about how the typical QR Code user experience could possibly be perceived as anything but quick and convenient.

The simple truth is that if you ask ten people what they think of QR Codes, you’ll likely get a few that think they’re an overhyped waste of ink.

Do People Actually Scan Them?

According to Zimbio.com, QR Codes were present in 1% of print advertising in January of 2011, a number which shot up to 6% by December of the same year. Once again, this tells us that advertisers like them, but what about the general public?

Data is scattered and hard to find, but we can gleam a lot from a report titled “9 Things to Know About Consumer Behavior and QR Codes“, which was released in January of 2012.

According to this report, 79% of respondents had never heard of a QR Code. However, when shown a picture of a QR Code, 81% of respondents claimed to have seen one before. This lends credence to the idea that marketers love QR Codes a lot more than your average Joe!

</ br>

Does this spell doom for QR Codes? Not so fast. The same report also claimed that half of all smartphone owners have scanned a QR Code and 70% of those respondents claimed that it was an easy process. Further, 41% of respondents said QR Codes were useful, 42% had mixed feelings and 18% said they weren’t useful.

These numbers aren’t off the charts in the positive direction, but they’re actually much better than many naysayers claim. The blanket statement “nobody uses QR Codes” seems to be far from true. As long as your target market is smartphone owners, there’s a good chance that they both know what QR Codes are and are familiar with how to use them.

Are QR Codes a Fad?

In the 1990s, the world was ready for a replacement for cassette tapes. CDs were the obvious choice if you were purchasing music but they didn’t fully replace cassettes in at least one important way: recording.

Any kid with a Walkman or simple audio cassette recorder could make his/her own tapes. This was a great way to have fun, record music and quickly save information for later review. As great as CDs were for listening to your favorite tunes, they didn’t share the quick record feature.

That’s where MiniDiscs came in, or at least were supposed to. I thought MiniDisc players were amazing. They were better than cassettes in a million different ways. They used random access memory, so you could easily split your recordings into tracks and browse through them individually later. No more fast forwarding to find what you wanted! The players were stylish, small and had digital controls, which were very cool at the time.

I was completely convinced that these were the devices of the future. Fast forward to 2012 though and four out of five people that I ask have never even heard of MiniDisc players and those that do have some recollection don’t recall why they were cool or even what they really were. So what the heck happened?

MiniDiscs failed for a number of reasons. They were initially too expensive to replace cheap CDs for music and late in the game the arrival of the MP3 provided the final nail in the coffin. The digital revolution hit with force and we stopped thinking of audio as something to be carried around on a series of plastic objects that had to be inserted into something. Instead, devices recorded, played and transferred audio all on their own with no pile of physical storage necessary.

The Point of That Long Metaphor

Why is there a history of MiniDisc players in an article about QR Codes? Because when I see a QR Code, my mind instantly jumps to the lesson of the MiniDisc. I feel like QR Codes are a temporary and flawed solution to a problem that either doesn’t exist or will be solved by something else very soon.

If a QR Code just takes me to a web page, then a short URL seems just as easy or even more so. Further, new technology such as NFC threatens to take away a healthy chunk of the cell phone information gateway in the future.

The same report that I referred to earlier noted that 46% of respondents that had scanned a QR Code were simply curious about what it would do. This is a high number that indicates that lots of QR traffic is the result of it being a new technology that people want to understand. Eventually, when most people have tried it, these curious first timers will vanish.

We’re in a pretty serious state of flux at the moment with mobile technology advancing at breakneck speeds. It’s impossible to say for certain whether or not QR Codes will be an integral part of mobile-targeted advertising for years to come, but overzealous adopters need to prepare for the very real possibility that these things will be a fuzzy memory in a few years.

Tips For Designing With QR Codes

With all this in mind, we can see that QR Codes are currently at worst a fad that will fade quickly and at best a great way to grab the interest of a healthy chunk of smartphone owners. As long as we proceed with this information in check, we can come up with some common sense guidelines for designing with QR Codes.

Give Users an Alternative

Unless you want to dramatically limit the number of people who can access the information trapped inside of the QR Code, make sure that you have an alternative. This often takes the form of a simple URL under or beside QR Code.

Use Mobile Friendly Content

Always consider that virtually all of the people scanning your QR Code will be doing so with a mobile phone. If the code leads to a website that is optimized to work on desktops, you’ve failed. Make sure the content on the other end is usable at a small size and doesn’t use Flash or other non-mobile technologies.

Creativity Pays Off

That curiosity factor that we mentioned earlier is obviously a huge hook for QR Code users. As QR Codes become more ubiquitous, they become easier to ignore, just like sidebar ads on the Internet they’ll quickly become almost invisible to many people. Make sure you put some serious thought into presentation. How can you catch your audience’s attention and leverage their curiosity to score a scan?

Have Clear Goals In Mind

Getting people to scan your QR Code is an impressive feat, but if you don’t use that opportunity wisely then it’s a big fat waste of time. If you get a million scans but don’t successfully educate or encourage people towards further action, you haven’t really accomplished anything. Scoring social media love is an obvious goal that could pay off in the long term.

Don’t Be Stupid

As the site WTF QR Codes clearly demonstrates, this technology is overused, abused and often poorly understood. QR Codes on a billboard next to a highway with an average speed of 75mph probably aren’t the best use of your client’s advertising dollars.

What Do You Think?

Now that you’ve seen the statistics, read my rants and considered my advice, it’s time for you to chime in using the comments below.

Do you think QR Codes are the savior of printed marketing or are they another overhyped marketer’s fantasy that normal people simply don’t care about? If clients ask you whether or not they should use QR codes, what will you say?

Good design centers on good content. Good content needs good design to survive and stand out among all the other choices out there. The most successful design projects come together because of content-driven design.

It is easy though for designers get stuck in an image or text rut. This frequently happens because people tend think about text and images on their own. What we should be doing is writing copy with images in mind and preparing design projects with the text in mind. Think about how images and text will work together as you plan your next project.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Content is King

The number one reason you will get people to pay attention to a design project is content. Yes, you will get a few looks on aesthetics alone, but what will keep the audience is content. Treat it like gold.

Plan your visuals to correspond with content and make sure all visual associations are clear. Don’t set up a website dedicated to frogs with a photo of a toad on the homepage. People will notice.

Take the time early in the planning process to think about content and how the visuals should represent it. Do any of your words create color or photo links? Use that to your advantage.

Use show, not tell, examples when possible. Too often you hit a website that tries to explain every concept with words. Put together images to represent visual examples. Don’t have a visual to work with? Create one. Snap a picture, use images with creative commons licenses or build an infographic (there are some nifty online tools out there).

Google It, Dribbble It, Search It on Pinterest

When you get stumped, play online. It is not a waste of time to peruse images that have keywords relating to your content. Search and scroll through the options on Google Images, Pinterest or on a portfolio-image sharing site such as Dribbble.

It is perfectly fair to use others’ images for idea generation, but please avoid visual plagiarism. Think about how words and text intersect uniquely for your project and go from there.

Keep an ideas file. You are likely to stumble on some visually inspiring items that might not match your project. Save these ideas for the next project. Develop your visual brainstorming techniques to help come up with even more ideas.

Use Active Words

It sounds really simple. But words that imply action and movement are easier to represent visually. Not only will using more active verbs and descriptive words help you develop images, but they are more interesting as a whole.

Think about voice as well. Writing copy in active voice, rather than its passive counterpart will help you as well. Think about it like this: You want your copy to explain action happening. “The dog ate my homework” has much better flow than “My homework was eaten by the dog.” Using active voice will help you and others visualize the action happening in your copy. When you are able to create this link between your copy and a visualization of action, it will be easier to develop corresponding images and text.

Using active voice will also help your readers and users. People who read your copy and look at your images together will be more likely to relate to the information and engage with your content.

Quiz Others About Your Images

Sometimes the images come first. If you have the appropriate visuals nailed down but are experiencing copy woes, talk to others. Print out the images with no text on the page and ask coworkers, family members and friends what the images mean to them. Make a list of all the words they come up with and use that as a starting point.

This exercise can also give you an idea of what your visuals represent to others and if they will work with the concept of your project. If you come back with a lot of jarring responses or ideas that aren’t on par with your project concept, it might be time to rethink some of the imagery.

Be Unexpected

Avoid clichés and pair words and images that border on the unexpected. Note the choice of words there – look for “unexpected” relationships between images and type, not “unrelated.”

Elliott Jay Stocks’ blog is a great example. The blog uses the main headline for the post as a visual and it is made unexpected by the use of “fine flourish of the ligature.” You would almost expect the words “fine flourish” (which contain several ligatures) to appear in the italic style used by “ligature” (because the word does not actually contain joined letters).

The Pollen site works in very much the same fashion. “We Are Work” and the image of a sunglasses-clad couple create almost contrasting ideas — work and play. But read more into the text and you see that the image perfectly relates to the company’s branding.

Don’t Try Too Hard

Loose content-image associations can be tough for others to follow. If you are really struggling to find an image that works with your copy, it might be best go without an image-based visual or create an art element from text.

You want your information to convey a purposeful and balanced message. Mixing oddball images and text will not help you achieve that goal and could confuse those who are trying to understand your work.

Personal Account

When writing for this blog, I am always looking for ways to come up with image and text pairs. To get started I always create an outline of what I plan to write about in my post – very much like the headers you see here. From there I think about those phrases and how they could be represented visually. Is there an image that will correspond on its own? Should I show an example and write about it to make the point more clear? Do I need to create an image that shows what I am trying to describe in the text?

As I write and create images (I do this one section at a time to help the process), I look back over everything and think about what has the most impact. From there, I select the image and words that will be what you see at the top of the page.

Sometimes, I see a website or ad or magazine cover that sparks a great idea that I want to write about. The text does not have to come first, though for me it often does. I have found that when I break out of my safety zone, I sometimes develop the best ideas.

Conclusion

You will get the best overall results when you think about images and text concurrently for each project you take on. You may have to get out of your comfort zone to do it, but open your thinking to performing both tasks simultaneously.

As you write copy, visualize the images you will pair with it. As you develop images, background and logos, think about the words that will be featured alongside them. By pairing the thought processes, you will find that your project comes together easier, with less rework and in line with what you planned from the start.

Image Source: rachfog.

Typically, the articles that I write on Design Shack are from the perspective of the designer. One topic that comes up regularly is how to deal with clients on various issues. However, today I’d like to flip things around and jump to the aid of the other team.

Designer/client relationships go both ways and just as often as there is a frustrated designer, there’s a disappointed client. Today we’re going to tackle the question of what to do when you hire a designer and just don’t like the work that resulted.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Fred Asks for Help

I frequently receive emails from designers asking for advice on various topics from business to design. Recently though I received an email not from a designer but from a concerned client who simply didn’t know what to do.

The situation is extremely common and I’m sure it resonates with most people who have hired professional creatives at some point. The client, Fred, hired a designer to take on a major rebranding project. Step one was to refresh the logo.

Fred said that the designer obviously put forth a good deal of time and effort in this step, delivering ten different versions, each with around eight different slight variations for a total of eighty different logos to choose from! On a side note, I think too many options can be just as bad or worse than not enough, so I don’t really think this was appropriate, but Fred appreciated the dedication.

Now for the kicker, even with all of these options, Fred didn’t really see anything that he “was in love with.” In other words, he hired a designer to do some work, the designer delivered the work as promised, but he didn’t like it. Fred’s question is the same as that from every other design client in this situation: now what?

What’s the appropriate course of action here? Should Fred pay for the work? Should he tell the designer? Should more options be requested?

Structuring a Design Agreement

It’s too late for Fred, but I think the absolute best way to handle these situations is to prevent them altogether. The way to do this is to structure any design agreement clearly and carefully, planning for likely contingencies such as these.

Make It Clear What Is Being Purchased

The first thing that needs to happen before any money changes hands is that the terms of payment should be made crystal clear. People tend to naturally work out the simple stuff like deadlines and dollar amounts, but skip over one of the most critical pieces of the puzzle: what’s being purchased?

There are two ways to approach this discussion. The first is that you’re buying the designer’s time. He or she is an experienced professional, and to use their services in any way, you must compensate them for every hour spent working.

This is similar to hiring a doctor. You go to the office, let the doctor do what he/she thinks is appropriate, hear the diagnosis and treatment, then decide whether or not you agree enough to follow along. Regardless of whether or not you think the prescription the doctor gave you is worth filling, you still have to pay the bill that comes in the mail later because the doctor’s time is valuable and you used some of it up.

The second way to view design work is a product-focused approach. Here you don’t care if the designer spends two or twenty hours on a project, you are paying a flat rate for a given list of “deliverables”. You give the designer a list of your requirements and suggestions and receive a piece of design work in return (or multiple pieces depending on the agreement).

Build In Revision Considerations

From the designer’s perspective, the hourly rate is by far the best way to go. This way the agreement stays fairly balanced: every hour of work is met with an hour’s worth of payment.

From the client’s perspective though, the flat rate piecemeal system can often be desirable because it’s easier to budget for: you know exactly how much you’ll be paying. With this system though, the client needs to be sure that there’s a clear system in place for revisions.

It’s almost never going to be the case that a designer hands over a piece of work that you don’t want to change or tweak in some way. For this reason, it’s often the case that a flat rate will come with something like the following: $X for three logo options, one major revision (significantly change one of the logos) and two minor revisions (tweak colors, fonts, etc.).

In this agreement, clients know up front what happens in the case that they don’t like the work for any reason. With no extra fees, they can get up to three revisions, one major and two minor. Some clients will still need more though so you’ll need to go one step further and decide on pricing for each additional major and minor round of revisions.

Providing Feedback

I’ve written entire articles on providing feedback so I won’t spend too much time on this topic but I it’s worth briefly covering. When anything creative is involved, feedback can become a touchy subject.

Both sides are to blame here. Clients too often choose an extreme of flat out unprofessional, rude criticism or a hesitance to say anything negative whatsoever and tiptoe around the subject of not liking the work. Similarly, designers are too often emotionally tied to their work and forget who is paying the bills. If I like blue but the client insists that the logo should be yellow, I shouldn’t throw a tantrum or let my feelings get hurt, I should make the dang logo yellow and grow up.

The customer is most certainly not always right, but they are paying so that means they get the final say in many matters. If I hire a landscaper for my yard and insist that black gravel be used, the landscaper can by all means tell me that white gravel will look better with my house color but ultimately, I get to choose because it’s my yard.

As a client, you should be open, honest and professional. If your designer can’t take it, it’s time to hire someone else. You should never have to pretend that you like something. If the work is unsatisfactory, say so! It’s an awkward conversation but these are a part of every professional business relationship. As a designer, I greatly prefer clients who clearly let me know what they think and how I can make something more along the lines of what they were looking for.

The Matter of Payment

All of this leads up to where we’re standing with Fred. What should he do? He has eighty logos that he doesn’t like and a designer waiting for the next step!

The most important question here was whether or not the designer did his or her job. This is why I was so insistent earlier on making the terms of the agreement clear. In this case, it sounds like the designer went above and beyond the call of duty and worked hard to make the client happy.

If the logos were plagiarized, delivered in a raster format when the agreement was vector, or otherwise technically and morally insufficient, there would be clear grounds for non-payment. If the client doesn’t get what was promised, neither does the designer.

However, especially where creative work is concerned, there’s this awkward and huge gray area of work that was delivered to technical standards but simply isn’t what the client was looking for. As you’ve noticed already, I love a good metaphor so I’m going to stick with this theme.

Logos Are Like Big Macs

Imagine that I roll into McDonald’s and order my first ever Big Mac. I get my food, sit down at the table and take a bite only to discover that I don’t like it at all. Now, if I took the sandwich apart and found that they forgot to put meat on the bun or put onions all over it when I specifically asked them not to, then I have reason to get a refund or a replacement. However, if I simply find that a Big Mac isn’t necessarily a food that I particularly enjoy, then I really have no ground on which to demand a refund. I took a gamble on something new, whether I like special sauce or not, McDonald’s has kept their part of the bargain and I should as well.

This same logic applies when you’re not necessarily “in love” with the work that your designer does. Ultimately, this person did the work that was agreed upon and you owe them a fair wage. If it turns out that you don’t like the design style, that just means that you picked the wrong designer just like I picked the wrong place to eat lunch with my Big Mac.

Moving Forward

So what happens now? You simply don’t like the work and you’re out of free revisions. There are two courses of action, both of which involve being open and honest with the designer about what you’re feeling.

The first course of action is if you still have trust in the designer to do a better job. At this point, you attempt to structure a new agreement, distinct from the old one where you essentially just try again.

However, it’s understandable if the project has reduced your trust in the designer’s ability to deliver what you want. It’s often the case that you should cancel any further work, pay the agreed upon amount for the work that has been delivered, cut your losses and move on with another designer. Does this suck for you, the client? Absolutely, but you should’ve gone to Chipotle for lunch instead.

If the project is at an awkward point where the amount due is uncertain but you still want to cease activity, it’s time to have an open discussion and maybe even a debate with the designer about the value of the work that has been done so far. Think about how far the project has advanced. Has the designer finished 25% of the total work? Then you owe 25% of the total project fee.

Satisfaction Guaranteed

For the most part, this advice is widely applicable to almost any scenario where you as the client aren’t happy with the work a designer has produced. One important exception is if the designer is crazy enough to have a “satisfaction guaranteed” clause of some kind. Be sure to explore exactly what this entails up front because it just may mean that the designer is willing to do the work over until you’re satisfied.

What Do You Think?

Some of us have been on only one side of the designer/client relationship and therefore tend to see only part of the big picture. If you’ve been on both sides of a project gone wrong, you can see that everyone typically has a good mix of blame and innocence that can be assigned to them. Sometimes certain designers just aren’t a good fit with certain clients and you should always be well prepared when these situations arise.

Now that you’ve heard my advice, I’d like to hear from you. If you were/are a designer, what would you do in this situation? Now imagine that you’re the client. Does that change your perspective? Leave a comment and let us know.

In the vast world of rapid prototyping CSS frameworks and toolkits, there are a ton of different options to choose from, but ever since Twitter’s Bootstrap hit the scene it seems like it has largely gobbled up this market. Is there room or reason for anything else?

The folks at Zurb think so and aren’t about to abandon their widely successful Foundation project. Having written about Bootstrap several times in the past, I’m going to jump into Foundation today and see what I think.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Meet Foundation

So what is Foundation? Zurb describes it as “an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”

Right from that description you can tell that Zurb is putting a lot of emphasis on the cross-device aspect of its layout grid. Interestingly enough, the word “responsive” doesn’t appear anywhere on the Foundation site (that I can find), but the benefits are definitely similar: design one project that works everywhere.

Is It Like Bootstrap?

These two projects certainly aren’t identical, but they’re about as close to direct competitors as you can get. Basically, they’re similar enough that if you’re using one, you’re almost certainly not using the other.

Both Bootstrap and Foundation seek to give you all of the tools that you need to quickly perform CSS-based layout and prototyping work with some JavaScript goodies thrown in. They’re also both marketed with a heavy emphasis on clean, minimal design, which is a result of the extensive default styling on things like typography. Even their home pages look remarkably similar:

The Grid

The first thing that I turn to with any framework is the grid. The layout system is often the cornerstone that the entire experience is built on so getting this right is a big deal.

With Foundation, you start with a flexible twelve column grid, which responds well to browser resizes and uses media queries to handle the shift to smaller devices. In Bootstrap, you also have a twelve column grid that makes heavy use of media queries. Here you have the option to choose between fluid and static columns, which is nice.

Implementing the Foundation grid should be a snap if you’ve used other grid systems before. Yes, it does involve the use of non-semantic class names so if you hate frameworks for that reason, this won’t be the one that changes your mind.

The system here is easy enough that you can pick it up almost immediately. Each time you want a new row, create a div with the class “row”. From here you have twelve columns to fill. You can split it in half with two six column divs, cut it in thirds with three four column divs, etc. Simply apply a class that corresponds to the number of columns you’d like to fill in addition to the “columns” class.

<!-- Foundation Grid Syntax -->
<div class="row">
  <div class="six columns">
    <p>Lorem ipsum...</p>
  </div>
  <div class="six columns">
    <p>Lorem ipsum...</p>
  </div>
</div>

</ br>

If we recreate this example in Bootstrap, the syntax is extremely similar, though more succinct. Bootstrap doesn’t require the extra “columns” class so you’ll be able to trim back your markup just a bit. Admittedly though, “span6″ sure doesn’t read as nice as “six columns”.

<!-- Bootstrap Grid Syntax -->
<div class="row">
  <div class="span6">
    <p>Lorem ipsum...</p>
  </div>
  <div class="span6">
    <p>Lorem ipsum...</p>
  </div>
</div>

</ br>

Both grid systems have all of the advanced features that you need: nesting, offsets, pushing/pulling, etc. As with the code above, you’ll find that with these features, Foundation’s syntax is a little more straightforward and easy to read while Bootstrap’s is more succinct.

Who Wins the Grid Battle?

I’m a grid fanatic and really love digging around and seeing what makes these things tick. I’ve built pages with both the Bootstrap and Foundation grids and honestly find them both to be excellent. They’re so similar in approach that I don’t think this will be the deciding feature for anyone trying to choose between the two.

If you hate one of them, you’ll probably hate them both and if you like one of them, it won’t be difficult to switch to the other. It used to be the case that Bootstrap would’ve lost this battle without a second thought, but now that Bootstrap 2 has gone responsive, I’m declaring it a draw.

Basic UI Elements

Both of these frameworks contain pre-styled but customizable UI elements so that you can quickly mockup your app or web page without giving too much thought to how you’re going to structure different pieces.

Let’s start by looking at one of the most basic UI pieces, a button. In foundation, all you really need for a button is an anchor tag with the “button” class applied.

<a href="#" class="button">Button Text</a>

</ br>

However, this is going to create an incredibly simple button. If you want to make it more interesting, each additional piece of styling has another associated class. For instance, below I’ve made a small, blue, glossy button with rounded corners.

<a href="#" class="nice small radius blue button">Button Text</a>

</ br>

The story is the same here as with the grid. Foundation’s style is more verbose, but especially in this case, it allows for an easier to tweak experience. Instead of splitting classes off by what they do, Bootstrap assigns different personalities to each class. So you can choose between “btn-info” and “btn-warning” for different style options.

<a class="btn btn-success" href="#">Button Text</a>

</ br>

As far as styling, I personally like the subtle gradient look that Bootstrap uses better than the glossy Foundation look, but this can be easily customized in both frameworks so it’s pretty much a non-issue.

Forms, Tabs, and Labels Oh My

It’s simply not worth going through every UI element and comparing the syntax, you should get the picture by now. Both frameworks stock you up on the most common UI items so that you can implement them with virtually no heavy lifting whatsoever.

Tabs, navigation, breadcrumbs, forms, labels, tables; if you want ‘em, you got ‘em no matter which of these you’re using. That being said, if you’re looking for quantity, Bootstrap really takes the lead here and seems to just pack in a ton of interesting UI elements. Each framework has some unique pieces not in the other, but Bootstrap wins the numbers game.

JavaScript Goodies

Foundation isn’t only a CSS library, it has some great JavaScript features as well. One of my favorite features is the Orbit slideshow, which is really easy to implement and customize.

All you need to set up a slideshow is a div with some images in it (use alt tags for captions). From here you just point your JavaScript at that div and call the “orbit” function. If you want to go further, there are plenty of options to tweak.

There’s also a pretty cool modal window plugin, some tooltips, tab functionality, dropdown menus, alert messages and some nice form validation. Jumping over to Bootstrap we see most of the same types of items implemented in subtly different ways. Once again though we find that the Bootstrap offering is a little more robust.

Preprocessor Support

One area where Foundation and Bootstrap went their separate ways is with their preprocessor support. Foundation went with Sass and Compass while Bootstrap went with LESS. I started as a LESS fan but have since been won over to the power of Sass so I’m inclined to like Foundation better in this regard, especially given the Compass integration.

Compass is a powerhouse of preprocessor goodness and really makes it easy to code up cross-browser CSS3 with little effort. I’ve always been fairly surprised that Bootstrap chose the LESS route instead.

That being said, it’s interesting to note that Bootstrap pretty nearly serves as Compass for LESS. Just like with Compass, Bootstrap comes built in with all sorts of helpful mixins that help you utilize complicated CSS features with very little hand coding.

Whether you’re using Foundation or Bootstrap, taking advantage of the preprocessor support will make it far easier to customize and extend the framework.

Cut The Crap, Who Wins?

It’s difficult to declare a winner here. As I mentioned previously, Bootstrap 1 was easily inferior to Foundation simply because the layout was purely static and non-responsive. With Bootstrap 2 however, Twitter really upped their game and have built an exceptional toolset and Foundation has some work to do if it’s going to match it.

Bootstrap simply has more to offer from a strict feature list perspective. It’s also more succinctly coded, better organized and far more thoroughly documented. This is on top of the fact that the developer community has thoroughly embraced Bootstrap to the point that superb third party themes, plugins and other extras are easy to find.

That being said, there’s an important question here: is bigger better? Just because Bootstrap seems to have more in it doesn’t necessarily mean that it’s superior. In the world of web design and development, less is often more. Foundation has a simpler, less bloated feel to it that I really appreciated. It really is amazingly easy to download it and begin busting out web pages in no time.

Bootstrap users will chime in here and point out that the bloated argument doesn’t apply because there’s a custom Bootstrap download builder that easily lets you decide what you do and don’t want in your framework.

Which Do You Think Is Better?

You should give both frameworks a test drive to see which you gel with better. However, you came here for an opinion and I’ve got one for you. If you only want to download one of these libraries, go with Bootstrap. I’m not a Bootstrap fanboy and to be honest I haven’t even adopted it into my personal workflow. Further, I see Foundation as the underdog and would love to give it the prize here, but I think it’s got some catching up to do before that happens.

But what do I know? You guys are using these types of tools every day and I want to hear what you think. Is Foundation better than Bootstrap? Why or why not? Would you consider using either of these in your workflow if you’re not already?

“The Best 365 Websites Around the World” is a gorgeous, hard cover, full color book that showcases the best sites from around the world as judged by top-notch design professionals like Fabio Sasso.

Today we’ve got ten copies to give away to our awesome readers. Read on to learn more and see how you can win!

The Giveaway

Awwwards has teamed up with us to giveaway 10 digital copies of their latest book “The Best 365 Websites Around the World”, the ultimate guide for trends & styles in website design, so you can find inspiration for layout, color, style and more.

About Awwwards

Awwwards recognize and promote the talent and effort of the best developers, designers and web agencies in the world. An international jury made up of some of the most important designers, bloggers and Internet agencies evaluate each site by means of a strict system of evaluation, scoring it on a scale of 1 to 10 for its Design, Creativity, Usability and Content.

Check out all the latest Website Awwwards.

The goal at Awwwards is to create a meeting point where web developers, designers and agencies across the world can share experiences, inspiration and knowledge: A community that bids for a more accessible, usable and beautiful Internet.

How to Win

All you have to do to have chance to win is comment on this post in the most original way you can think of. The 10 best will receive their very own copy of “The Best 365 Websites Around the World”. We’ll choose the winners a week from today and update this post. Good luck!

The Option key (that’s Alt for you PC folks) is an amazing little helper for the Photoshop user. For the most part, you can probably get along without it but when you learn to wield it well, you open up tons of time saving features.

Why is it so great? What are all these great things you can do with the Option key in Photoshop? Read on to find out!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Shortcut Guide

What the heck are all these funny symbols? If you’re not familiar with keyboard shortcuts, then you might be asking yourself this question as you browse this article. Here’s a quick cheat sheet so you can make sense of it all.

Instructions for Windows Users

For simplicity, I’ll stick to the keyboard shortcuts for Mac users. PC users need only convert Command to Control and Option to Alt.

New Layer With/Without Options

When you’re creating a new layer with the default shortcut, Shift+Command+N, you’ll see a window of options pop up. If you add the Option key to this shortcut, Option+Shift+Command+N, you’ll be able to skip that window full of options and create a new layer right away.

When you’re in the Layers Palette, the opposite is true. Clicking the new layer button won’t give you any extra layer options, but holding down Option while you click will bring up the extra window. This also applies when you’re creating a new Layer Group or copying a layer with Command+J.

Deleting Layers

When you delete a layer by clicking on the trash can button in the layers palette, a little window will pop up asking you if you’re sure that you really want to take such a drastic action.

If you’re an experienced user, you need no such warning. Holding down the Option key while clicking the trash can will allow you to skip the warning (or click the box to never see it again). You can also simply hit “V” to select the Move Tool and then press Delete to kill the current layer.

Selecting Tools

Several of the Photoshop tool buttons have hidden options underneath, a few of which can’t be reached by keyboard shortcuts, leaving you to press and hold the button to wait for the flyout menu to pop up.

There’s a quicker and better way though, just use the Option key! By Option clicking on a tool with hidden options, you can cycle through the different tools associated with that button.

Reset Dialog

When you’re in any dialog with a lot of different settings and sliders, it’s easy to screw stuff up, which leaves you wishing that you could just start over. Fortunately, there’s an easy way to do exactly that. Simply hold down the Option key and you’ll see the Cancel button turn into a Reset button.

This little trick works when applying filters, layer effects and a lot more. Be sure to try it in every dialog you see!

Draw From the Center

Typically, when you draw a shape or make a selection, the point where you click and begin your drag represents the top left corner of the shape area. As you know, holding down Shift will keep your proportions in check, but if you add Option to that you can modify the behavior to draw from the center.

Using this method, the point where you click represents the very center of the object. I use this shortcut all the time as I often instinctively click right where I want the shape to be drawn.

Merge Visible To New Layer

There are several different ways to merge your layers in Photoshop. Command+E will merge two or more selected layers and Shift+Command+E will merge all of the visible layers. The problem with this command is that you lose your original layers if you do it.

The route that I take far more often is to add in the Option key and press Option+Shift+Command+E to merge all of the visible layers into a brand new layer while retaining all of my old layers.

Create a Mask Filled with Black

By default, when you click on the “Add layer mask” button in the layers palette, you’ll get a new mask filled with white, meaning that the layer will be 100% visible. It’s often the case though that you’ll want to paint in an effect gradually with a layer mask and so would prefer for the layer mask to start by turning the layer invisible. To accomplish this, simply hold down Option when you click the mask button.

Create Intense Clouds

Photoshop’s clouds filter seems like a silly feature at first, but you can actually use it create some really cool effects and realistic textures. When you render some clouds, there aren’t really any visible options, but a really neat hidden Photoshop feature is the ability to increase the intensity of the filter by holding down the Option key. Try creating clouds with and without the Option key and you’ll see the huge difference this makes!

Multiple Undos

Odds are you learned this one on your first day of Photoshop but I thought I’d include it just in case. If you just hit Command+Z to undo, you’ll toggle between the last two steps in your History Palette. If you want to take multiple steps back, use Option+Command+Z. To go forward multiple steps, use Shift+Command+Z.

View and Edit a Mask

When create a mask, the transparency of the layer is controlled by where you place white and black pixels. To paint in visibility, use white, to paint out details, use black. Typically, we do this while looking at our actual layer preview but sometimes it can be easier to tweak a mask by editing its pixels directly.

To do this, Option+Click on the little mask preview on the layer and your canvas will pop up a grayscale preview of your mask. From here you can edit the mask using many of your favorite tools and filters.

Unlock Background Layer

This one is super quick and super useful. That dang background layer is always locked by default so you can’t do much with it. To fix this, double click it while holding down Option.

Repeat Filter With Options

In Photoshop, you can always easily reapply the last filter that you used with Command+F. However, this applies the filter without any options using exactly the same settings as last time. If you’d like to repeat a filter but tweak the options, use Option+Command+F.

Fill with Foreground Color

Going to Edit>Fill in the menu is a silly way to fill something. Pros usually just hit Command+Delete to quickly fill a selection or the canvas with the background color. Did you know that you can switch this up and use Option+Delete to fill with the foreground color?

Another cool tip is to hold Option when using the eyedropper tool, which will place the sampled color in the non-selected color space (be that foreground or background).

History Eraser

To write this tutorial, I spent a lot of time in Photoshop just trying random things. One of the coolest things that I stumbled onto that I had no idea even existed was the History Eraser Tool.

As you know, the eraser tool destructively eliminates pixels from a layer. However, it turns out that you actually have the ability to bring them back using this tool as well. Hold down the Option key while using the Eraser tool and you can paint in pixels from a previous snapshot or state in the History Palette. Just be sure to set the source by clicking on the icon to the left of the snapshot preview just like you do with the History Brush.

Gradual “Blend If”

Most people don’t even know what the heck the “Blend If” menu does. You can find it inside of the parent “Blending Options” menu in the Layer Effects Menu. Basically, “Blend If” allows you to blend to layers together according to their lightness and darkness values.

A complete tutorial is out of the scope of this article (maybe I’ll cook up one soon), but suffice to say that grabbing an arrow and moving it will change what the point at which pixels get blended. Holding down Option allows you to split the arrow, achieving a more gradual blend.

Launch with Open Dialog

It used to be that launching Photoshop with the Option key held down gave you an alternate splash screen. These days it simply takes you right into an Open dialog window, which isn’t nearly as cool in my opinion but is perhaps far more useful.

Update: I was wrong about the alternate splash screen. Go to “About Photoshop” with the Command key held down to find it. I’m glad it’s still around! Thanks to @jonmfarmer for this tip.

Alternate Tool Behaviors

There are a ton of other alternate behaviors that result from using a tool with the Option key held down. Here are some of my favorites.

• Option dragging with the move tool makes a copy.
• Option dragging with the Polygonal Lasso allows you to temporarily use the normal Lasso Tool.
• Holding Option with most of the selection tools allows you to subtract from a selection.
• Holding Option while using the brush tool gives you a quick Eyedropper. This also works with the Gradient Tool and the Shape Tools.
• Holding down Option while using the Blur Tool Sharpens and holding Down Option while using the Sharpen Tool Blurs.
• Holding down Option while using the Burn Tool Dodges and holding Down Option while using the Dodge Tool Burns.
• Holding down Option while using the Pen Tool allows you to reposition a handle.
• Option click on the canvas with the type tool to set the text box height and width manually.
• Holding down Option while using the Hand Tool changes it to a Zoom Out Tool. This also works with the Zoom Tool.

Other Great Option Shortcuts

Even after all of this, we still haven’t covered all of the great stuff that the Option key can do! There’s just so many great tweaks and functionality changes that you can access with it. Here are some not so hidden shortcuts that you might have missed:

• You know that Command+W closes a window, but did you know that Command+Option+W closes all windows?
• Adding Shift+Option to a Print Command prints a single copy (Option+Shift+Command+P).
• Option+Command+A selects all layers.
• Option+Command+G creates a Clipping Mask.
• Holding Option while clicking on a color swatch or style deletes it.
• Holding Option while dragging text-based value scrubbers like Opacity allows for fine tuning.
• Option+Double Click on a layer brings up the properties dialog.

What Did I Miss?

Well there you have it, more Option key tips than you’ll know what to do with. Hopefully, these weren’t all old news to you and you picked up a trick or two.

I’m sure there are some great ones that I’ve missed so be sure to leave a comment and let me know what cool Option shortcuts and hidden features you use on a regular basis.

A ton of discussion lately has been given to preprocessors. These incredibly useful tools make coding easier, faster and more maintainable, but they’re certainly not for everyone. Whether or not you’ve jumped on the preprocessor bandwagon, you should give a fresh look to an old favorite that helps you dramatically cut your coding time without reinventing your workflow with compilers and other complications: Zen Coding.

With Zen Coding, you can type a little and output a lot, just like with a preprocessor like Jade or Haml, only it expands instantly into the vanilla HTML that you love. For those that are new to the concept, I’ll walk you through how Zen Coding works and show you some of my favorite tricks, then end with a brief tutorial on getting Zen Coding up and running in Sublime Text 2.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Zen Coding vs. Preprocessors

Zen Coding has been around for a number of years, so several of you reading this are bound to think that this is too old school to merit a discussion in 2012, but I’m willing to bet that lots of new coders have never given it a shot.

I’ll start by saying what Zen Coding isn’t: it isn’t a preprocessor in the same vein as LESS, Sass, Stylus, Jade, Haml and the like. There are similarities though. Like all of these, Zen Coding has a unique syntax that is aimed at simplifying the process of coding HTML and CSS.

However, unlike those other tools, Zen Coding doesn’t add any special features such as variables or mixins, nor does it require any extra files which have to be run through a compiler. Zen Coding outputs HTML and CSS immediately, no one has any possible way of even knowing that you used it by looking at your code.

Perhaps a closer parallel is TextExpander, an app that “expands” brief text snippets into larger ones. Basically, Zen Coding is like a giant set of prebuilt text expansion macros built specifically for HTML and CSS coders.

How Does It Work?

Enough explanation, let’s jump in and explore the actual syntax behind Zen Coding. If you’re at all familiar with HTML, CSS and the concept of the DOM, I’m sure you’ll pick it up immediately.

Let’s start with the HTML side because I think that’s where almost all of the real benefit lies. As our first basic example, let’s say we wanted to create a simple div with an ID of container, here’s how we would do it:

If you’re familiar with Haml, you’ll immediately see that some of the same conventions are used here. First I typed the name of the element that I wanted, in this case a div, then I used the CSS-like syntax of inserting a hashtag to indicate that I’m referring to an ID. Finally, I followed the hashtag with the actual text that I wanted assigned to the ID: “container”.

As you can see, I very nearly cut my required typing in half for this particular snippet of code. I didn’t have to bother with any starting and closing brackets or quotes, instead the structure has been stripped to a bare minimum.

We can use this knowledge as a jumping off point for other similar snippets. For instance, let’s say I want to create a paragraph with a given class. The syntax is pretty much the same, only I use a period to indicate a class (again, just like CSS).

Chaining, Siblings and Children

Saving a handful of characters is quaint, but what if you’re a serious developer who can type all of that in your sleep in the span of a second? Is this Zen Coding stuff really going to be all that useful?

The answer is a resounding “yes.” In fact, the more complex your code structure becomes, the more helpful you’ll find Zen Coding to be! The real power here lies in the ability to chain together different elements.

As you can see, it’s easy to create both children and siblings with the Zen Coding syntax. Sticking with the CSS theme, siblings are connected with the “+” symbol and children use the “>” symbol.

This opens up a massive amount of time and effort saving potential. Play around with this for a few minutes and your brain will quickly begin to think of the structure of HTML documents this way. Before you know it, you’ll be typing long, advanced sequences that expand into nice, fat chunks of code.

Zen CSS

Zen Coding isn’t just for HTML, it also helps you code CSS. To be honest, I don’t use this aspect of Zen Coding too much simply because most decent text editors have such good CSS auto-complete that I spend very little time manually typing out properties anyway (also, CSS auto-complete tends to compete with and override Zen Coding). The same argument could be said of HTML, but here I find Zen Coding to be much faster than the auto-complete route.

Still, this is all my personal opinion, you might find that you absolutely love the CSS side of Zen Coding. Here’s an example of how it works:

As you can see, the CSS side usually involves you typing out the initials of the property, followed by a colon and the initials of the value to assign to the property. As you might guess, there are a ton of CSS properties supported so memorization here is much trickier than with the HTML side. Be sure to check out the cheat sheets.

My Favorite HTML Macros

The Zen Coding cheat sheet can be pretty overwhelming given that there’s so much in it, so to help get you hooked right from the start, here are some of my favorite macros.

HTML5 Starter

Want to start a new HTML document with a clean slate? Simply type “html:5″ and you’ll be off to a strong start.

<!--Type This-->
html:5
 
<!--Get This-->
<!DOCTYPE HTML> <html lang="en-EN">
<head>
  <title></title>
  <meta charset="UTF-8"> </head>
<body>
</body>
</html>

</ br>

Stylesheet Include

Once you start that fresh HTML file, you’ll want to toss in a stylesheet. Fortunately, you can do so in a jiffy.

<!--Type This-->
link:css
 
<!--Get This-->
<link rel="stylesheet" type="text/css" href="style.css" media="all">

</ br>

JavaScript Include

One more for the head portion of your document. After you’ve gotten the stylesheet worked out, it’s time to toss in the JavaScript.

<!--Type This-->
script:src
 
<!--Get This-->
<script type="text/javascript" src=""></script>

</ br>

Anchor Tags

One of my first questions regarding Zen Coding was, “how do links work?” Haml is actually pretty awkward when it comes to any sort of inline elements and attributes so I was worried that this might be the same.

However, instead of coming up with a complicated scheme for inserting the link text and URL, you simply type “a” and the core structure of the anchor is created and made ready for you to fill in. It could probably be a little better, but at least it’s easy to remember!

<!--Type This-->
a
 
<!--Get This-->
<a href=""></a>
 
<!--Type This-->
a:link
 
<!--Get This-->
<a href="http://"></a>

</ br>

Multiply Elements

Zen Coding has a handy multiplier trick that makes it easy to create a certain number of a specific elements. Once again, the process is very intuitive, just use the “*” symbol and the number of the element that you’d like to create.

<!--Type This-->
p*3
 
<!--Get This-->
<p></p>
<p></p>
<p></p>
 
<!--Type This-->
ul>li.someclass*4
 
<!--Get This-->
<ul>
  <li class="someclass"></li>
  <li class="someclass"></li>
  <li class="someclass"></li>
  <li class="someclass"></li>
</ul>

</ br>

Increment Number

Another really cool trick that you can pull off while multiplying elements is to include an incrementing number in the class or ID value. To do this, you implement the “$” symbol.

<!--Type This-->
ul>li.someclass-$*5
 
<!--Get This-->
<ul>
  <li class="someclass-1"></li>
  <li class="someclass-2"></li>
  <li class="someclass-3"></li>
  <li class="someclass-4"></li>
  <li class="someclass-5"></li>
</ul>

</ br>

How Do I Make This Work?

Zen Coding is supported in tons of different text editors and is occasionally even built in, as is the case with Espresso. Be sure to check the Zen Coding Google Project Page to download the plugins for your editor.

How To Install Zen Coding on Sublime Text 2

I’ve definitely been bitten by the Sublime Text bug. I simply love this text editor and can’t get enough of its extensibility and flexibility. One quick and easy way to make Sublime Text 2 even better is to add Zen Coding support.

To do this, you’ll need to grab the free Sublime Package Control download from Will Bond. This is an awesome package manager that makes finding and installing Sublime text plugins incredibly easy.

Once you’ve got that installed, hit Command+Shift+P (Command = Control for PC folks) to bring up the Command Palette and type the word “install”. You should see an item that says “Package Control: Install Package”, hit enter on that option.

From here, type “Zen Coding” and you should see the package. Simply hit enter again and the package will be installed (restart if it doesn’t take effect). Start a new HTML document, type out an abbreviation, hit tab, and watch the magic (make sure your syntax is set to HTML or it won’t work).

Sublime text is already a fantastic editor and using it conjunction with Zen Coding just makes me smile. It’s a killer combination that you won’t want to miss out on.

Do You Use Zen Coding?

To be honest, I really missed the boat on Zen Coding when it was popular a couple of years ago. I always found the Espresso integration to be a little clunky and since that was my editor of choice, I never explored it further. Now that I’m on Sublime Text I just love how quickly I can use Zen Coding to bust out a complex HTML structure without the hassle of tags, returns and the like.

What do you think? Do you use Zen Coding for your HTML? Do you prefer it over using a preprocessor to do something similar? How about with your CSS? Do you think Zen Coding is useful for typing CSS or are you fine with auto-complete?

You hear the phrases tossed around by everyone today – from amateur photographers to the iPhone salesman to some of the world’s most acknowledged visual creators and designers. But what do image size specs really mean? And what should you use?

Simply, it all depends on your project. Knowing what medium you are creating for and how your images will be used is key to sizing and picking the right number of pixels or DPI. Before you begin your next project, though, make sure you are familiar with all the image-quality jargon.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Pixels

Picture elements, or pixels, in web design refer to the smallest units on a grid displaying an image. Pixels are measure by pixels per inch, or PPI. The more pixels per inch, the sharper an image will appear because of the size of each pixel. Pixelation occurs when the number of pixels per inch in an image is low, causing each pixel to have visible edges.

PPI is important because it is a measure of image quality. Using image sizing tools in photo editing software, you can resample images (change the number of pixels in the document) or resize images (change the actual size of each pixel in the document but not the overall number of pixels). In Adobe Photoshop, the “Image Size” menu allows you to resize or resample. Keep an eye on the number of pixels (the top section of the window) versus the “Resample Image” option (in the bottom left corner).

On Screen and for the Web

The web standard for images is 72 pixels per inch. At 72 PPI, images will render nicely (as long as they are of good quality) and should not appear pixelated or distorted. Keep in mind that your full-size photo should be wide enough to fully occupy the frame. (If you are in doubt, always size your photo a little on the large side.)

Think about your Facebook timeline photo, for example. The cover photo is 851 pixels wide. At 72 pixels per inch, your photo would need to be nearly 12 inches wide to fill the space without causing pixelation.

PPI has an impact on text as well. Just as a higher number of pixels per inch can make a photo appear sharper, it can also make text easier to read. Fonts with higher PPI are legible on screen at even smaller sizes than lose with lower PPI. Remember, text can appear pixelated in the very same way images can.

Finally, when thinking about pixels for web design, you must consider the ever-changing browser size. Unlike a few years ago when most everyone used a standard shape and size browser for most applications, today’s users each have a set of preferences that you may want to take into account. When developing fluid-with layouts, allow for images to grow proportionately with the browser but not beyond actual size. This will maintain the integrity and quality of your images.

For Print

While PPI can help you determine the quality of an image, it really has little else to do with actual printing. For print specifications, understanding dots per inch is more relevant.

DPI

DPI means dots per inch. The term was developed as a method to explain printing quality and resolution. When an image is printed, it is made up of hundreds of thousands of tiny dots that are overlaid with each ink color. The inks mix in each dot to form a wide spectrum of visible color. The number associated with DPI is the number of printed dots in each inch. The higher the DPI, typically the better and smoother the image looks.

Increasingly though, people use DPI to refer to everything and often confuse DPI with pixels or PPI. (Photo software can add to this confusion as well, using the term in dialogue boxes.) But unless you are printing your project, DPI should not be a real concern.

On Screen and for the Web

When you are looking at images on screen, it is unlikely that you will be able to tell the difference between an image that is 100 DPI and an image that is 300 DPI because monitors just don’t render images in dots.

DPI is irrelevant when working on web-based projects. It is only important for items that will cross platforms. For example, a company logo may be used on both the company’s website and on business cards. A copy of the image with a high DPI will be important to have on file for the image that appears on the business cards.

For Print

This is where the importance of DPI comes in. Every printer will specify a necessary resolution for print jobs – 300 DPI is a typical resolution for paper printing. It is important for your final project to meet DPI specifications so that the printer does not enlarge or shrink your design, which could alter the look and quality of the final product.

DPI also comes into play when converting a printed item to a digital format. The higher the DPI when an image is scanned, the higher quality it will be on screen. In general, photo quality is considered to be a 200 DPI scan at actual size. Consider using a higher scan DPI if you plan to enlarge or reprint an image.

Megapixel

Since we are talking about images and image quality, it is important to note how all of this relates to what might be the most well-known form of a pixel – the megapixel. Megapixels are a unit used by the digital camera industry to help you understand how large or high quality of a photo you can take with a certain camera. When you boil it down, one megapixel is equal to one million pixels.

Digital images – no matter the source – are made up of pixels. Megapixels just help you understand the top resolution and quality of a photo your equipment can take.

Conclusion

Using the proper PPI or DPI specs for your next design project can impact overall quality. Remember to use PPI when working on digital applications and DPI when you are preparing a project for print.

Keep in mind that both units of measure can impact image quality. If you are unsure about the necessary pixel- or dot- resolution, opt for quality over file compression. You can always shrink something later with no visual loss.

Image Sources: Rego – d4u.hu, mamojo, Martin Cathrae, daveynin and skyseeker.

Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?

There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Who’s This For?

I’ve gotten a lot of commenter feedback lately from designers who struggle with the basic methods and concepts of layout in CSS. The general consensus among many of those new to CSS is that they simply “fiddle” with the code until everything finally works.

Having been there quite a few times myself, I know that this is an immensely frustrating period of your professional growth. Knowing that the answer is right there in front of you and not being able to figure it out is excruciating and time consuming.

If this sounds familiar, hopefully I can help ease you out of this period with some solid and practical advice for how to handle some common layout scenarios. If you’re a CSS ninja who can code a website blindfolded, this article probably isn’t for you. If you’re a designer who just wants a better understanding of how to take what’s in your Photoshop file and turn it into CSS, you’re in the right place. Let’s get started.

Horizontally Center an Element

The first scenario that we’ll attack is by far one of the most common: centering an element horizontally in the viewport or browser window. To get started, let’s bust out a simple div and give it some basic styling.

As you can see, by default, our div pops up in the top left of the viewport. The trick here is that we need the div to stay in the center of the window, no matter what the window’s size is currently. That means that we can’t use absolute positioning to place it at a specific point because that won’t be centered on any other possible window sizes.

Instead what we need to do is leverage the “auto” value that can be applied to margins. Here’s how this works:

As you can see, applying a single line of CSS tossed our box straight to the center of its parent, which in this case is the body. To accomplish this, I used a bit of CSS shorthand. If you need a refresher, margin shorthand starts at the top and works its way around clockwise.

You can shorten this even further if you only have two values that you need assigned. In this case, the first slot will apply to the top and bottom margins while the second slot will apply to the left and right margins. Here’s another look at our centered div, this time with the margins declared using three separate but perfectly equivalent methods.

As you can see, our element is void of top and bottom margins, but the left and right are set to auto, which keeps the item perfectly centered.

Things To Keep In Mind

There are some important things to remember about using the auto margins trick. First of all, you must have a specific width declared for the element that you’re centering. The height declaration is not necessary, you can allow the content to determine the height if you wish, which is the default setting, but the width must always be set.

It’s important to note that while this trick will work on most block level elements, not just divs, it won’t help you out with vertical centering. As an example, let’s throw a paragraph inside of a div, then attempt to center that paragraph in the space.

div {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: auto;
}
 
p {
  width: 60%;
  margin: auto;
  font: 14px/1.5 Helvetica, sans-serif;
}

</ br>

As you can see, I have auto margins set both on the paragraph and its parent div. This centered everything nicely horizontally, but it didn’t have any effect on the vertical position.

Center An Absolutely Positioned Element

The method above works to automatically center one item inside another, but the method assumes that you’re using the default positioning context: static. If you have absolute positioning applied, this method goes out the window.

Using the absolute and relative positioning methods we learned last week, we can apply a simply formula to solve this issue.

Here we see that on an absolutely positioned item contained inside of a relatively positioned item, we need to set the left property by plugging some numbers into this formula. Here’s a test case:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
}

</ br>

Let’s see if we can center the black box horizontally. Using our formula, we can see that the left property needs to be set to 100px.

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
  left: 100px;
}

</ br>

With this code, we’ve set the distance between the left side of the box and the edge of its parent container to 100px, which centers it perfectly.

With Fluid Width

The method above only works if the parent container has a static width. Given the popularity of responsive design though, more and more containers are going the fluid route lately. This means that we’ll need another way to center the child that isn’t dependent on the width of the parent.

To accomplish this, we need to use a percentage for the left value. The obvious answer is to use 50%, but that won’t really work because you’re not accounting for the width of the element that you’re centering. To make it work, we need to add in a negative left margin of half the width of the child element.

Using this logic, we apply a left margin of negative fifty pixels along with a left value of 50% and our div is once again perfectly centered on the x-axis.

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -50px;
  left: 50%;
}

</ br>

It’s important to note that this would also work if our child element had a fluid width. We use the same steps as before and come up with something like the following:

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 70%;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -35%; /* Half of 70% /*
  left: 50%;
}

</ br>

Dead Center an Element

Now that we have a few simple and complicated centering methods in our tool belt, it’s time to tackle the puzzle of perfectly centering an element both horizontally and vertically.

Fortunately, to pull this off, we can use the same method that we just learned, we just have to account for height. This time around we’re also going to center both the parent and the child both vertically and horizontally. Here’s the code to pull it off:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  position: absolute;
 
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

</ br>

There are a few things that you need to notice here. First, this time both the parent and the child are absolutely positioned. From here, I used our negative margins trick with the left property on the container div, then did the same for the box div.

The result is that our content is completely centered and will stay that way as the browser changes size in any direction (even vertically!). Click on the image below to tinker with a live demo.

Centering Text

For my next trick, I’ll teach you something cool about centering text. We’ll start with a simple h1 element inside of a container div.

Now, I’m sure that you already know how to center this text horizontally in the space. It’s typically one of the first things you learn in CSS. Just set the text-align property to center.

.container {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: 50px auto;
}
 
h1 {
  font: 40px/1 Helvetica, sans-serif;
  text-align: center;
}

</ br>

Easy right? But now let’s say we want to center this line of text vertically as well. If this were a paragraph, we would probably take the methods above into account, but since it’s only a single line, we can use a nifty trick.

All we have to do is set the line-height property to the height of the container. I accomplished this below using the shorthand font syntax.

.container {
  height: 200px; /*Set line-height to this value*/
  width: 400px;
  background: #eee;
  margin: 150px auto;
}
 
h1 {
  font: 40px/200px Helvetica, sans-serif;
  text-align: center;
}

</ br>

Warning: This trick only works with a single line of text, and is a bit hacky so it may not be appropriate for all situations.

Centering a Background Image

The last thing that we’re going to learn to center is a CSS background image. To get started with this, we’ll create another container div, but this time we’ll keep in empty and toss in an image using CSS.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
}

</ br>

As you can see, the default place for an image to appear if no repeat is set is the top left. It turns out though that you can move it to one of nine different preassigned slots. These are shown below:

We accomplish this movement through the use of the background-position property. Simply call this property and set any of the values listed above.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
  background-position: top center;
}

</ br>

As an alternative, we can use the shorthand syntax for this. Simply toss in one of the values at the end of your stream of values on the background property.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

</ br>

Conclusion

There you have it! You should now be completely confident in your ability to tackle almost any centering situation with CSS, from dead centering a div to vertically centering a line of text within its container and beyond.

Reach out to us on Facebook or Twitter and let us know if you found this information to be helpful and if you have any questions.

Client testimonials are a popular website feature. They bring credibility to a company and instill a sense of trust. If your other clients love you so much, I might too!

As a fun experiment, today we’re going to set out to build a cool little quote section that will rotate between multiple different quotes using only CSS. Along the way, we’ll learn all about how to plan and create multi-step keyframe sequences. Let’s get started.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The HTML

To start this project, we need to decide on the structure of our quote. Typically, a client quote will have three pieces of text: the client’s name, where they’re from and what they said.

With this in mind, we can create a quote container that has three different pieces. The header will hold the client’s name, the small element will presumably hold the name of the company the client is from or some other related information, and the paragraph with hold the quote text.

<div class="quote">
  <h3>John Smith</h3>
  <small>Design Shack</small>
  <p>"This is the quote text."</p>
</div>

</ br>

Because we used three different elements, we won’t need any additional hooks and should be able to easily target each piece of the quote in our CSS. As a side note, I arbitrarily chose an h3 here simply because h1 and h2 are typically used up for other purposes. Feel free to change this to whatever you like.

Now that we have our structure figured out, it’s time to expand it into three different quotes. To showcase the versatility of this project, I decided to fill my text with the last words of a few famous people. A little morbid, but as a placeholder it’ll do!

<div class="container">
  <div class="quote">
    <h3>Emily Dickinson</h3>
    <small>1830-1886</small>
    <p>"The fog is rising..."</p>
  </div>
 
  <div class="quote">
    <h3>Oscar Wilde</h3>
    <small>1854-1900</small>
    <p>"And now, I am dying beyond my means."</p>
  </div>
 
  <div class="quote">
    <h3>Thomas Edison</h3>
    <small>1847-1931</small>
    <p>"It is very beautiful over there."</p>
  </div>
</div>

</ br>

Starter CSS

Once you have your HTML worked out, jump over to your CSS and enter something similar to the code below. Basically, I set an interesting background pattern and defined the container that will hold the quotes.

* {margin: 0; padding: 0;}
 
body {
  background: url('dark_geometric.png'); /*http://subtlepatterns.com/?p=1045*/
}
 
.container {
  height: 210px;
  width: 940px;
  margin: 0 auto;
  position: relative;
}

</ br>

Quote Styles

Next it’s time to style the quote divs. I used absolute positioning here so that all three quotes will occupy the same space. By default, they’ll create a vertical stack but we don’t want that at all. In our finished product, one quote will fade out, then another will fade in. Consequently, we’ll want them to be in the same spot.

I also set the opacity to zero so that all of the quotes will be hidden by default. Opacity is a quirky property that’s really a headache to work with. We’ll talk about this a little more later. The thing to note now is that, you won’t see anything with the opacity at zero so you’ll want to temporarily comment this part out while you style the quote section.

.quote {
  position: absolute;
  margin: 70px 30px;
  height: 80px;
  top: 0px;
 
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
}

</ br>

Quote Text Styles

Now that we have the general quote container styled, it’s time to grab each piece of text and style it individually. For this demo, we’ll make the text nice and big so set the h3 to 55px and the small to 18px, then use Helvetica for the font-family.

.quote h3 {
  font: 300 55px/1.2 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}
 
.quote small {
  font: 300 18px/1.0 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}

</ br>

Our task with the paragraph is much more complex. Not only do we need to style it into a box, we need to remove it from the stack and stick it to the right of the other content.

To make this happen, we need to do a number of things so I’ve divided my styles for this into three different steps (shown below).

.quote p {
  background: #fff;
  font: italic 25px/1.5 Helvetica, sans-serif;
  text-align: center;
 
  position: absolute;
  left: 450px; top: -15px;
  padding: 30px;
  width: 400px;
 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 
}

</ br>

For the first step, I handled the “icing” or standard visual stuff. I made the background white, set the font and aligned the text to the center. Next I handled the positioning and size of the actual box through the use of some padding and absolute positioning. I finished this all off with an optional border-radius, which rounds our corners off nicely.

Progress Check

If we check on our progress by making sure one quote is visible, we’re looking pretty good! However, our quote is sitting in a plain old box. We’re missing the little triangle that makes it look like a speech bubble.

Adding the Triangle

To add in that little triangle, we have to turn to the :after pseudo element. Basically, we create an empty element, position it to the left side, and apply some tricky border voodoo.

.quote p:after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -10px;
  border: solid transparent;
  border-right-color: #fff;
  border-width: 10px;
}

</ br>

As you can see, that gives us the effect that we’re going for, pretty neat eh?

Animate That Sucka

Now that we’ve got our visual styling and positioning figured out, it’s time to come up with a way to fade out one quote and pop in another and repeat this process on an infinite loop. We could and should use jQuery, but today we’re trying to figure it out with pure CSS so we’ll turn to keyframe animations.

I’m going to be brutally honest here, I do this type of stuff almost every day and it still took me forever to figure out the proper sequence to use to make the keyframes fade in and out at the right time. I fiddled and fiddled and kept having awkward overlaps and results that weren’t at all what I wanted.

I tell you this so you know that you’re not alone if you still find yourself hitting walls that are difficult to overcome. Eventually, I did get my slow brain to wrap around the concept though.

I’m a visual thinker so I made a crude chart to see how it all works. Basically we want to stack these animations so that only one quote is visible at any given time. To pull this off, we’ll put create a thirty second animation and split it into three parts. The first and last parts will have an opacity of zero and the second part will have an opacity of one.

As you can see, we’ll need to delay the second animation’s start time by ten seconds and the third animation’s start time by twenty seconds. This way, if you draw a vertical line at any point of the chart, no more than one quote is showing at the same time.

Now, when I implemented this, I didn’t like how long it took the quotes to fade in and out. I want a quick fade in, a long period of visibility and a quick fade out. To do this we simply need to add a couple of more keyframes. Here’s the sequence I came up with:

@-webkit-keyframes "quoteshift" {
 0% {
   opacity: 0;
 }
 2% {
   opacity: 1;
 }
 31% {
   opacity: 1;
 }
 33% {
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}

</ br>

We only need to set up the one sequence, but we apply it to the three separate quotes in three different ways. Basically, the only difference is the delay value, which makes the animation wait a few seconds before beginning.

.quote:nth-child(1) {
  -webkit-animation: quoteshift 30s 0s infinite linear;
}
 
.quote:nth-child(2) {
  -webkit-animation: quoteshift 30s 10s infinite linear;
}
 
.quote:nth-child(3) {
  -webkit-animation: quoteshift 30s 20s infinite linear;
}

</ br>

That’s all there is to it! When the page loads, the first quote will fade in, then fade out as the second quote comes in (and so on).

Browser Compatibility

At this point you’re probably screaming at your computer screen that I’m an idiot who only uses Webkit prefixes. In truth, I only did this to keep things understandable. Now that we’ve got it all figured out, we can use our good old friend Prefixr to expand it out. When we do this, here’s the giant chunk of code that gets spit out:

/*QUOTE ANIMATION*/
.quote:nth-child(1) {
  -webkit-animation: quoteshift 30s 0s infinite linear;
  -moz-animation: quoteshift 30s 0s infinite linear;
  -ms-animation: quoteshift 30s 0s infinite linear;
  -o-animation: quoteshift 30s 0s infinite linear;
  animation: quoteshift 30s 0s infinite linear;
}
 
.quote:nth-child(2) {
  -webkit-animation: quoteshift 30s 10s infinite linear;
  -moz-animation: quoteshift 30s 10s infinite linear;
  -ms-animation: quoteshift 30s 10s infinite linear;
  -o-animation: quoteshift 30s 10s infinite linear;
  animation: quoteshift 30s 10s infinite linear;
}
 
.quote:nth-child(3) {
  -webkit-animation: quoteshift 30s 20s infinite linear;
  -moz-animation: quoteshift 30s 20s infinite linear;
  -ms-animation: quoteshift 30s 20s infinite linear;
  -o-animation: quoteshift 30s 20s infinite linear;
  animation: quoteshift 30s 20s infinite linear;
}
 
/*KEYFRAMES*/
@keyframes "quoteshift" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 2% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 31% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 33% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 
}
 
@-moz-keyframes quoteshift {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-webkit-keyframes "quoteshift" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-ms-keyframes "quoteshift" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-o-keyframes "quoteshift" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}

</ br>

As I mentioned before, our use of the opacity property is a little suspect because opacity support is a mess. Fortunately, Prefixr takes the lead on this and tries to ensure that our code is primed to work on as many browsers as possible. Unfortunately, it does go a little overboard by inserting all of those filter properties where they aren’t necessarily needed, so some clean up might be a good idea.

Selectivizr

We used some advanced selectors in the tutorial, so while we’re on the topic of browser support, I should point out that you’ll need to add Selectivizr and jQuery to your project to make sure older browser understand these.

Keyframe Support

Here’s the kicker, we’ve gone through all of this to make sure that we’ve maxed out our browser support on selectors and opacity, but in the end IE is still going to refuse to play along because there’s no keyframe support until IE 10.

Obviously, JavaScript is going to be the answer here if you’re going to use this in the real world. You can either do the whole thing in JS or simply use it as a backup for browsers that don’t support keyframes.

Demo

Here’s the live demo. Be sure to wait a while when you launch it, remember that the entire animation takes thirty seconds!

Demo: Click here to launch

Conclusion

Keyframes have come a long way since the days when they were only supported by Webkit browsers. However, keep in mind that because of our old friend IE, they’re still more in the realm of “fun to play with” than something you should bank on for important projects.

Leave a comment below and let us know if you enjoyed this tutorial and how you would improve it!

Here at Design Shack, WordPress is our bread and butter, but in the world of blogging platforms, we have lots of love for Tumblr as well. It’s simple, gorgeous, and simply enjoyable to use.

Today we’re going to take a look at what makes a great Tumblr theme. With over 1,300 options in the Tumblr theme garden, it can be difficult to stand out. Why do some themes catch so much attention while others are ignored? Good design holds the answer.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

#1 Type Is Everything

If you want to create a popular theme, or even just an impressive theme for your own personal use, don’t let the type be an afterthought. With Tumblr themes, type is a huge part of the overall visual aesthetic. It defines the personality of the page and grabs the attention of very specific types of browsers.

As an example, consider how the headline in the theme shown above differs from that shown below. You have sleek and understated compared to bold and intense. Even if all other design features were constant, the type alone would drastically set these themes apart.

One excellent way to boost the appeal of your theme through type is to integrate various font services. For instance, the Candor theme shown below features Typekit and Google Web font integration. This gives users the ability to customize the type far beyond what would typically be available in a blog environment.

#2 Challenge the Status Quo

As a designer, it’s extremely important to keep your audience in mind and throughout this post I’ll continually discuss some of the quirks and intricacies of the unique user base that Tumblr enjoys.

One thing that draws people to Tumblr is that it’s a place where you can easily find something that’s very different than the traditional blog model. The popularity of themes like Organ shown below proves that this is the case.

This theme is completely out of realm of what you would expect in a blog page. There are plenty of others that follow this path as well. The theme below for instance, shows one post at a time and requires users to use their arrow keys to navigate.

The unique ideas go on and on. The theme below takes all of the posts and sticks them into a messy stack of Polaroids, which arrange into a neat grid when you hover over them.

The obvious implication here is that if you want to design a popular Tumblr theme, one great way to go about it is to create something unlike anything else that’s out there. These users really appreciate creativity and will download your theme like crazy if that’s what you’re offering.

#3 Customization Options Rock

Take a look at these three Tumblr theme previews and see if you notice a trend:

As I’m sure you saw, the customization options are a big deal. They’re touted above all else and the designers call out to you with impressive numbers: 60+ ways to customize, 80+ options, etc.

Once again, we see that the Tumblr user base is an expressive bunch. Not only do they want you to give them a great looking theme, they want to be able to make it their own. Earlier we saw an example of some built-in font customization options. Start here and then go much further. Provide color options, work in a personalized header or sidebar with information about the author, let the user rearrange the columns; the possibilities are endless.

As you customize, just remember that the theme should also be great with no effort. Make sure the personalization options are there for those who are interested, but don’t get in the way of those who aren’t.

#4 Go Responsive

To be honest, I didn’t expect the Tumblr theme market to be so current with modern web design practices. In my search I came across a number of responsive themes like the one shown below.

The fact that responsive Tumblr themes exist and are gaining in popularity shows that the Tumblr user base is either decently educated in web design or are at the very least, interested in making their blog as cross-platform as possible.

Your typical blog owners will probably visit their own page on their tablets, smartphones, laptops and desktops and they’ll definitely go for themes that look great on all of these devices. Responsive design is everywhere and a time is already approaching when it will become more of an expectation than a bonus feature. Are you ready for that day?

#5 Pay Attention To Trends

As we’ve already shown, Tumblr users seem pretty well aware of recent design trends. You can use this to your advantage to create themes that will be instantly popular. As an example, consider the popularity of Pinterest and how it has led to the wildfire like spread of masonry style layouts. Tumblr theme designers didn’t take long to jump on board this train and start dishing out themes that utilize a layout and aesthetic that appeals to Pinterest lovers.

If you’re looking to create a popular theme, look around the web and find some practices that are becoming very popular but haven’t necessarily caught on in the Tumblr market yet. What will the next layout fad be?

#6 Make a Beautiful Background

Minimal, white background themes flood the Tumblr theme market, many of which are super popular. It’s becomingly increasingly difficult to stand out in that niche though as all of the options start to look the same after a while.

One solution that proves extremely successful for some designers is to run to the opposite end of the spectrum and invest a lot of time into building a stunning background for their theme.

Tumblr themes tend to utilize a ton of whitespace so the background graphic can be a very important place to showcase creativity and a unique aesthetic.

Bottom line: don’t underestimate the power of a good background in earning you downloads. Even if you don’t have a graphic that can stretch all throughout a page, you can pour you effort into a header graphic with similar results.

#7 Come Up With a Visual Theme

One tactic that seems to work pretty well is to decide on a metaphor or theme for the template that you’re building (here “theme” refers to a specific aesthetic such as “desert” or “fantasy”). This is a great way to get your mind “into the zone” from a creative point of view and leads to some interesting results that users love.

For inspiration, look over the “Space Traveler” theme below. This gorgeous piece of design uses planetary orbital charts and compass rose graphics to create a positively charming aesthetic.

What visual idea can you run with that will make your theme both unique and enticing? Consider places that you’ve been, specific film or literature genres, foods; anything that you can turn into a specific look.

#8 Choose a Target Audience

No matter what you’re designing, it’s vitally important to keep your target audience in mind. This gets tricky when you’re designing general use templates though because your intended audience is pretty much anyone! Aside from the Tumblr user aspects that we’ve already been discussing, how can you further target your design to a specific set of users?

One of the best answers is simply to pick a group of people and intentionally target them. If I’m a photographer for instance, I might run a Google search for Tumblr themes for photographers. Now, tons of generic themes might work perfectly for what I need, but what I’ll find in my search is likely those themes that explicitly state that they’re for photographers, like the one below.

Spend some time looking through Tumblr and finding a market that isn’t well represented, then build a theme for that group of people. Think about specific professions like realtors or app developers and ask yourself what types of features they would gravitate toward.

#9 Icons Icons Icons

Thus far we’ve talked about how both type and background graphics play a huge role in the personality of your theme, another area of the design that fits this description is icons. Tumblr uses icons to differentiate between post types, which has led to a lot of creativity in this area on the part of designers.

Icons can really help define the aesthetic that you’re going for and many designers use them generously throughout their designs, not simply in post type indicators.

Whether you’re using a prebuilt icon library or crafting one yourself, remember that this is a key area where you can make your work stand out from the competition. Take the time to get it right and you’ll be glad you did.

#10 The Download is in The Details

As a Tumblr user myself, the themes that really impress me are those from designers that really gave a lot of attention to the finer points of the design. Subtle textures and patterns, shadows in all the right places, barely noticeable edge highlights, these little touches go a long way toward making your design seem professional and attractive.

No matter what aesthetic you’re going for, be it vintage, skeuomorphic, minimal or wacky, don’t rush through it just to have something to upload. Slow down and really polish off the minor details that you wouldn’t think anyone one notice. Trust me, they will.

What Are Your Tumblr Design Tips?

After reading through this article, you should have a lot of insight into what goes into the creation of a successful and attractive Tumblr theme. Following these ten tips will help you create your own themes that will race to the top of the download charts.

Now that you’ve read what I think, I want to hear your input. What attracts you to a Tumblr theme? Is it any of the things that I listed here or something else entirely. I want to know!

Adobe has an interesting relationship with folks who design websites. Photoshop and Fireworks have you covered from a static image perspective, but tools to build live, functioning websites are another story completely. Flash is no longer the poster child of modern web technologies (quite the opposite), GoLive went the way of the dinosaurs and Dreamweaver, though still widely used, is regarded by many to be a bloated mess.

One area that Adobe is intent on pursuing is web design for non-coders. They’ve made it their mission to bring the world of professional website creation to the huge market of designers who can’t write a lick of code. Thus far, they’ve largely fallen short of that goal (Project Rome anyone?). Their latest attempt, Adobe Muse, has finally exited beta and is available as a part of Adobe’s new Creative Cloud service ($50 per month) or as a stand alone product ($15 per month). Is Muse worth your time and money? Will it really allow you to create professional level websites without coding? Read on to find out.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Long Time Coming

I’ve written a lot about Adobe’s road to releasing Muse. In 2010, I discussed why Project Rome fell far short of anything usable for serious designers. Many of the ideas from that project made it into the Muse beta, which launched a rant from me all about why adobe doesn’t understand web designers.

Given my history on the subject, is this article even worth reading? Won’t I predictably just bash Adobe and Muse and tell you to use Flux or code by hand instead?

Yes and no. Do I think Adobe has found the solution the industry has been waiting for? Not remotely. However, Muse has a lot of merit. There’s plenty that I really like about it in addition to what I think could improve. I will say this: Adobe is closer than ever. To see why, read on.

A Weak Start

I downloaded my thirty day trial of Muse, launched it, chose to create a new site and found myself looking at this window.

I was already disappointed. From step one Adobe is forcing me into a static width mindset. Print designers might find this familiar, but it blatantly disregards the current state of web design, which is rapidly traveling in the direction of fluid widths and media query driven breakpoints (responsive web design).

Here’s another problem that I had with this dialog: there are no units. The default page width that pops up is 960. 960 what? Pixels? Inches? Girth units? Seasoned web veterans will assume that this is a pixel based value, but this app isn’t built for seasoned web veterans, it’s built for newbies who need more information than what is offered here.

I was also confused about the margin and padding options presented to me. Was I setting global values for margins and padding? Why would I want to do that? When I code by hand I typically reset these values to zero, is that what I should do here? It turns out though that these values are for your main container. Again, a little more information would go a long way.

It’s not all bad though. I do really like that you can set up columns right off the bat. Really this just amounts to some guides being slapped on the page, but that’s a good thing. I like that setting up a grid doesn’t mean that I’m forced to stick to it in all circumstances.

Meet Muse

The Muse interface is just familiar enough that you’ll know how to get around if you use other Adobe products. There’s a positionable panel of tools on the right, a strip of buttons and options along the top and your main canvas in the center.

The app was built in AIR, which annoys the crap out of me as a Mac user. The result is something that almost looks native but feels quite different than a dedicated Mac application. This leads to several frustrating quirks. For instance, the main panel looks a lot like something you’d see in Photoshop.

Consequently, you expect it to work the same. Unfortunately, this panel can’t be anchored to the side of the screen like you’re used to, which means that it always feels in the way. You can reduce it to an icon strip, but it collapses to the left, so the default right side position becomes a poor spot.

No matter, you can simply move it to the right and keep it collapsed to save room. Like in Photoshop, clicking on a icon expands only that part of the panel, oh wait, no it doesn’t. Instead it expands the entire panel, which entirely defeats the purpose of the button strip.

Moving along, below you can see some of the options and buttons that reside along the top of the interface. There are three main view modes: plan shows you all pages in an outline, design is where you do your building and preview is where you see an in-app live web preview of your site (hit Command-Shift-E to preview in the browser).

Near the center of this topside panel is where you find what would normally be your floating toolbar containing the following: Selection Tool, Crop Tool, Text Tool, Zoom Tool, Hand Tool and Rectangle Tool. This is also where you apply various styles, add links, etc.

Building a Webpage

From here, the workflow is fairly intuitive. If you want to place some text, you grab the text tool. If you want to draw a box, use the rectangle tool; it’s that easy. As a coder, it scares me that I can’t manually set the parameters for elements that I add, but I guess that keeps things simple. For instance, if I want to set a paragraph to 300px wide, I just have to eyeball it or use my grid. And forget the box model, you just shove things where you want them.

One thing that Muse does pretty well is integrate with Photoshop and Fireworks. You can place a file from one of these apps, go back and make changes, and the edits will be updated automatically in Muse.

One of the things that I thought was a little clunky was working with the canvas. I couldn’t figure out how to simply select the background. It turns out just clicking on it does the trick, but there’s really no visual feedback to tell you that you’ve got it right.

From here you can apply a background fill or image with all of the options that you’d expect. If you’re working with an object, you can apply gradients and shadows, define hover states, round the corners, add links to other pages, etc.

Muse’s Workflow: The Good And The Bad

There’s a lot about Muse that Adobe got right. It’s really easy to just pick up and run with. I figured out pretty much everything I needed to with no outside instruction whatsoever. I think non-coders will really appreciate it as something more powerful than the typical WYSIWYG without being as overwhelming as something like Dreamweaver.

At the very least, it’s a great way to mockup websites, and its price range puts it into an area that’s somewhat competitive with online wireframing services that offer a lot less.

Now, from a coder’s perspective, there’s a lot I would change. I know the app isn’t built for coders, and maybe it should stay that way, but that doesn’t mean it shouldn’t share the constructs used to build web pages. The metaphor here is broken. Adobe needs to stop building page layout apps with web functionality and instead build a visual front end to the coding process.

Working with objects should be much more closely related to working with CSS than it is here. I should be able to set my color with RGBa, define the margins and padding for a button, set a paragraph’s width to 30% of the browser window, and create a font-family, but I can’t do any of this. Adobe has chosen familiarity and pretense over web design constructs and I think they’re on the wrong side of that fence.

The Code

After getting to know the interface, I busted out a super simple page so that I could see what the process is like and, more importantly, take a look at the output. Here’s what I came up with (click the image to see the live demo):

When you check out the demo, be sure to hit View Source so you can take a look at the code that was generated. I kept the page design simple for a reason: so I could see if the resulting code was also simple. A page like this would use a minimal amount of handcoding and should be fairly easy to sort through whether you can write code or not.

The good news is that Muse exports HTML and CSS, so thankfully the Flash only idea died with Project Rome. Predictably, the resulting code is extremely div heavy. Using the default navigation menu, each link uses a list item and not one, but two divs.

For the most part, the classes have straightforward names applied, but the ID names are useless and vague (example: “u154-4″). Overall though, it’s far from the worst WYSIWYG output I’ve seen. I can still easily read through it and see the structure. It’s certainly fluffed up, but only enough to make a coder roll his/her eyes instead of an abomination that will make him scold your very existence.

So Is It Worth It?

In the title of this article I promised to tell you whether or not Muse is worth the $15 per month. This question is difficult to answer simply because I question who the product is for. If you plan on building sites for a living, this isn’t the way to go. If you simply want to run your own little site, having a monthly fee simply to own the software isn’t exactly a thrilling prospect.

Bottom line: Muse is worth the money… in the short run. In the first few months, you’ll have a great piece of software with very little expense. However, using the subscription model, after two years, you’ll have paid around $360 for Muse. In my opinion, this pushes the upper limit of what the software is genuinely worth at this point. This may change as updates come, but if there’s no significant improvement, it simply doesn’t seem worth the expense in the long run when RapidWeaver is $80 and Flux is less than $150 (both Mac only options unfortunately).

How Adobe Could Make It Better

It’s interesting that I state that RapidWeaver might be a better way to go. With its rigid template-driven structure, RapidWeaver is far from anything that you would use to build a site from scratch. However, Rapidweaver has a rich third party plugin market capable of pushing it to greatness far beyond the default rigidity. With Blocks and Stacks, Rapidweaver becomes an impressive freeform site builder.

This gives me an idea for how Muse could be made a lot better with very little effort. Adobe should take a page from the RapidWeaver book and open up a marketplace where users can provide plugins. This way users decide what’s missing and how it should be integrated. If I want to use Muse to build responsive web pages, I’d simply download a plugin that would add the missing functionality. Granted, I’d prefer for Adobe to just understand the web design industry and build a tool that fits the market better, but in lieu of this option I’d take a RapidWeaver-like plugin market.

What Do You Think?

Now that you’ve seen my take on Muse, I’d love to hear yours. Do you think Adobe has finally nailed the idea of codeless web design or are they still treading water, pushing out products that aren’t moving the industry forward?

More importantly, how can Adobe refocus their efforts and create a product that you’d gladly shell out $15 a month to use?

Today I’m working on another awesome free download for PixelsDaily. Here you’ll be able to see my thought processes, goals and code, and later you’ll be able to download the whole project to use in your own work.

Basically, our goal here is to create a simple effect so that when the user hovers over an image, a hidden text label pops up into view. This is of course extremely easy to do so we’re going to go a step further by building a whole bunch of options for the developer to choose from. This will provide you with some good practice for how to create flexible effects that can be applied in different ways without too much code repetition.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Sneak Peek

If you’re anxious to see the result before you go through the code, check out the demo below and hover over each image to see how it’s different.

Demo: Click Here to launch.

The Plan

Here’s what we want: a simple text label with a black background to appear over the image when the user hovers. Now, since it’s going to be animated into place, I came up with a total of ten different variations that equate to roughly the same element being used in different ways:

We have two main parameters to set here. The first is where the the label will come to rest (top, center or bottom) and the second is where it will come from (top, right, bottom, left). What we’ll want to do is provide a basic repeatable HTML structure for developers to use when adding an image, then give them some classes that can be applied to control everything about the label’s behavior. With this in mind, we can proceed to the first step.

The HTML

<div class="label top">
  <p>Persistence in Memory</p>
  <img src="img1.jpg" />
</div>

</ br>

For the HTML, we need a simple wrapper div that contains a paragraph and an image. The paragraph will serve as the hidden text label and the classes applied to the div will tell us two things: first, that we want to give this div the label treatment and second, which label treatment to give it.

We could skip the generic label class, but that would mean that all of the styles associated with every label would have to be duplicated in each version of the label, which would make for a big fat mess of unnecessarily repetitious code. This way we can apply most of the styling to one single class and save the changing styles to our specific classes.

Now let’s expand this out so we can try the ten different effects that we’re aiming for in our final result. We’ll keep all the divs for this tutorial, but the classes should be flexible enough that you can use block level list items as well if you’re building a gallery. We really just want to make sure each image effect works in an individual setting.

<div class="label top">
  <p>Persistence in Memory</p>
  <img src="img1.jpg" />
</div>
 
<div class="label bottom">
  <p>The Scream</p>
  <img src="img2.jpg" />
</div>
 
<div class="label bottomright">
  <p>The Last Supper</p>
  <img src="img3.jpg" />
</div>
 
<div class="label bottomleft">
  <p>Mona Lisa</p>
  <img src="img4.jpg" />
</div>
 
<div class="label topleft">
  <p>Starry Night</p>
  <img src="img5.jpg" />
</div>
 
<div class="label topright">
  <p>Girl with a Pearl Earring</p>
  <img src="img6.jpg" />
</div>
 
<div class="label centertop">
  <p>Whistler's Mother</p>
  <img src="img7.jpg" />
</div>
 
<div class="label centerbottom">
  <p>The Kiss</p>
  <img src="img8.jpg" />
</div>
 
<div class="label centerleft">
  <p>American Gothic</p>
  <img src="img9.jpg" />
</div>
 
<div class="label centerleft">
  <p>Water Lilies</p>
  <img src="img10.jpg" />
</div>

</ br>

Starter CSS

Now that we’ve got a good idea of what our HTML structure will look like, it’s time to jump over to our CSS. To start off, toss in a lazy man’s reset (or something more robust if you prefer) and a background pattern.

* {
   margin: 0;
   padding: 0;
}
 
body {
   background: #f5f5f5 url('wood_pattern.png');
}

</ br>

Now it’s time to implement some generic label styles. Most of what we need to do will specifically apply to the paragraph, but there are a few things that should be done here as well. Start off with the specific styles that you need to make the layout work. since we’ll be working with images of varying sizes, I used inline-block for the display context with a top vertical alignment. I also set the overflow to hidden and the position to relative, both of which are vital for this experiment.

Next I threw in some optional visual styles. These are separated so that a developer who downloads these files can easily see how to customize the look and feel of the items without screwing up how they work.

.label {
  /*Position*/
  display: inline-block;
  vertical-align: top;  
  overflow: hidden;
  position: relative;
  margin: 20px;
 
  /*Skin*/
  border: 7px solid #fff;
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
          box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
 
/*Extra Padding Fix*/
.label img {
  display: block;
}

</ br>

Notice the peculiar block positioning context applied at the end here. For whatever reason, this layout was giving me an extra four pixels of padding at the bottom of each image that couldn’t be manually overridden. This fixed this problem.

Status Update

At this point we’re looking good. Our images are lining up nicely and have the styling that we want. The only weird part is that the text labels are all screwed up and that’s what we’re going to attack next.

Style the Labels

Now it’s time to style the labels. Once again, it’s very important to figure out which styles can be reused and which need to vary. To do this, I simply ran ahead and created a bunch of different individual labels, then looked through to see where my code was redundant.

The realization is that each label will have to have absolute positioning (which works with the relative positioning from before), padding, a set width, transitions and visual styling. These properties will be identical, no matter what direction we’re coming from or what the final resting place of the label will be.

.label p {
  /*Position*/
  position: absolute;
  padding: 10px;
  width: 100%;
 
  /*Skin*/
  background: #000; /*fallback*/
  background: rgba(0,0,0,0.7);
  color: #fff;
  font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

</ br>

Status Update

As you can see in the image below, all of our labels are working now and look perfect. Notice that they’re all positioned at the top by default, keep this in mind as we move forward and shove them around.

Position Each Label

From here, we have a lot of styling to do. Really we have a tiny bit of styling to do, but we have to do it ten different times because each label is unique. For each label, we need to position the paragraph element out of the bounds of the picture, then bring it back in on hover.

To begin, we want a label that will start just above an image that will fly downward on hover and rest at the top. To do this, we set the top value to -50%, which then changes to 0% on hover. Similarly, for the same effect from the bottom, we start with a bottom value of -50% and change that to 0%.

My method here is very specific so take note. The trickiest part of this whole idea is figuring out how to make it work on a wide range of image sizes. We don’t want the developer to have to manually enter in a size every time, it should just work when someone slaps on the required classes.

By utilizing the top and bottom properties the way we are, we ensure that nothing is image-size-specific. The value of 0% on the bottom property will always push our label down to the bottom of the image we apply it to, no matter how far that may be.

/*TOP LABEL*/
.top p {
  top: -50%;
}
 
.top:hover p {
  top: 0%;
}
 
/*BOTTOM LABEL*/
.bottom p {
  bottom: -50%;
}
 
.bottom:hover p {
  bottom: 0%;
}

</ br>

Next up, we need to style our labels that swing in from the sides. We can swing in from the top left, top right, bottom left and bottom right. Here are the values for these. The method is straightforward and just like the two we just went over. Each time we set the resting position just off to one side, then bring it back into view with the hover. For these, the left and right properties come into play in addition to the top and bottom properties.

/*BOTTOM LEFT LABEL*/
.bottomleft p {
  bottom: 0%;
  left: -150%;
}
 
.bottomleft:hover p {
  left: 0%;
}
 
/*BOTTOM RIGHT LABEL*/
.bottomright p {
  bottom: 0%;
  left: 150%;
}
 
.bottomright:hover p {
  left: 0%;
}
 
/*TOP LEFT LABEL*/
.topleft p {
  top: 0%;
  left: -150%;
}
 
.topleft:hover p {
  left: 0%;
}
 
/*TOP RIGHT LABEL*/
.topright p {
  top: 0%;
  left: 150%;
}
 
.topright:hover p {
  left: 0%;
}

</ br>

To finish off, we need to code our centered labels. These are the hardest of the bunch to figure out. On hover, you want to place them fifty percent of the way down or up, minus half of the height of the label. So when we want to slide in from the top, we set the top value to 50% and apply and negative margin of 20px (half the height of our labels). Unfortunately, this does assume a single line of text and the specific font-size that we’ve set up. If either changes, then the height will be different and the item won’t be centered. The only way I know around that is to use some sort of display: table setup.

/*CENTER FROM TOP*/
.centertop p {
   top: -50%;
}
 
.centertop:hover p {
   top: 50%;
   margin-top: -20px;
}
 
/*CENTER FROM BOTTOM*/
.centerbottom p {
   bottom: -50%;
}
 
.centerbottom:hover p {
   bottom: 50%;
   margin-bottom: -20px;
}
 
/*CENTER FROM LEFT*/
.centerleft p {
   top: 50%;
   left: -150%;
   margin-top: -20px;
}
 
.centerleft:hover p {
   left: 0%;
}
 
/*CENTER FROM RIGHT*/
.centerright p {
   top: 50%;
   left: 150%;
   margin-top: -20px;
}
 
.centerright:hover p {
   left: 0%;
}

</ br>

Optional: Going Further

Now, if you’re crazy about repetition, you can go even further with making sure your code is as brief as possible. We separated out each label above for the sake of readability, but the result is a lot of values that are repeated throughout. We could go in and either manually combine selectors or use Sass @extend and come up with a much more concise result. The tradeoff here of course though is that you’re repeating your selectors because some appear in multiple places.

.top:hover p, .topleft p, .topright p {top: 0%;}
.top p, .centertop p {top: -50%;}
 
.bottom:hover p, .bottomleft p, .bottomright p {bottom: 0%;}
.bottom p, .centerbottom p {bottom: -50%;}
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {left: 0%;}
.bottomleft p, .topleft p, .centerleft p, .centerleft p {left: -150%;}
.bottomright p, .topright p, .centerright p {left: 150%;}
 
.centerbottom:hover p {bottom: 50%;}
.centertop:hover p, .centerleft p, .centerright p {top: 50%;}
.centertop:hover p, .centerleft p, .centerright p {margin-top: -20px;}
.centerbottom:hover p {margin-bottom: -20px;}

</ br>

See It In Action

We’re all finished! Be sure to check out the live demo below and hover over each image to see the different effect.

Demo: Click Here to launch.

Conclusion

This project forced us into a lot of good thinking. We had to consider several times how to keep our code brief and free of repetition. We also consistently asked what was best given that we want others to be able to download and change our code with very little trouble. Sometimes when we saw a way to make our code more concise, it came at the price of readability and ease of use, which isn’t the best method for a free download.

Feel free to grab this code and use it however you like. Also keep an eye out for the download sometime in the coming weeks on PixelsDaily.

It’s time for another awesome web design critique, where we take a look at a real 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 WebAppers, a great place to find open source web resources. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About WebAppers

“WebAppers is a blog dedicated to share top quality open source resources for web developers and web designers daily. As a web designer, you’ll find some of the best free icons, stock photos, brushes, fonts and design inspirations. As a web developer, you’ll also find some of the best Javascript and Ajax components like modal windows, menus, galleries, tooltips, charts, calendars plugins and a lot more.”

Here is a screenshot of the homepage:

First Impression

If you’re wondering whether a Design Shack critique is worth it, you need look no further than the repeat customers. WebAppers was actually the customer for our 14th web design critique and they’ve come back to have us take a look at their brand new, completely redesigned responsive site.

My first thoughts for the new design are very positive. This is no small update, they’ve taken the site in a completely new visual direction and I really think it’s better for it. The old site had a cobbled together sort of look, like various non-matching resources were thrown together. The new design, by contrast, is very clean and professional and comes off as a completely custom piece of work. And it’s responsive to boot!

We’re still very early in the responsive evolution of the web so my hat goes off to anyone who’s actually taking the initiative to remove RWD from the comfortable area of theory and put it into real world practice.

Let’s dig deeper into the site’s design and see what is working well and what could stand to be improved.

New Logo

The old WebAppers logo had this sort of 80s rocker appeal. There was a cat of some sort, some lighting bolt shapes; it was quirky but fun.

I always found the logo to be a little confusing though. I could never quite tell if the lightning shapes were meant to be just that or if they were perhaps a lion’s mane. And what did any of that have to do with open source web resources anyway?

The new logo takes a simpler, text-based approach. I actually love the visual of the page curl “W”, the center of which also serves as an “A”. It’s just a flat out cool idea that was pulled off quite successfully.

I also like that the logo clearly states what the site is all about. As soon as I load the home page, my eyes drift to the logo and I know what the page is offering me. This is extremely important and it’s all too often in these critiques that I’m telling a designer the opposite (that it’s difficult to see what their site is all about).

Layout

As I mentioned above, the new layout is responsive, and by that I mean that it uses media queries to reflow the layout at a number of preset breakpoints. To be “fully responsive” some say that a site must also be built on a fluid grid like the one seen on Smashing Magazine, a project which no doubt inspired this one in some way.

WebAppers doesn’t reflow itself to every minute change in the browser width (at least until the smallest iteration), and to be honest, as I play around with it, I think that’s fine. It’s still a remarkably flexible design that adapts well to all kinds of different screen sizes, which is a lot more than most websites can claim.

In the wide version, there are four primary columns. From left to right they are the navigation, primary content, secondary content sidebar and advertising. The two sidebars have been designed to look almost like drawers that slide out of the main content, a perfect metaphor considering that they collapse as the width narrows.

As we narrow the window down, we drop the advertising column on the far right. The content doesn’t merely disappear at this point though, instead the ads appear above the right sidebar, pushing that content downward. This is an elegant solution that looks great and still maintains most of the original content.

There’s a subtle jump after this that narrows the main content column slightly. The container becomes narrower, the text size decreases and the images reduce their width. If we narrow the window even further we get the most significant layout shift:

Here we can see that the third column has completely dropped away and any content that was inside has become hidden. This means that the ads have disappeared completely (Smashing Magazine does the same thing) and the sidebar containing the popular content and search field is gone as well.

My only real problem here is that from this point on the site doesn’t appear to be searchable. I’m all for shifting design as the screen size changes but functionality is a touchier subject and reductions must be approached with caution. Searching seems like a fairly primary feature and I’d likely be frustrated that I can’t perform this task on my phone or tablet.

Eventually, the site breaks down to a single column layout with the navigation now appearing in a simple native dropdown menu, which typically work well on both mobile and desktop devices.

Overall, I think the layout works really well, and with the exception of the search functionality, I’m not sure I would change much about it.

Looking behind the scenes we can see that this project was helped along by Twitter Bootstrap, which is nice because the page doesn’t look like your typical copy/paste Bootstrap project at all and proves that you can use that toolkit under the hood without sacrificing custom design.

Aesthetics

Now that we’ve discussed how the structure or bones of the site work, let’s take a look at the icing on top. The site takes on a largely gray color scheme with subtle pops of color here and there. It makes heavy use of attractive, minimal icons and of course Helvetica as its primary and nearly exclusive typeface.

My least favorite aspect of this entire site is the lack of contrast. Everything on the page has a sort of monotonous feel with nothing really standing out. I can see how the muted look is meant to be easy on the eyes, but it’s bland enough that it almost feels a bit straining.

The solution for this, as far as I’m concerned is so easy that it only involves replacing a single file: the background texture. I grabbed a dark texture from Subtle Patterns and gave it a test run on the WebAppers site with great results.

The dark background adds some much needed contrast to the site and really highlights the main content by pushing it to the forefront of your attention. It’s amazing how much of a difference a little tweak can make!

One other small thing that bugs me slightly is the shadow effect on the article titles, seen in the screenshot below:

One one hand, I think it’s a cool effect. On the other, I think it makes the text considerably more difficult to read. Perhaps if the shadow’s opacity were simply reduced it would be less distracting.

Summary

I think the WebAppers redesign is definitely a success. The site is more beautiful than ever and has taken a nice jump towards being device agnostic. It’s easy to use, the branding is more logical and the content presentation is really nice.

My one big concern is the lack of visual contrast, a concern which completely vanishes with the inclusion of a darker background pattern. I’m also skeptical of the decision to drop the search functionality on the narrower versions of the layout. I don’t think visiting the site on my iPhone should necessarily mean that I lost the ability to search.

Other than these issues though, it’s a great site. Be sure to stop by and give it a test drive. I think you’re going to like what you see.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.