There are a ton of different ways to enhance the UX of an interface with jQuery through its massive array of features and functionality. It’s important to have a solid understanding of its capabilities in order to implement it in your design process. Unlike with HTML and CSS, jQuery is a lot more complex and can take a lot longer to become comfortable with. On larger projects, it’s common to work with front-end developers devoted to writing jQuery & Javascript. The beautiful thing about jQuery is even if you don’t have the luxury of developers, it can be approached in a much simpler fashion. There are a ton of awesome plugins available which can be easily customized with HTML & CSS without having to learn jQuery and Javascript.

If you’re a designer that’s unable to write jQuery, understanding the technology will allow you to document your ideas in wireframes and mockups so developers will understand your intensions. It will also help to reference existing examples to ensure attention to detail on things like easing, behaviours, transition styles, mobile considerations, etc. Responsive web design has taken an exciting leap forward with jQuery and if you’re working on a responsive project, this article will prep you with some cool tricks to stuff up your sleeve.

jQuery isn’t mandatory for a beautiful UX but, there are millions of websites taking advantage of it, pushing the boundaries beyond static-feeling content. Some of the biggest impacts I notice with jQuery are innovative ways to present images, animations, and responsive solutions. Below are some awesome examples of sites using jQuery in the wild. I’ve also outlined a bunch of helpful plugins on these topics to consider on your future projects.

10 Awesome Websites using jQuery

• X-doria – Beautiful slideshow with text overlay and awesome navigation style.
• Ghost Horses – Great use of jQuery in content, animations, slideshow and more.
• KEN PILS – Cool full screen background image cycling through various photography.
• Stribling – Simple slider which dominates the presence of home page.
• HYT Watches – Product focused navigation with slick animated dropdown.
• Google Art Project – Cool use of zooms on the landing page and a lot of jQuery rich Ui items.
• Paul Noble – Cool keyboard controlled slideshow.
• Google Play Music Tour – An amazing use of animation, sound and the layout is semi-responsive.
• JPUNT - Awesome image handling and content hovers.
• Rally Interactive – Nice animations on the dribbble shots displaying stats and great navigation.

jQuery Plugins for Image Handling

Nivo Slider - The world’s most awesome jQuery & WordPress Image Slider

• 16 unique transition effects
• Simple clean & valid markup with tons of customization included.
• Keyboard Navigation
• Available as a WordPress plugin for $19.
• Over 1.2 million downloads and counting.

Anything Slider by Chris Coyier – An awesome slider that combines many of the features from previous sliders that Chris has created.

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Link to specific slides from static text links

Supersized - Fullscreen background slideshow

• Resizes images to fill browser while maintaining image dimension ratio.
• Cycles backgrounds via slideshow with transitions and dynamic preloading
• Navigation controls with keyboard support
• Integration with Flickr – pull photos by user, set, or group
• Tons of options included.
• Check out this blog post for more information on it.
• Check the plugin in action: Sector 9, Rhode Island School of Design, and Hotel Cala Sant Vicenç.

Slicebox by –  A Fresh 3D Image Slider with Graceful Fallback - View Demo

• Slicebox makes use of the 3D transforms properties and allows different kind of effects.
• Uses three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object.
• A simple slider is used as fallback if the browser doesn’t support CSS3 3D transitions.
• A great way to dial up the wow factor for a photography focused landing page.

ImageLens - A simple plugin for Lens Effect Image Zooming

Zoomy - Another cool plugin that allows you to zoom in on pictures

• A flexible zoom plugin and can be used with either, two copies of the same image, or one image linked to itself.
• Zoomy is a flexible zoom plugin and can be used with either, two copies of the same image, or one image linked to its self.
• There are a few options that allow you to change the appearance and usability.
• Get an extra level of detail without bogging down your page with giant images.
• Zoomy WordPress plugin available for $2.
• Currently over 10,000 downloads.

jQuery Zoom - Another plugin to enlarge images on mouseover or mousedown

jQuery Animations Plugins

jQuery Blend - A plugin to cross-fade CSS backgrounds.

jQuery News Ticker - Taking inspiration from the BBC News website ticker, jQuery News Ticker brings a lightweight and easy to use news ticker to jQuery.

jQuery Timelinr - This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.

Flip! - a jQuery plugin that will flip easily your elements in four directions.

Quicksand - Reorder and filter items with a nice shuffling animation.

Arbor.js - A graph visualization library using web workers and jQuery.

Isotype - An exquisite jQuery plugin for magical layouts. Create a sexy, animated list of elements with sorting.

• Layout modes: Intelligent, dynamic layouts that can’t be achieved with CSS alone.
• Filtering: Hide and reveal item elements easily with jQuery selectors.
• Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
• Interoperability: features can be utilized together for a cohesive experience.
• Progressive enhancement: Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

Roundabout by Fred LeBlanc – a jQuery plugin that easily converts unordered lists & other nested HTML structures into entertaining, interactive, turntable-like areas. It’s ready-to-go straight out of the box, but if you want to get crazy, Roundabout is highly-customizable with an extensive API that allows for some pretty amazing results.

Roundabout Addons

• Roundabout Shapes by Fred LeBlanc - Roundabout can move in more ways than just a turntable. With Shapes, you have many other ways you can move your content around the page.
• jQuery Easing by George McGinley Smith - jQuery comes with two easing styles built in, but this plugin adds many, many more. Include this script and use any of its defined easing functions in your Roundabout animations.
• Event.drag & Event.drop by ThreeDubMedia - In addition to rotating on click, Roundabout can also move by clicking and dragging on the Roundabout element itself.

BoxyMenu - Fast and Simple Links Box Navigation Menu – View Demo

• BoxyMenu is an out of the box approach to creating a nav.
• Original loading style and cool presentation.

jQuery MagicLine Navigation - View Demo - The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

Responsive jQuery plugins

FITVIDS.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitText by Paravel - A jQuery plugin for inflating web type.

• 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.
• FitText is intended to be used as gigantic display text only, they suggest not using it on paragraphs.

Lettering.js - A jQuery plugin for radical web typography. Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control. Here are a few examples of what can easily be done with Lettering.js: Kerning Type, Editorial Design, Manageable Code, Complete Control.

Flexslider - An awesome, fully responsive jQuery slider plugin.

• Simple, semantic markup.
• Supported in all major browsers.
• Horizontal/vertical slide and fade animations.
• Multiple slider support, Callback API, and more.
• Hardware accelerated touch swipe support.
• Custom navigation options.
• Use any html elements in the slides.

UnoSlider - an advanced image and content slider which is built with mobile in mind.

• Fully responsive and touch enabled.
• Dynamic tooltips and Per-slide options.
• Professional support and more than 40 preset transitions.
• Fairly inexpensive – jQuery plugin $9. WordPress plugin $14.
• Professional support.
• Great for a more advanced solution and having a slider as the main functionality of a home page.

Photo Swipe - Image Gallery for Mobile and Touch Devices

• iPhone, iPad, Android, Blackberry 6 and Desktop all supported.
• PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Elastislide -  A responsive jQuery Carousel Plugin. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousels structure into a container with a fluid width will also make the carousel fluid.

• Easily create a film strip of photos that you can easily cycle through.
• Lightweight and simple to implement.
• Includes 5 different sizes
• Utilizes the jQuery Touchwipe Plugin (iPhone, iPad, iPod Touch Gesten / Gestures, Wischeffekt / Wipe Effect).
• Also check out Elastic Image Slideshow with Thumbnail Preview

Responsive Image Gallery with Thumbnail Carousel by Mary Lou

• Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, she created a responsive gallery that adapts to the view-port width.
• The gallery will have a view switch that allows to view it with the thumbnail carousel or without.
• They’ll also add the possibility to navigate with the keyboard.
• Utilizes the jQuery Touchwipe Plugin (iPhone, iPad, iPod Touch Gesten / Gestures, Wischeffekt / Wipe Effect).

More Great Plugins

• Web Design Ledger - 10 Fresh and Useful jQuery Plugins

Final Thoughts

Being aware of the capabilities of jQuery and how much can be executed with plugins will go a long way in creating more style and feel in your interfaces. Having these ideas at your disposal will help promote more creative web design with interesting ways to handle images, layout enhancements, animations, and cool ideas for responsive design. Take yourself to the next level and create your own custom jQuery and Javascript from scratch. If you’ve only worked with jQuery plugins, I suggest checking out these great articles below to gain a better understanding of where to begin with writing jQuery and Javascript.

Write your own  jQuery & Javascript

• Getting Started with jQuery by Louis Lazaris
• Mozilla Developer Network - JavaScript technologies overview
• Basic Tips for Getting Started with jQuery Development

If you’re unfamiliar with the term crowdsourcing, it’s defined as the process of outsourcing tasks to a distributed group of people. It’s commonly used for things like design contests at fixed rates with a group of designers that submit ideas for logos, interfaces, landing pages, etc. There are many different types of crowdsourcing available, this article will focus on design. 99designs, crowdSPRING, Chaordix, Prizes.org, uTEST, and UserTesting.com are well known services for crowdsourcing design and usability testing.

Crowdsourcing can be a touchy subject among designers, some believe it devalues their work and that it goes against the no-spec movement. Personally, I disagree and feel that crowdsourcing has its purpose for businesses and designers. However, there are several things to consider when entering a contest or relying on a random crowd of people to design elements for your brand. Context (best defined as; the set of circumstances or facts that surround a particular event, situation, etc.) is so crucial when building a brand and ensuring your entire team is aligned with your vision and business objectives. Without knowing the designer you’re engaging with, it can be difficult to predict if your desires and branding objectives will be aligned.

I’ve come up with some thoughts from both parties of a design contest which I’ve outlined in this article.

Crowdsourcing as a Business

It may seem like crowdsourcing is a quick and easy solution for getting graphic design created without having to go through the trouble of hiring a designer, debriefing them, proceeding with the design workflow, etc., but that’s not always the case. You have no control of who works on your contest and if they’ll follow through with revisions as needed. For smaller projects, this probably works fine but a contract would’ve protected you in the event that something goes wrong. Building a relationship with a designer is essential for him/her to understand the vision of your brand, its culture, market competition, objectives, and persona. Every designer has a different personality, methodology, skill set, and specialities. If they don’t understand your company, policies, and revenue model – they won’t truly connect with your brand.

crowdSPRING provides an average of 110+ entries submitted for each design. For someone who isn’t a designer, it can be an extremely difficult task to know if a logo or interface will work out well in the long run. It’s natural to get confused when so many options are being presented without an understanding of branding strategy and the lifecycle of design assets. A good designer will sort through a ton of options and present a small sample of best concepts they can – assuming they’re passionate about their work. Design strategy is the whole reason behind hiring a designer, to accomplish your objectives visually and have reasoning behind the decisions they make. Branding can have a make or break impact on UX and if you’re in a long term relationship with a designer, there’s a good chance they’ll create consistency with your branding.

On the other hand, there are a ton of developers and entrepreneurs that have a strong sense of design and early on crowdsourcing can save them a lot of money. For example, if a startup is finalizing a prototype to pitch to investors within a 3 week deadline and a tight budget, a designed logo might just be a finishing touch. They can simply create a logo design contest and select the best option they have access to and will generally be less picky. The success of design in business is defined by its ROI, conversion, and engagement. If you can get things off the ground with crowdsourcing, a penny saved is a penny earned.

How’s about a little privacy? On both 99designs and crowdSPRING, anyone can view design submissions before a contest winner is chosen – even without having an account. Confidentiality can be extremely important when competing with other brands in the same market. I assume that startups commonly use crowdsourcing for things like logos and interfaces. If a competitor discovered that a competing startup was crowdsourcing, they could visit one of these sites and use this knowledge to their advantage. However, I recently discovered that prizes.org offers the ability to create blind contents to resolve this issue. Hopefully other crowdsourcing sites take advantage of this, I think it’s really important.

Aside from crowdsourcing design, one of the services I mentioned above is UserTesting.com. They provide the fastest, cheapest way to find out why users leave your website, through testing. Testing is essential for any brand to get an unbiased opinion of how their web page or application is being received and understood by its users. UserTesting.com also manages everything and can provide results within an hour of submitting a test. $29 per user is an awesome deal if you consider what it would involve to conduct usability tests internally. UserTesting.com eliminates the process of finding users and running tests instead of devoting an employee or consultant to this task.

Have you ever used crowdsourcing for your business?

If so, how did it turn out? Would you recommend it to others and use it again?

Crowdsourcing as a Designer

Crowdsourcing does not devalue a designers work, they devalue it themselves. The amount of money you’re willing to work for is entirely up to you. Competing with others can be a great way to evolve your design skills, increase your efficiency and update your portfolio. Rather than working on design competitions, I prefer creating my own content. I have ideas for things I want to create that involve graphic design, UX, web development and many other aspects of my skill set. Being a great graphic designer doesn’t mean you have to come up with project ideas yourself.

Crowdsourcing can be a great way to experiment, focus strictly on graphic design and raise your competitive level. The only downside I can imagine being really frustrating is spending hours on a design only to have a contest won at the last second by another designer. I can’t speak on the career potential with sites like 99designs and crowdSRPING because I’m not exactly sure how they work when engaging with a contest author. That said, if you’re starting out a designer, contests provide the opportunity to get your feet wet with a brand without having to send in a resume and get interviewed. I’m sure it’s possible to land a job if things work out well, I’ve noticed over the last few years that jobs can popup in the strangest places.

Another strategy I thought of is getting other designers concepts on a project you’re working on. I’ve been in countless situations where another designer has taken things to the next level or shined a different light on a task at hand. If you’re a designer in a long term relationship with a company, it might make sense to create your own contests. I know from past experiences that it can sometimes be difficult to get the attention of other designers through things like facebook and twitter and get them engaged with a smaller project. Having a consistant group of designers to deliver ideas might come in handy while staying on budget.

There’s no reason to be concerned about crowdsourcing as competition to a solid skill set. Brand’s demand solid problem solvers on a full time basis with a range of abilities. Even though my core knowledge revolves around design and coding, my foundation is based on problem solving. As an example, this year I became my own accountant and switched my main focus to writing. As I mentioned in Designing in a Browser for Designers and Developers, I firmly believe that your instincts are one of the most important assets you can bring to the table for a brand.

Have you ever been involved in a crowdsoucing project?

Were you happy with how it turned out and, do you have any live samples?

Photo by James Vaughan - Fonts: Wisdom Script and ONRAMP by Lost Type

For those of you that checked out Web Design Music 001, this track list is quite different. There’s a pretty big variance in the track types which makes for a perfect Fantastic Voyage tribute. If you haven’t heard of or seen the movie, check it out on IMDB. I’ve been stumbling upon some awesome MP3 blogs lately, check out Pretty Much Amazing and their MP3 Blog Master List, very awesome.

10 Tracks From My Current Playlist

1. Lana Del Rey – Video Games (Joris Voorn Edit) – Download

2. Stay by Archetek – Download

3. Flux Pavilion feat. Example – Daydreamer – Music Video(Youtube)

4. Purity Ring – Obedear

5. Worlds End Press – Faithful (Gloves’ China White Club Dub)

6. Dragonette – Let it Go

7. Radiohead – Kid A (dangerDAN Remix)

8. Podcast for Joris Voorn’s 7 Hours Set @ Ministry Of Sound, London 29.10.2011 – Download

9. Burial + Four Tet – Nova

10. Nite Jewel – “One Second Of Love”

There are so many brilliant blogs that look like boring text files because they aren’t taking advantage of graphic design in their articles. Post graphics can add a massive impact to the UX of a blog and provide similar characteristics to a magazine. Imagery allows you to create contextual strategies for your content with business objectives and creativity in mind. A blog can be a dominant source of traffic, revenue and engagement for a brand and design shouldn’t be overlooked. Post graphics can give articles a personalized feel and strongly engage a reader before they begin reading an article.

In this article, I walk through my process for creating article graphics, banners, custom graphics, and advertisements. If you’re unfamiliar with ad formatting, check out IAB Display Advertising Guidelines. IGN.com is an awesome example of a property that contains iAB ads and custom promotional designs like wallpapers.

Step 1 – Define the Vision

Each graphic should have its own purpose based on what your content is about to optimize its value. I like to have an idea of what the post graphic should accomplish visually to guide the design process. I am a strong believer in goal-oriented design rather than solely relying on the right side of the brain. With a checklist in mind, you’ll know when a design accomplishes its goals.

Things to consider:

• What is the intended purpose of the post graphic?
• What style, composition, and typography will best communicate its purpose?
• What emotion do you want the design to convey?
• Is it necessary to display the article’s title in the graphic, a part of it, related wording, or – no title at all?
• Would you like to create a set or theme of graphics for future articles?

Step 2 – Get Inspired

One of the many advantages with post graphic design is that aside from image compression, you don’t have to worry about the limitations of web design. You can use any fonts, any composition, graphic style, etc. To start things off, I like to dig through inspiration and establish the direction I’d like to head with a graphic.

If you’re completely unsure of where to begin, be open minded and try thinking of relative keywords.

Possible Keywords

Style: Light, Dark, Dirty, Rough, Clean, Bold, Bright, Black, Grayscale, Colour, Vintage, Retro, Modern, Futuristic, Grunge, Classy, Colourful, Corporate.

Genre: Fashion, International, Independent, Organic, Hipster, Old School, Pop Art, Hand-made, Paper-based, Textures, Urban, Technology, Underground, Trendy, Floral, Location based (Country , City, State), Premium.

Mood:  Healthy, Naughty, Funny, Happy, Serious, Intelligent, Sexy, Mysterious, Bad ass.

Inspiration Sources

• Behance.net - Behance has a ton of awesome sections through their filters including: Graphic Design, Digital Art, Typography, Illustration, Photography, Calligraphy, etc.
• Typography Served – Powered by Behance.
• Digital Art Served - Powered by Behance.
• Creattica.com - Amazing inspiration for Typography, Infographics, Digital Painting, Vector Graphics, Posters, etc.
• abduzeedo – I had the pleasure of meeting Fabio Sasso at the first Montreal Meets where he went over the background abduzeedo’s inception. He’s a really talented guy, works at Google and the site contains a mountain of inspiration and resources.
• Designspiration – Inspiration for art, typography, print, and poster design.
• The Design Inspiration – Awesome typography inspiration.
• Typographica - Type Reviews, Books, Commentary.
• Computer Arts – Inspiration, tutorials, fonts and much more.
• Gig Posters – Cool gig posters with great design and typography.
• Design fridge (blogs) – Design fridge has a filter that sorts sites by blogs which is really handy to check out other awesome blogs with great post graphics.
• Show Your Tuts – A funny example of a set of post graphics.

Step 3 – Layout

There are so many different approaches to formatting a post graphic which is where wireframes and sketches come in handy to explore ideas. You can decide which words will be more prominent than others, what the center of attention should be, and define a call to action. You may also want to try 2-3 different options to review which approach works best. I love experimenting with new compositions each time I create a post graphic to keep things fresh and push my visual design skills.

Step 4 – Select Fonts

Nice fonts and strong typography are two of the most important characteristics of great article graphics. Inspiration will have provided you with a collection of ideas for how to treat your type and the emotion you want to convey. Before visiting font sites, you’ll probably know whether you’ll want serif, sans-serif, script, calligraphy, or display fonts in your post graphic. If you require multiple fonts, you can decide on a combination of these different options.

Fonts for Purchase

• Letterhead Fonts – High end, industry leading creative fonts.
• FontShop - Be sure to try out the FontShop CS5 plugin to preview fonts for free during the design process.
• My Fonts – Massive bank of fonts.
• Linotype – Another massive bank of fonts.
• Adobe Fonts – Huge bank of standard popular fonts.
• Fonts.com – Huge bank of standard popular fonts.
• FontStock – Huge bank of standard popular fonts.
• Veer Fonts - Huge collection of beautiful fonts.
• Ilovetypography – Brilliant high quality typography resource.
• Font Fabric - Select collection of beautiful creative fonts.
• Font Spring - Great inexpensive fonts + tons of free fonts.

Free Fonts

• Lost Type - Beautiful selection of fonts which includes graphics to promote each font – stunning.
• Fonts of Chaos - Kick ass selection of creative, out of the box fonts.
• Web Design Ledger - 11 Extremely Useful Fresh Free Fonts - Awesome hipster and classy style fonts – very nice collection.
• Smashing Magazine – High Quality Free fonts 2012
• Smashing Magazine – New High Quality Free Fonts
• Smashing Magazine - 20 New High Quality Free Fonts
• Smashing Magazine - 30 New Free High-Quality Fonts
• Smashing Magazine - 25 New Free High-Quality Fonts
• Line25 - 25 Free Handwriting Fonts for your Designer Toolbox
• Line25 – 20 Free Sans-Serif Fonts Licensed for @Font-Face
• Web Designer Depot - 20+ Examples of Beautiful and Inspiring Fonts
• Misprinted Type - Awesome messy, indie style fonts.
• StereoType - Cool collection
• Font Squirrel - Massive bank of free fonts
• DaFont - Huge bank of free fonts
• Urban Fonts - Huge bank of free fonts
• Acid Fonts - Huge bank of free fonts
• Abstract Fonts - A source for something different.
• Google Web Fonts - Hundreds of free, open-source fonts that are web ready. If you use these fonts in your layouts, I’d experiment with hosting them yourself via @font-face. I’ve had font CSS reference tags randomly stop working on two separate occasions which was really annoying. Instead of defaulting to an alternative family they display unknown characters which looks ugly.

Step 5 – Select Colours

When you have carte blanche on a design, it can be difficult to set restrictions for yourself. Sometimes instead of playing around with random colours in a colour picker, I like to grab an existing palette and modify it to my liking. I use a few great sites devoted to colour palettes or, I sample colours from other designs.

Whenever you find an awesome colour combination, save it for later and build up a bank of colours for future projects. Having great colour combinations at your disposal will definitely improve your efficiency. I sampled the green for this article’s graphic from my twitter page.

• Colrd - Awesome set of colour examples, palettes, gradients, patterns and images.
• Colourlovers - Huge bank of beautiful colour palettes.
• Color Combos - Includes colour tools and a huge library for testing our combinations.
• Color Scheme Designer – Interesting tool for creating colour palettes.
• Color Hunter – Bank of colour samples.
• ComputerArts - Using Adobe’s Kuler engine with Illustrator

Step 6 – Select Graphic Assets

It’s also nice to experiment with photography, logos and other graphic elements to express a post graphic. Below are some awesome resources for photos that don’t have the typical stock photo look to them. If you can instantly tell when a blog is using stock photos; it’ll look cheap, generic and can negatively impact a brand’s UX.

Awesome Free Stock Asset Resources

• Stock.xchng - Leading free stock photography site.
• Flickr – Use the advanced search options to “only search within Creative Commons-licensed content, Find content to use commercially, Find content to modify, adapt, or build upon.”
• Compfight – A flickr search tool – includes a WordPress plugin. You can specify licenses while searching and Compfight presents different results which, I’m guessing has something to do with how they’re using the Flickr API.
• Free Digital Photos – Provides free small stock photos (400 x 300px), larger sizes for purchase.
• Graphic River – Various elements.
• Stockvault.net – Great resource with 29k + free images.
• Free Photos Bank
• RGB Stock – Free Stock Photos
• Free Range Stock
• Image * After – Tons of free photos, textures, etc.
• MorgueFile – Awesome massive database of stock photos – 300k+ photos.
• Fotogrph – Cool site - 3 guys from Nashville who create and share stock photos. For free under the Creative Commons Attribution license.
• 2textured – Great free textures.
• Texturez – Collection of free textures.
• Texture King – Awesome free textures.
• Grunge Textures – Offers free small textures.
• Pixel Galerie – Free smaller stock photos, nice quality!
• Photogen - Free Stock Photos.
• Fotolia – Free Selection – High end photo site that offers some free photos.
• Creative Commons Search – Handy CC search but you should always verify that the work is actually under a CC license by following the link.
• Every Stock Photo – Amazingly huge free stock photo bank with 15 million+ photos.
• Photl – Free photos up to 1900×1200 – higher resolution available for purchase.
• Veezzle – Free stock photo search engine that indexes SXC, RGBStock, StockVault etc…
• Toasto – Select free collection but very nice.
• 365psd - download a free psd every day.
• Arrrows – Never design an arrow again.
• FredHQ - browser silhouette icons - A free set of monochromatic browser icons in both

Always make sure to closely review licenses on images.

I enjoy creating my own illustrations and practicing line-art with in Illustrator and Photoshop. Below are some awesome ComputerArts Photoshop and Illustrator tutorials to propel your creativity.

• ComputerArts - Make your type pop with Layer Styles
• ComputerArts - Create shapes faster in Illustrator
• ComputerArts - Create retro graphics in Illustrator
• ComputerArts - Using Illustrator’s Appearance panel
• ComputerArts - Stylized gradient effects using Photoshop’s channels
• ComputerArts - Simulate screenprint effects
• ComputerArts - Layer up vectors for unique effects
• ComputerArts - Make the most of your graphic assets
• ComputerArts - Work with raster effects in Illustrator
• ComputerArts - Create 3D type with Repoussé
• ComputerArts - Build your own bespoke brush library
• ComputerArts - Design organic type
• ComputerArts - Blend textures in Photoshop

Step 7 – Experiment and Refine

As with any other form of design or art, experimentation is key to discover what works best. I also find it helps to revisit inspiration to dial up the creativity during the final stages of the design. I usually land up exploring 2-3 different compositions from my wireframes or sketches before finalizing a graphic.

Once you’re happy with the result, take a break and revisit the design with your final thoughts/ideas/revisions and finalize it.

Conclusion

It’s important to constantly improve content design and the planning process when building a brand. Having a strategy in place when creating article graphics is a great way to stay focused and feel confident about shipping in a timely manner.

You may want to propose creating article graphics to client’s when their main traffic and revenue source is their blog. I offer package deals to clients for purchasing sets of 5, 10, 20, etc. graphics in advance for future articles. I’m looking forward to researching the ROI of post graphics and their conversions.

If you have any other resources to add or feedback for improvements, please add a comment below or email me.

Font used: Hagin by Fontfabric

One of the most difficult problems people face in life is figuring out what to do as a career. I’ve heard countless stories about students spending a ton of money on university or college and then land up doing nothing with it. They take a course because they think they’ll enjoy a certain profession or their parents convince them it’s the right direction and it lands up going no where. They keep a basic job that has nothing to do with what they’ve studied, they live without a plan of action and are disappointed.

The beautiful thing about blogging is that anyone can create content about any topic they choose and share it with the world. This is such a powerful force to be reckoned with that so many people aren’t taking advantage of. Rather than spending thousands of dollars on a profession you’re unsure about, blogging can allow you to test drive several different professions without spending a dime. It can allow you to discover if you’re passionate about something by trying it out. You may not be passionate about the first career you study but experimentation and trying over-and-over again is essential to connecting with your true passion. I’m not saying that school is a waste of time in fact, if you’re passionate about a career, great education can provide a huge boost in getting your foundation established. It’s 2012 and life is so short, there’s no reason why people should be doing work they hate.

How a Blog Can Help You Get New Work

Over the past few months, I’ve noticed a shift in my outlook towards blogs and writing. I like to view my blog as a resume rather than just a place to store my thoughts and share information. Several different skills are required for a lot of the different projects I take on and a blog has been a great way to keep track of everything. Awesome clients/employers will generally want to research what you’re all about to ensure you’re a good match for the position they’re trying to fill. They may want to learn about your thought process, how you express ideas, your opinions, your instincts towards business and most importantly; how you solve problems. A blog can assist them in this process while also demonstrating that you maintain up-to-date knowledge about your career. This outlook may inspire you to create the best possible content you can as if your job depended on it.

As a UX/Ui designer, there are so many aspects of my job to improve upon. Graphic design, coding(HTML5, CSS3, jQuery), usability, user experience, time management etc. Before I started writing on boompah, I felt slightly lost with where things were headed. With techniques like responsive web design becoming essential for brands, I felt unsure of how to approach it. I knew in order to create solid solutions, I’d need to make sense of responsive design so I started educating myself and wrote Responsive Web Design Frameworks, Grid Systems and Starter Kits. This article acts as a placeholder for my favourite responsive web design tools and also outlines their features. Once I come across a new responsive tool or, if one that’s already included is modified/updated/discontinued, I simply update the article. If you envision having a bunch of articles like this for various topics, there’s a good chance they’ll help you out in the future. By creating articles that solve problems like this, they provide multiple benefits. Some people may want to learn from your content and others may want to hire you.

Throughout the various interviews I’ve had, it can sometimes be a challenge to remember all of the various aspects of my tools and methodology. Having a blog allows me to easily reference my knowledge and create layers of understanding to each topic. I enjoy writing articles with goals in mind to guide the final result. I’ll often ask myself what the purpose of an article is, how could it potentially help others, and what can I improve about it. Writing allows you to voice your opinions on topics and it’s usually a writer’s voice differentiates one blog from another. Blogging may also raise your appreciation towards brilliant writers and awesome articles/books; it sure has for me.

When working remotely, communicating through email and other forms of text is crucial for getting things done. Being able to express your thoughts clearly, concise, and in a simplified manner can go a long way. From my past experiences of working on feature rich web apps, boutique sites and other projects, there’s a ton of problems I’ve landed up resolving through long emails. Writing articles is a nice workout for your vocabulary, grammar, and sentence structure.

Becoming Inspired

Inspiration is such a huge factor for me. Sometimes when I’m writing a new article, I really struggle with it and it takes a while to form my thoughts. When I have inspiration built up and a list of ideas I’ve written down, the article pours out of my hands when I’m in WordPress. Sometimes I write 1500 words within less than an hour due to what I had saved up. Then it’s just a matter of reading through it and revising the content until it’s complete. I’ve been told this is a common technique of writing, I really enjoy it. It can be a really a satisfying experience to get your ideas written down and know you’ll be able to share them.

Today’s leading markets do not have time for people that aren’t passionate about the work they do. Contextual content and brand’s relationships with their consumers are two of the most important factors in business. To fully embrace this, I feel creating content can provide a better understanding of this shift. If you’re working with a team and write, there’s a good chance they’ll be interested in reading your content due to the context of your relationship with them. I love motivating people that are passionate about what they do and I love being motivated by passionate people. That said, regardless if anyone reads my blog or not, I love writing it anyways. You shouldn’t only write for the purpose of others or else you probably won’t have as much fun doing it.

If this is your first time creating a blog, planning ahead is a good tactic to keep yourself on track. Before I launched boompah, I had around 20 ideas ready and at any given time I have around 10 new ideas for new articles and projects. I try to release them based on priority, the impact they’ll have, and the inspiration I have towards them.

Free Your Mind

This may sound a bit strange but I think a lot of people use their brains as a hard drive instead of a creative instrument. People often store a ton of information in their head without writing it down. They’ll occasionally cycle through their thoughts and concentrate on priorities, important dates, todo lists, etc. One downside to this approach is that you might forget awesome ideas. Not that there’s anything wrong with this, I just find for myself it’s a lot easier to write things down and flush everything out of my mind. It allows me to fully focus on problem solving or work with less distractions. When I have random free time, I also use this extra bandwidth for things like coming up with names and creating new ideas.

When I came up with the name boompah, I simply said to myself one day “I want a new brand name, something short, easy to remember and has pop to it”. After that, it was as if my mind had a constant background process running to generate names and when something would surface, I ‘d check if it was available. Then one day I got lucky when the name boompah popped up and it was available. This example is directed towards taking notes but it’s a similar mental model to blogging. I find it helps me to understand things better if I have my own set of notes on the variables I’ll have to consider for the problem I’m trying to solve.

An example of this is instead of trying to recall exactly how I secure a new WordPress site from my head, I simply open up WordPress Security Tips Made Easy. When I was initially trying to understand WP security, it wasn’t straight forward. How my sites were hacked was through old school tricks and most of the references I found were from 2009 – 2010. It seemed like everywhere I went was providing me with different information. Some plugins worked, some didn’t, some scripts were mandatory, one disabled my whole site, etc. I’ve tested out all these tips which eliminates having to piece everything together again. Now when I’m in the design phase of a new WP site, my mind is free from worrying about securing it.

Making the Most of it

For those of you using google search or any other search engines have probably realized that you often land up on blogs for the information you’re after. This is one of the many benefits of WordPress blogs in particular. They work great for customized SEO strategies and the more awesome content you publish, the easier it’ll be for people to find. Aside from Facebook and Twitter sharing, if you start commenting and sharing your content on other blogs, it can be a great method of gaining readers and building up your brand.

From a UX point of view, photography and graphic design in articles is so under rated. There’s a ton of awesome blogs out there that look like boring word documents and feel dull. When a blog has awesome post graphics that compliment its content, it creates a lasting impression. This is why I include a custom graphic on each one of my articles and it’s also a fun exercise for trying out new graphic design techniques.

The final topic I’d like to discuss is creating original content. With the nature of the internet, original content and ideas are virtually impossible to come up with, which doesn’t matter. One thing that helps me validate that my article is “original” is that, I don’t read any other articles or content while I’m writing that may influence my ideas (this won’t work in all situations). This article being a rant about how I think blogs are great is an example of that. It doesn’t matter to me that there’s probably a ton of other articles out there that are exactly like this. I wrote this article from the ideas in my head and it was fun to create.

Conclusion

If you feel like blogging would be a nice platform for your career, try thinking about a strategy before you begin writing and some of the ideas I’ve mentioned above. One thing you may realize is that no matter what you write about, the skills will be transferable to other aspects of your life. It’ll improve your writing skills, problem solving abilities, and perhaps you’ll even create a distinct voice for yourself.

Anna Safroncik

• Portfolio of fiction movie actress Anna Safronick.
• Anna is currently working on the set of “The three roses of Eve”, the much anticipated drama in prime time Channel 5 in April 2012.
• Beautiful model photography inspiration.
• Awesome jQuery effects on images and cool loading techniques while scrolling down the page.
• Dark graphic design style with awesome interface photos of Anna to compliment the layout.

Inception Explained

• Inception Explained is a site that explains a story of a dream within a dream, it takes you on a journey.
• Very simple and clean vector style layout with solid colours and sharp icons.
• Background images change to reflect content as site goes through the story from vertical scrolling.
• Be sure to notice the simplistic clock in the top right hand corner.
• Created by Matt Dempsey.

One Design Company

• A legion of experts with amazing clients including: Groupon, GOOD, NBC, Gatorade, LG, Threadless, Pitchfork, and AIGA.
• Features beautiful scrolling capabilities showcasing various projects and awesome photography.
• The absolute positioning and overlapping content that takes place in the background is awesome.

Converge

• Converge is a conference with speakers and workshops for design, front-end dev, development, mobile and business/marketing.
• It’s really cool how the dinosaur evolves in the background.
• Built on a fluid responsive grid.
• Awesome typography and big graphics.

Angry Birds Space

• The Angry Birds brand is fairly self explanatory, you may already have an addiction to their line of iPhone/iPad games.
• The layout shifts around horizontally to take you (the bird) through several of the different Angry Bird environments.
• Beautiful illustration style, vector and clean.
• Various types of content throughout the site: innovative video and social sharing modules, integrated into the illustrations.
• Subtle movement in background elements to create a sense have gravity.
• Created by White Sheep Isobar - an award winning innovation-led digital agency. Be sure to check out more of their incredible work.

Mezcal Buenviaje

• Beautiful illustration style and animated backgrounds while scrolling.
• Interesting colour palette which creates a classy, artistic, mexican culture vibe.
• Cool, custom, colourful scroll bar.

Project Re:Brief

• This year, Google partnered with Coca-Cola and Harvey Gabor to re-imagine “Hilltop” for the digital age. See how a wish made in 1971 was brought to life for today’s generation.
• Various interactive elements while scrolling throughout the site – background changes, videos, etc.
• Awesome usability and great graphic design style.
• Nice balance of vector graphics and rasterized effects to give the layout some texture.
• Be sure to check out the other campaigns by clicking through the footer buttons – Volvo, Alka-Seltzer and Avis.

Carnation Group

• Delivering digital creative solutions for the past 15 years to awesome clients. They ideate, design, develop code, research, plan, measure and optimize.
• Awesome chunky style layout.
• Be sure to click through the main banner, there’s a nice effect as content floats in and some great graphic design on it.
• Horizontal scrolling creates a sense of floating with how the site portrays gravity.
• If you click the little star on the left of the menu, you’ll also notice a cool drawing area that pops up. You can interact with it with the buttons that appear at the top.
• Very innovative News section and each page has a distinct personality.

Michelberger Booze

• Fluid style animation and psychedelic graphics.
• Very simplistic layout
• Automatically brings you back up to the top once you’ve scrolled past a certain point at the bottom.

Nike Vision

• This is a classy example of what initially attracted me to these types of layouts.
• Awesome revealing of content which gives the layout a slick feel to it.
• I feel this example, unlike the rest of them, could be applied to a ton of different projects – it’s extremely versatile.
• Awesome typography and the images compliment the layout really well.

I love this dimension of web design and I’m excited to experiment with it on future projects. If you have any awesome examples that you’d like to share with me, please submit them through a comment below.

Font used above: Franchise Bold by Derek Weathersbee

When designing a new layout, there’s nothing I enjoy more than taking it to the next level visually in HTML & CSS. Sometimes when I’m designing in Illustrator (preferred) or Photoshop, a certain element will work nicely at first but once I code it out, my opinion changes. This usually applies to things like typography, spacing, borders, color and other properties. When you’re able to code out your layouts, it opens up another creative stage which allows for further refinements. What commonly happens when passing off a layout to a front-end developer,  is that it gets to a 95% complete phase, it looks great but for some reason it’s missing something. It’s usually just a matter of some extra attention to detail. I believe this final 5% heavily relies on the instincts of a designer to fully achieve their desired result. Most designers understand the art of massaging pixels to iron out visual blemishes which is translated to CSS.

The main role of front-end developers is to nail down a layout’s functionality and focus on things like jQuery, AJAX and integrating interfaces into backend technologies. They create things like functions, arrays, loops, variables, databases, etc. to build solutions that work. Developers have the right to think in black and white, if something does what it’s suppose to (like a button with a function that adds an item to a shopping cart), their job is done. They shouldn’t have to focus on things like typographic principles, spacing, colour, composition and emotion. That’s the role of the designer and not something developers typically specialize in. Of course in an ideal world, having a developer with a great sense of a design is a huge blessing.

Another advantage to coding your layouts is that you’ll have a better understanding of the do’s and don’ts to avoid designing layouts that have annoying markup. When initiating the layout design process, I like to remove any technical barriers and let my mind run free on projects. Then once I have a foundation established, I envision coding it and how the layout will perform. When you have a good understanding of HTML & CSS, you’ll have these considerations in place early on and you’ll design layouts that are a pleasure to code. You’ll also be able to experience the beauty of  clean markup which may allow for huge visual updates by simply changing CSS in future releases. Sometimes it’s a lot more effective to make rapid design changes in CSS rather than taking a screenshot and revising the layout in Photoshop/Illustrator.

For those of you working with responsive design techniques, you may have already experienced that it can be a lot easier to create layouts for other resolutions when you design them on the fly in CSS. By creating responsive HTML wireframes, you can see what the layout will look like when elements are scaled and the grid transforms. You can take advantage of tools like firebug or alternative CSS inspectors to apply your changes by pasting them into a text editor like coda. When working with responsive wireframes, it also allows you to design with Illustrator or Photoshop in parallel to CSS. Once you’ve finalized your graphics and implemented all your CSS into the wireframe, the layout is complete and ready for a hand off to developers or deployment.

With responsive grid systems becoming more common, there may be a notion that pixel perfect layouts are becoming irrelevant due to how layouts scale and elements are positioned. However, there’s still a ton of room for pixel level refinements in margins, padding, line-height, letter spacing, etc. When final CSS tweaks are done by designers, it can avoid a ton of back and fourth $ with developers.

Things to watch out for when a layout is being coded

Typography

• Headers that are too big for or too far away from the paragraph below them.
• Headers and paragraphs that are too close to borders or containers and don’t allow room for the content to breath.
• Paragraphs that are too tight because the line height isn’t set which messes up leading.
• Text that looks odd due to letter spacing not being set properly. It may look squished together and mess up kerning.
• Link styles that perform oddly – ex: a menu link turns bold on hover which shifts other elements in an ugly fashion.
• Hover and active states aren’t set which doesn’t allow for user feedback. I believe that active states are equally important as hover states to give users a sense of feedback that they’ve pressed something.

Spacing – Margins and Padding

• Consistant spacing throughout page elements.
• Around the logo and header area of the layout, things can look different once they’re actually in a browser. Padding and margins need to be set accordingly to make sure they look nice.
• The footer is too close to the bottom of the browser which makes it look tight, simply add more padding or margin.

Buttons

• Button text that is off center, usually due to padding not being set correctly.
• Gradients that look weird. I find gradients are such a delicate property and when you’re making them with CSS3, it’s essential that they look exactly like the intended result, or just use an image.
• Drop shadows that look weird. It’s essential that the size of a drop shadow is set properly to accurately represent the shadowed element. The colour and transparency are also hugely important to ensure they look as realistic as possible.
• Border radius that is set too high when they should be something like 4 pixels. I find it works out nice when border radiuses are set to either 4px, 6px, 8px, or — half the size of the height of the button to create a full rounded look. If you go in between 8px and half the height of the button, you’ll probably land up with an awkward looking button.

Navigation

• Font sizes that aren’t proportional to the background size – ex: background is too small.
• Padding isn’t set properly and makes the text look lob-sided.
• Navigation is too big for the content.

Image compression

• Images look too compressed which definitely effects a users perception and the overall UX. Grainy images can sometimes do a great job of making a layout look cheap.
• Make sure to use PNGs instead of JPGs when you can.
• Side note: with the third generation iPad being released, I have a prediction there will eventually be a demand for a new image format that will perform better according to higher resolutions. Raster graphics might not survive as time goes on – web designers need a scalable image that can withstand high compression.

Link behaviour

If you have a link there should be some kind of indication that it has been hovered so it gives you a sense of responsiveness and something clicks in a users head that they’ve moused over it. There’s a zillion options for anchor CSS, I like when links have an underline appear on hover or, switching from one colour to another. For colour-based hovers, there should be a decent contrast between the two colours established. Going from a nice blue to orange, grey to red, red to blue, orange to pink, etc. When links don’t contrast enough, it may effect the UX on monitors with weaker colour rendering capabilities. Although going from a lighter gray to a darker gray (or the other way around) may look great on your macbook pro, it might not be the case on a cheaper LCD monitor.

Things to consider when designing an interface

Fonts

• Try to avoid any text that requires to be saved as an image.
• This may sound obvious but, always try to think beyond web-safe fonts.
• When selecting a font, consider tools like Typekit, Google Font Api, Font Deck, Webtype, and Font Spring so it’s easy to integrate them into your CSS.
• @font-face is a great self-hosted option too – make sure the font you select isn’t black-listed.
• Check out the @font-face generator to have your fonts converted as needed.

CSS3 & jQuery

• Take advantage of CSS3 where you can rather than using images for effects. Of course this is within context, sometimes images are more ideal and just look better.
• If you’re unfamiliar with the capabilities of CSS3, get yourself up to speed and research them: CSS3 info, CSS Tricks, W3C CSS, Mozilla Developer Network – CSS.
• The same applies for jQuery, when you understand its capabilities it’s a lot easier to design for them: jQuery, Mozilla Developer Network – Javascript.
• Also check out pre-made jQuery plugins. Often times they only require basic HTML and CSS tweaking for a ton of customization options.
• Avoid designing things that produce more code complexity than provide visual aesthetic value. I think it’s important to keep this balance in mind.
• Refining CSS effects should be the work of a designer. This way your ideas will translate clearly through understanding the properties of each element.
• Provide accurate feedback when giving developers revisions, they’ll love you for it. Giving pixel/em amounts rather than saying things like “more space above the header” might be more efficient.

Document your Photoshop or Illustrator files

Fonts used above: Dancing Script by Pablo Impallari & Novecento by Synthview

As responsive web design evolves, it’s becoming a requirement rather than a feature that a website performs beautifully across desktops, tablets and mobile. It’s important to make the right decision about which framework, grid system or technique to use on a project to ensure it’s aligned with what you’re trying to build. I’ve been researching several different techniques and I’m gaining a better understanding of each approach for various layout types. Responsive layouts can be a great alternative to the costs associated with a native app.

Frameworks typically come with a range of features including jQuery libraries, Ui controllers, and an endless amount of extensions. Whereas grid systems and starter kits are more simplified CSS files that serve as a foundation for your layout’s CSS structure. It’s important to understand what makes these solutions different from one another.

Please note: This post will be updated to stay current with tools that are released and discontinued.
Last updated: May 14th, 2012.

Questions you may want to ask yourself before deciding on a direction:

1. What is your timeline? You’ll notice that some tools have a much smaller learning curve.
2. Is the layout you’re creating fairly standard on a 960 grid format?
3. Would you prefer a gridless solution?
4. Are you looking for a frameless grid so you can specify your column width, gutter width, etc. and infinitely repeat them? A ‘frame’ meaning to have a wrapper div of 960px wide and storing all your content within that. Whereas frameless would span the entire browser.
5. Will you need rapid prototyping capabilities?
6. Are you prototyping a web app that you’ll want to build upon in the future?
7. Do you require a minimal grid system?
8. Are you looking for a framework with jQuery and other technologies included?
9. Which CMS are you working with? – Ex: Starter kits with WordPress themes.
10. Is there a lot of photos and videos in your project?
11. How do you want the content to perform? Should it scale larger and smaller in a nice fluid fashion? Do you think it makes sense to display different layouts based on which resolution it’s at? Also, rather than thinking ‘mobile first‘ you may consider mobile in parallel to design.

Skeleton  by Dave Gamache - Currently one of my favourite frameworks, the CSS was a main selling point for me. You’ll notice in the snippet below that it’s quite easy to follow. All you have to do is apply one of these classes to a div and it’ll automatically size them for you without having to constantly define grid sizes.

/* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

• 960 grid system with a 16 column grid – simply implement your already created 960 layouts.
• Includes pre-styled components for rapid prototyping (buttons, tabs, forms etc.).
• Easily adapt your CSS to your layout ideas and don’t worry about changing your mind once you’ve begun CSS.
• Skeleton works well for rapid development and HTML wireframes.
• Includes a nice collection of buttons, tabs and forms as UI components.
• It works great when you rotate an iPad horizontally to vertical, it scales properly and locks into place. This doesn’t sound like a big deal but, a lot of other tools fall flat with this.
• Download the Skeleton WordPress theme by Simple Themes. It’s extremely extensive and even supports bbpress.
• I also created an Illustrator template for the Skeleton grid.

Less Framework 4 by Joni Korpi - I created the current boompah.com layout using LF4. Instead of defining easy to use divs like Skeleton, LF4 provides pixel amounts for a 10 column layout that results in a default resolution of 992px.

/*		Default Layout: 992px.
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

• LF4 is a lightweight solution.
• Based on a 10 column grid composed of 68px columns with 24px gutters.
• Includes retina media query.
• Optional HTML5 Shim support.

Bootstrap, from Twitter – If you’re designing a web app or even just a content heavy site with extensive forms and interactions, Bootstrap may be a good fit.

• 12-column grid (940px wide) - also included: Fixed-width and Fluid-width layouts based on that system.
• Customize the grid: modify the number of columns, change the width of each column and negative space between columns.
• Designed first and foremost as a styleguide to document not only their features, but best practices and living, coded examples.
• Base CSS provided for typography, emphasis, blockquotes, lists, tables, forms, buttons and icons.
• Tons of different components for navigations, buttons, alerts, popovers, dropdowns, breadcrumbs, pagination, inline labels, badges, typography, thumbnails, progress bars and much more.
• jQuery plugins for modals, tooltips, collapse, dropdowns, popovers, carousel, scrollspy, alert messages, typeahead, togglable tabs, buttons and transitions.
• Created with Less CSS - includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and color functions.
• Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.
• Customize your download to ensure that you get only the components, javascript plugins, and assets you need. This is really handy to keep your projects lightweight rather than having to download everything.
• Check out some bootcamp examples.

1140 CSS Grid by Andy Taylor - An awesome solution for a fluid layout designed for 1280 resolutions. If your browser statistics give you the green light to support 1280 x 800px as a default resolution, this might be a good fit.

• 12 column grid format.
• Includes a Photoshop Template.
• Alex Newman created the 1140 Fluid Starkers WordPress Theme which seems cool.
• Browser support: Chrome, Safari, Firefox, IE7 & IE8 and partially in ie6.

Golden Grid System by Joni Korpi - A folding grid for responsive design. Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

• A great starting point and a couple of guidelines – not to be confused with a framework.
• 18 column grid system - The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
• The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones.
• GGS can easily cover any screen sizes from 240 up to 2560 pixels.
• While the column widths in GGS are proportional to the screen’s width, the widths of its gutters (the spaces between columns) are proportional to the page’s font-size, specified in ems.
• Zoomable baseline grid.
• GGS comes with Golden Gridlet, a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up.

inuit.css – by CSS Wizardry – Harry Roberts - A fairly straightforward baseline CSS framework. It’s a stripped back framework to allow you to build upon it the way you’d like. There’s a ton of powerful plugins included to assist you with your projects.

Included Plugins:

• breadcrumb.inuit.css – Quickly create a breadcrumb trail navigation.
• ie6.inuit.css - Make the grid system work fully in IE6.
• dropdown.inuit.css - Create a simple, pure CSS dropdown menu out of a set of nested lists.
• 12-col.inuit.css - Run a 12 column layout with inuit.css instead of the default 16 column system.
• annotate.inuit.css - Easily annotate the HTML5 < figure > element using this simple plugin.
• keywords.inuit.css - Transform a simple list into a series of comma delimited keywords with one class.
• centred-nav.inuit.css - Center a navigation menu in a similar fashion to text-align:center;.

MQFramework by Chris Johnson

• VERY simple and minimal 12 column fixed & fluid grid.

Amazium by Mike Ballan

• 960 grid system with 12 columns.
• PSD file which has the 960 grid setup for you based on 32px gutters/margins.
• Offsetting columns - if you need to position a column over by say 2 columns.
• Four main media queries:
  1. browsers over 960px
  2. iPad or other tablet Portrait (728px)
  3. iPhone or mobile Portrait (300px)
  4. iPhone or mobile Landscape (420px).
• Make your images responsive by adding: class=”max-image”.
• Make your videos responsive by wrapping your iFrame or object in a div with this class: ”video-container”.
• Includes a 404 error page.

The Goldilocks Approach by Front - The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

• 2 well commented CSS files that consider 3 CSS Media Query increments; multi column, narrow column and single column.
• Good typographic defaults out of the box (including print contexts).
• Barebones – customization-friendly tool.

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

• Contains only reset, colour and typography styles.
• Five Media Query increments: 480, 600, 768, 992 and 1382px.
• Vertical grid based on Less Framework 4.
• Two versions: multiple linked stylesheets, or a single stylesheet with multiple Media Queries.
• imgsizer.js: improve IE’s rendering of resizable images.
• selectivizr.js: bootstrap CSS3 selector support.
• jquery-extra-selectors.js to boost Selectivizr.

Fluid Baseline Grid by Josh Hopkins - The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

• FBG is defaulted to a minimal 3-column folding grid, which is easy to work with and divided into equal portions, 31.333% wide with 2% wide gutters between columns.
• Built with typographic standards in mind.
• It’s packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.
• This is a starting point, not a standard, so they encourage you to change the columns as your project requires.
• The FBG is designed for mobile first. CSS styles are scaled up from the minimum instead of scaled down from the maximum through the use of media queries.
• IE6/7/8 do not support media queries, so Respond.js is used to polyfill.
• Common breakpoints:
  320 px — Mobile portrait
  480 px — Mobile landscape
  600 px — Small tablet
  768 px — Tablet portrait
  1024 px — Tablet landscape/Netbook
  1280 px & greater — Desktop.
• Normalize CSS - Reset vs. Normalize? Most web designers use either the Eric Meyer Reset or the YUI Reset, but a reset doesn’t fix cross-browser inconsistencies or preserve useful defaults. Normalizing CSS allows for the preservation of useful defaults, while correcting bugs, fixing common browser inconsistencies and improving usability.
• The code for FBG is simple, lightweight, and non-obtrusive, which allows it to be easily modified for each project. The default is based on a 3-column folding layout

Foundation by Zurb – Easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

• 12 column grid which can be whatever size you need – it’s easily adapted to any size screens, from phones to TVs.
• Allows for rapid prototyping.
• Includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, and more.
• Offsets - Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid they’re nest-able.
• Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains.
• Includes: Orbit - Awesome lightweight slider for images & content.
• Includes: Reveal - Foundation’s new light-weight, simple, and totally flexible modal plugin.
• Includes: Compass Gem - makes it really easy to create a project that uses Compass and SASS to add to the speed and flexibility of Foundation. The Compass Gem defaults to SCSS, but can easily be switched to SASS. There’s also a Rails Gem.
• Supports: ie7, ie8, ie9, Safari, Firefox, Chrome, Mobile Webkit and Android Browser.

The Semantic Grid System - Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. Runs on LESS, SCSS, or Stylus. Read up on Smashing Mag.

• 12 column, 960 pixel grid system.
• It’s semantic.
• It can be either fixed or fluid and is responsive.
• It allows the number of columns, column widths and gutter widths to be modified instantly, directly in the style sheet.
• Customize the columns and gutters by overriding these three variables.
• To use a fluid (percentage-based) grid rather than a fixed pixels, simply override one additional variable: @total-width: 100%;.

Gridless by That Cool Guy – A gridless responsive solution – Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

• Gridless is extremely simple and straightforward. It doesn’t come with any predefined grid systems or non-semantic classes.
• Includes: CSS Normalization, beautiful typography, a well-organized folder structure, IE bugfixes and other nice tricks.
• Gridless uses mobile first responsive web design to adapt itself to the device’s width. This means it’ll work anywhere: old feature phones, newer smartphones, tablets, notebooks and bigger desktops
• Respond.js for ie6/7/8.

Frameless by Joni Korpi -  Specify your column width, gutter width, etc. and infinitely repeat them across the browser.

• Infinite column grid (completely customizable).
• LESS template - Contains a small CSS reset, some consistency fixes, as well as some super-basic customizable variables and functions for starting off a Frameless grid. A good starting point for LESS users.
• SCSS template - The same as the LESS version above, but written in SCSS instead. It makes for a nice starting point for SASS users.
• HTML starting point – Contains some basic HTML5, including Paul Irish’s conditional classes, the HTML5 Shim, and a proper meta viewport tag.
• Photoshop template - A basic template for a Frameless grid with 48 px columns and 24 px gutters — same as the grid used on this site. Includes columns marked up with guides up to 2560px, and overlay masks for some common screen sizes.

SimpleGrid by Conor Muirhead - Responsive. Infinite nesting. One class per element. Simple.

• 4 and 6 Column Grid
• Prepared for 4 distinct ranges of screen size:
  1. screens < 720px
  2. screens > 720px
  3. screens > than 985px
  4. screens > than 1235px
• Self-Aware - Most grid systems use one class for all units of a single size, leaving units oblivious to where they fit into the grid. That leaves you with .first and .last classes. With SG each slot knows whether it’s first, middle, or last in its respective row; no extra classes needed.
• Sensible - Creating the code for your grid should be the least of your problems when building a site. That’s why SG keeps things simple and straightforward with as little markup and classes as possible. Even nesting grid slots doesn’t require extra classes.

Columnal by Pulp+Pixels - It’s 1140px wide, but since it’s fluid, it’ll respond to the width of most browsers.

• 12 column grid system.
• Built-in debugging CSS to show the structure of any pages being built.
• Sub-columns (columns within columns) for more layout options.
• Prefix and suffix for extra space within a column before or after content.
• Vertical spacing CSS classes.
• PDF of grid system for sketching out site before building.
• Wireframing templates.
• Columnal is in active development and you may run across bugs.
• There are two fixed pixel dimensions to use for Internet Explorer 6 and 7.

Tiny Fluid Grid by Girlfriend

• Simply specify the number of columns, gutter percentage and min & max width with some really simple, visual sliders.
• Inspired by 1kbGrid which is also very similar to CSS Wizzardry’s Fluid Grids.

YAML 4 – by Dirk Jesse (created in 2005) - A modular CSS framework for truly flexible, accessible and responsive websites.

• Flexible forms toolkit with theme-support.
• Focussed on web standards & accessibility.
• Optimized typography for all standard elements.
• Matched building blocks for rapid prototyping.
• Namespacing avoids conflicts.
• YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together.
• Very extensive documentation covering Layouts, Grids, Columns, Forms, Floats, Accessibility, Navigation Typography and Add-ons.

Responsive Grid System - CSS framework for fast, intuitive development of responsive websites.

• 12, 16, and 24 Column Grid
• Simple and lightweight

The Heads-Up Grid by Jason Simanek - The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.

• Available Properties: pageUnits (px, %), colUnits (px, %), gridonload (on, off), pagewidth (number in pageUnits), columns (number of columns), columnwidth (number in colUnits), gutterwidth (number in colUnits), pagetopmargin (number in pixels), rowheight (number in pixels), pageleftmargin (number in pageUnits), pagerightmargin (number in pageUnits).
• Easily customizable with Javascript.

<script type=”text/javascript”>
$(document).ready(function() {
pageUnits = ‘px’;
colUnits = ‘px’;
pagewidth = 960;
columns = 6;
columnwidth = 140;
gutterwidth = 24;
pagetopmargin = 35;
rowheight = 20;
makehugrid();
setgridonload();});
</script>

Adaptive Images by Matt Wilcox - Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

• Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. On those devices your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money. Adaptive Images fixes that.
• Set-up - Add .htaccess and adaptive-images.php to your document-root folder. Add one line of JavaScript into the <head> of your site. Add your CSS Media Query values into $resolutions in the PHP file.
• Read More Details

If you’d like to try some cool tools for testing out your layout without having to look at it on multiple devices, you may want to check out Screenfly by Quirktools or Responsive by Matt Kersley. For some awesome inspiration on your next responsive project, Media Queries is an amazing responsive-only website gallery – super handy.

If you have any responsive web design questions, feel free to throw up a comment, email me, or tweet me @gotboompah.

One of my favourite things about being a web designer is that I’m able to listen to a ton of awesome music all day. I’ve cycled through a ton of different genres and styles. I’m currently into dubstep and indie b-side electronic type tracks.

10 tracks from my current playlist

1. Flight Facilities – Crave You (Adventure Club Dubstep Remix) - Download

2. Local Natives – Who Knows Who Cares (bretonLABS Remix) - Download

3. M83 – Midnight City (Sharam Jey Rmx) - Download

4. Noir Recommends // March 2012 (episode 10) – Download

5. Sameblod – Loud (Summer Heart Remix) – Download

6. Daft Punk – Veridis Quo (Theatre Of Delays Remix) – Download

7. Metric – Collect Call (Adventure Club Dubstep Remix) – Download

8. Forbidden by Smoothiesforme (Systems Remix) – Download

9. Foxes – Youth (Adventure Club Dubstep Remix) - Download

10. Gotye feat. Kimbra – Somebody That I Used To Know (Bastian Van Shield Remix) - Download

If you enjoyed this playlist, be sure to check out Web Design Music 002 – The Fantastic Voyage Edition.

photo by: David Goehring

I had all of my WordPress(WP) sites taken down around 6 or 7 months ago by a hacker that knew some old school WordPress vulnerabilities. Luckily I was able to instantly launch a temporary landing page and then begun searching the depths of Google. After reviewing a ton of articles and trying a bunch of different tools and scripts, here are the most important tips that worked for me.

1. Make sure you’re running the latest version of WordPress.
2. Add secret keys on WordPress cookies: https://api.wordpress.org/secret-key/1.1/ in wp-config.php.
3. ./  +  wp-admin/  +  wp-content/ should have 755 file permission and wp-includes should have 555 permission. This can easily be set through FTP.
4. Due to the WordPress architecture, it’s not possible to block all directories. The main directory to block is wp-includes/. You can do this by adding the following line to .htaccess:
   RewriteRule ^(wp-includes)\/.*$ ./ [NC,R=301,L]To block further directories, separate each directory with a pipe like so:
   RewriteRule ^(wp-includes|another-dir)\/.*$ ./ [NC,R=301,L]
   Source: semlabs.co.uk.
5. Install the BulletProof Security plugin.
6. Block search engine spiders from indexing the admin section by adding this to the robots.txt file on the root of the directory.
   #
   User-agent: *
   Disallow: /cgi-bin
   Disallow: /wp-admin
   Disallow: /wp-includes
   Disallow: /wp-content/plugins/
   Disallow: /wp-content/cache/
   Disallow: /wp-content/themes/
   Disallow: */trackback/
   Disallow: */feed/
   Disallow: /*/feed/rss/$
   Disallow: /category/*
7. Move the config data
   a. Copy the contents of wp-config.php.
   b. Create a new file in the wp-includes directory (e.g. wp-includes/conf-secret-name.php) and paste the entire contents of wp-config.php into it.
   c. Require the location of the new config location:
   Add: <?php require_once( ‘wp-includes/conf-secret-name.php’ ); ?> to your original wp-config.php located on the root.
8. If you’re managing a lot of content and are concerned about public wifi, you can use SSL with the WordPress HTTPS (SSL) plugin. I haven’t used this yet but I might in the future.

For an awesome guide on how to ban users, prevent anyone but you accessing your admin folder, how to prevent directory browsing, protecting your wp-config.php file, protecting your wp-content folder, protecting individual files and even protect your .htaccess file. Check out: Protect your WordPress site with .htaccess by Paul Maloney

I’ll be updating this article if I run into any other WP security issues.

Update (05/19/2012): For whatever reason, my site has been running slow lately. I’ve decided to cut down on the amount of plugins that I’m using. For security, I am now only using BPS security which I think will do just fine.