The latest business trend on the Internet is single-page websites. Sure they’ve been around for a while, but only recently have they been embraced on a larger scale. And why shouldn’t they?

A single-page site means less confusion for the user, key information is just a click or scroll away, and you can put tons of your best work front and center. This Mighty Deal from Flashmint lets you get in on the fun with 20 HTML5 one-page Website templates with the Parallax Effect!

Grab this Deal Now →

One Page Responsive Parallax Templates Highlights:

• 20 Website Templates
  This bundle features 20 high-quality, professional HTML/CSS templates for your website (note: These are not WordPress templates, but website ones). You’re sure to find a design and layout you like among so many great choices.
• Responsive Design
  All these templates were built with a responsive design. That means they’ll not only function on any device, but look great too. Whether it’s a desktop computer, laptop, smartphone or tablet, you can rest assured that your site will continue to impress no matter how your users are viewing it.
• Customizable
  Your purchase of this Web Template Bundle means you’ll receive the necessary CSS, HTML and PSD files for each template. That makes it easy to customize your templates any way you’d like, from adjusting colors to adding images.
• Royalty-Free License
  All these templates come with a royalty-free license. You can use any of these templates on a single domain for either personal or business-related projects.

Take a look at the amazing templates included in this bundle:

The Themes

Portfolio (Demo)

Professional Portfolio (Demo)

Web Designer Portfolio (Demo)

Photography (Demo)

Photographer Personal Page (Demo)

Responsive Portfolio (Demo)

Fashion Models (Demo)

Wedding (Demo)

Business Parallax (Demo)

Responsive Single Page (Demo)

One Page HTML5 Portfolio (Demo)

Corporate Responsive Parallax (Demo)

Business Responsive Parallax (Demo)

Responsive One Page Portfolio (Demo)

Travel Parallax Responsive Site (Demo)

Hotel Responsive (Demo)

Spa Salon Responsive (Demo)

Restaurant Responsive (Demo)

Photo Portfolio Responsive (Demo)

Photographer Responsive (Demo)

Pricing:

This collection of 20 responsive, one-page HTML website templates normally sells for $700, but for a limited time only, you can get all 20 for just $19! That’s an insane savings of 97% off the regular price!

Last weeks jQuery Hotshot giveaway ended on Friday and it is now time to announce the winners. Here they are:

Congratulations to our winners. Packt will be in touch with you over the next few days with your prize.

About the Book “jQuery Hotshot”

jQuery Hotshot walks you step by step through 10 projects designed to familiarise you with the jQuery library and related technologies. Each project focuses on a particular subject or section of the API, but also looks at something related, like jQuery’s official templates, or an HTML5 feature like localStorage. Build your knowledge of jQuery and related technologies.

Learn a large swathe of the API, up to and including jQuery 1.9, by completing the ten individual projects covered in the book.

Some of the projects that you’ll work through over the course of this book include a drag-and-drop puzzle game, a browser extension, a multi-file drag-and-drop uploader, an infinite scroller, a sortable table, and a heat map.

Learn which jQuery methods and techniques to use in which situations with jQuery Hotshots.

You can download a sample chapter here: Chapter 3 – “An Interactive Google Map”.

Are your forms converting? Have you tested them? How would you even go about testing the effectiveness of your forms?

Well, it’s quite easy with A/B Testing, which is a fairly straightforward process. You perform A/B testing by creating two versions of your form (one being the original as a control) and splitting your visitors equally between them. When your forms reach a statistically confident number of conversions, you then pick the winner. The winner will be the control form for the next test, and you can continue this process indefinitely.

Doubtless, there are always the best practices of web form design to fall back on in order to maximize effectiveness. Still, in order to help you in your process, I’d like to share a comprehensive list on what to test in your online forms, from the most general to the most specific. Let’s check them out.

Design

Layout

A decluttered page is a proven method of focusing attention. There are multiple layouts available for use in web forms (such as 1, 2, 3 or 4 columns.) More columns will cause frustration, and it’s also best to keep your form down to one for your mobile visitors’ convenience.

Label Alignments

There are 4 possible alignments to give your field labels: top, right, left, and inline. When testing alignments, keep in mind the language that your visitors speak, as well as the width and height of your form. Be extra careful when using inline labels.

Colors

This is really tricky. To best test your colors, you should be familiar with some basic aesthetic principles, such as contrasting and complementary colors, etc. Although you may like the color red, that doesn’t mean your visitors will. By testing colors, you can make your form grab their attention without being too extreme or gaudy.

Image Source: Site Para Empresas

Fonts

This seems like an obvious thing. “Use web safe fonts when unsure.” You should also keep in mind that font sizes should also be tested within certain age groups, like those in the range 65+.

Image Source: isotipo.net

Content

Headline

The headline quickly describes what your form is all about. Your form’s goal can be to collect leads, however, you shouldn’t just put something like “Sign Up”. The visitor needs to know what he or she stands to gain by signing up! For example, which of these will have the highest conversion rate?

1. “Sign Up Form”
2. “Free E-Book”
3. “Sign Up & Get Free E-Book”

Length

The most important trait of a good web form is that it is absolutely no longer than it needs to be. Experiment with removing unnecessary or intrusive questions. Is your site the kind of site that needs to ask a home address? Could shortening your form result in more cooperation?

Image Source: VisualLizard

Submit Button

Your form’s final step should be tested carefully. Does making the “Submit” button bigger/smaller or a different color change your results? What should the text read to get your users excited about sharing their input? Use text that’ll contribute to defining your form’s purpose to the user. If you’re giving away a free e-book, for example, try having the submit button read “Get Free E-Book.”

Image Source: JotForm

Hints, Tips, & Sub-Labels

Does guiding your user through the process help? If you have labels already, you could also test what happens when you remove them or modify them. In the same vein, do hint boxes beside form items help or hurt?

Captcha

Nobody likes captchas except a form’s creator. I know you don’t want to get spam or waste your submission limit, but it’s important that you test the form without one. That way,you can see if you really do get any spam (i.e. is the captcha necessary?) and whether or not omitting it improves your conversion rates.

Image Source: Captcha.net

Context

Relevancy

This of course is obvious, you should put specific forms on their relevant pages. A “Contact Us” form should be on a Contact page. Different types of forms can be used on different parts of your site.

Dynamic vs. Static

You can test having your forms pop up when visitors complete a certain action on your site against placing it in a static location on your page.

Some A/B testing tools you can use for your forms

There are a variety of online tools available to facilitate A/B testing and each have instructions on their respective sites about how to start testing your forms. Some of the sites on this list offer their services for free, while others require you to pay.

• Google Analytics Content Experiments
• Visual Website Optimizer
• Experiment.ly
• Optimizely
• Unbounce
• Xander.io
• ABTasty
• Convert

Wrapping it Up

Testing is a cumbersome process for each web element and when it comes to online forms, it deserves more attention due to its position as the backbone of user generated data. By testing the form elements above with the help of A/B testing services, you can improve the conversion rates dramatically and get one step closer to perfecting your web forms.

If you are an uber-experienced web designer, you probably won’t have this problem. Your CSS files will be structured coherently and concisely, every selector will have been attentively placed, every property will be perfectly formatted… basically, your CSS will look like carefully crafted art. If this describes you, then move along please, this post is not for you.

But if you are one of the 99.9% of web designers out there that work with CSS on a regular basis, it is for you.

You know how it goes, you start a new web project with a barebones CSS file, and as you build the site your CSS grows rapidly with it. And it will keep on growing. It will become disorganized and at times it will be confusing and even unreadable. Structure will ultimately be lost. Mistakes will have been made. Rest assured though, it happens to everybody.
At this point you can either do one of two things, stop at different stages and re-structure the CSS, or you can wait until the site is finished and then fix everything. Either way and depending on the size of the site, it will take up a lot of your time.

If only there was a bunch of tools that would help format, organize and sort my CSS for me. Thankfully, there is. Now, these tools are not fool-proof. They won’t know about the unique and quirky style you use for writing your CSS, but they will help and will save you a lot of time. Time back that will let you go and mess up another CSS file!

CSS Comb – Tool for sorting CSS properties in a specific order

Usually to re-order CSS code you move lines over each other taking comments into consideration, multilines records of property values, hacks and everything that could be found in the real file. CSScomb reproduces those actions for you. It is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order.

CSS CombCSS Comb Online

csscss -A CSS Redundancy Analyze

csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.

csscssGitHub

Helium CSS – JS Tool To Scan Your Site and Show Unused CSS

Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.

Helium CSS

CSSO – Structural Optimization of CSS Files

As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties

CSSOGitHub

CSS Beautifier – Beautifies Your CSS Automatically

CSS Beautifier is a handy tool that will take any messy CSS file and make it easy to read. Here is what it will do for you:

CSS Beautifier will take the following CSS…

menu{color:red} navigation{background-color:#333}

…and will produce:

menu {
    color: red
}

navigation {
    background-color: #333
}

CSS BeautifierGitHub

CSS Lint- Helps Find Issues With Your CSS code

CSS Lint is a tool that helps point out problems within your CSS code. It does basic syntax checking as well as applying a set of rules to the code that looks for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

CSS LintGitHub

Minify and GZip Compress JavaScript & CSS

Minify and GZip Compress JavaScript & CSS

Devilo.us – Compress and Tidy Up Your CSS

Based on CSSTidy, Devilo.us is an advanced CSS compression and optimization engine that has been modified to also handle CSS3.

Devilo.us

Alternative Optimizers, Formatters & Validators:

• ProCSSor – Advanced CSS Prettifier
• Clean CSS – A Powerful CSS Optimizer and Formatter
• Online JavaScript/CSS Compression Using YUI Compressor
• PrimerCSS – Undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet
• Compressor – CSS Compression Tool
• The W3C CSS Validation Service
• CSS Validator from CSS Portal

You might also like…

15 Responsive CSS Frameworks Worth Considering →
15 More Responsive CSS Frameworks & Boilerplates Worth Considering →
10 Lightweight & Minimal Responsive Grid Frameworks →
10 Free Pure CSS UI Kits →
10 Responsive Navigation Solutions and Tutorials →

Or, you may like to browse our CSS category.

There will never be a point when a designer says ‘yep, that is it for me, I have all of the brushes I will never need’! It just won’t happen. The designers toolbox is always evolving, with new resources being added as and when they are needed. And just to help you add even more tools to your metaphorical toolbox, we have a fantastic bunch of Photoshop brush sets for you.

There are a total of 30 brush packs below, with a combined total of just over 500 brushes. There is no theme or specific category, other than that they are all large and are of the highest quality. I hope they help you out.

Speckle Brushes (5 Brushes)

Digital Smoke Brush Pack (24 Brushes)

High Resolution Texture Brushes (9 Brushes)

Watercolor Brushes (50 Brushes)

Starfield Brushes (4 Brushes)

Old Technical Drawings Brushes (10 Brushes)

Feathers and Birds Brushes (12 Brushes)

Gritty and Dirty Brushes (7 Brushes)

Spray Splatter Brush Pack (12 Brushes)

High Res Dry Brush Stroke Brushes (12 Brushes)

Subtle Brush Set (15 Brushes)

Hi Res Heads Up Display Brush Pack (30 Brushes)

Bokeh Brushes (12 Brushes)

Digital Smoke Brushes (15 Brushes)

TC-EPICA-I (10 Brushes)

Fibers #3 Brush Pack (5 Brushes)

Photorealistic Explosion Brushes (16 Brushes)

TC Magic Spells (21 Brushes)

Fiber Brushes (16 Brushes)

Electrifying Lightning Strikes Brushes (18 Brushes)

Painting Brushes (56 Brushes)

Custom Brushes of Tyler Street (40 Brushes)

Nature Silhouettes Trees & Grass Brushes (19 Brushes)

Fractal #7 Brushes (5 Brushes)

Fairy Tales Brush Set (9 Brushes)

Abstract Bokeh Brushes (24 Brushes)

Cloud Brushes (15 Brushes)

Grimey Brushes (5 Brushes)

Mountain and Rocks Brushes (5 Brushes)

Ink #4 Brushes (5 Brushes)

You may also like…

50 New and Free Photoshop Brush Packs →
38 Watercolor Photoshop Brush Sets (950 Brushes) →
1000 Grunge Photoshop Brushes (40 Sets) →
Retro & Vintage Photoshop Brush Collection →
50 Beautiful Light Effects Photoshop Brush Packs →