A Chain Of Links

When you get down to it the web is one long chain of links and you never know how or when you’ll come across a useful site or how someone out there may find you.


The other night I came across a site that had what I thought to be a good introductory article to researching keywords. It’s a two-part article and the links are:
Keywords part 1
Keywords part 2
Other than a recommendation about using the meta keyword tag toward the end of the second part the advice was good.
The interesting part to me was that I found the article through the stats packages on my site. The main seochat site was listed as the referrer a couple of times in sending some new visitor my way. The thing is as far as I know I don’t have any links on their site. I did a search on their site for mine just to check and came up empty. I assume it’s some error in the stats package or maybe somewhere deep in the site there is some link to me.
It’s just one of the things I find fascinating about this online world of ours. How through what I believe was an innocent error I discovered a new site filled with articles I may find useful and has now been added to my overgrowing list of bookmarked sites. Remember how once upon a time people would surf the web clicking on links that just seemed interesting. Does anyone still do that or do we only go to sites where we know in advance what we’ll get?
In a world of bookmarks and targeted linking there’s still some joy in just surfing to see where the web will lead. I’ve discovered many a good site this way and still do when I have a few hours to kill.
So why am I telling you all this? Do I really think you need a lesson in web surfing? Not at all. It just made me realize that you never know where the next visitor to your site may come from. Sometimes it doesn’t have to be about having ultra targeted links on the most relevant site to yours. Sometimes it can be a random link you stumble across that simply seems interesting.
Of course you should still be looking for relevant links and doing what you can to get a keyword or two in the anchor text for the link, but when you do come across a site that isn’t so relevant and probably won’t do much to improve your results in the search engines the link may still generate some traffic. A random link I found now has two more copies here and maybe will attract a few more visitors.
And even if the link never results in a sale or conversion it still contributes to the joy of exploration someone can get finding a site they might otherwise never have encountered. Linking is a giant chain. You never know where it will lead, but right now a link is going up somewhere along the chain that will eventually point it’s way to your site. Assuming you add your links to the chain of course.

A Reason for Why I No Longer Recommend Gravity Forms

PPC Ace recommended Gravity Forms to dozens of users, but not anymore.

18 months ago, when I discovered Gravity Forms, I was delighted. I had previously used Contact Form 7, an extremely popular, free plugin for creating contact forms on WordPress sites. Where Contact Form 7 was code-y and slow, Gravity Forms made creating forms almost fun. It has a visual, slick interface that relies on drag-and-drop to build forms.
I instantly bought a developer license ($199) and began using it on every site I owned, as well as recommending to clients and other WordPress people at meetups and online.

The Main Problem

At some point, I noticed an issue with the file uploader function. One of my sites relies heavily on visitors being able to quickly send a PDF or JPG file to the staff, and we started getting a File Error–the rest of the form information would come through but the file wouldn’t upload to our server.
We tried to replicate the issue internally but were not successful, and it didn’t seem to have anything to do with the size of the file–sometimes the files that were rejected were large, sometimes small. (I suspect, but was never able to verify, that the user’s internet connection speed was a part of the problem–still, an unacceptable bug.)
When I posted the issue in the support forums, the support team told me they didn’t know why it was happening, and closed the issue. Internally, we tried everything we could to fix it, even changing web hosts, but we kept having the problem.  I ended up struggling with it for over a year, sticking with Gravity Forms because I believed in the product, even though I wasn’t able to get any help from the staff. Keep in mind that they charge $100-200 per year to renew the license.
When this File Upload error occurred on our company site, it required a staff person to call the customer and ask them to share the file again via email–really professional, right?
In the last few weeks the problem had been getting worse (or maybe I was finally losing patience) and I finally threw in the towel and started using Jotform.com forms–just as easy to build but hosted on secure Amazon’s s3 servers. Forms created on Jotform are then quickly embedded on to any WordPress page or post and your work is done. Their free plan covers up to 100 submissions per month and that is more than most people really need, so it’s a good option for most sites.

A Costly Error

Normally, that would be the end of the story, since it immediately cleared up file upload issues on my sites. But the punchline is that we notice an immediate uptick in conversions, that is just potential customers submitting the form.
This isn’t a statistically significant data set, but the anecdotal evidence suggests that there was something in Gravity Forms that somehow discouraged/inhibited visitors from successfully completing the form and submitting it. This probably was costing us money every single day. On this site, an average conversion is worth $50+ and conversions doubled when we switched to JotForm–instantly.
Thinking about the dollars and hours we’ve lost because of this kind of makes me sick. Gravity Forms has an extremely successful affiliate program, meaning that most “reviews” you’ll find about the plugin are actually trying to con you into clicking through to purchase it.  The “reviewer” can then earn their kickback. Gravity Forms, without a doubt, cost me business (cash) and time, well over the cost of purchasing the plugin.

Misleading Advertising

There are other issues that ticked me off about Gravity Forms–they advertise that they track conversions, but in reality it just tracks the number of people who see the form vs the people who fill it out. Calling it “conversion tracking” implies that it integrates a tool like Google Analytics to show us which keyword a visitor used to end up filling out the form, which it doesn’t. (note: it looks like they are considering that for the future.) Since this site is for a company that is mostly an off-line business, a conversion happens often by phone or email anyway, so this feature would be helpful in focusing our advertising efforts (because we could manually track sales that come in by phone).

One Final Weird Issue

Also, a few times (this was a minor issue but still bad) the plugin never sent out the notification email to us after it processed the form, and we couldn’t tell until a peeved customer would call us and say, “Hey I sent my file in through your website, why didn’t anyone contact me?” –not a great feeling.

Conclusion

I’m now recommending JotForm.com –I don’t know if they have an affiliate program but I am not a part of it. WuFoo.com does the same thing and offers a similar free program.

It might be only me who faces this issue, Gravity Forms might be useful for other one. But it was just an opinion on my part what I face there.
Share your experience and reviews here.

5 incredible hosted CMS’ reviewed

Selecting a content management system on which to run a business website is an important decision. Businesses have needs that are more targeted than individuals, and many of the hosted options available don’t quite fit the bill. Fortunately, there is a range of hosted content management systems that are packed with powerful features. Even better, these hosed platforms tend to be extremely easy to use and quick to develop on.
Before selecting a hosted platform, carefully asses your client’s needs. From there, you can narrow the field until you find a platform that suits the client perfectly. Given the broad range of options available, I have selected five top-tier options to review here.
Hosted CMS’ tend to be targeted to audiences that are keenly interested in simplicity. By contrast, most business-oriented hosted platforms offer a wide range of features. They essentially attempt to cover all of the basic features that a typical website owner might want. Because of this, you will find that many hosted platforms offer tremendous value and savings for your clients.
The hosted platforms covered below represent some of the most powerful content management systems available today. It is truly mind boggling how easy it can be to build a robust and beautiful website. Let’s dig in and see what these platforms have in store for us.

1. Vae

Vae (formerly Verb) is an all-in-one CMS, e-commerce and email marketing platform. Vae takes a slightly different approach to building pages and content. A typical CMS makes use of templates, modules or blocks. Vae, on the other hand, allows you to build pages as standard HTML and CSS files, and simply add in special Vae tags known as VerML. This special mark-up allows you to define dynamic content regions, repeated elements and custom defined content in the CMS.
At the heart of the CMS is a robust system for defining the properties of the content that you will be managing. You are free to add as many fields as you need to define a set of content. So, instead of having modules that define certain types of functionality, you are free to build components that match your needs.

In addition to its fresh take on content management, Vae offers a full range of e-commerce features. This includes standard shopping-cart functionality, analytics, real-time shipping calculation and many other standard e-commerce features.
Finally, the platform has a built-in email marketing system that enables users to market to their customers. Even better, this email marketing engine integrates with the e-commerce features to enable powerful targeting. This full-circle integration is the sort of thing that draws people into hosted platforms.

Basic features

• FTP access
• Built-in Subversion repository
• Full server access for third-party integration (e.g. WordPress)
• Image management and editing
• Video encoding tools
• Content definition system for dynamic content
• HTML and CSS standards-compliant
• AJAX support
• Full e-commerce support throughout
• CRM and customer tracking
• Email marketing and list-management tools
• Analytics

Stand-out features

A hosted and hosting platform
Unlike most hosted platforms, Vae plans come with full access to what you would expect from a typical web hosting company. You can FTP to its servers, run custom PHP scripts and access MySQL databases. This means you can actually install third-party apps like WordPress and vBulletin. Once one of those systems is installed, you can embed VerbML tags in it, in effect layering Vae content on top of the system. This means you get the stability and protection of a hosted platform and the freedom to embed other open-source systems. This is an industry-changing feature that is tough to wrap your head around at first.

Local preview server
One of the more frustrating holes in hosted platforms is that you cannot run development environments without setting up multiple accounts. Vae offers a tool that actually allows you to run local versions of your website and test your code prior to loading it to the server.

Version control via Subversion
Hardcore developers are usually frustrated by the lack of version control in hosted CMS’. Sure, you can go online and revert pages to previous versions, but Subversion is a more powerful option that developers have become accustomed to using. With Vae, every website comes fully equipped with a hosted Subversion repository. The repository can be used to manage deployments and rollbacks, making Vae a hosted platform that easily supports batch updates to a website.

Pricing
Hosting on Vae can be rather pricey, depending on the scale of your needs. Pricing ranges from $19.95 to $249.95 per month.

Sample websites

2. Light CMS

Light CMS is a content management system targeted at web designers. Its focus is on design flexibility, ease of implementation, and simple content management for maintainers. The focus on designers seems to have shaped how the system was built. Not only is it super-easy to get started with, but it is flexible enough to handle standard HTML and CSS, which allows you to easily use your front-end skills on your first Light CMS website.
The content tools are where Light really shines. In most systems, users have to build and define modules and then figure out how to get them onto pages. Light CMS turns this upside down by allowing users to define and insert content directly onto pages. This minimizes the unpredictability of bolting modules onto pages. You get to see where a module will appear and how it will look as you define it and populate it with content. Even better, you can drag and drop content blocks to rearrange them on the page.

Because Light CMS was built to appeal to designers, it offers total control over the system and its output. No hidden elements are locked away in controls that cannot be modified. Even better, the CMS comes loaded with more than 80 templates, all gorgeous, fully integrated and ready to go.

Finally, Light CMS comes with a fantastic set of reseller tools that enable developers to build a revenue stream off of websites that they sell. Of course, if you’re going to be padding the price of the CMS, then you’ll have to add some value to make it worth it for your customers (a fantastic example would be personalized one-on-one support).

Basic features

Light CMS is packed with features:

• FTP access
• SSL security
• Free templates
• HTML and CSS standards support
• In-place editing tools for drag-and-drop building
• Photo gallery modules
• Integrated form builder
• Blogs, podcasts and RSS feeds
• Calendars and events
• SEO-friendly complete with XML site maps and custom robots.txt files
• Basic e-commerce features
• Admin user management with granular permission control

Stand-out features

An approachable platform
Light CMS walks a fine line between simplicity and power, a difficult position to maintain. If the system is too simple, you lose the ability to serve clients’ needs. If it is too complex, it will be difficult to grasp. The creators have succeeded in making this system dead simple and extremely easy to grasp. Most CMS’ are a bit intimidating as you dig around to figure out where to do things. But as soon as you log into your first Light website, you immediately can tell where to add, edit and delete content. That is a remarkable feat and makes this a fabulously appealing system.

Unique module approach
Having worked with many CMS’, I can confidently say that the in-context model of creating modules is rather unique. This is probably the defining aspect of this CMS; it makes it fun to explore the system and see what’s possible. It drastically minimizes the admin interface and allows you to stay on the page during the entire process of editing content.
Free templates ready to go
This platform comes packed with more than 80 templates that are ready to go. These fully integrated templates can be instantly activated, thus setting the stage for a business model built on leveraging templates to serve low-budget clients. Does a client of yours have only $3,000 to spend? Such a budget might normally prohibit you from working with them. But with these beautiful pre-built websites, you can help them. Learn to re-skin these templates and you will be able to crank out websites with amazing speed and efficiency.
Pricing
You can start a basic website for free, and go right up to $99 per month. Amazingly, all features are included at every price point. But the bigger your plan, the more content you can add.

Sample websites

3. Business Catalyst

Business Catalyst is a hosted CMS by Adobe targeted at business owners. This all-in-one system aims to combine all of the critical business tools that a small business would need online, including blogging, e-commerce, CRM, email marketing and analytics. While this is not unusual for a CMS, the focus on business owners is.
This business owner-oriented approach is evident from the moment you log in. We are first greeted with a data-driven dashboard-style view of our website. This focus on results will appeal to business owners and help them feel informed about their website’s performance.

From a developer’s standpoint, one interesting thing that Business Catalyst has going for it is Dreamweaver integration. Given that the platform is owned by Adobe, it is no surprise that this is a critical selling point. The integration allows developers to work in a familiar environment, and it facilitates the meshing of CMS-based content with templates and pages.

Another aspect of Business Catalyst that will appeal to business owners is its powerful reporting tools. You can view pre-built reports, as well as define and save custom reports. The reports merge data that is collected throughout the website and that plug into the customer management system. You can not only view report data, but also perform useful functions such as adding customers from a report to a particular email marketing campaign.

Basic features

This business-oriented platform is packed with features:

• Standard content management
• Blogging
• Comments on anything
• Forums
• RSS feeds
• Secure zones and paid memberships
• Re-usable content holders
• Dreamweaver integration
• E-commerce integration with built-in SSL
• Full CRM integration
• Form builder
• Email marketing and list management
• Web apps for repeatable content sets
• Analytics and reporting
• Template-based website building
• Email and DNS hosting
• Custom workflows

Stand-out features

Web apps
While easy to overlook, web apps are a killer feature of Business Catalyst. The simple tool allows you to define a set of data with custom fields. You can then skin the output of this in the list and detail views. This makes it dead simple to integrate slick jQuery modules, and it allows clients to easily manage them. For example, in a few minutes you can set up a Nivo Slider that customers can populate, zero coding required. Basically, any repeating set of HTML can be converted into a client-manageable list.

Secure zones
Secure zones allow you to quickly (i.e. in less than 15 minutes) build secure sections of a website for sharing with users. You can instantly build registration forms, log-in pages and password-resetting systems. This feature set can be leveraged in countless ways and can turn an otherwise complex task into a simple matter. Even better, you can use the e-commerce components to sell access to sections of the website on a one-time or recurring basis.
Customer Management
One rather distinct feature is the system’s ability to show a summary of an individual user’s activity. In one place, a business owner can view nearly everything a user has done on the website; things like product purchase history, email list membership and website activity. Imagine going to a single place to see that a user has clicked on your email campaign, registered an account and purchased a product. You can’t readily get this kind of integration in solutions built on separate systems. It is one of the core features targeted at business owners who want to make life simpler.
Pricing
Hosting plans with Business Catalyst range from $9 to $39 per month. Available features are based on the plan you purchase. If you would like to be a reseller, Adobe has partner programs ranging from free to $1,995. Again, the more you pay, the more features are available to you.

Sample websites

4. Squarespace

Squarespace is a CMS focused on satisfying those who want an integrated blog, content and portfolio website. While this is rather common, Squarespace includes some powerful tools that put it in a category all its own. Focusing on in-context design and editing, this platform offers a design- and build-as-you-go approach that makes you reconsider how you build websites. Essentially, there is no admin panel in this CMS. Once logged in, you browse the website and perform all of the editing on the website in real time.
This real-time editing has four modes: content editing, structure editing, style editing and preview. This function-oriented approach means you can update the content of a page in real time and also tweak the style as you go. Want to make a heading a bit larger? Simply go into style editing mode and quickly make the change using the point-and-click interface. Need to add a block of content? Turn on structure editing mode and add widgets to the page in real time.

You can build pages from both modules and pre-built pages, based on functionality. The pre-built functionality is fantastic for building websites very quickly. It is also empowering, allowing owners to easily add the kind of complex functionality that would normally require the help of a developer.

Basic features

Squarespace offers some enticing and unique functionality:

• Managed content
• Blogging
• Social media integration
• iPhone- iPad-based management
• Blog importing tools
• Analytics
• Large selection of beautiful templates
• Photo galleries
• In-context editing
• Form building and data collection
• 20+ content type modules
• Real-time designing

Unique features

Packaged functionality
The functionality-oriented approach of Squarespace is incredible for building complex features that would cost far more to build separately. Something as simple as embedding a widget that allow users to instant message you is the sort of thing that amazes clients and is usually very painful to pull off. Adding a Google map with custom markers is also very easy.
Free templates
The built-in templates offer a variety of starting points for your website and are very easy to customize with the point-and-click interface. Sure, you can achieve whatever you want through CSS, but by doing all of the editing in the GUI, you ensure that clients are able to work with the website over the long haul. The client’s ability to maintain the website will save them money and keep you out of the minor-update business.

Dynamic layouts
One rather amazing feature is that you can select overall structures on the fly. Prefer a three-column layout? Simply select it from the appearance editor. Being able to dynamically control the formatting of the page will get you to the finish line much faster. Such needs typically force you to work with the raw code that powers a template—not always the case with Squarespace.

Pricing
Squarespace hosting fees range from $10 to $40 per month. The three price points come with different feature sets.

Sample websites

5. Webvanta

Webvanta offers a unique approach to starting a website. You are prompted to select from a list of “smart themes.” These templates are bare-bone designs but come with common features depending on the type of template. They’re like a giant shortcut. Fortunately, they are trimmed down enough that re-skinning is not a problem.
The Basic smart theme comes configured with Typekit fonts, the Blueprint CSS framework, jQuery, Superfish drop-down menus, as well as a blog, photo gallery, video player, calendar and contact form. It is set up to handle commonly needed functionality without pre-determining the look and feel. The set-up requires a bit of getting used to, because someone else has configured it. Once you’re acclimatized, though, it is the sort of thing that can be massively efficient.

Webvanta relies on the standard template formula. Templates are built as separate components, with special tags to define content regions. Various modules can be bolted on to these templates, and of course the templates are then associated with pages as you create them. While not a revolutionary approach, it makes it remarkably simple to jump around and build the required components.
While the template pattern is conventional, the system has been extended to allow templates to be built out of components. You’ll find an easy management system for menus, templates, snippets, CSS files, JavaScript files and XML feeds. All of the extra bits needed to make a template are organized in such a way that digging through them is remarkably easy. It’s the sort of thing that is hard to describe but easy to love when you see it in action.

Basic features

• Standard content
• Blogging
• “Information portal” data model
• Form builder
• Photo galleries
• E-commerce
• Event calendars
• RSS feeds
• Search
• Custom database
• Reusable templates and snippets
• Smart themes (i.e. feature sets)

Unique features

Custom databases
One look at Webvanta’s custom database features will immediately get your imagination going. The system lets you easily define repeating sets of data to output to the page. Even better, the admin pages for managing this data are easy to use. The system basically transforms any repeating list of code into a client-friendly low-tech system that the maintainer can work with. So, instead of the user picking through the HTML, trying to replicate something, they use a clear form. Integrate this feature into your websites and clients will love you for it.

Built-in support for page-specific CSS and JavaScript
I don’t even know how to convey how awesome this feature is. Webvanta allows you to attach custom CSS and JavaScript to individual pages right inside the GUI. This might not seem like a big deal; in fact, you might think it’s a bad idea. But when you consider how much flexibility this allows, it’s fantastic. It avoids two critical pitfalls of many systems. First, it reduces the number of templates required by a website. Secondly, it provides an alternative to inline styles that is equally easy to implement. The ability to attach custom styles and JavaScript to individual pages can reduce site-wide confusion. Webvanta also allows you to install third-party jQuery components insanely easily.

Powerhouse snippets
Reusable components are a fundamental building block of template systems. Webvanta offers such functionality with a bonus. Its snippet engine allows you to embed custom Webvanta tags (the same ones used throughout the website), thus allowing complex functionality to be easily bolted onto any template or page as needed (such as a customized list of recent blog posts). The power of this becomes apparent once you realize that the basic building blocks of the system are fully accessible. No magic tags will render code uneditable.

Pricing
Webvanta offers a range of price points, from free forever to $99 a month. With five price points to choose from, you should be able to find a price and feature combination that works for you.

Sample websites

Conclusion

As you can see, all of these systems have distinct features that make them fantastic options under different circumstances. The purpose here is not to say that one is better than another.
Each person has to find the tool that will dramatically improve the way they work. Locking ourselves and our clients into a single platform can be tempting, but we should keep our options in mind so that we can recommend the ideal platform.

Have you tried these CMS? Which one do you prefer and why?

Fully Understanding Contrast in Design

Usually the subject of contrast is reserved for beginners. Books will say “black and white have contrast, red and orange do not” – but there’s so much more to it.
Beginners books usually only touch on color contrast, but what about size and shape contrast? Often the easiest way to tell an amateur designer from a professional one is to look at their use of contrast.
Creating a structure of importance using size, shape and color is what gives a page impact and legibility to the reader.
In this post, we’re going to look at contrast in detail, examining big typography, funky shapes, clear divides, imagery, and how they properly fit together using contrast for a good user experience.

An Introduction to Contrast

Contrast can be defined as “the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.” In plain English that could be described at its most basic level as “things which look different from one another.”
For designers in all walks of the practice, but particularly web designers, contrast is at the root of pretty much everything. We are constantly trying to establish hierarchies of importance, draw people to certain areas of a page and communicate a clear and concise message at the very heart of our work. Creating relationships between different elements of a design is just about the most important thing that you can do. You’ve probably been doing it a great deal already, consciously or not.
Obvious examples of contrast are black and white, big and small, fast and slow, thick and thin. Opposites are the easiest way to grasp what contrast is, but when applying contrast to design work it’s never quite as black and white. If you were wondering, that’s where the saying about a situation being “black and white” comes from, which also leads to the saying of something being a “gray area”. In design we are often comparing things which are different but not opposite, for example an H1 and an h1, or an “add to cart” button and a “check out” button. This is where greater levels of contrast come into play.
Let’s take a look at the different types of contrast and some examples of how they’re used in web design.

Color Contrast

The most common example of all, this is pretty much where it all starts. If two colors are different to each other (say, black and white) they have high contrast, whereas if they are very similar (red and orange) then they have low contrast.

TekRoc use very obvious color contrast here by overlaying bright and vibrant image on top of a very dark background. The bright orange and blue clearly stand out and the eye is immediately drawn to them above all other things on the page.


Tim Van Damme makes superb use of color contrast in the GoWalla site design. Not only does the multi-colored border at the top of the page stand out and create visual interest by being different from the pale background, but he has also added extremely subtle 1px drop shadows to the text on buttons. The slightly darker orange really helps to create contrast between the white text and the orange background.


Envato are the masters of subtle contrast and the trend of using 1px borders for this can probably be put down to them more than anyone else. All their sites feature multiple single pixel borders to create contrast between sections. In the screenshot above the two content areas could have been divided by just space, or a single line, however by using two lines (one dark, one light) they create subtle contrast between the two sections which is extremely effective.

Size Contrast

The next most common form of contrast is using size. Something big beside something small generally indicates that the bigger item is far more important. That’s right, we’re saying that size matters!

MadeByWater is the design portfolio of Jordan Vitanov. He uses size contrast with extremely large typography to instantly convey a quote by Bruce Lee which defines why he has chosen to brand himself with the MadeByWater name.


28Thiers is an attractive upmarket bar in France. Their website makes great use of size contrast to draw your attention immediately to the large photograph of the Martini with assorted ingredients surrounding it. It’s instantly clear that this is the most important element on the page and the designer wants you to look at that image and be sold on the fact that it is an extremely classy establishment.


SlideScreen make multiple uses of size contrast in their site. As well as having their product displayed with a large screenshot, they also use very large buttons for their primary calls to action. They want you to watch the video of their product in action, and then they want you to download it. These are the most important elements of the page so they are substantially larger than the other things surrounding them.

Shape Contrast

Shape contrast means making things notable in by their difference in physical shape compared to other things on the page. At its most basic level this can be used in things like adding rounded corners to buttons, but taken to more extreme levels it can attract a lot more attention.

Anebstar uses shape contrast to showcase three important images in the header. Because most things on the web are rectangular, one of the easiest ways to achieve shape contrast is to use a circle. Of course this example also has a little size contrast mixed in as well, but you can clearly see how the circular elements stand out from everything else on the page.


Carbonmade is a stunning site with a real mix of gorgeous illustrations and well presented content. A simple sign-up button here would have worked, but size and colour contrast probably wouldn’t have set it apart enough from the busy background. Adding a friendly octopus behind the button really gives it that difference in shape to draw the eye directly to it.


WireframePlus use a simple but extremely effective bit of shape contrast to highlight the price of their services. They want you to read their content but above all they’re trying to sell you on their great price by putting a big circle behind it.

Positional Contrast

Creating contrast in positioning is a very neat way to create a hierarchy of elements purely by using different alignments. In recent times this technique has been made popular by people like Elliot Jay Stocks, who used it to the extreme on his most recent portfolio site.

Elliot Jay Stocks uses a detailed grid to define the alignment of all the elements on his site. Attention is called to specific areas by them being indented to the left or the right respectively. In this particular screenshot the introductory paragraph really stands out because it’s aligned furthest to the left, where the eye looks first to read something. This type of alignment has “inspired” many other designers in the past twelve months to create designs with positional contrast in the same sort of style.


SimpleBits is the brand which Dan Cederholm works under, you may know him from projects such as Dribbble. On first impressions the SimpleBits site doesn’t appear to have any positional contrast, however when you start scrolling, all becomes clear. Where some people use a fixed background image to create a neat stylistic effect, Dan has made his logo and navigation completely fixed in position so that regardless of where you scroll to, they always remain in the same place on the screen. This is a great example of non-standard positional contrast.


SquaredEye is the design shop run by Matthew Smith and the case study pages in his portfolio make fantastic use of positional contrast. You need to see the whole page to really get the idea but essentially Matthew has meticulously created specific positioning for each section of the page. This creates fantastic contrast between sections and creates a great deal of visual interest to the reader without being at all distracting.

Contrast Conclusion

There is so much more to contrast than just “light and dark” – it’s one of the most important principles in design and you can almost never have too much of it, provided that you use it properly.
Taking your designs to the next level isn’t about finding the next band-wagon to hop on using rounded corners and drop shadows for everything, it’s about finding better and more efficient ways of communicating the message behind the design.
Exploring contrast in detail and using it to its full potential is one of the best ways to do this.