Advertise here with BSA

Here at WDL, we take great pride in being able to find useful freebies and share them with our readers. It saves you time, and allows you to focus on creating, instead of hunting. Here you will find 23 free textures to add to your resource library. Remember that textures can always add a nice touch to a website or other design project when used properly.

Advertise here with BSA

Whether you’re already a pro at creating responsive web sites or your just learning what it’s all about, it’s good to have some scripts handy that you can easily integrate into your site. We all know how popular image and content sliders are now, and for good reason. So we decided to round up some jQuery slider plugins that are already responsive – meaning they will adapt to the size of their container.

Flexslider

FlexSlider is an awesome, fully responsive jQuery slider plugin. In other words, it resizes to fit the screen on which it is displayed, and looks good doing it. We love this slider so much that we use it in our responsive WordPress themes at Theme Trust.

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

unoslider

unoslider is a fully responsive, touch enabled, mobile optimized jQuery slider plugin.

Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container.

wmuSlider

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

Responsive Image Gallery with Thumbnail Carousel

A jQuery image gallery with a thumbnail carousel. You can download it here.

Elastic Image Slideshow with Thumbnail Preview

Create an elastic slideshow with a thumbnail preview.

Advertise here with BSA

With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. These nice up-to-date cheat sheets, created for WDL by InMotion Hosting, can help web designers and developers keep track of it all.

The cheat sheets are broken up into three graphics:

• Tags
• Event Handler Content Attributes
• Browser Support

Each differentiates between the new, existing, and unsupported features of HTML5. The clean visual grid is easy to run through, lending itself to be a very practical tool for a busy designer/developer. The most useful aspect of it all – it is print-ready for you to pin up on your wall for quick and easy referencing.

HTML5 Tags Cheat Sheet

Click graphic below to enlarge, print or share on your website.

HTML5 Event Handler Content Attribute Cheat Sheet

Click graphic below to enlarge, print or share on your website.

HTML5 Browser Support Cheat Sheet

Click graphic below to enlarge, print or share on your website.

Other Recommended Articles On HTML5

• HTML5 & CSS3: Take Your Design to Another Level
• Fresh Examples of HTML5 Websites
• 10 Online HTML5 Tools For Web Designers

Advertise here with BSA

jQuery was first released in 2006. Nearly 5 years later, it’s still going strong – due largely in part to the community that’s been built up around it. This community of developers constantly releases plugins that allow web developers to easily add amazing functionality to their projects.

Continuing our “Best of 2011″ series, the focus this week is on jQuery plugins. Over the past eleven months we’ve seen a lot of great new plugins being released, which made choosing our favorites extremely difficult.

Isotope

Isotype is a jQuery plugin for creating dynamic and intelligent layouts. It also lets you reveal & hide items with filtering, re–order items with sorting – all done with captivating animations.

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FlexSlider

FlexSlider is an awesome, fully responsive jQuery slider plugin. In other words, it resizes to fit the screen on which it is displayed, and looks good doing it.

Sausage

Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.

arbor.js

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Mosaic

Mosaic automatically generates sliding boxes & captions, allows slide & fade animations with custom directions, and preloads images within boxes.

Supersized

Supersized is a fullscreen background slideshow built using the jQuery library.

Advertise here with BSA

Eventually, we’ll all stop talking about responsive web design – not because it will go away, but because it will become what’s expected. Flashback ten years ago and we were all talking about CSS and tableless design, but today there’s no need to mention it. It’s simply the way modern websites are built, although sadly, I’m sure there’s a few out there still using tables.

Nevertheless, the concept of responsive web design is still relatively new. So it’s our job to help you learn about it and to help you find the stuff that makes building responsive sites easier. For this post we’ve gathered a collection of Responsive Web Design Templates and Frameworks.

Mobile Boilerplate

Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Hardboiled CSS3 Media Queries

These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.

tiny fluid grid

The happy & awesome way to build fluid grid based websites.

FluidGrids

A CSS framework for rapid interactive prototyping.

Less Framework

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

inuit.css

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

flurid

A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Fluid Grid

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.

320 and Up

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

Advertise here with BSA

jQuery helps us web designers and developers do some amazing things, and plugins make it almost too easy. That’s why it’s an obsession of mine to find new ones. I’ve been on the lookout for the past couple of weeks, and I’ve collected some good ones. Here are 8 Fresh and Useful jQuery Plugins.

Isotope

Isotype is a jQuery plugin for creating dynamic and intelligent layouts. It also lets you reveal & hide items with filtering, re–order items with sorting – all done with captivating animations.

jQuewy

jQuewy is a simple, efficient, and lightweight loader for javascript functions, with a powerful CDN-ready backend.

Sausage

Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.

ImageLens

ImageLens is a jQuery plug-in to add lens style zooming effect to an image.

jquery.timepickr.js

This jQuery plugin is an experimental approach to enhancing web time picking.

CodeExplorer

This jQuery plugin produces an online code explorer. It allows for different themes, multiple instances, fullscreen mode, github connections, and much more.

960 Grid on jQuery-Mobile

960 Grid on jQuery-Mobile is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.

jMenu

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.

Advertise here with BSA

It seems that jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we’ve found some good ones for you. Here are 10 fresh jQuery plugins that you should find useful.

arbor.js

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Mobily Map

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

Awkward Viewline

This is a simple plugin for displaying any type of media on a straight line. As an example it can be used for displaying a product line over the browsers entire width.

liteAccordion

liteAccordion is a horizontal accordion plugin that only weighs 4.5kb, and the themes don’t use any background images.

Zoomy

Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image.

Waypoints

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Reveal

Reveal is a lightweight plugin that lets you easily create modal windows.

Subway Map Visualization

This plugin gives you a way to display data by generating HTML in the form of a subway map.

jQuery Runloop Plugin

With jQuery Runloop, you can create your own small runloop with keyframes at your own choosing, each with code to execute. You can put whatever code you want in each keyframe, rearrange keyframes easily, and use reusable maps of code and/or animations to share between runloops.

Activity Indicator

Activity Indicator is a jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML.

Advertise here with BSA

When I first sat down to write this post my idea was to compile a list of the best business books for designers.  However, as I found books claiming to fit this niche, I began to notice something that got me asking questions.  It was the publishing dates.  Some were 2009, others 2008, and others were dated as far back as 2003 or even older!  I immediately thought to myself, “How could these books possibly be valid today?”  I mean, Facebook and Twitter didn’t even exist then!  When I’m searching for posts online, if I come across a blog post or news story from 2005 or 2006 I don’t even read it.  It’s old news, outdated, irrelevant.  But is that just the nature of internet content ?  Have I somehow been programmed to disregard possibly helpful material just because of a date?

Maybe.  In an attempt to get to the bottom of these questions I’ve gathered together the best of what books and blogs have to offer on the subject and while I still give my final thoughts, I leave the conclusion up to you.  And if nothing else, you can bookmark this post for later as a big book/link dump for design business advice.

Let me know what you think in the comments or on twitter!

Design Business Books vs Blogs

THE BOOKS

The Graphic Design Business Book makes the claim that general business advice isn’t enough for designers.  Which, I would agree.  While there are definitely things we can all learn from basic business principles, it’s always best to approach your area of business with the specifics of your trade in mind.  Here are the topics they cover in The Graphic Design Business Book: creating a business plan, managing a studio, presenting portfolios, marketing on the Web, keeping clients happy, expert advice from reputable designers, and more.

This book was published in 2005.

“Business and Legal Forms for Graphic Designers provides 40 essential forms and checklists—all ready to copy and put to immediate use in any graphic design studio!

Each form includes step-by-step instructions and can be used as is, or easily tailored to meet a specific business situation. This latest edition features brand-new forms for employment and lease agreements, as well as revised examples of letter of interest, estimate for client, preliminary budget and schedule report, purchase order, status report, contracts with illustrator/photographer/printer, nondisclosure agreements, copyright application, and much more.

Business and Legal Forms for Graphic Designers also includes standard contractual advice, surefire business systems, and hundreds of no-nonsense tips for managing the office, getting clients, and negotiating the best deals. Plus, an accompanying CD-ROM offers electronic copies of all these forms in both Mac and PC formats.” – Amazon product description

This book was published in 2003.

“For years, the Graphic Artists Guild Handbook: Pricing and Ethical Guidelines has been the industry bible for graphic designers and illustrators. This, the 13th edition, continues the tradition with new information, listings and pricing information based on surveys of working designers. It addresses legal rights and issues such as how copyright laws affect the income and work of graphic artists. It also provides tips on how to negotiate the best deals and how and what to charge for work, and includes sample contracts. For design and illustration professionals, there is no more comprehensive and informative resource.” – Amazon product description

This edition was published in 2010.

“The Designer’s Guide to Marketing and Pricing answers all of the common questions asked by creatives every day. This nuts and bolts guide to running a creative services business teaches readers how to create a smart marketing plan–along with small actionable steps to take to reach their financial goals. From learning which marketing tools are most effective and how to use them to discovering how to establish contact with potential clients, this book is the must-have guide for navigating the murky waters of the design business. The book also touches on tricky subjects such as how to talk about money with clients and prospects, how to figure out a fair hourly rate, and how to give an accurate estimate for a project.” – Amazon product description

This book was published in 2008.

The Creative Business Guide to Running a Graphic Design Business calls itself, “The go-to guide for graphic designers who want to run their own shop and improve their bottom line. First published in 2001, The Creative Business Guide to Running a Graphic Design Businessset long-needed standards as the first comprehensive management manual for the graphic design industry. Now brought up-to-date, it describes current, best-practice procedures for firms of all sizes operating in an industry that is both fast-evolving and increasingly competitive. [Including] 20 illustrations.” – Amazon product description

This edition was published in 2009.

Inside the Business of Graphic Design invites us to “Share the insights of today’s most legendary graphic designers as they reveal the best-kept secrets (and failures) of their business lives! Based on one-on-one interviews with over 60 graphic design business owners, Inside the Business of Graphic Design casts a precise and realistic light on the risks, requirements, and rewards of running a creative and successful design business. Six sections discuss the entire cycle of business ownership, including goal setting, finding the right management style, cooperating with employees, triggering growth, and even rethinking whether to stay with the business or move on. Whether you dream of setting up a small studio or have been on your own for years, this provocative guide is an important source of success strategies for every graphics professional.” – Amazon product description

This book was published in 2002.

THE BLOGS

Web Design Ledger (yeah, you’re here right now) is a blog written by web designers for web designers.  We concentrate on sharing knowledge, inspiration, and information about or related to web design.  At WDL you’ll find awesome free downloads, resources, tools, tips, tutorials and a healthy dose of inspiration.  Below are some helpful business articles we’ve published within the last several months.

• 9 Tools For Managing Your Freelance Design Business
• Legal Guidelines for Freelance Web Designers
• How to Build the Perfect Web Community
• The Business Side of Design

Smashing Magazine is devoted to delivering useful and innovative information to web designers and developers.

“Our aim is to inform our readers about the latest trends and techniques in Web development. We try to convince you not with the quantity but with the quality of the information we present. Smashing Magazine is, and always has been, independent.”

And here are some business articles they’ve published recently…

• Guidelines for Successful Communication With Clients
• Common Questions About Design Professionalism
• Developing a Freelance Marketing Plan
• How to Set Up Your Freelance Business for the Long Haul
• 5 Free to Use Freelance Design Contract Templates

Freelance Switch is a community of freelancers helping freelancers.  Their content is for photographers, designers, bloggers, developers, and just about any other type of freelancer.  Their blog is a treasure trove of answers to freelance questions.  Below are some especially helpful business oriented articles…

• 10 Tax Reductions Freelancers Can Make
• Nine Factors to Consider When Determining Your Price
• Switching to Freelance: How to Negotiate to Work Less Hours in Your Job
• 110 Ideas to Get More Freelance Work and Generate New Client Leads

Graphic Design Blender is more business oriented than any of the other blogs above (except maybe freelance switch).  Their main goal is to provide helpful content about running a design business.  Here are some cool examples of them doing just that…

• 10 Tips for Starting Your Own Design Business
• 10 Attributes of Successful Freelance Designers
• Stop Throwing Your Design Profits Down the Toilet
• How to Run a Successful Design Blog Without Sinking Your Design Business

Web Designer Depot is a place for those passionate about web and graphic design techniques and who want to continue to learn and share with others in that community.  They publish anything from tips, resources, freebies, tutorials, and design inspiration.  Here are a few of their more recent business oriented articles…

• Ethics in the Design Field
• 14 Essencial Utilities for Managing Your Freelance Design Business
• What to do When a Client Relationship Goes Bad
• Starting a Web Design Business
• 8 Tips For Freelance Designers to Get Paid Faster
• How Old-Fashioned Marketing Can Supercharge Your Design Business

Mashable is one of the world’s leading sources for breaking news in web and tech.  They exploded with traffic barely two years ago when they emerged as the only people one earth who knew what the hell was going on with twitter (and social media in general).  Despite the fact that they don’t particularly cater to designers, it’s their specialty in existing, new and emerging marketing techniques (among other things), which has earned them a spot on this list.  The articles listed below are relevant because they talk about something that nearly none of the books could have, because they were published before  the use of social media as a means of marketing.

• How Brands Can Make the Most of Facebook’s New Pages
• Social Media Marketing: 5 Lessons From Business Leaders Who Get It
• 8 Ways Entrepreneurs Can Get More Out of Twitter
• 5 Tips to Strengthen Your Company’s Social Media Voice

Ink.com is again, another example of a website/blog that offeres great business content that anyone, designer or not, can take to heart.  Even if the articles here are not specifically geared towards designers you should be able to get some really helpful perspective from their articles.  Especially if you’re using design blogs and the conversations happening on them as a filter for this advice.

• Writing a Business Plan
• Running a Home -Based Business
• How to Incorporate

My Final Thoughts

I will say, after researching all these books and blogs I’m actually much more open to the idea of a design book (even a slightly outdated one) for those who feel like they’re in need of a “design business education” than I thought I would be.  I’ve realized that the two serve different purposes while still covering a lot of the same information.  I personally use blogs more and rarely if ever buy business books.  But that’s because I’m “up-to-date” on the design business that’s relevant to me.  Beyond that the blogs I follow help me keep up with new stuff as it happens.  On the other hand though, if I was fresh out of school, or I was asked to take on a facet of the business I don’t have experience in, I think I would find having a book very helpful.  The main reason being that in a book, everything is right there – clearly laid out and in an order that helps me tackle one thing at a time, building up to a complete knowledge on the subject.  Online, while maybe more up-to-date and FREE, there is still a whole lot of searching that goes on in order to get as informed as you might by reading a book on the subject.

What do you think?  Do you have a design business book that you highly recommend or are you all about the blog?

Advertise here with BSA

Back in October of last year, I launched Theme Trust, a shop for premium WordPress themes. Five months later, I couldn’t be more excited about where it’s at. Sales have consistently increased each month, and the amount of positive feedback from customers has been overwhelming.

Moving forward, the plan is to keep providing fast and friendly support and to release more amazing themes – which brings me to the topic of this post. I’ve recently released a new theme called Filtered. It’s a portfolio theme that has a clean and minimal style along with some nifty jQuery features. Since many of you are obviously web designers, this might be perfect as a foundation for your own portfolio or your next client project.

One of the coolest aspects of Filtered is the animated filtering of project thumbnails. Click on a category, and watch the ones that don’t belong vanish – and the ones that do slide into place. This theme also makes use of WordPress 3′s custom post types. There’s a special post type called “Projects”, which makes it easy for you to manage your portfolio.

Theme Features

Here’s a run down of all the features packed into this theme.

• Animated Thumbnail Filtering
• 3 Built-in Background Textures
• Custom Options Panel
• Custom Post Type for Easy Portfolio Management
• Widget Ready Sidebars
• Widget Ready Footers
• Portfolio Page Template
• Archive Page Template
• Author Page Template
• WordPress 3.0 Custom Menus
• WordPress 3.0 Custom Background Support
• Set Your Own Color Scheme
• Post Thumbnails
• Built-in Lightbox
• Smooth Animated jQuery Drop-down Menus
• Upload a Custom Logo
• Threaded Comments
• Twitter Integration
• Flickr Integration
• Button Shortcodes

Click the image to view a live demo of Filtered.

At Theme Trust when you buy one theme, you get another free. Just add any two themes to your shopping cart and then enter the code “1free“.

Advertise here with BSA

Remember the days of the Commodore computer? Your word processor had one font family, with an italic and a boldface, if you were lucky. Designing a contrasting header to a computer-generated document required scissors and tape.

Though the output of your dot matrix printer was unmistakable and monotonous, at least you never had to sweat the aesthetics of combining type. Matching heading fonts with body fonts, accent fonts and footnote fonts can be a touchy pursuit. Even perfectly balanced fonts can look ungainly and ugly next to the wrong neighbors. If type is the most important aspect of web design, then combining type is a critical skill.

Unfortunately, it’s also a hard skill to master intuitively. Sharpen your eye for font combinations by taking a crash course in type combination. These links are rife with great explanatory graphics and even better advice. You’ll be mixing type like a pro in no time.

Learn to Combine Fonts – the Essential Basics

When you need a type combination and you need it immediately, check out Douglas Bonneville’s 19 Top Fonts in 19 Combinations. This cheat sheet culls the 19 most popular web fonts, imagines them as headers, and pairs them with foolproof body text choices. Better yet, the convenient cheat sheet shows the pairings together, so that you can merely choose a duo that meets your needs.

For a more in-depth version, try this arrayed infographic codifying 22 possible type combinations. Though it doesn’t provide a visual key, it does offer a quick reference for the advisability of 484 possible pairings.

Get Help on Helvetica Combinations

And just because you’re entirely in need of some friends for Helvetica, keep this FontShop list handy. Helvetica-savant Indra Kupferschmidt provides an array of choice Helvetica helpers, as well as a first bit of insight into the theory of font pairings.

Learn to Create Well-Balanced Contrast Pairings

With those immediately accessible type pairings at your elbow, it’s time to incorporate a bit of theory so that you can choose your own. A common theme in the cheat sheets is contrast – for example, serif typefaces are paired with sans-serifs, and vice-versa. Yet the key to well-balanced contrast pairings is to look for subtle similarities. Take a gander at Peatah.org’s combination chart, and follow up with BigBrand’s golden combination rule: Look for similarities in the letters a, g and e.

Further Reading:

Hoefler and Frere-Jones’ Four Ways to Mix Fonts explores a breadth of font combination concepts and their uses. This article and its multitude of examples provide guidelines rather than dogmatic combinations. The most necessary quality of a pairing is that both unity and variety are preserved. H&FJ’s pivotal tenet: When combining fonts, let one design feature stay the same. Let one other thing vary.

These links alone should be enough to serve your basic font combination needs. For advanced study, try Robin Williams’ well-considered Layers Magazine article or Dmitry Kirsanov’s article on type matching theory.