BlogmyQuery – BMQ

In the design world, volumes have been written advising the newbs, and those with some established street cred, on the ins and outs of being a top shelf designer, and many of these posts will either be focused on or at least include a brief mention of finding your own voice. Your individual style that will give your work that unique and distinctive edge most crave. However, in stark contrast, there is actually very little offered or written on how to achieve this. Only mentions of its importance. Enter this post.

Hopefully this discussion will help you dissect your design approach to find your own voice that lays in wait beneath it. The voice that will aid your work in standing out from the others in the field who have flare and flash, but not individuality. Too often we fall victim to the trends in the community and begin following them without even attempting to make them our own. To inject our own flavor. Because, in all honesty, we have never really given it a try. Schools, businesses, anyone that offers to teach you design tend to only build you a framework, but so many of us forget that we are supposed to fill in the rest.

Here are some tips that we hope will help.

Step 1: Learn the History

Oddly enough, learning the history of the design field is actually taking a step in the right direction. If you want to get a rough and tumble introduction into the ins and outs, ups and downs of the design world, then look into its history. The beginnings of it all, the evolutions of the field and its practices is a fantastic place to gain that insight. Watch as the dominating themes grow and change over the years, shaping the field and pushing its progress.

Taking this sort of grand overview of the entire field and its history is also a great way to see where the field has failed to progress. What areas it needs to have people pushing the envelopes, as it were.

Resources

Design is History is a wonderful site to explore the field of design.

Interactive Design History Timeline is a unique and fun way to get an overview of the design up through the 1950’s.

Step 2: Learn the Basics

The learning doesn’t end there (it actually never does). The basics also need a little attention during this phase of your development. Learn the various design principles and the essential elements that all work together to breathe life into your work. There are fundamental rules that are used to guide the field and that designers are expected to know. And that we are expected to follow, to some extent. Some designers feel like they can skip over the basics, but that is a huge underestimation of all that they can teach you about design.

One of the main lessons that we need to take away from the basics is the communicative properties that these fundamentals possess. When we learn about these building blocks of design, it gives us the ability to use those blocks to their fullest potential regardless of our adherence to all of the underlying rules as we understand them. It effectively empowers us to be able to break the rules that guide our work.

Resources

Principles of Design is an in depth look at the fundamental and guiding principles that govern the field.

The Lost Principles of Design is a useful post from Fuel Your Creativity that examines these design basics.

Step 3: Forget Everything You’ve Learned

Once we have gotten all of the history and basics down, have learned all of the ways that our designs communicate with the viewers, and have an understanding of the rules, comes a fairly key step in developing a unique style and voice of our own. We have to forget everything that we have learned. Throw out the rulebook that we have been depending on, before it becomes something of a crutch that keeps us from daring into more innovative waters. Don’t mistake what we are saying, it is important to have this foundation, or framework in place. But too often we allow these basics to confine our creativity. To limit our potential as it boxes us in.

If we are going to find our own voice in the design world then we have to break out of the box and think for ourselves. The box is comfortable, sure. Full of all of the familiar, but that is not necessarily the way forward. That is more often than not, the way to stagnation as we play it safe. So on this journey we have to first build the framework before we effectively tear it down and rebuild it as we see fit. But without knowing how it all fit together in the first place, we might find it difficult to make it come together for us as we craft our own style.

Resources

CSS Drive Gallery – Unconventional Designs category has a slew of sites that you can check out to see the ways that some have broken out of the box.

Awwwards | The CSS Website Awards is a site dedicated to finding and featuring inspired, original designs.

CSSelite – Unique CSS Gallery is another CSS gallery site with a section that is dedicated to unique styles.

Step 4: Question Everything

Inspiration is a wonderful thing, and is something of a staple of the design process, but we have to remember that when we look at other designs, we need to be dissecting them. Digesting the piece and questioning every aspect and element of it. Design is, for all intents and purposes, strategic and artistic problem solving. Though there are those who might argue with that (especially the artistic part of the equation).

Through a thorough dissection of a design, we can gain a useful understanding of the reasons behind every design choice that was made in a piece. Armed with this knowledge we will be able to craft designs to fit any solution we may need. This will strengthen our design voice, so we should never stop asking questions.

Resources

Dissecting Web Design: The “App� Site is a great example of how we should begin to pick designs apart to find out ways we can learn from them.

Dissecting Web 2.0 Design is another fine example of getting into this questioning frame of mind.

Step 5: Be Weary of Trends

Trends are a powerful force in the design community, and as we set out to find our own voice we need to be able to spot those that we may be drawn to. Though it is not just about being aware of them, as much as it is that we need to beware of them. Trends are fine, and can always be beneficial to play around with and incorporate hints of from time to time. They can open up both our designs and our eyes to techniques and the like that we would have otherwise missed out on. Or worse, dismissed without mining it for potential. So we are not saying that they do not have a place, and one that can be construed as valuable in the web design world.

We just have to be careful is all. If we cannot distinguish the trends from variations on our own style, then we risk never truly being as original as we believe that we are. When we think we are breaking new ground, we are simply treading over areas that have already been covered. It takes some work to make a trend your own, as it were, and to seamlessly blend them into your style, but it can work. There are reasons trends take off, and it is usually because of the somewhat unique solutions they provide. Dissect those trends and connect with the reasons behind them and you are more likely to be able to distill bits of them into your own voice.

Just Google ‘Web Design Trends’ and you will be busy for quite a while

Step 6: Try

It may seem a bit trite, but when it comes to breaking out of the comfort zones and finding our own individual design voice, we cannot be afraid to just try. So often, we allow our fears to hold us back and prevent us from taking risks with our work. But if we never try, then we are certainly never going to find our own unique style. When we design, we should never be afraid to try something different, to explore a previously unheard of route to find the solutions we need. If we think of something to try, no matter how outlandish it may seem, give it a go. We might just find our way to something magical that we would have missed out on otherwise.

It is often hard to find a tale of someone in history who made a name for themselves in their chosen field by sitting on the proverbial benches never daring forward. We cannot be afraid of stepping into new areas and trying new things with our designs, or else we relegate ourselves to a place of near irrelevance. Design is about exploring ideas and finding those solutions that engage and mesmerize. If we cannot find new ways to keep the audiences attention held, then our work is not exactly a success. And often times the best chances we have at drawing them in, is by coming at them in a fresh new way. This tends to mean trying something different.

Resources

Tuts+ Network is a fantastic resource hub for tutorials that can help you gain more confidence in your skills so that you will go for it!

Web Designer Wall is a site where web designers can find some amazing tutorials and some trend info to be on lookout for. Great place to find new techniques and things to try.

Designers Toolbox is a valuable resource hub for designers of all flavors. When you get ready to try out your skills, this site can hook you up with some of the goods you’ll need.

Step 7: Fail

The biggest reason most of us are afraid to heed the advice just mentioned, is because of that fear we spoke of. That fear is often of failure. Which when you think about it, is really quite silly. For we tend to learn extremely well from our mistakes and our failures. If nothing else, we take away that we have what it takes to keep going and try again. But there is usually more that we end up learning from this failure. We find the incompatibility of certain elements and techniques with particular messages for instance. So failing is not something to be feared, but embraced if we are going to find our own design voice.

One way to think about it is like this. Almost every great feat of innovation that has come about, not just in design, but overall, did not work on the first try. There are often numerous failures that lead up to that one victorious moment of breakthrough. Each failure teaching a valuable lesson along the way. Pushing the innovators forward with each mistake, not setting them back as most would deem it. We also cannot discount the amount of accidental innovation that comes from failure. Wherein we stumble upon entirely new or unrelated ideas to pursue, perhaps for our current project or for a future one. So failing can take our work and style to new heights if we are not afraid of it.

Resource

How Failure Breeds Success is an amazing and inspirational article on the Businessweek Blog with examples of businesses that embraced and learned from their failures.

Step 8: The Criticism Schism

As we explore these new avenues to find a voice that feels right for us, we are going to need to get feedback from the community on our work to make the most of this growth. When the critiques start to come in, we need to recognize when criticism is genuinely constructive, and when it stems from those in the field who disagree with our breaking of the rules and daring off on a path of our own. Understand this will make some people uncomfortable, even feel challenged. Unfortunately, their criticism will generally not be that helpful to us in these cases. So it is vital that we be able to separate the two for your own sake and sanity.

It’s human nature, and the design field is subject to its whims just like every field is. When members of the design community, especially those who will always play it safe and by the rules, come across works that step outside the boundaries of what is generally thought of to be acceptable, they have a hard time seeing anything beyond those rules that have been discarded. So any innovation you hoped would engage your audience in a new way, is going to go right over their heads. Their critiques will all, possibly somewhat harshly, be connected to the principles or rules that you ignored. This can help you determine if their critiques are beneficial, or a bit biased.

Resources

21 Resources for Getting Design Feedback is a collection of wonderful places to turn for getting some honest and useful critiques of your work.

Web Design Criticism: A How-To is one from the old archives here on Smashing that will discusses how to give and in return take criticism of your designs.

The Art of the Design Critique is another great post that can help with the criticism schism aspect.

In Conclusion

So there are numerous steps that we must take to find our own unique design voice, and each of them are as important to the process as the one that precedes it. If we overlook or underestimate any of them, we undercut our journey to find our style.

Are there any steps that you feel should have been mentioned here that we left out? What was the hardest part of finding your own voice, or if you have not yet, which step do you foresee having the most difficulty with?

(rb)

Social media icons are integrated into every major website design today. They are frequently displayed prominently in sidebars and headers in order to promote such things as RSS feeds, Facebook fan pages and Twitter profiles. They are cropping up all over, creating a near endless demand for these resources.

Whilst you can link to your social media accounts with basic text links, it is far more common to use a social media icon that stands out and grabs the attention of visitors. Today we will be showing you 50 social media icon sets that you can download for free and use on your website to promote your social media profiles.

The Icon Goodies

1. Splatter Social Media Icons

2. Free Social Media Bookmarking Icon Set

3. Cheers: A Free “Social� Icon Set

4. Heart: A Free Social Icon Set

5. Free social media icon set

6. OLED social icons

7. Free Google Plus Icon Vector

8. Free Google Plus Icons Set

9. Social Media Sleek Icons: Icon Pack

10. Vintage Icon Set For Bloggers

11. Google + Circular Icon Set (PSD + PNG)

12. 81 Pixel perfect Social Media Icons

13. Ultimate Social Network Icon Pack (45 Icon Sets)

14. [Freebie] Social Truck Icon Set

15. Page Peel – A Free Social Media Iconset

16. Exclusive Scribble Social Media Icon Set and Tutorial

17. ElegantThemes Free Social Media Icon Set

18. Vector Social Media Icons

19. Neon Social Media Buttons

20. Social media icons

21. Free Sweet Candy Social Icon Pack

22. Ball social icons

23. Handycons 2 – another free hand drawn icon set (also see HandyIcons 1)

24. SocialClean- Free Social Network Icons

25. Social Media Icon Pack

26. Sea Sand Beach Social Icons Pack for Vacation

27. Icon set: Free glossy social icons

28. Starry SIite! New 16 Social Media Icons + PSD!

29. Social Media Stars Icon Set

30. Circle Social Media Icons

31. Glossy Aqua Style Social Media Icon Pack

32. Old Bottle Crowns Icon Set

33. SocialMate: 28 Free Social Media Icons (Includes PSDs)

34. Free Set of Social Media Icons – Large Icons Social

35. Isometrica (Volume 1): A Free Social Media Icon Set

36. Free Icon Pack: Vector 3D Social Icons

37. Social Media Icons Pack in 3 Sizes for Download

38. 27 Circular Social Media Icons in 3 Sizes

39. Social Media Icons

40. Web Social Media Button

41. Socializic

42. Social Media Bubbles: Icon Pack

43. Social Media Bubblicons: Icon Pack

44. Social 3D Icons

45. Somicro: 27 Social Media Icons

46. Free Stamp Social Network Icon Set

47. Simple Social Icons PSD

48. “Buddycons� – Vector Social Media Icons

49. 28 Social Media Icon Badges

50. Simplito: A free social icon set

We hope you have enjoyed this free collection of free social media icon sets new and old. What are some of your favorite free social media icon sets to use in your web design projects? Let us know in the comments below!

(rb)

I just recently ran into an issue when styling buttons that had me pulling my hair for a while. I had my buttons looking the way they were supposed to look in desktop browsers, but when I went to have a look in Safari for iOS, much of my CSS wasn’t applied.

This was pretty puzzling as I couldn’t remember having any problems with buttons in Safari for iOS before. After taking a closer look at the CSS I was using for these particular buttons and the CSS I had used previously, I managed to find out what made the difference.

Read full post

Posted in CSS.

Copyright © Roger Johansson

In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only real paper we use is bathroom tissue, it might seem odd to write about the long-forgotten habit of printing a Web page. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world.

In fact, tons of paper float out of printers worldwide every day, because not everyone has a tablet yet and a computer isn’t always in reach. Moreover, many of us feel that written text is just better consumed offline. Because I love to cook, sometimes I print recipes at home, or emails and screenshots at work, even though I do so as rarely as possible out of consideration for the environment.

Print style sheets are useful and sometimes even necessary. Some readers might want to store your information locally as a well-formatted PDF to refer to the information later on, when they don’t have an Internet connection. However, print styles are often forgotten in the age of responsive Web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for readers and show them that you’ve gone the extra mile to deliver just a slightly better user experience. So, how do we start?

Getting Started

Let’s look at the process of setting up a print style sheet. The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}

For this to work, we have to prepare two things:

1. Include all screen styles in the separate @media screen {…} rule;
2. Omit the media type for the condensed style sheet: <link rel="stylesheet" href="css/style.css"/>

In rare cases, using screen styles for printing is the way to approach the design of the print style sheet. Although making the two outputs similar in appearance would be easier this way, the solution is not optimal because screen and print are different kettles of fish. Many elements will need to be reset or styled differently so that they look normal on a sheet of paper. But the biggest constraints are the limited page width and the need for an uncluttered, clear output. Building print styles separately from screen styles is better. This is what we will do throughout this article.

Of course, you could separate the declarations for screen and print into two CSS files. Just set the media type for the screen output to media="screen" and the media type for printing to media="print", omitting it for the first one if you want to build on the screen style sheet.

To illustrate, I have set up a simple website of the fictional Smashing Winery.

Our example website.

Everything needed for a proper screen display is in place. But as soon as the environment changes from virtual pixels to real paper, the only thing that matters is the actual content.

The two pages of the unaltered print preview. The header is not yet optimal, and both the main navigation and footer are superfluous.

Therefore, as a first task, we will hide all the clutter: namely, the main navigation and footer.

header nav, footer {
display: none;
}

Depending on the type of website, you could also consider hiding images by default. If the images are big, this would be wise, to save your users some printing costs. But if the images mainly support the content, and removing them would compromise the meaning, just leave them in. Whatever you decide, limit the images to a certain width, so that they don’t bleed off the paper. I’ve found that 500 pixels is a good compromise.

img {
max-width: 500px;
}

Alternatively you could also rely on the tried and trusted max-width: 100%, which displays images at their maximum size but not bigger than the page width.

You might want to use a simple trick to get high-quality images when printing. Just provide a higher-resolution version of every image needed and resize it to the original size with CSS. Read more about this technique in the article “High-Resolution Image Printing� on A List Apart.

Of course, we should hide video and other interactive elements, because they are useless on paper. These include <video>, <audio>, <object> and <embed> elements. You might want to consider replacing each video element with an image in the print style sheet, too.

With the main navigation, footer and images gone, the actual text is getting ever closer to center stage. But work remains to be done, especially with the header.

Adjusting To The Right Size

To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:

@page {
margin: 0.5cm;
}

will set the page margin on all sides to 0.5cm. You can also adjust the margins for every other page. The following code sets the left page (1, 3, 5, etc.) and right page (2, 4, 6, etc.) margins independently.

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

You can also use the :first page pseudo-class that describes the styling of the first page when printing a document:

@page :first {
  margin: 1cm 2cm;
}

Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+. (thanks for the tip, Designshack)

Now let’s tweak some general settings for the fonts. Most browsers set the default to Times New Roman, because serif fonts are considered to be easier on the eyes when read on paper. We can use Georgia at 12-point font size and a slightly higher line height for better legibility.

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

However, to retain some control, we should explicitly set the font sizes below. The chart on ReedDesign gives us a feel for this; but with all of the screen sizes and resolutions out there, these are only rough estimates.

h1 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

Apart from special cases (like the <h2> heading, which would otherwise be too close to the preceding paragraph), we don’t need to touch the margins or appearance of any elements, because they are handled quite nicely by the default settings. If you don’t like that certain elements are indented, such as <blockquote>, <ul> and <figure>, you could always reset their margins:

blockquote, ul {
margin: 0;
}

Or you could override the default bullet style in unordered lists…

ul {list-style: none}

…and replace it with a custom one; for example, a double arrow (and a blank space to give it some room):

li {
content: "» ";
}

You could also make <blockquote> stand out a bit by enlarging it and italicizing the text.

The Header

Currently, the remaining things to be dealt with in the header are the <h1> title and the logo. The first is there just for accessibility purposes and is hidden for screen display using CSS. While we could use it as a sort of header in the print-out to indicate the source of the content, let’s try something more attractive. Wouldn’t it be nice to display the actual logo, instead of the boring text?

Unfortunately, the “Wineryâ€� part of the logo is white and therefore not ideal for printing on light-colored paper. That’s why two versions of the logo are in the source code, one for screen display, one for printing. The latter image has no alt text, otherwise screen readers would repeat reading out “Smashing Winery.â€�

<a href="/" title="Home" class="logo">
   <img src="img/logo.png" alt="Smashing Winery" class="screen"/>
   <img src="img/logo_print.png" alt="" class="print"/>
</a>

First, we need to hide the screen logo and the <h1> heading. Depending on the relevance of the images, we might have already decided to hide them along with other unneeded elements:

header h1, header nav, footer, img {
display: none;
}

In this case, we have to bring back the print logo. Of course, you could use the adjacent sibling selector for the job (header img + img) to save the class name and live with it not working in Internet Explorer 6.

header .print {
display: block;
}

Otherwise, you could just use header .screen (or header :first-child) to hide the main logo. And then the second logo would remain. Keep in mind that in print layouts, only images embedded via the <img> tag are displayed. Background images are not.

Voilà! Now we have a nice header for our print-out that clearly shows the source of everything. Alternatively, you could still remove the second logo from the source code and use the header’s <h1> heading that we switched off earlier (in other words, remove it from the display: none line). Perhaps you’ll need to hide the remaining logo as we did before. Additionally, the font size could be enlarged so that it is clearly recognized as the title of the website.

header h1 {
font-size: 30pt;
}

As a little extra, the header in the print-out could show the URL of the website. This is done by applying the :after pseudo-element to the <header> tag, which unfortunately won’t work in IE prior to version 8; but because this is just a little bonus, we can live with IE’s shortcoming.

header:after {
content: "www.smashing-winery.com";
}

To see what else these pseudo-elements can do, read the description on the Mozilla Developer Network, or consult Chris Coyer’s excellent article on CSS-Tricks.

Another thing about IE 6 to 8 is that HTML5 tags can’t be printed. Because we’re using these tags on the example website, we’ll have to apply Remy Sharp’s HTML5shiv in the header. The shiv allows you not only to style HTML5 tags but to print them as well. If you’re already using Modernizr, that’s perfect, because the shiv is included in it.

<script src="js/html5.js"></script>

Unfortunately, the behavior of the IEs is still a bit buggy even when this shiv is applied. HTML5 tags that were styled for the screen layout need to be reset, or else the styling will be adopted for the print-out.

Some developers add a short message as a supplement (or an alternative) to the displayed URL, reminding users where they were when they printed the page and to check back for fresh content. We can do this with the :before pseudo-element, so that it appears before the logo. Again, this won’t work in IE 6 or 7.

header:before {
display: block;
content: "Thank you for printing our content at www.smashing-winery.com. Please check back soon for new offers on delicious wine from our winery.";
margin-bottom: 10px;
border: 1px solid #bbb;
padding: 3px 5px;
font-style: italic;
}

To distinguish it from the actual content, we’ve given it a gray border, a bit of padding and italics. Lastly, I’ve made it a block element, so that the border goes all around it, and given the logo a margin.

To make it more discreet, we could move this message to the bottom of the page and append it to main container of the page, which has the .content class. If so, we would use the :after element and a top margin to keep it distinct from the sidebar’s content. As far as I’m concerned, the URL is indication enough, so I would rely on that and omit the message.

Finally, we need to remove the border of the logo to prevent it from showing in legacy browsers, and move the <header> away from the content:

img {
border: 0;
}

header {
margin-bottom: 40px;
}

The header shown two different ways, one with a logo and simple URL, and the other with a message and the title in plain text.

The Missing Link

Obviously, on paper, links aren’t clickable and so are pretty useless. You could try to build a workaround, replacing links with QR codes on the fly, but the solution may not be feasible. To put the links to use, you could display the URL after each string of anchor text. But text littered with URLs can be distracting and can impair the reading experience; and sparing the reader excessive information where possible is advisable.

The best solution is the :after pseudo-element. It displays the URL after each anchor text, surrounded by brackets. And the font size is reduced to make it less intrusive.

p a:after {
content: " (" attr(href) ")";
font-size: 80%;
}

We’ve limited this technique to links within <p> elements as a precaution. To go a step further, we could choose to show only the URLs of external links. An attribute selector is perfect for this:

p a[href^="http://"]:after {
content: " (" attr(href) ")";
font-size: 90%;
}

The possibilities for links in printed documents seem to be almost endless, so let’s try some more. To distinguish all internal links, let’s precede them with the website’s domain (omitting all the other properties, to keep things concise and clear):

p a:after {
content: " (http://www.smashing-winery.com/" attr(href) ")";
}

Then, we can hide internal links (#), because there is not much to display:

p a[href^="#"]:after {
display: none;
}

Also, external links will be appended as is, like above. Let’s consider SSL-secured websites, too (i.e. ones that begin with https://):

p a[href^="http://"]:after, a[href^="https://"]:after {
content: " (" attr(href) ")";
}

But there is one thing to remember, especially with external links. Some are very long, such as the ones in the Safari Developer Library. Such links can easily break a layout, like at the screen output. Luckily, a special property takes care of this:

p a {
word-wrap: break-word;
}

This breaks long URLs when they reach a certain limit or, as in our case, when they exceed the page’s width. Just add this property to the first of the above declarations. Although this property is basically supported in a wide range of browsers — even IE 6 — it works only in Chrome when printing. While Firefox automatically breaks long URLs, Internet Explorer has no capability for this.

Finally, we set the link color to black to improve the experience for readers.

a {
color: #000;
}

URLs, whether internal or external, now show up beside links with special treatment.

Aaron Gustafson went one step further and built the little script Footnote Links. According to the description:

This script builds a list of URIs from any tags within a specified container and appends the list as footnotes to the document in a specified location. Any referenced elements are given a dynamically-assigned number which corresponds to the link in the footnote list.

Aaron’s article on A List Apart “Improving Link Display for Print� gives more insight into the idea behind this script.

While we’re at it, letting readers know where quotes come from, such as those wrapped in <blockquote> and <q> tags, would be thoughtful. Just append the cite attribute (which will be the URL) after quotation marks, like so:

q:after {
content: " (Source: " attr(cite) ")";
}

Side By Side

We haven’t yet dealt with the sidebar content. Even though it appears after the main content by default, let’s give it some special treatment. To keep it distinct, we’ll give the sidebar a gray top border and a safe buffer of 30 pixels. The last property, display: block, ensures that the border shows up properly.

aside {
border-top: 1px solid #bbb;
margin-top: 30px;
display: block;
}

To separate it even more, we could set a special print property:

page-break-before: always;

This will move the contents of the sidebar to a new page when printed. If we do this, we can omit all of the other properties.

The sidebar on screen (left) and printed out (right). I’ve grayed out everything else to make it more obvious here.

We could do the same for comments. Comments don’t appear in the example, but they’re still worth touching on. Because they sometimes run long, omitting them in the print-out might be reasonable (just set display: none for the whole container). If you do want to show the comments, at least set page-break-before. You can also use page-break-after: always if there is content to print on a new page. The page-break-before and page-break-after properties are supported in all major browsers.

We can also use widows and orphans properties. The terms derive from traditional printing, and they take numbers as values. The widows property sets the minimum number of lines in a paragraph to leave at the top of a page before moving them entirely to a new page. The orphans property sets the number of lines for the bottom of the page. The orphans and widows properties are supported in IE 8+ and Opera 9.2+, but unfortunately not in Firefox, Safari or Chrome.

Now that we have taken care of the sidebar, the print style sheet is ready! You can download it here. The file is fully documented and so can serve as a helpful reference or starting point.

The completed print style sheet.

Just For Fun

You might be asking, “Why can’t we just put the sidebar next to the main content, like on the website itself?� Well, the screen and print outputs are a bit different. Unlike the former, print-outs aren’t very wide and thus don’t have much space to fill. But depending on the font size, the line length could exceed the maximum of 75 characters and so be more difficult to read.

In this case, we could, of course, limit the width of the main content (preferably not too much — we shouldn’t set the line length to fall below about 55 characters) and then absolutely position the sidebar just below it, just like in the screen display. But describing this method falls beyond the scope of this article, so please consult the screen style sheet of the example website (line numbers 112 and 141 and down).

In my humble opinion, avoid such experiments. While in principle, print layouts have endless possibilities, focusing on the content and removing everything else is better. The better way to ensure an optimal line length is just to shrink the page’s width or enlarge the font size.

Preview Made Easy

Print Preview by Tim Connell is a handy little jQuery plugin that replicates the built-in print-preview function, but with one difference. Instead of opening a separate page, it shows a sleek overlay, with “Close� and “Print� buttons at the top. It also has the convenient “P� shortcut. You might want to check out the demo page, too.

A Missed Opportunity

Imagine that you were able to visit any page, hit “Print� and get an optimized version of the page to enjoy on paper. Unfortunately, we don’t live in this perfect world. Some websites still rely on JavaScript to generate print versions, and many other designers simply don’t care. But this is a missed opportunity. A carefully composed print style sheet could be used not only for printing but to optimize legibility for screen reading.

As the website owner, you can determine the images to display (if any), the optimal font and size, and the presentation of other elements. You could make the content more appealing than the versions produced by Instapaper and Readability by giving the print version the extra attention it deserves.

The Future

While using CSS3 for screen layouts is pretty common nowadays, it hasn’t quite established itself in the print environment yet. The W3C has an extensive description of “Paged Media,â€� but unfortunately support is very limited at the moment, Opera and Chrome being the only browsers that enable a few of its related properties. With decent support, it would be possible to use the @page rule to set the dimensions of the page, switch to a landscape view, alter the margins, and do much more. Even media queries are were conceived to respond to different page sizes.

Websites Designed Well For Print

Let’s take a look at some examples of websites optimized for print.

A List Apart
The slick multi-column design is simplified into a single column, full width, which intuitively mirrors the website’s sensible hierarchy. Article titles and authors are no longer active links. And beautiful clean typography is kept intact, thanks to the compatible fonts and simple colors; no font change is necessary, although the font-size value increases slightly. Advertising and affiliate styles are hidden, and the result is a simple, clean printed page that easily conforms well to any printer or page set-up in the document. A List Apart is exemplary, save for one important point: the logo does not appear anywhere in the print-out.

Lost World’s Fairs
The smooth printed page helps to carry the visuals of the website for Lost World’s Fairs. The main title and its colorful background are swapped for a simplified version in the print-preview style. However, some images could be removed to save some expensive printer ink. (Updated).

The Morning News
One would expect most news websites to employ the print-preview function, yet that isn’t the case. The Morning News has prepared its content for print without much concern, happily excluding background images and color, while still getting its message across.

James Li
James Li has designed his personal website exceptionally well for this purpose, carefully preserving all spacing and key elements. The logo is a part of the printed product, whereas the navigation links are not: very clever, because navigation has no value on a printed page unless it is informative in and of itself. Non-Web fonts are converted to simple printable ones (see “Other Stuff…�). Brilliantly executed for print.

TechCrunch
TechCrunch’s recent redesign tweaked not only the visual design of the site, but also the small details that have to be considered when the site is viewed on mobile or printed out. The print layout is very clean and minimalistic, without unnecessary details, yet also without links to the actual page that was printed out. The TechCrunch logo is omitted as well.

R/GA
Although the logo isn’t present in the printed version of this website, attention is paid to the spacing of the content within. While the Web version has simple lines and a clean space, the printed page tightens up elements in order to best use the space. A strong grid and effective typography add to the effect. In this example, some images could be removed as well.

Studio Mister
An excellent job of the print-preview function. The page has been meticulously designed to a grid and requires little in order to prepare it for print; some attention to the background color of text and not much else. Unfortunately, though, the logo is a background image and thus excluded.

Bottlerocket Creative
Although this logo isn’t represented in the print-out either, the folks at Bottlerocket Creative have done very well to adapt their typographic style for offline viewing. Assuming the design was created mainly with images would be easy, but meticulous attention to type is evident upon closer inspection.

OmniTI
OmniTI has optimized its content for print not by shrinking the main column, but by increasing the size of the text and not crowding the images together. The playful look adheres to good spacing. The only drawback? Many of the line breaks have been eliminated, causing some words and sentences to run into each other.

In Conclusion

There’s a lot to consider when preparing your website to be printed out by readers. The process forces you to scrutinize every element of your content like never before, all because someone will want a hard copy of your work. Yet most of all, it’s important to recognize the difference between printing and actually reading. Perhaps these techniques hold merit in helping you visualize content for mobile devices. What better way to kill two birds with one stone than to work out your layout for the mobile while considering printing view at the same time to make sure that your content prints flawlessly for offline archival? The time you invest could double in value.

For more information on preparing content for print, including by modifying CSS, check out the following articles:

• “Print Style Sheet: The Definitive Guide,â€� Trenton Moss, Webcredible
• “6 Things I Learned About Print Stylesheets From HTML5 Boilerplate,” Joshua Johnson, DesignShack
• “CSS Design: Going to Print,â€� Eric Meyer, A List Apart
• “CSS-Tricks Finally Gets a Print Style Sheet,â€� Chris Coyier, CSS-Tricks
• “CSS Print Profile,â€� W3C
• “Media Queries,â€� W3C

(al) (vf) (il)

---

© Christian Krammer for Smashing Magazine, 2011.

One of the major threats to your career as a graphic designer is to let your work stagnate and your improvement slow down. It’s very easy to fall into a comfort zone where you stop exploring new design techniques and simply stick with what you know. This is why most designers experience the greatest learning curve early on, and why after they ‘find their style’ their future improvement is far more limited.

Today I want to argue that designers should never ‘find their style’. They should always strive to try new styles, to continually improve, and to push beyond their comfort zone. Imagine if you continually improved at the rate you did early in your design career – I’m betting that you’d be a better designer than you are today!

Let’s explore some of the ways to improve as a designer:

Read Design Tutorials

Design tutorials are a fantastic way to improve your skillset. Tutorials usually show you how to make a specific outcome by explaining the entire work process in a series of detailed steps. Tutorial sites usually cover a range of different categories, such as text effects, photo manipulations, web layouts etc… Try to explore a range of tutorial sites, as well as tutorial categories in order to broaden your design skills.

It’s important to read a high quality of tutorial. Many sites publish tutorials that actually teach bad technique (for example, the classic example of photo retouching skin using the gaussian blur tool). It’s also important to not merely skim the tutorial as eye candy. Try to focus on the workflow and techniques that are used, rather than just checking out the final outcome. The sites below all offer high quality tutorials to improve your technique:

Psd.Tutsplus.com

PSD.FanExtra.com

Abduzeedo

I can also highly recommend the Russell Brown Show for brushing up on Photoshop’s huge array of tools, and uncovering techniques you never would have thought of.

Seek Inspiration From a Wider Variety of Sources

The number one killer for design inspiration is limiting your sources of inspiration. I’ve already mentioned the importance of design tutorials, but you should look beyond online inspiration. Offline influences can have a tremendously positive effect upon your designs. Inspiration lies everywhere – in nature, in the everyday, bizarre, and transitory. Look to films, art, posters, street signs and photography. The more varied your inspiration, the more varied your work. If you let all the creativity available in the world benefit you, your work will be richer and more profound.

Instead of merely skimming over design blogs today, why not try one of the following ideas for inspiration:

Take a long walk in a picturesque area. If you have a camera bring it, and photograph anything that grabs your attention.

Go and visit some local exhibitions that interest you. Look for interesting photography, art and design galleries in your area.

Flick through any magazines or newspapers lying around your house. Rip out elements that catch your eye and pin them on a board as an inspirational collage.

Choose to Design From Something Specific

Often it can be difficult to improve because you consistently design around the same themes. Broadening your inspirational sources is a good start, but I find that designing around a specific idea can also be beneficial. Rather than designing a photo manipulation around the theme of ‘nature’ for example, why not design around a specific quote, song lyric or even memory. The more personal the specific influence the better, although it can also be interesting to design around an abstract or obscure entity.

When you have selected your lyric, memory, quote, or other influence, try and consider the following:

How does it make you feel? What emotions does it evoke?

What colors, shapes and images do these emotions evoke?

Try to consider more abstract interpretations, perhaps opposites, relating images, and such.

Utilize Your Other Relevant Talents

As you may have guessed by now, it’s crucial to add diversity to your design work, as this is a key ingredient in improving. A great way to do this is to bring in some of your other talents. If you draw, then scan in hand drawn elements and integrate this into your design work. If you do calligraphy then implement what you’ve learnt into your digital typography. If you have no relevant creative skills (which is unlikely) then learn some! Take a class, or if you can’t afford that teach yourself. The more areas which you feel confident in creatively, the better your digital work will be.

Why not try the following ideas, you should feel more inspired afterwards, which in turn should improve your regular design work:

Take a step away from the computer and create an offline work of art. Aim to design a mixed media piece using whatever talents you possess. If you can’t draw, why not create a creative collage?

Print off some of your digital work and mess around with it using more traditional art tools. It feels liberating to mess it up a little, so get out the scissors and go nuts!

Try to recreate one of your favorite digital designs in an offline medium. You’ll be surprised at how much you’ll learn about the basic ideas behind your original composition in doing so, and you should formulate some great ideas on how to improve your digital work.

Be Passionate, Be Original

Don’t follow design trends simply for the sake of it. There are thousands of images out there that look almost exactly the same, and this shows no attempt to improve at the hands of the designers. Always strive to produce original, unique work.

The greatest way to be original is to be passionate. If you’re copying others you’re never going to feel passionate about your work. However, if your design inspiration comes from within, and you really care about what you’re producing then it will show through in the quality of your work. A great way to feel more passionate about your work is to design around something that you really care about (perhaps love, loss or friendship), or perhaps even a political or social cause that’s important to you.

Here are some ideas to evoke more passion and originality in your design work:

Produce a piece inspired by a loved one. Try to pour how you feel about this person into your composition.

Think of both the best and worst moment in your life. Produce a piece inspired by each. Be honest and transparent in this, don’t hide behind anything.

Produce a visual diary for a limited time. For instance, you could record a week of your life in a series of 7 compositions.

Don’t Just Welcome Feedback – Seek it Out!

Feedback is one of the best ways to improve as a designer. Other designers can cast a fresh look over your work and often offer hugely helpful tips to help you improve. You can receive feedback through a number of sources, and I encourage you to maximize all of them. Try looking for feedback at reputable design networks, your personal blog, your social networking accounts, or even friends and family.

I recommend the following design networks for getting some quality feedback on your work:

Behance Design Network

Deviant Art Community

UCreative Design Network

Consider Paid Resources

I discovered this method pretty late in my design career. For years I avoided paying for anything apart from my software, preferring to use free resources for all my work. I have to be honest, after trying out some premium fonts, photos and vectors the money is honestly worth it. If you’re really serious about improving your design work I recommend finding the highest quality resources to use in your compositions. Don’t settle for a lower quality image simply because it’s free, this will only hold you back.

Another reason for using premium resources is that there are a limited number of quality free resources. This means that these quality freebies have been used thousands of times by designers, and have lost much of their impact. How many times have you seen ‘generic jumping figure covered in Photoshop light effects’. Premium resource websites offer a wider, more unique, higher quality selection, and if you’re using these as part of your commercial work I’m sure you’ll see a financial return due to your improved designs.

Feel free to continue using free resources if this suits you. However, I’m just saying from personal experience that I’ve seen a huge jump in quality in my work since switching to premium resources. Here are some of my favorite sources for these:

Fotolia – Premium Stock Photos

MyFonts – Premium Fonts

(rb)