Over the years I have a saved a decent sized library of useful design and blogging related PDF ebooks, I love them. I have voraciously collected them, and all stored on my mobile for whenever the chance of quick read arises. In this post I would like to share my favorite 20 (freely available) ebooks with you.

All of the below books are have been written to be read quickly, they are neither very long nor are they the definitive resource on their specific subject. Having said that, they are all a ‘darn good read’, and well worth downloading. Some of the books may have been written a few years back, but the topics are certainly relevant now.
So if you are a web designer, graphic designer or even a blooger you are bound to find something worth reading in this round-up.

Introduction to Good Usability by Peter Pixel

This guide is especially handy if you haven’t done a lot of webdesign yet or if you are involved in webdesign but don’t do any of the real work. I hope to shed some light on some common interface elements and mistakes people often make with them.
A lot of books have been written in the past but the threshold for reading them, especially if you have never built a site, is quite big, hence this short guide. This is by no means a complete guide or solid set of rules, but it is definitely a good start.
Introduction to Good Usability →

Download the PDF →

Web Accessibility Checklist by Aaron Cannon

Written by Aaron Cannon, blind web developer and accessibility consultant.Aaron explains in his article “The Accessibility Checklist I Vowed I’d Never Write”, that the problems with a “simple checklist that, when followed, will give you an accessible site without fail.” No such checklist exists or likely ever will. He believes that this list is not the perfect solution, nor is it the only solution, but believes it is a good first step, and it gives our developers and designers a place to start from.
Web Accessibility Checklist →

Download the PDF →

CSS Systems For Writing Maintainable CSS by Natalie Downe

A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
This ebook elaborates on this concept, and also describes a number of tricks used to preempt maintainability issues.
CSS Systems For Writing Maintainable CSS →

Download the PDF →

Better CSS Font Stacks by Nathan Ford

Better CSS Font Stacks →

Download the PDF →

Faster, and More Secure Webfonts by Bram Pitoyo

Font embedding for the web is a great step in making the web look better and become more functional, but what about security and load times?
Bram Pitoyo’s ebook takes the top layer off font embedding and shows us how things work, and ultimately how to improve performance and make it more secure.
Faster, and More Secure Webfonts →

Download the PDF →

Type Classification eBook by Jacob Cass

This book has been made to help you learn the 10 broad classifications of type. These are the basic foundations of what you need to learn to learn typography and it is essential for any designer to know how to classify type. This book goes through the 10 type classifications with a brief history as well as the key characteristics of each.
Type Classification eBook →

Download the PDF →

HTML5 Quick Learning Guide by freehtml5templates.com

This guide introduces you to just the main elements of HTML5 that you’ll probably want to use right away. This guide is for those who want to get the basics figured out first, and worry about the finer details later on.
HTML5 Quick Learning Guide →

Download the PDF →

The Woork Handbook by Antonio Lupetti

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other general topics about web design.
The Woork Handbook →

Download the PDF →

Web Font User Guide by FontShop

This Web FontFont User Guide contains information aimed at web developers, system administrators and website visitors.
Section B is for web developers, showing how to get started using Web FontFonts for display on your website. Section C contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server and, finally, section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont-related support requests.
Web Font User Guide →

Download the PDF →

Typo Tips – Seven Rules for Better Typography by Erik Spiekermann

Typo Tips – Seven Rules for Better Typography →

Download the PDF →

How to Start a Business Blog by Michael Martine

How to Start a Business Blog, by Michael Martine, is a step-by-step-guide to help you plan, set-up, and create content for a business blog.
How to Start a Business Blog →

Download the PDF →

Forty’s Pocket Guide to SEO by Forty

Pocket Guide to SEO contains everything you could want to know about SEO. Buried deep inside its pages you’ll find tips, tricks, general information about search engines, and how you can make them work for you – in a completely ethical way, of course.
Forty’s Pocket Guide to SEO →

Download the PDF →

Why design? by AIGA

The “Why design?” booklet outlines the role of design in business strategy. It seeks a common framework for why design adds value to clients’ interests. It defines the power of Designing, a larger concept that includes strategy as well as artifacts across a variety of disciplines.
Why design? →

Download the PDF →

The Design Funnel: A Manifesto for Meaningful Design by Stephen Hay

From the authour of this manifesto, Stephen Hay: "Would you like a process which would help translate the often vague, unclear wishes of your clients (and yourself, for that matter) into a clear and solid basis for your design? This manifesto will show you how."
The Design Funnel: A Manifesto for Meaningful Design →

Download the PDF →

How To Be Creative by Hugh MacLeod

Written by HughMacLeod, an advertising executive and popular blogger with a flair for the creative. He offers his 26 tried-and-true tips for being truly creative with each point being illustrated by a cartoon drawn by the author himself.
How To Be Creative →

Download the PDF →

Time Management for Creative People by Mark McGuinness

Time Management for Creative People →

Download the PDF →

Who's There? by Seth Godin

Who's There is not an ebook about how to write better or how to follow the traditional conventions about formatting and building a blog. Instead, he talks about how building a blog asset can have a spectacular impact on you, your career, your organization and your ideas.
Who's There? →

Download the PDF →

A Concise Guide to Archiving for Designers by Karin van der Heiden

AIGA worked with the Dutch Archives for Graphic Designers (NAGO) in the Netherlands to publish an English version of A Concise Guide to Archiving for Designers. The guide provides designers with the proper ways to store and describe their collections in 10 short chapters.
A Concise Guide to Archiving for Designers →

Download the PDF →

Guerrilla Freelancing by Mike Smith

Guerrilla Freelancing →

Download the PDF →

KnockKnock by Seth Godin

KnockKnock →

Download the PDF →

You might also like…

12 Useful and Free Downloadable Web Design Books »

9 More Useful and Free Downloadable Web Design Books »

20 CSS3 Tutorials and Techniques for Creating Buttons »

24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »

Final Image

Take a look at what we will be creating.

Preparation

There isn’t much preparation needed for this tutorial. All you need is Illustrator CS4 or CS5 and a beginning to intermediate knowledge of how to use the program.

Step 1

With the Line Segment Tool (/), create a path that is about 80 px tall. Make sure the new path has a 1 pt stroke and change the stroke color to an orange.

<img class="aligncenter" src="http://colorburned.com/wp-content/uploads/guest/color-picker-icon-images/color-picker-icon_0

1.jpg” alt=”color-picker-icon_01″ width=”570″ height=”532″ />

Step 2

With the line selected, choose Effect > Distort and Transform > Transform. In the Transform Effect dialog, change the number of copies to 6, select the bottom center reference point in the Reference Point Locator, and set the Angle to 60. Generating six copied will place one copy in front of the original. We want to do this so we will have a complete blend in the next couple of steps.

Step 3

With the transformed line selected, choose Object > Expand Appearance and Ungroup (Command +Shift + G). Change to stroke colors to primary (red, yellow, blue) and secondary colors (orange, purple, green).

Step 4

Select all the strokes and choose Object > Blend > Make (Command + Alt/Option + B).

Step 5

Create an ellipse within the blend with the Ellipse tool (L) centered over the blend. Select the ellipse and blend and choose Object > Clipping Mask > Make (Command + 7).

Step 6

Create another ellipse about half the height and slightly smaller width as the previous ellipse. Place it close to the top side of the masked blend. Change the fill of the new ellipse to a linear gradient and in the Gradient panel, change the Location to -90, change both colors stops to white, change the opacity of the second color stop to 0, and change the middle point Location to 30.

Step 7

Copy (Command + C) the highlight ellipse and Paste in Front (Command + F). Move and rotate the copy to the bottom side of the mask blend. Change the first color stop in the gradient to a light gray and set the Blending Mode to Multiply from the Transparency panel.

Step 8

Create another ellipse about the size of the main masked blend and fill it with a radial gradient. Make sure the first color stop in the radial gradient is black and the second is white. Squish the ellipse and place it behind all other artwork. Set the Blending Mode of the ellipse to Multiply and change the opacity to 50 percent.

Step 9

Now that we have the color wheel done, we can concentrate on the eyedropper. Create a rectangle with the Rectangle tool (M) about three fourths the height of the color wheel. Create another smaller rectangle about a fifth the height of the main rectangle and half its width and place at the bottom of the main rectangle.

Step 10

Select both rectangles and press the Unite button from the Pathfinder panel. Next, choose Effect > Stylize > Round Corners. In the Round Corner Dialog, change the Radius to 3 px. Next, choose Object > Expand Appearance.

Step 11

Copy (Command + C) the eyedropper shape and Paste in Front (Paste in Front). Create another rectangle that covers the bottom part of the eyedropper. Select the main copy and the smaller rectangle and press the Intersect button from the Pathfinder panel.

<img class="aligncenter" src="http://colorburned.com/wp-content/uploads/guest/color-picker-icon-images/color-picker-icon_1

1.jpg” alt=”color-picker-icon_11″ width=”570″ height=”1238″ />

Step 12

Create a rectangle towards the top of the main eyedropper shape. Make the new rectangle about double the width and one sixth the height of the main eyedropper shape. Next, choose Effect > Stylize > Round Corners and in the Round Corner Dialog, change the Radius to 5 px.

Step 13

Create another rectangle slightly wider and about a fourth the size of the main eyedropper shape. Place the shape towards the top of the previous rectangle and round the corners 15 px.

Step 14

Select the top eyedropper shapes and go Object > Expand Appearance. Next, go Object > Path > Offset Path and in the Offset Path dialog change the Offset to -2 px. This value might be different depending on the original size of your shapes.

Step 15

Now that we have all the shapes done for the eyedropper, we can place them over the color wheel we already created. Creating the shapes and not filling in before we place the dropper makes it easier to see the white and transparency parts of the gradients when we fill them. So, place your eyedropper shapes over the color wheel at a 45 degree angle.

Step 16

First, select the smaller rectangle and its offset from the top of the dropper and go Object > Arrange > Bring To Front (Command + Shift + ]). Select the original top shapes (not the offsets) and fill with a linear gradient. Change the first color stop in the gradient to a dark gray and the second color stop to black. Change the Angle to -90 in the Gradient panel.

Step 17

Select the offsets of the upper rectangle shape and fill with a linear gradient. Change both color stop in the gradient to white. In the Gradient panel, change the opacity of the first color stop to 80 and the second to 0. Change the Angle to -90 and change the middle point Location of the gradient to 15.

Step 18

Select the main body of the dropper and fill with a linear gradient. For this gradient we are going to add three more color stop giving a total of five. Add these color stop by clicking right below the Gradient Slider in the Gradient panel. Once you added the color stop, change the first stop to gray, the next three to white, and the last one a dark gray. Change the Opacity of the first white color stop to 56 and change the Opacity of the third white color stop to 35. Change the Location of the first white color stop to 12, the Location of the second white color stop to 30, and change the Location of the third white color stop to 63. Change the Angle of the gradient to -45. Finally change the stroke to white and press the Align Stroke To Outside button from the Stroke panel.

Step 19

Select the shape at the bottom of the drop and fill it will a linear gradient. Change the first color stop to white and the second to a gray color. From the Transparency panel, change the Blending Mode to Multiply.

Step 20

Select the main small rectangle from the top of the dropper, Copy (Command +C), and Paste in Back (Command + B). With the copy still selected move it slightly down. Select the main dropper shape, Copy (Command + C), and Paste in Front (Command + F). Select both copies and press the Intersect button from the Pathfinder panel. Change the fill to a light gray color, change the Blending Mode to Multiply from the Transparency panel and slightly scale it to fit over the stroke of the main dropper shape.

Step 21

Select the main dropper shape, the main top shapes, and Copy (Command + C) and Paste in Back. With the copies still selected, press the Unite button from the pathfinder panel. With the Selection tool (V) move and rotate the new shape clockwise to create a shadow of the dropper.

<img class="aligncenter" src="http://colorburned.com/wp-content/uploads/guest/color-picker-icon-images/color-picker-icon_2

1.jpg” alt=”color-picker-icon_21″ width=”570″ height=”1115″ />

Step 22

Create a ellipse the size of the color wheel, select the ellipse and shadow shape, and Intersect them.

Step 23

Select the new shape and go Object > Arrange > Send Backward (Command +[) until the shape is behind the original eyedropper shapes. Fill the shape with a linear gradient, change the first color stop to a dark gray, and the second color stop to a light gray. Change the Blending Mode to Multiply from the Gradient panel and you are all done!

Conclusion

That wasn’t too bad was it? This tutorial uses some pretty basic concept that can easily be applied to other vector illustrations, icons, and more. What can you come up with?

List Your Website Here!

Strobox – Lighting plays a vital role when it comes to taking a good picture. Sites like Flickr let you view billions of photos and some of them are really amazing but there is no way for you to know how that photo was shot. Strobox is a photo sharing community that focuses on sharing photos with lighting schemes. Read more: Strobox: View & Share Photos With Their Lighting Setups

		ToneCheck – When speaking, our tone plays an important role in getting the right message across. When we write down our thoughts, our tone is not always properly translated which leaves room for misunderstanding. This is what ToneCheck attempts to solve. Read more: ToneCheck: Avoid Sending Wrong & Passive Aggressive Emails
		Nature Sounds -Have you ever been to the park and noticed people reading a book there? Some people work comfortably with the sounds of nature surrounding them. If you are such a person then “Free Nature Sounds” is just the site for you. Read more: NatureSoundsFor.me: Free Nature Sounds Streaming & Downloads
		FlexJobs -The internet has provided a new era of working as we get to work in a job that has a more flexible setup and allows us to take control of our time. FlexJobs is a web service that helps people find work opportunities with flexible arrangements such as part-time, telecommute, and freelance jobs. You can view the different job offers from several hundreds of clients. Read more: FlexJobs: Find Telecommuting Jobs & Part-Time Jobs.
		Seriesly – Do you constantly check torrent websites for the latest episodes of your favorite TV shows? If yes, then you probably end up wasting a lot of time in this checkup process. Thankfully Seriesly is here to save all of that time. Seriesly is a free web service that lets you stay in touch with good quality torrent links of upcoming episodes of TV shows. Read more: Seriesly: Get New Episode Notifications For Selected TV Shows.

List Your Website Here!

These are just half of the websites that we discovered in the last couple of days. If you want us to send you daily round-ups of all cool websites we come across, leave your email here. Or follow us via RSS feed.

Similar MakeUseOf Articles

<!–

• makeuseof extra #27 (171 comments)
• Finally Stick To Your Resolutions With StickK (107 comments)
• Cool Websites and Tools [September 9] (51 comments)
• Cool Websites and Tools [September 7] (62 comments)
• Cool Websites and Tools [September 6] (72 comments)
• Cool Websites and Tools [September 5] (4 comments)
• Cool Websites and Tools [September 30] (3 comments)
• Cool Websites and Tools [September 29] (3 comments)
• Cool Websites and Tools [September 28] (5 comments)
• Cool Websites and Tools [September 27] (7 comments)

–>

<!–

<!–

<!–
<!–
<!–
<!–
<!–
<!–
<!–

It takes plenty of resources to bring you articles about design and development free of charge. Without our sponsors, we wouldn’t be able to bring you top-notch content that you can enjoy and learn from.

Thankfully, we’re able to do all of this with the help of our sponsors who support our community — companies that also create amazing products and provide excellent services to web professionals like us.

We’d like to thank our site sponsors between July 1, 2010 – August 30, 2010 and talk a little bit about what they do.

As readers, you can support Six Revisions by checking them out and seeing if they have products and services that you can take advantage of.

1. Site5 Web Hosting

Site5 is a web hosting provider catering to the needs of web designers. They have several plans starting from shared hosting at $4.95 a month to dedicated servers at $165 a month. If you are on another web host and would like to move to Site5, they offer a free website migration service handled by their expert migration admins. Only a few hosts can reconcile excellent uptime, features, and support with dirt-cheap prices — Site5 is one of them.

2. FreshBooks

FreshBooks is a web-based application for sending, managing, and tracking your invoices. It has a wonderful interface that makes it a cinch to produce invoices that you send to your clients. They have over 1 million users and were able to conduct $1 billion woorth of transactions in just 4 months — a testament to the excellence of the app.

3. Stackable.com

Stackable is a relatively new VPS provider aimed at web application developers. For only $35 a month, you get 1TB of bandwidth, 256MB RAM, a DNS manager, and more. What’s great about Stackable is their 1-click scalability: At no cost, you can scale your VPS up if you’re expecting a lot of traffic (bursting it up to 16GB), or scale it down during idle times. Stackable can be your development and staging server to test new features before deployment, or it can be your production server. Stackable has a nice knowledge base filled with helpful tutorials and reference for VPS administration.

4. MailChimp

MailChimp is a web application for dealing with email marketing campaigns. Used by over 400,000 people, the application is loaded with useful features such as social media integration, a slick backend for managing your email campaigns, and even mobile apps for when you’re on the go. Developers get access to their robust API for creating apps and tools that leverage MailChimp’s web service.

5. Bigstock

Bigstock is a user-friendly marketplace for high-quality stock images. Started in 2004, they quickly grew to become one of the Web’s leading stock photo sites. Bigstock has over 5 million royalty-free photos organized in 27 intuitive categories. You can purchase stock photos for as low as $1 each. The way it works is you buy Bigstock credits to download only the stock photos you need, which starts from $15 for 5 credits.

6. Verio

Used by over 250,000 companies in 146 countries, Verio is one of the largest hosting providers for sites, applications and SaaS. They were named the Best Hosting Company of 2008 by HostingReviews.com. They have many hosting services such as small business website hosting, Microsoft Exchange email hosting, domain name registration and management services, dedicated servers on Linux or Windows, and more.

7. Shutterstock

Shutterstock is one of the biggest stock image sites with over 12 million royalty-free photos. They have monthly subscription plans or the option for on-demand subscriptions to their images (such as 5 high-resolution photos for $49). They have over 240,000 photographers contributing stock photos to their marketplace, and they add close to 80,000 new photos per week!

8. Top 25 Web Hosts

TopHosts.com is a complete web hosting resource, providing site owners tools and information about the hosting industry. Founded in 1997, TopHosts.com has been around for a quite a while! They provide a forum as a venue to bring people together to discuss web hosting, as well as a Top 25 Web Hosts list that highlights top-notch hosting providers in various categories (such as Best Customer Support and Best Shared Host).

9. SiteGrinder 3

SiteGrinder 3 is a website development platform plugin for Photoshop. For web designers that have difficultly in coding and deploying websites, SiteGrinder 3 is a tool you may want to check out. You can expand SiteGrinder 3 through addons, including a Commerce add-on for building e-commerce-enabled websites.

10. PSD to HTML

PSD to HTML offers Photoshop file to HTML/CSS template conversions for web designers wanting to focus on just design and have someone else deal with all the coding. Their packages are reasonably priced, starting from $149. And we all know how much of a pain making HTML email templates are. Why subject yourself to all that frustration when you can have PSD to HTML code it up for you?

11. Formstack

Formstack is a hosted web form app for developing contact forms, surveys, and more. What’s so great about Formstack is that they have integrated solutions for accepting payments, which makes the service awesome for receiving online payments, donations and managing event registrations. They have a slick form builder that can get you up and running in minutes, theming and embedding features so that you can seamlessly integrate your web forms into your existing site, the ability to brand the app so that you can provide it as a service to your own clients, and more.

12. ThemeForest

ThemeForest is one of the web’s leading marketplaces for site templates and CMS themes. They offer close to 3,000 site templates and themes (starting from $1 each) for static HTML sites, HTML emails, WordPress, Joomla, Magento, and more. They also have a tumblr blog that covers topics in web design and web development.

13. Site24×7

Site24×7 is an application for monitoring your website and web servers. It logs, records, and watches out for website uptime issues, website performance issues, DNS records, and much more. Site24×7 has an iPhone version so that you can keep yourself clued in to the status of your web properties even when you’re located remotely. Developers will gain access to their API for creating custom tools and apps that utilize Site24×7’s service.

14. WORKetc

Worketc is an all-in-one app solution for project-based work. It’s a customer relationship management (CRM) system, it can handle your billings, sales, support, and can manage your project and timelines. If you’re sick and tired of juggling a myriad of apps to run your business, Worketc gives you an integrated solution.

15. eConnect

eConnect is a web-based application for creating, managing, and sending email campaigns. It has an intuitive interface that gives you features such as reporting and analytics, the ability to create subscription web forms, and an API for making your own tools and apps. It has possible integration with other applications and services such as Salesforce. To get started, you can request for a personalized live demo of their product.

16. Concept Feedback

Concept Feedback is a community for getting and providing professional feedback for your designs. Filled with excellent and engaging game mechanics, Concept Feedback makes gathering constructive and useful critiques on your work really fun. It’s free to sign up and participate, and if you want a bit more than the average user, there are premium services available.

17. Intervals

Intervals aims to simplify and streamline project management by creating an all-in-one web-based solution for management duties that have traditionally required multiple apps. Intervals have plans starting at a reasonably priced $20/month and signing up and trying out the service doesn’t need a credit card, making it convenient and risk-free to give them a whirl.

18. SkyLedger

SkyLedger is a user-friendly bookkeeping web app geared towards small and medium-sized businesses. SkyLedger takes pride in its "dead simple" user interface, which makes signing up and immediately getting started literally a 1-minute affair. Take a tour of the app or sign up for free.

19. B2Bee

B2Bee is a web-based app for invoicing, expense tracking, and profit reporting built with freelancers, contractors, entrepreneurs, and other service providers in mind. The company is colorful — they contribute a part of your subscription fee to research aimed at saving the bees and post interesting videos and informative blog posts. Sign up for your 30-day free trial.

20. Sensational Jobs

Sensational Jobs is a new job board for web professionals that’s quickly shaping up to becoming an industry leader. It has great features such as live search and an easy-to-use interface that job seekers and employers will love. Don’t forget to check out their Six Revisions giveaway for a chance to win an Apple Trackpad as well as to learn more about them.

21. CU3ER

CU3ER is a slick Flash 3D image slider that’s sure to impress your viewers. It has loads of features such as unique slide transitions, a JavaScript API for developers to be able to customize CU3ER, various user interface options for the end-user, and more. What’s more is that you can use CU3ER for free (and they have premium versions for those that need more features).

<!–

Related Content

• Website Features That You Can Easily Offload
• 10 Android Apps Every Web Designer Should Know About
• 10 iPhone Apps Every Web Designer Should Know About
• Related categories: Site News and Resources

About the Author

<!–

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Judging what’s best for an audience is never far from the web designer’s mind. The ability to predict whether a web design will soar like an eagle or sink like the Titanic is among the most subjective and complex measurements you will encounter.

While resources that explain best practices exist, and your visitors contacting you about serious issues and offering you feedback relating to your site will occur if you have the proper mechanisms in place — it’s ultimately your responsibility to be proactive and research, investigate, and determine the what, why and how to ensure widespread usability.

Designing by Numbers

Before we examine the types of statistical information you should be looking at — and the relevance they have to your web design projects — we first need to go over the 3 single-word questions that relate directly to all the design decisions you will make.

These 3 questions are ultimately at the heart of your research, analytics and motivation behind designing by the numbers.

What, why, and how is a simple design process that:

1. Defines what the issue is
2. Proves why it is an issue
3. Determines how to fix the issue with the optimal solution (if it is an issue)

What?

Of all the questions that may enter the mind of a web designer, "What?" is probably the word that relates to the task at hand. The process of understanding relevance and the usefulness of information explicitly relates to the decisions we undertake.

• What do site users need?
• What things frustrate site users?
• What can I do in this design to accomplish the site’s objectives?
• What’s wrong with the site?
• What’s right about the site?
• What can be made better?

Asking "What?" will yield to a lot of information that will help you make optimal design decisions.

What your audience requires is a fundamental principle of designing by numbers. Get Satisfaction is a feedback tool you can use to help you design by the numbers.

Why?

Next on the list of list of determining factors is the question of "Why?"

Because making changes or implementations beyond what you initially set out to achieve may cost time, money or resources — the ability to back up your ideas with hard data and facts will be enough to even make the bean-counting bosses go weak at the knees and take your professional guidance and ideas more seriously.

• Why are people not using the comments?
• Why is the community participation on the site low?
• Why are users having trouble finding what they need?
• Why do we need to support Internet Explorer 6?

Knowing what needs to be done is one thing — knowing the justification to why it needs to be done is another.

Reasons for why cross-browser support should be implemented can easily be seen when you calculate the percentages of users that use certain browsers.

How?

The last single-word question is "How?" which makes sense in that once you know what needs doing and why it’s required, the method of actualizing the "What" is important.

• How should I go about increasing user engagement?
• How can this design improve community participation?
• How can I fix the issue of users not finding the product they need?
• How can I create a design that works in Internet Explorer 6?

Statistical/Gathering Methods

When determining the best course of action for your visitors, there are 3 essential statistic types that will come into play in helping to answer the "what" question. (We shall come to the "how" and the "why" later on, so don’t worry!)

Each of these data gathering techniques have their own benefits and pitfalls so there isn’t ultimately a perfect solution.

However, designers wanting a well-rounded experience would be better off using a mixture of all 3 as they not only give you a range of quantitative results (raw numbers) but also qualitative research (such as open-ended responses and feedback).

On-Site Data

On-site data are the kind of information you obtain from website analytics software and monitoring user activity on your website.

While this type of data is often ideal in that they relate directly to your visitors, it often takes a while for activity on a new website to build up — and as such, depending on these alone may leave you in the dark as to your visitor’s basic primary needs upon launching the service.

In sites with limited or no traffic, or sites that are still in development — analytics software fails because there is no (or limited) data sources; you’re pretty much in the dark.

Most websites have some kind of visitor tracking mechanism installed, such as Google Analytics.

Third-Party/Generalized Data

Independent data are often the most useful to new websites, usually produced by large firms who provide demographic services like Net Applications or W3Counter.

These third-party data-gathering sites offer a glimpse at the general population, and by that, it will include useful details such as the browsers and devices they use, their country of origin, and so forth.

On-Site data gathering methods is going to be more accurate and will reflect your particular situation much better — for example, a web development blog will have a different audience than a cooking blog) — but accounting for independent statistics can aid you by providing a baseline to work from, especially if you have no user base.

There are plenty of statistics on the web, you just need to look! The figure above shows statistics from A List Apart’s survey of web designers.

Social Data

Socially-sourced data are a relatively new concept that has come out of the rise of networking sites like Facebook or Twitter, where people can promote or discuss your creation through an external site.

While there are still a large number of people who aren’t interested in the "social" aspect of social networking, the importance of leveraging these statistics of what visitors like, dislike and their comments attributing to such information can actually be more useful (in different ways) to the conventional number-based statistics from analytics packages.

Social networking can provide you with useful feedback to work with.

Designers Demographics

Now that we have covered the "what", we need to examine the "why" (and by association) the need to focus our attention on all the pretty percentages, pie charts and graphics that appear everywhere.

Ensuring your visitors can use and enjoy their experience with your web design is important and determining how we can provide that experience will all be down to using the statistics methods above and then narrowing the focus down onto what is most relevant for your audience.

While pretty numbers may seem impressive on their own, they’re not worth anything if they don’t speak to your niche, so successful sourcing of your data is critical.

Review websites are notorious for having subjective criteria of questionable validity.

If you’ve exhausted local statistics and have a general idea of the visitors you’re getting (and perhaps where they found you), and if you’ve gone further afield to seek out related demographics relating to research on an area which affects your niche, its worth going beyond the number crunching and seeking out "intelligent hits" that may help guide your decision making. Asking your community (or perhaps your competitions if you don’t have one!) what would enhance the experience can be great, just don’t try to please (or annoy) everyone and only implement what will benefit your users!

Getting to know your visitors can simply be a matter of knowing how to communicate.

With all of this information in regards to what you’re investigating the "why" (as in why changes need to be made) will become quite apparent. While it may seem natural, it’s quite easy to become so fixated on the number of visitors or re-tweets we get, that we actually ignore the most important thing a statistics package (or some solid research) can tell us – that our visitors will have their own specific set of needs and requirements that need addressing. As a final point on the matter of "why", if we don’t actively seek out ways to improve ourselves, we can’t hope to gain new customers.

Visitors may have JavaScript disabled which could leave them excluded from statistics.

A Quick Measurement

The next thing to take into account is how to filter the information once you’ve collected it (which meets the "how" element). Having lots of statistics and ideas may help, but filtering the stream of data will be critical to making sense of the best route to take in fixing a common problem or deciding the next step. The simplest way to prioritize your data is to follow the below, the higher up on the list the item is, the better and more potentially useful and reliable your research will be. Once the best information is extracted, you can refer to the numbers when making decisions for the design.

Determining the quality of your information is a mission critical part of the process.

Importance of Location:

• Local
• Independent
• Social

Importance of Type:

• Statistics
• Research

Importance of Reliability:

• Proven
• Trends
• Unproven

Importance of Margin:

• Significant
• Proportionate
• Insignificant

Note: Using the above, a locally sourced bunch of statistics that are proven (by a significant margin) to be the best course of action would ultimately be the peak of what you can gather. Though as your research will lead to talking with customers, individual needs should be accounted for as well.

Variable Considerations

Before rounding up this article, it’s important that we consider the variables which may impact your statistics. While it’s great that there are plenty of studies that may assist you in decision making (like how to build a perfect font stack or what browsers you should support), it’s very important that we highlight the issues that will break down the cold harsh numbers and give you a little more to work with. Without making this article particularly heavy going (which isn’t the intention), the two types of variables you want to consider are mechanical and personal, and both relative to the visitor.

The first of these (mechanical) will directly affect the way in which your visitor interacts with your site, this isn’t as a result of their physical being, but more of their circumstances and equipment. In web design it’s obvious that the device used, the OS installed, the browser used, the scripting or plug-ins available or something else will affect their experience. While these are usually listed as independent statistics in packages, they are often related to each other in that a single user will contribute to a number of these breakdown listings, thereby it may directly affect the results.

Nothing forces greater demands on a website than the range of browsers that exist.

The second and probably one of the more important factors are the personal variables. The reason why these variables are so important is because they will often not appear in statistics packages and require you to undertake independent research to get the numbers or determine the viability of catering to their needs. Such factors include the accessibility level being required, the usability of a site (which won’t be a number) and the findability of information. While harder to pin down, it still makes sense to account for such variables as they directly and quite dramatically affect visitors.

Note: Error Margins also play a part in statistics, research made by a human rather than a computer can be subject to biases, errors and omissions – some of which may go unnoticed. The significance of information can also fluctuate depending on the audience who visit the site at any given time.

Research Matters

While this article is not a comprehensive guide to research and statistics (there are entire books on the subject), the importance of knowing your visitors is showcased. When you come to build a site or implement a new feature, it’s important that you do your homework to avoid falling into a pitfall that could have otherwise been foreseen earlier. Taking the time to understand how products like Google Analytics work, what their weaknesses are and how to get a well rounded overview and an intimate knowledge of your visitors gives you the best possible chance of hosting a great experience.

It’s also worth noting that while this article does indeed focus on the numbers and opinions that lead to decision making, it’s very important not to forget the individual as a person who visits your realm (no person should be directly treated as a statistic, they are all just as important to the full equation as each other) and while numbers are great for measurements, opinions often lead to the most amount of innovation. With this article highlighting the benefits of research and accounting for more than a personalised view of a site, hopefully you will go on to target a loyal audience in the future!

<!–

Related Content

• How to Increase Conversions on any Website in 45 Minutes
• 15 Tools for Monitoring a Website’s Popularity
• How to Navigate Design by Committee
• Related categories: Web Design and User Interface

About the Author

<!–

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

WordPress shortcodes are used frequently in plugins and themes as a way to achieve extra functionality, without the need to modify template files. You just type the shortcode word right into your post



. Some plugins and themes use them to add event calendars, some for making announcements
, while others use them for inserting contact forms
.

Simply, WP shortcodes are awesome.

However, what if you’re a theme / plugin developer wishing to use them



for your next great product, but you have no idea where to start? We’re going to fix that in this tutorial.

1 – Overview – Exactly Where We are Going

We will start out by looking at the basic ways that we can use WP shortcodes, then we will move onto some more advanced tricks. After the usage sections, I’m going to show you some examples of real-world shortcodes



, followed by even more ideas / references of what you could do with them.

2 – Getting Into the Basics

The first you thing you should always do when working with something WordPress, is check the WordPress Codex
. It’s a great reference and starting point.

Shortcodes, like just about everything else in WordPress, can be created in the functions.php



file, or from within your plugin file if you’re developing a plugin.

Let’s start simple by making a shortcode that we can use to add additional styles to some text.

1
2
3
4

function extra_style_shortcode( $atts, $content = null ) {
   return '<span style="color: blue; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

This is a very simple example that serves almost no purpose, but easily illustrates the basics of shortcode creation. It allows us to do something like this in our WP posts/pages:

[extra-style]Hello World![/extra-style]

and have it outputted like this:

Hello World!

So what’s happening? It’s simple, we’re simply telling WordPress to put all of the text inside of the [ ] . . . [/ ] into a variable called $content



, then outputting $content



inside of a span tag that has some simple inline styling applied to it.

Okay, that was easy, now let’s get into something a little more complex. This time we’ll give the ability to define the color of the text using attributes.

1
2
3
4
5
6
7

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
		"color" => 'blue',
	), $atts));
   return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

Now we can do this:

[extra-style color=red]Hello World![/extra-style]

and we’ll see: Hello World!

or:

[extra-style color=orange]Hello World![/extra-style]

and we’ll see: Hello World!.

This example uses this bit of code

    extract(shortcode_atts(array(
		"color" => 'blue',
	), $atts));

to extract the information inputted by the user for the variable color



. We have also defined a default color of blue in case no color is defined.

Again, this example is pretty much useless, but its simplicity makes it very easy to understand.

Let’s get just a little bit more complex before moving on.

1
2
3
4
5
6
7
8
9

function extra_style_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
	"color" => 'blue',
        "size" => '14px',
        "padding" => '0px',
	), $atts));
   return '<span style="color: ' . $color . '; padding: ' . $padding . '; font-size: ' . $size . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');

By using a shortcode like this within a block of text:

[extra-style color=purple size=18px padding=5px]Hello World![/extra-style]

we could see something like this:

Elementum odio? Sed, Hello World! proin pulvinar eros nascetur, massa urna aliquam turpis elit, adipiscing mauris montes ac, vel lacus placerat in adipiscing ridiculus rhoncus.

Well that’s enough of the pointless examples; let’s look at some real shortcode examples.

3 – Making an Information Box

This shortcode example will let you include a nice little message box at the top of your post to help catch readers’ eyes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function box_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'yellow',
      'size' => 'medium',
      ), $atts ) );
 
      return '
		<style type="text/css">
		.shortcode_box {
			padding: 2px 4px;
			border: 1px solid #ccc;
		}
		.yellow {
			background: #ffd149;
			color: #666;
		}
		.blue {
			background: #a0c5ef;
			color: #333;
		}
		.gray {
			background: #f0f0f0;
			color: #333;
		}
		</style>
 
      <div class="shortcode_box ' . $size . ' ' .  $color . '">' . $content . '</div>';
 
}
add_shortcode('box', 'box_shortcode');

Now we can use our “box” shortcode to produce something like this

by using this shortcode:

[box color=yellow]This is a message box with important information you should read.[/box]

By changing the color



variable, we can have different colors of boxes:

With a little more CSS, we could also control the size of the box, but I’ll leave that to you.

4 – Create a Download Button

The process for creating a download button is very similar to creating a message box: we simplu wrap the content of the button inside of a div with some special CSS3 styles applied to it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

function button_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'blue',
      'size' => 'medium',
      ), $atts ) );
 
      return '
		<style type="text/css">
		.shortcode_button {
			padding: 2px 8px;
			border: 1px solid #ccc;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
		.black {
			background: #ffd149;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F));
			background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363);
			color: #f0f0f0;
			border-top-color: #1c1c1c;
			border-left-color: #1c1c1c;
			border-right-color: #525252;
			border-bottom-color: #525252;
		}
		.blue {
			background: #a0c5ef;
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75));
			background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7);
			color: #f0f0f0;
			border-top-color: #023778;
			border-left-color: #023778;
			border-right-color: #26609e;
			border-bottom-color: #26609e;
		}
 
		.large	{
			width: 200px;
		}
		.medium	{
			width: 120px;
		}
		.small	{
			width: 80px;
		}
		</style>
 
      <div class="shortcode_button ' . $size . ' ' .  $color . '">' . $content . '</div>';
 
}
add_shortcode('button', 'button_shortcode');

We can display our button by using:

[button color=black size=medium]<a href="#">Download</a>[/button]

which will give us:

In order to control the size or color of the button, all we have to do is create a CSS class with the same name as the value we input for our size / color



variables. For example, if we do size=large in our shortcode, we need a CSS class called large in our stylesheet. You can see I have included extra styles in my above example to illustrate some possible options.

5 – Buttons and Boxes Together

Shortcodes are great because they also let us combine them to a result like:

by using a shortcode like:

[box color=blue]Porta ultricies. Amet odio amet, pellentesque elementum adipiscing sagittis enim, eu, proin placerat sed pid cum? Dictumst turpis integer. Adipiscing, porttitor scelerisque! Lorem turpis porttitor.
 
Integer in, odio mattis ac! Nascetur augue odio in risus, arcu nunc, phasellus ultrices lectus velit, et tincidunt tristique. Integer vel pulvinar purus magnis.
 
[button color=black size=small]<a href="#">Download[/button][/box]

There is one small hitch, though. By default, WordPress does not allow you to embed shortcodes within other shortcodes. In order to get around that, we have to add a line to our functions.php



or main plugin file:

add_filter('the_content', 'do_shortcode');

This will make WordPress process both sets of shortcodes.

6 – Show Related Posts

This is a really handy shortcode we can use to display a list of posts related to the current post by comparing tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function related_posts_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));
 
	global $wpdb, $post, $table_prefix;
 
	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);
 
		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";
 
		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '
	<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>
';
			}
		} else {
			$retval .= '
	<li>No related posts found</li>
';
		}
		$retval .= '</ul>
';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

We can show the related posts by using:

[related_posts]

Credit goes to Blue Anvil
for this shortcode.

7 – Drop Caps With a Shortcode

Drop caps are pretty and make your articles look really nice. They can really add some nice detail to post and make your site stand out above the rest.

1
2
3
4
5
6

function dropcap($atts, $content = null) {
	return '
<div class="dropcap">'.$content.'</div>
;';
}
add_shortcode('dropcap', 'dropcap');

The CSS:

1
2
3
4
5
6
7

.dropcap {
display:block;
float:left;
font-size:50px;
line-height:40px;
margin:0 5px 0 0;
}

Use it with:

[dropcap]M[/dropcap]auris ut lectus erat. In ...

Credit for this shortcode goes to TutToaster
.

8 – Custom Post Type Query

Let’s say that you have set up a custom post type called News



and you wish to display all posts inside that custom post type on a page called Articles



. You could do it with the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function news_shortcode()
{
	//The Query
	query_posts('post_type=news');
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
		echo the_excerpt();
	endwhile; else:
	endif;
 
	//Reset Query
	wp_reset_query();
}
add_shortcode('news', 'news_shortcode');

Then display the news posts on your Articles page by using this shortcode:

[news]

9 – Display Posts from Category on Page

Very similar to the shortcode example above, we can also display limited number of posts from within a particular category using a shortcode like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function category_shortcode( $atts )
{
extract(shortcode_atts(array(
	    'limit' => '5',
            'category' => '',
	), $atts));
	//The Query
	query_posts('category=' . $id . 'posts_per_page=' . $limit);
	//The Loop
	if ( have_posts() ) : while ( have_posts() ) : the_post();
		echo	'<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
		echo the_excerpt();
	endwhile; else:
	endif;
 
	//Reset Query
	wp_reset_query();
}
add_shortcode('category', 'category_shortcode');

You can list the posts using:

[category id=# limit=5]

Just replace #



with the ID of the category you wish to display.

10 – Great Examples of Other Possible Shortcodes

I’ve shown you a few examples, both of my own and other’s creation, now let me give you even more examples of awesome things you could do.

Joen Asmussen of NoScope.com
created a really nifty little shortcode to make a Google PDF Viewer.

Check it out here

Jean Baptiste, of WP-Recipes
created a shortcode to display a “ReTweet” or “TweetMeme” buttons in your posts. Find it here
.

Justin Tadlock
made a great plugin that turns all (or most) WordPress template tags into shortcodes so that they can be used within the post editor. Download the Plugin
.

A few weeks ago I wrote a shortcode plugin of my own (sorry, couldn’t leave myself out!). It’s a shortcode utility plugin that allows you to insert a variety of message boxes and web buttons via shortcodes (similar to some of the examples I’ve used above). Check out WP Utility Shortcodes
.

11 – Some More Ideas

• Use shortcodes for displaying contact forms
• use shortcodes for displaying a Google map
• Shortcodes to display author bios
• A shortcode that outputs all of your social network info
• Shortcodes for image galleries
• Shortcodes for jQuery image sliders

Have you seen any other interesting uses of shortcodes? Do you make use of them in your site already?

The design I’ve created is a mini tribute to the Sloth character from the Goonies. The quick doodle depicts the basic form with just a few simple doodle lines. All the linework, including the outline of the text is given a rough texture to create a hand-drawn feel, then everything is brought to life with a muted colour palette and a mix of texture additions in Photoshop.

View larger artwork

Create a new document in Adobe Illustrator and grab the brush tool. Draw the basic outline of the character’s head as a complete path. Tip: Double-click the brush icon to open up the settings. Use the Edit Selected Paths option to fine tune your linework.

To give the linework a cool doodle effect, go to Effect > Distort & Transform > Roughen. Adjust the sliders to limit the effect down to just a few subtle bends and kinks in the lines so the basic shape is still recognisable.

Continue drawing the facial features with the Brush tool. The same stroke and roughen effect should be continued through onto the subsequent lines.

Use the Direct Selection Tool to tweak the position of the end points to ensure the lines overlap without a gap.

The great thing about doodling in Illustrator is you can easily move things around if you didn’t get the positioning quite right the first time.

Finish off the character with the remaining facial features. Being a doodle the artwork doesn’t need to be super high quality. Anything goes, make it as rough as you like!

Find a suitable colour palette to use for your design. I found this muted palette from ColourLovers

. Copy (CMD+C) the main outline of the head and paste behind (CMD+B). Clear out the stroke and add a flesh coloured fill from the colour palette.

To fill elements that aren’t complete shapes, use the Pen tool to roughly draw an outline that stays within the width of the stroke. Fill this shape with a relevant colour swatch then repeatedly press CMD+[ to alter the stacking order until it sits underneath the strokes.

Select the Brush tool again and increase the brush size using the ] key. Add a slightly darker flesh tone as a stroke colour, then trace around the existing linework. The larger brush size will create a basic shading effect. Send these strokes below the darker linework using the CMD+[ shortcut.

Decrease the brush size slightly then draw some subtle facial wrinkles using the same darker flesh tone.

Sloth's iconic "Hey you guys!" quote has to appear in the design. Type it out and select a nice chunky font. Here I'm using Futura Extra Bold

with the tracking adjusted to -75.

Press CMD+Shift+O to create outlines of the font, which essentially turns the text into editable shapes. Right click and Ungroup, then select each word and re-group (CMD+G).

Scale and position each word onto a poster sized artboard. Hold Shift while scaling to constrain the axis and keep the text in proportion.

Use the eyedropper tool to alter the fill colour of the text, then add a darker stroke from the colour palette. Bump up the stroke weight and align it to the outside by adjusting the options in the Stroke palette.

Give the text that same doodle feel by going to Effect > Apply Roughen - Because this effect was the last used this shortcut will apply the same settings.

Copy (CMD+C) the text and Paste in Front (CMD+F). Clear out the fill and adjust the Stroke settings to a lighter shade aligned to the inside. Repeat the process on the other two words.

Draw a rectangle elsewhere on the page. Use the Direct Selection Tool to select and nudge the two bottom corner points closer together.

Add a Gradient as the fill colour to the new rectangle shape. Add a yellow swatch to both ends of the gradient spectrum, then adjust the Opacity to zero on one side.

Copy and paste the rectangle and rotate it by 90 degrees. Align it to the lower edge of the original then make duplicates in order to form a series of radial flares.

To fill the smaller gaps between the 45 degree angles go to Object > Transform > Rotate. Enter 22.5 in the options (45 divided by 2 = 22.5). Continue duplicating and rotating this new shape to fill out the rest of the pattern.

Position the flare in the centre of the letter 'O' on the design. Scale the flare to extend to the outer stroke of the wording.

Paste in the character and scale it to fit roughly in the centre of the radial flares. Ensure the character is at the top of the stack by hitting CMD+Shift+].

Next we’ll move over to Photoshop to add some cool textures and make use of the powerful blending modes. Create a document according to your poster size and fill with a subtle yellow background colour.

Paste in a detailed texture file

and desaturate to remove the original colouring. Set this layer to Multiply.

Paste in another texture file

and set this layer to Multiply. The two textures will interact with each other as well as the yellow background colour.

Next, paste and scale the vector design from Illustrator. Enlarge the design so the text completely fills the canvas.

Change this layer’s Blending Mode to Multiply to allow the textures to interact with the crisp vector colours to give a cool retro feel.

Quickly switch back to Illustrator to create a thick rectangular stroke with the roughen effect.

Paste this into Photoshop and change the blending mode to Soft Light. Adjust the Opacity to 80% to create a subtle border.

Create a new layer and fill it with white. Go to Filter > Noise > Add Noise and adjust the settings to around 50%. Change this layer’s blending mode to Multiply and turn down the opacity to around 20%.

The final poster is complete! It combines the best of both applications – The sharp and crisp vector lines of Illustrator and the powerful blending modes of Photoshop.

Download the source file

To win a set of 1,000 business cards from Ink Chaser, all you need to do is leave a comment below and tell us what you would do with the cards.

Up for Grabs

• 1,000 business cards from Ink Chaser (x2)

Rules

• Leave a comment to enter.
• Tell us what you would do with some free cards.
• Only comment once.
• Tweet This message to your followers! (optional).
• Please leave a valid email address so that we can contact you.
• This is a 5-day contest. Entries will be accepted until Friday, September 3, 2010 at 11:59 PM EST.
• Free shipping to U.S. residents only.

Good luck everyone and don’t forget to check out Ink Chaser for your business printing needs!

Deposit Photos is a source for royalty free photographs and vector images. They have a vast library of stock images coupled with a wide variety of purchasing options. This makes them a very reasonable tool for designers, artists, and photographers. For more information regarding Deposit Photos, check out their website.

Up for Grabs

• $50 worth of stock images (x2)

Rules

• Leave a comment to enter.
• Tell us which category is your favorite.
• Only comment once.
• Tweet This message to your followers! (Optional).
• Please leave a valid email address so that we can contact you.
• This is a 5-day contest. Entries will be accepted until Friday, August 27, 2010 at 11:59 PM EST.

Winners Announced

Congratulations to Brian Lucas and Sierra. You have won $50 worth of stock images from Deposit Photos. We have sent them your contact your information and they should be in touch soon.

social media icon sets to be a very useful resource, with some great designs.

site. Visit the site and you’ll quickly find that it’s very difficult to see the site’s footer. It exists, but whenever you scroll down, more portfolio results are loaded in the content area, pushing the footer out of the view.

Above you can see me momentarily catching the footer. In a second, the spinner on the right will finish loading and more results load up, hiding the footer once more. The same thing happens on the redesigned Google Image search pages:

Scroll down, and more results load, pushing the footer down and out of sight. I’ve had to scroll down a while to actually get to the bottom of Google Image search.

Now, this wouldn’t be a big problem, except that the footer in both cases contains some useful stuff. 37signals footer contains contact information. Google Image search has a bunch of useful links—one which switches the search interface back to the Classic image search, something I like to use. Having to scroll down past hundreds of results to get to think useful link doesn’t provide me with the best user experience.

I think in the cases where you’re loading more and more content the stuff in the footer should be moved elsewhere, probably to the sidebar or the top, so that’s it’s easily accessible.

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

The

First one will turn font smoothing off, showing your text with jagged sharp edges. The second one is what we see as default font smoothing on modern operating systems. It uses subpixel rendering

to increase the apparent resolution of the display, which helps render crispier, sharper text.

The last one is most interesting. It turns subpixel rendering off and instead uses the standard antialiasing

technique to make fonts look smoother. Here’s a good article

on the three Webkit modes together with some examples.

I’m starting to see more

and more

sites

using Webkit’s antialising font smoothing mode instead of the default subpixel one. I think it’s a pretty bad idea, especially when applied to body font.

See, subpixel rendering is used for a very good reason. Each pixel on the screen isn’t just one little square of light, it’s actually three stripes (sometimes circles or squares) colored red, green and blue. Each of these subpixels can be turned to different intensities, which allows them to be used for extra detail. So instead of using all 3 simultaneously as one pixel, we use these subpixels individually to draw sharper shapes at very small sizes.

The antialiasing mode of font smoothing turns this feature off and instead uses whole pixels to render the fonts. This makes the fonts look thinner, weaker and blurrier because the resolution is now effectively lower than before.

Some say that the standard OS X font rendering is quite thick and strong—that may be compared to Windows—but it’s use of subpixel rendering also makes it sharp at small sizes. Turning subpixels off just makes it less readable, even if at

First the thinner lines seem appealing.

It’s surprising that even the BBC is doing it on their new site. I think it’s a case of using something just because it’s there, and not really thinking through the reasons behind it. Actually, I can’t find a good reason to use antialiasing right now instead of subpixel rendering. I’m not sure that taste is a good argument for this because what you do get are fonts rendered at lower resolution, which are weaker and less crisp than their subpixel counterparts. Don’t sacrifice readability for appearance.

Inkd, the world’s first online marketplace for creative businesses, hosted a giveaway on Six Revisions recently. This post announces the winner of the custom logo design by Inkd.

The Winner of an Inkd Custom Logo Design

The winner of the giveaway is AndyW. Congratulations! You should have already received information regarding how to claim your awesome prize (via email).

About Inkd

Inkd is the world’s first online marketplace for creative businesses. It’s the best place to find design templates, PowerPoint templates, logos, online printing — including new plastic cards and other creative business collateral.

<!–

Related Content

• 15 Excellent Logo Design Tutorials Using Illustrator
• Popular Logos with Hidden Symbolisms
• Win a Custom Logo Design from Inkd
• Related categories: Graphic Design and Resources

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

If you want to make your website livelier, then adding a website chat widget is perhaps one of the more effective solutions for increasing user engagement and growing your community.

By putting a proper website chat widget on your site, you will get real-time feedback from site visitors regarding your product, services, or content. For sites that sell services or products, a chat widget will definitely help you communicate with your visitors in real-time and potentially make more sales.

This is a collection of 10 free website chat widgets that you can install on your websites.

1. Chatango

Chatango is a customizable chat room add-on that anybody can install in their website. The main advantage of using this website chat widget is that users can have their own avatar. It also offers different user roles that give participants privileges for becoming moderators and administrators.

2. Meboo.me

Meboo.me is a product of Meebo.com — a popular web-based IM platform service. Whether you are using Typepad, Blogger or WordPress, Meebo.me is just ideal for any of these platforms. The most advantageous part of adding a Meebo.me chat box in your webpages is that it is compatible with Gtalk, Yahoo! Messenger, AIM, as well as with Facebook. Hence, the visitors of your website do not need to register to interact through it. They can use their existing Gtalk or Facebook username to stay in touch with your website.

3. JWChat

JWChat is an Ajax-powered chat script. It only uses JavaScript and HTML, making it an ideal solution for those who want to quickly get a chat widget up and running. It functions like a traditional IM client, with system sounds notifying you of events like if someone sent an IM, support for emoticons, and more.

4. CBox

CBox attempts to merge the features of traditional desktop IM clients with the benefits of the social web. The user interface is straightforward, the installation is a snap, and is plug-and-play because it only relies on client-side JavaScript and HTML. CBox is free, but there is a premium version available for $2.00 a month with additional features like bigger bandwidth, no ads displayed, and custom word filters.

5. Mibew Web Messenger

Mibew Web Messenger, which also calls itself Open Web Messenger, is a free and open source chat messenger that was built with PHP and MySQL. This chat application was developed with live customer support in mind, but works well in other contexts.

6. AjaxChat for WordPress

This free website chat script is a plug-in for adding live chat functionality to a WordPress installation. It enables WordPress users to chat with other visitors on your blog without refreshing the browser.

7. AJAX Chat

As you can probably conclude by its name, AJAX chat uses client-side JavaScript to enable you to run a robust chat client on your website. It can also be used as a shoutbox, a site feature that allows your visitors to quickly leave a message and "shout out" to other visitors and the site admins.

8. phpFreeChat

This free PHP-based chat system is highly customizable and is packed with features you’d only expect in desktop clients. It supports the ability to create multiple chat rooms, private messages, custom themes using CSS, and Ajax for a smooth and seamless user experience.

9. iJab

This web-based IM client, developed using the Google Web Toolkit is free and uses Ajax to simulate a client desktop IM client. iJab can be a great solution for implementing a similar Facebook chat feature that people can use within their web browser while perusing your website.

10. Ajax IM

Ajax IM is a slick and open source web-based IM client for your website. It’s lightweight, weighing only 78KB on a good day (i.e. when minified). By default, it affixes itself at the footer of your web pages, similar to Facebook’s web-based chat client.

<!–

Related Content

• 12 Social Media Monitoring Tools Reviewed
• 12 Portable Apps for Web Designers
• Search Analysis with Google Analytics
• Related categories: Tools and Website Management

About the Author

<!–

–> Phong Thai Cao is the Web developer with over 5 years of experience in PHP, JavaScript, CSS. He is the creator and the administrator of JavaScriptBank.com: a new generation of JavaScript resources, provide you thousands of free JavaScript codes, DHTML, JavaScript tutorials, training videos, examples, reference and help.

List Your Website Here!

FlickrQ – For all Flickr users out there, a great website to check out would be FlickrQ. It is a free web service through which you can schedule your photo uploads to Flickr. This can be beneficial in a number of ways. Firstly by spacing out your uploads, your friends will get more notifications in their news feed and they will check out your pictures more often. Read more: FlickrQ: Schedule Flickr Uploads.

		Gallery Private – You might have photographs on your cellphone that you want to keep private. Normally if somebody gets access to your phone and can view the photographs section, chances are that he can view all photographs stored on your phone. But Android phone owners can take advantage of “Gallery Private” and restrict access. Read more: Gallery Private: Lock Down Photos On Your Android.
		Envolve – Adding a live chatting interface to your website can help your site’s visitors interact with one another. As a result, this will form a community for your website that will add to its popularity. Envolve is a web service that provides a few lines of code that adds a Facebook like chat on your site. Read more: Envolve: Add Facebook Like Chat To Your Website.
		mysafeFriend – Since Facebook is free to join, some people create fake accounts on the site. These fake Facebook profiles can easily fool the average user and accept a friend request from such an account. As a result, the user ends up sharing his Facebook information with a stranger. A solution to this is presented by mysafeFriend. Read more: mysafeFriend: Protect Facebook Privacy From Shady & Fake Accounts.
		ChumpDump – If you have many Twitter friends, there might be some in there you do not interact with or you do not know at all. You could clean up your twitter followers, but making a game out of it would be even more fun. That is exactly what ChumpDump does. Read more: ChumpDump: Cool New Way To Clean Your Twitter Followers.

List Your Website Here!

These are just half of the websites that we discovered in the last couple of days. If you want us to send you daily round-ups of all cool websites we come across, leave your email here. Or follow us via RSS feed.

Similar MakeUseOf Articles

<!–

• makeuseof extra #27 (171 comments)
• Finally Stick To Your Resolutions With StickK (107 comments)
• Cool Websites and Tools [September 9] (51 comments)
• Cool Websites and Tools [September 7] (62 comments)
• Cool Websites and Tools [September 6] (72 comments)
• Cool Websites and Tools [September 5] (4 comments)
• Cool Websites and Tools [September 30] (3 comments)
• Cool Websites and Tools [September 29] (3 comments)
• Cool Websites and Tools [September 28] (5 comments)
• Cool Websites and Tools [September 27] (7 comments)

–>

<!–

<!–

<!–
<!–
<!–
<!–
<!–
<!–
<!–

 

 

Today we present some useful free CSS/(X)HTML templates which are available for free download and use. You may want to consider using them for your next projects or build upon them, creating more advanced themes from these basic templates.

Free CSS/(X)HTML Templates

Blue Jeans

(Demo

| Download

)
Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture.

Portfolio

(Demo

| Download

)
An HTML 5 and CSS based website template suitable for businesses. It has a jQuery slide show in the home page header for displaying your latest work, featured contents or can also be used to tell your visitor what your web site is all about.

High Five

(Demo

| Download

)
It can be useful if you need to show case your work / portfolio. Most of the style elements are in the CSS including styles for Blog, Comment Template etc.

AppCloud

(Demo

| Download

)
It has been designed with tones of blue, white and a bit grey to point out the gadgets and provide more usability that you can obtain information you need faster and more easily. You can display all gadgets you are selling.

RS 18

(Demo

| Download

)
This blue colored well designed template can be used by people doing business.

Dandoot

(Demo

| Download

)
It has been designed so that it is suitable mostly for major/indie music recording companies, bands, musicians, music products affiliates, music event organizers or simply online music stores.

Bamboo

(Demo

| Download

)
This template will go extrremly well with suitable Blogs, Small Websites etc.

Acallia

(Demo

| Download

)
A smart template, it can be used by service sector industries and persons like event management compnies or graphic designer firm.

Reinvent

(Demo

| Download

)
It features a narrow, one column layout with minimum graphics, clean and legible typography.

Alexx C

(Demo

| Download

)
This template gels well with person/firm in service sector.

RealOne

(Demo

| Download

)
This template is created keeping in mind property selling/buying sites and its quite neet.

The Radio Station

(Demo

| Download

)
As the name suggest, this can be used by FM or radio stations.

CSS Heaven 1

(Demo

| Download

)
This template can be used for some design or lifestyle related website and it gives a contemporary look.

Turrion

(Demo

| Download

)
A blue colored template, it tends to give all the necessary information to clients at one go.

Zen Design

(Demo

| Download

)
This template can be used for websites with loads of information or which issuing articles/tutorials on regular basis.

Urban Gear

(Demo

| Download

)
Great free html template for on-line shop dedicated to the urban fashion industry. Remove the slider area and use this template as a start point for your on line business.

ubly

(Demo

| Download

)
This format is most suitable for blogs related web sites.

beSMART

(Demo

| Download

)
Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

CSS Heaven 2

(Demo

| Download

)
CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs

Easy Slide

(Demo

| Download

)
Easy Slide is a simple but cool css template based on the famous Coda Slider.

StudioClick

(Demo

| Download

)
Studio Click is a simple, well-structured portfolio theme that focuses on one thing: gorgeous photos, screenshots, and content. It displays works easily and stylishly using large images of your products.

Bizgroup

(Demo

| Download

)
Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

Photo Pro

(Demo

| Download

)
Photo Pro is a simple css template for portfolios and photo sites and it’s very easy to edit.

Treasure hunters

(Demo

| Download

)
This facinating template can be used by blogs and or some stock photo sites.

Shop Around

(Demo

| Download

)
Great free html template for on-line shop. Use it as a start point for your on line business.

Free Nova Studio

(Demo

| Download

)
The Blog page features a simple blog design, easy on the eyes, allowing you to express your thoughts freely and in a stylish way!

Mondays

(Demo

| Download

)
This template gives us a break from usual design and cn be used by service industries providing 24*7 supprts.

OWMX 1

(Demo

| Download

)
Color of this template is easy on eyes and is stylish.

Simple Solution

(Demo

| Download

)
This template can be used by business sites and it is very attractive.

Classic Luxury

(Demo

| Download

)
It is clean and has a lot of whitespace and nice typography. The code is well-organized and uses standards-based HTML and CSS.

Outliers

(Demo

| Download

)
This template can be best used to showcase your idea and ideation process.

Portfolio Template

(Demo

| Download

)
This is a clean and professional looking template for small portfolios or business sites. Very easy to edit if you have a basic understanding of html and css.

Market Leader

(Demo

| Download

)
It can be used to showcase the reasons to prospective clients to choose you.

clean-white

(Demo

| Download

)
This is a simple but beautiful css template with lots of whitespace and a professional look. Perfect as a frontpage for small businesses or photographers.

Ninja Assassin

(Demo

| Download

)
Impress visitors to your site with a high-quality one-page portfolio site inspired by the Japanese ninja culture.

Kelontong

(Demo

| Download

)
You can use use Kelontong WordPress e-commerce theme to modify your store and sell more of your products.

Small Business

(Demo

| Download

)
This is suitable for small scale business websites that don’t need a lot of pages.

RS 19

(Demo

| Download

)
Its a attractive template using combination of white & bright colors and css techniques like Box Shadows and text shadows.