Not since Blueprint or the 960.gs has a front-end framework hit the popularity heights that Twitter Bootstrap is currently enjoying. And rightly so. It is perhaps the most complete framework available ever. With its clear and concise documentation, all of its common UI elements, its 12-column responsive grid and all of the optional Javascript components it offers, Bootstrap is the perfect tool for rapidly kick-starting any web project.

Having said all that, you do need to know your way around code to truly enjoy the power that Bootstrap offers. So, what if you are a designer that doesn’t know how to code and your developer does want to use Bootstrap We have the solution for you.

In this post we have collected a selection of GUI and wireframe templates that have all been designed for when you are working with Bootstrap, making it very easy to pass your designs on to the developer. They are all in various formats (psd, ai, png…) and available for all popular applications like Photoshop, Fireworks, Illustrator and Omnigraffle.
Here they are:

From RepixDesign, this vector based Bootstrap GUI PSD includes all of Bootstraps base elements layered in Photoshop for typography, buttons, grids, navigation, and more.

Bootstrap v2.0 GUI

With the ever increasing popularity of internet, more companies in Northampton have already realized the need to have a web page where they can market their products and services. There are lots of companies who ensure that web design in Northampton becomes easier. A good company should provide you with a full set of services including content management, hosting, web design and SEO.
There are three types of businesses in Northampton when it comes to Web Designers based on budget constraints;
The friends
This group will usually get a number of staff or friends to try to offer Web Design services
The cheapest
This group of business will email and phone every Web Designers company they have in Northampton, opting for those with the cheapest price
The realistic
Finally, there is this group which understands how beneficial it is to have a website in their business
The first two types of businesses are usually good companies, trying to make a living keeping their cost down and hence trying to make more profit. The last one is the type that realises how much a business running online benefits from website design, coding and ensuring that it appears on the search engine page results.
If you get in contact with the right Web Designers Northampton, it is almost a guarantee that your website will be not only effective but successful. This boils down to the content your website contains. When you are negotiating with a website developer, you have chosen to provide your web services, ensure that their final results are eye catching and appealing to your potential customers. In addition, a good Web Designers Northampton provider must have the current design trends which they should incorporate in their work.
The other thing that any business in Northampton needs to observe is accessibility. Ensuring that your website is accessible is essential for SEO and internet marketing purposes. Your developer must use designs made in such a way that they are Search engine friendly, and one which gives your visitors an easy time to navigate. You must also look for a Web Designers Northampton developer that is affordable while ensuring quality of the website.
For any business in Northampton looking to operate online, and for any business in Northampton to convert website visitors into potential customers everything must function together; from graphics, titles, subtitles and use of text. Your layout must be clean enough to enhance your message rather than detracting. No matter whether your goal is to have folks give you the email addresses, or phone your business or even buy your products or services online, your internet site must have a strong call to action that will encourage them to take your desired course of action. Realistic business types get all these benefits. They get website designs that are of quality and that are meant to serve their purpose-increase your visibility online, generate traffic, increase sales and hence more profits. If that sounds something, why not get a list of the top rated Web Designers Northampton providers and choose the best one that will give you a site that matches your business needs?

The internet has changed a lot over the last few years, and so has the way we view things online. As such, in this article, we will be taking a look at some of the recent accessibility improvements that Flat Design has brought and helping make the internet that little bit more open and accessible to everyone.

Flat Elements

Skeuomorphs are used to emulate colors, textures, shapes and even features of actual objects in real life, and thus can be really helpful for those who are not used to new technologies and prefer simulations of their environment. However, how accurate will it be for people with visual disabilities Will it really be worth the effort to keep designing this way for them Well, the counterpart of this option, flat design, has a lot of advantages that can help those with special needs. As flat elements make use of basic shapes such as regular/irregular polygons, they are more recognizable.

At the left, flat design showing squared/rectangular elements and a high contrast in all buttons. The skeuomorphic calculator on the right, showing low contrast and a lot of bevel and shadow effects. [Source

In the image above, the comparison of both flat and skeuomorphic calculators shows the difference between both techniques. Flat design gives less importance to the button itself and enhances the content (in this case, numbers and mathematical functions). On the other hand, skeuomorphic design makes buttons stand out by giving importance to their details, and as such, content may be lost due to low contrast.

The above example shows how flat design (complemented with certain other items that we shall discuss later) improves and gives more importance to content and can prove useful for the visually impaired readers.

Huge Typography, and Simple Icons

Not just in flat design, but in minimalism as well, huge typography has been taking the lead. Fonts can help put the focus on content and as a result are one of the most important components of the design process. The current trends in design include usage of huge typography with high contrast, clear font faces and balanced paragraphs – basically, bringing printed typography basics to the web. These principles have improved legibility and readability, scoring another point on the accessibility scale. After all, it is a well known fact that a higher contrast with clear font faces can improve accessibility features.

The common denominator here is the use of big and clear typography (more likely Sans-Serifs) in high contrast colors to improve readability.

Moreover, clear and big typography can be used inside basic elements to create web and UI buttons with strong contrast in order to help users easily identify the functionality of a given element and differentiate it from the others. Speaking of elements, such flat elements have become really important in the design process as they help in giving personality and strength to the flat design stream, thereby contributing towards a better appearance, visibility and clearness of all the buttons and interface elements.

Basic shapes, solid colors and simple icons make part of this nice theme for iPhone which shows the best of flat UI elements.

Solid and High Contrast Color

So far, we have talked about high contrast colors when applying typography and icons to basic elements. Now, let us get into detailed aspects of the same. The usage of high contrast colors in web design is not a new concept. In fact, for many years, high contrast colors have been used to lend a better visibility to certain key elements of web design.

The internet has many amazing tutorials and tools to help you create accurate combinations of colors. For example, Color Scheme Designer shows you palettes of single, complementary, triads, tetrads and analogic colors, and helps you get a better idea about how certain colors interact with some others.

Color Scheme Designer, a great tool to see color behavior when combined, and use the results as a reference when creating flat designs with contrasting colors.

Also, contrast may be applied to some other aspects different than color itself, such as shapes, distributions, font weights, heights, strokes and textures. In fact, playing with all these elements and their corresponding contrast can improve the appearance of your design and also help you make the design more accessible for people with reduced vision.

examples of Contrasting Websites with Desaturation

Here are some examples of contrasting websites with desaturation and, in some cases, negative inverted, showing how beautiful design is naturally compatible with usability and accessibility concepts.

bigtop.it. With big typography and elements, soft contrasts between warm and mild cold colors. Nice to the sight and effective at elements definition by their contrast.

aaugh.it takes advantage of simplicity given by minimalism and creates a moderately strong contrast.

cheesesurvivalkit.com has a beautiful triad of gray, white and red, which provides a strong contrast that improves readability and elements definition.

metaphiziks.com working perfectly to improve content display.

Symb.ly is a high contrast site with a minimal style that lets you focus on content.

Odopod.com shows a beautiful mild contrast using pink, white and photographs in high format. When looking at the grayscale version, every element is fully identifiable.

0 unfold.no a site with elegant and simple design and clear content.

You might also like…

The Flat Design Aesthetic: A Discussion

Often when making mobile apps you will need your app to get the latest content from your website, or if there is not a website already with content some way of putting new or timely content into the mobile app.

Of course you do not want to have to update your app via iTunes, the Play Store or whatever, as you have to wait on people to upgrade before they see new content. You want to setup your mobile app to call the server and ask for the latest stuff by itself.

Using a REST API and JSON to deliver the content has to be the easiest way to do this.

Why use JSON/REST API and not AJAX

Inherently within the design of AJAX the problem that you would face is that AJAX calls can only be against the domain that the current page is being delivered. Well, as you are using a mobile app there may be no domain, and thus you can’t use AJAX. This is known as Same Origin Policy, and is a security safeguard imposed on developers.

Yet if you use JSON (JavaScript Object Notation) properly and not an AJAX call it is possible to get around this. Making a JSON call to the API is using the same technology that you would use when loading a Javascript file from another domain. Many people do this by using the Google CDN version of jQuery, they load jQuery from Googles domain and not from their own.

When we make a JSON call, all that we are doing is loading a new script from the server. Here is the code as a function that you would use on your mobile phone app:

 function loadJSON(url) {
   var headID = document.getElementsByTagName("head")[0];
   var newScript = document.createElement('script');
       newScript.type = 'text/javascript';
       newScript.src = url;       
   headID.appendChild(newScript);
 }
 

I’ve used Javascript as the language here, which many of the development tools use (Phone gap, Appcelerrator, Appfurnace, etc). All that it does is take a URL as the input and create a new script tag in the head that loads the URL as a Javascript file

JSONP and JSON, what’s the difference

JSONP and JSON are more of less the same beast. There is only one small difference, JSON only replies with the data, JSONP replies with the data and a callback process encapsulating it. Here are two example URL’s using facebooks open graph to reply with JSON and JSONP. The only difference in the two URL’s is the use of the GET variable callback=

http://graph.facebook.com/id=http://speckyboy.com

 {
    "id": "http://speckyboy.com",
    "shares": 608
 }
 

http://graph.facebook.com/id=http://speckyboy.com&callback=doThisFunction

 /**/ doThisFunction({
    "id": "http://speckyboy.com",
    "shares": 608
 });
 

As you can see, I’ve told facebook to reply with a JSONP request, using a callback and asking it to make that callback “doThisFunction”.

What this means is that when the reply comes back from the server, it will send the data to the function called doThisFunction()

 function doThisFunction(data){
   alert('the page ' + data.id + ' has been shared ' + data.shares + ' times');
 }
 

The above function would take the data (the JSON object) as sent to it via the callback, and then it would make an alert that shows some text, the page url and the share count.

The important part to notice here is the use of JSON dot notation. Dot Notation is the method that is used to access the data inside the JSON object. In this case data.id shows the url (the contents of the id object), and data.shares shows the share count (the contents of the shares object).

If your interested in seeing this in action, click here.

Now on with WordPress

WordPress is great, I love it. As I have said before, my mum, grandmother and girlfriend can use it without asking me every 5 seconds what to do, so it is definitley easy to use. With that in mind it’s the perfect administration platform for saving data. It’s quite easy to turn this around and make it a REST api also.

It must be said that if I was going to make a world class enterprise ready REST API, I would not use WordPress as the front end, maybe yes for the back end CMS administration, but not the front end. It’s doing far too much to get such a specific set of data, and in all honesty PHP is not the fastest language in the World. However all that said, for providing an API method for blogs to give access to the latest posts via API does not come under that umbrella. If your interested in what I would use in a world class enterprise situation, I would most likely use node.js, or maybe Python, but that is a whole other story.

OK, with the preamble out of the way, I am going to make a very simple way of performing a REST reply that gives out the 10 latest posts as a JSON object. Instead of writing a plugin to manage this (which I would normally do), I’m just going to write a very simple page template called “REST Blog Listing”. I am choosing to write a page template so I can control to a great degree what gets loaded.

For this we will need the following functions:

• A way of reading the URL and checking the GET variables
  function check_url_vars()
• Sanatize the variables so that when we save them we know we are not letting nasty things in the door
  functions save_url_vars() and function sanatize_vars()
• Checking if the request is for a JSON object or JSONP object and replying with the right stuff
  function save_url_vars()
• Making a call to the WordPress database for the latest published blog posts
  function make_the_loop()
• Using the constructor function to automate the process
  function __construt()
• Using the destructor function to clean up after
  function __destruct()
• Some sort of method of handling errors
  function error()
• Sending the output back to the client and GZIP’ing it where possible
  function send_output()

If you know your PHP you will already know that we’re going to use a class to mange this. We’re going to put this directly into the page template just to make it easy, but this could just as easily be transferred in with a WordPress plugin.

 <php
 
 /**
  * Template Name: REST Blog Listing
  * @package WordPress
  * 
  */
 
 // Notice that there is no request to get_header();  it is not needed
 
 
 /*
 * REST Class from speckyboy
 *
 */
 
 // check if the class exists already as we don't want it to fail
 if(!class_exists('speckyboyREST')){
 	class speckyboyREST{
 		// define class variabels
 		protected $_callback;
 		protected $_count;
 		protected $_output;	
 		protected $_format;					
 	
 	// automate everything
 	public function __construct(){
             $this->_output = array(); // setup the output as an array, needed for json
             $this->_count = 10; // define the blog count shown as default
             $this->_callback = false;  // set callback to false just incase a jsonp callback request is not made                      
             $this->_format = 'json'; // default to json replies, will be changed if callback used
 			if( $this->check_url_vars() ){
 				$this->save_url_vars();
 			}
 			$this->make_the_loop();
 			$this->send_output();
         }      
         
         protected function check_url_vars(){
         	if(!empty($_GET)){ // check to see if the GET variables are set at all, this could more specific if wanted. 
         		return true;
         	}else{
         		return false;
         	}
         }
         
         protected function sanatize_vars($var){ // stop nasties by removing them from the possible URL vars
                 return strip_tags(html_entity_decode(urldecode($var)));        
         }
         
         protected function save_url_vars(){
                 if(isset($_GET['callback']) ){
                         $this->_format = 'jsonp'; // as there is a callback, setting the output to be jsonp
                         $this->_callback = $this->sanatize_vars($_GET['callback']); // defining the output
                 }
                 if(isset($_GET['count']) ){
                         $this->_count = $this->sanatize_vars($_GET['count']); // could use is_numeric here if wanted
                 }
 
         }
         
         protected function error($type, $errorMessage){
         	$this->_output['status'] = $type; // define the error message value
         	$this->_output['data'] = $errorMessage; // define the error message text
         	$this->_format = 'jsonp'; // setting to jsonp so that we can force a callback to a error handler
         	$this->_callback = 'errorReply';  // will send errors back to errorReply function.
         }
         
         
         protected function make_the_loop(){
         	$query = array(
         	  'post_type' => 'post',        // get only posts	
                   'post_status' => 'publish',   // only published stuff        
                   'posts_per_page'=>$this->_count, // with the page count wanted  count = -1 means everything
         	);
         	$loop = get_transient('restget'.$this->_count); // get the transient of the loop to make things faster
         	if($loop === false){                
                     $loop = new WP_Query($query);  // make loop query
                     set_transient('restget'.$this->_count, $loop, 60 * 60);  // set the transient for the loop for 1 hour
                 }
         	$array_out = array();  // setup an array to save the results        	
         	if ($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post();  // do the loop
                         if(function_exists('has_post_thumbnail') && has_post_thumbnail()){   // check for a post thumnail                      
                           $image =  get_the_post_thumbnail($page->ID, 'thumbnail');  
                         }else{
                             $image = null;  // set image to null is there is not one.
                         }
                         $array_out[] = array(   // add a new array set
                             'title' => get_the_title(), // the title
                             'permalink'  => get_permalink(), // the link back to the main site
                             'excerpt' =>  get_the_excerpt(), // the post excerpt    
                             'image'=> $image
                          
                         );           		
                         
         	endwhile; // finsh the loop and then save the data
         	$this->_output['status'] = '200'; // set a good status
                 $this->_output['data'] = $array_out; // add the array to the data ready to json encode
         	else:
                 $this->error('400','no data returned'); // no data error
             endif;
         }
         
 	protected function send_output(){
 			$time = time() + 60 * 60;  // setup a 1 hour cache on the output
             $expire = date ( "D, d M Y H:i:s e", $time ); // define the expire time       
             header("Expires: " . $expire );  // set expire header for 1 hour
             header("Content-type: application/json"); // set content type to be json		
             if(function_exists('ob_gzhandler')){  // setup GZIP compression if available
                 ob_start('ob_gzhandler'); //start gzipped buffer
             }
             else{ 
                 ob_start(); // start output buffer
             }            
             switch($this->_format){
             case 'json':
                 echo json_encode($this->_output);  // if json, echo json encoded data to buffer
                 break;
             case 'jsonp':
                 echo $this->_callback."(".json_encode($this->_output).");";    // if jsonp, echo json encode with callback to buffer            
                 break;
             }
             ob_end_flush(); // flush the buffer sendin the output to the client
         }
         
         public function __desctuct(){
         	unset($this); // kill all the things that have been made, clean up behind.
         }
 
 	}
 }
 
 // Start the class on load and get reply
 $restapi = new speckyboyREST();
 
 // notice no request for get_sidebar() or get_footer(); it is not needed as we are not sending HTML, just JSON
 
 >
 

To use the above code, you can either cut and paste it in a page template file inside your theme or you can use the one in this zip file. If you want to see it in action you can see it here, but do be aware that I’ve disabled the count from being more than 20 posts long.

Finishing off the callback

Unless you are using server to server communications to make the JSON data request, you will want to use the callback variable. To make this part of it work correctly it’s back to using JSON dot notation again. What we need to do is to loop through the content of the data object using the for loop and then create the HTML to display it on screen.

 function callbackFunction(data){
 	values = data.data;
 	var output = '<ul>';
 	for (var i = 0; i < values.length; i++) {
 		output += "<li style='clear:left'>";
 			if( values[i].image != null) { 
 				output += "<div style='float:left; margin-right:10px'>"
 					output += values[i].image;
 				output += "</div>"	
 			}
 			output += "<h2><a href='"+ values[i].permalink +"'>" + values[i].title + "</a></h2>";
 			output += "<p>" + values[i].excerpt + "</p>";
 		output += "</li>";		
 	}
 	output += '</ul>';
 	document.getElementById('output').innerHTML = output;
 }
 

Looking at the code you can see I have chosen to use inline styles, which you may not want to, this is because the mobile app may not allow for a CSS file. You can rip this out if you want. The other important thing to notice is the use use of value[i], this is to get to the exact object in the loop, the [i] represents the relevant data set

If you want to see this code in action, check out this page.

Dealing with errors

To deal with errors there will also need to be a function called errorReply() created

 function errorReply(data){
 	alert('there has been a problem. ' + data.data);
 }
 

I’m just taking the simple approach here by showing the error message in a popup alert. It could be much more complex.

What could be done better/differently

There is always things that can be done better or differently, and before you get too critical of this how-to, please remember that it’s just a post and not a book I am writing. All that said, there are many things that could be done better or differently.

• Use the transients to store the JSON output and not just the loop.
• There could be an option to deal with the output from the REST API as XML.
• This could be setup as a plugin and then extend classes to make other rest api’s available.
• Could setup the WordPress url rewrite re-write API to collect the vars from the url and not GET vars.
• Could setup a separate api subdomain with the wp-config.php setup not to allow cookies on that domain.
• Much better error handling could be employed client-side, and maybe also at the class-side of things. For example we could read the status and perform the right function based on that

No doubt you have thought of a few other possibilities. Anyhow, feel free to take the code and make it work for yourself.

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy 🙂 If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebook or by subscribing to our RSS feed. Our Weekly Design News has been…

As a frontend developer of course I’d heard about accessibility. I’d always followed best practices when creating web content that shouldn’t have any problems being read by a screenreader. Like so many other developers in my position though I’d never actually tried a screenreader myself. It always seemed like a difficult thing to do, and I’d heard it was expensive. A few months ago I spent a week pretending to be blind for a week, using a screenreader to navigate websites, attempting to understand how a blind user will hear a site. I learned quite a few things that I didn’t expect that have changed the way I write HTML. There’s lots of rumours and misinformation about accessibility best practices. Here are some myths that are definitely not true:

Myth: Screenreaders Read Link Title Text

This is not true, and surprised me greatly! For a long time I was under the impression that title text added to a link was intended to describe the destination of the link for screenreaders. I’ve learned now that title text is actually NEVER read aloud by a screenreader, meaning adding information intended for screenreader users is completely pointless. If this information is essential it can actually make your page less accessible. I asked HTML expert Jeffrey Zeldman whether we should be using title text in links, here’s his answer:

@silktide says: We’re researching link title text, & how it’s not used by screen readers. Is there any reason to use it you can think of

@Zeldman says: No! Do not use.

I wrote more about how I mistakenly thought title text improved accessibility here.

Myth: Blind Users Use a Text-Only Browser

Don’t get confused between a screenreader and a browser, they aren’t the same. A screenreader reads the entire desktop, not just the web browser. A screenreader isn’t a special type of browser, it’s just something that reads text from the software you’re already using. That means blind users will use the same browsers as everyone else. I was mistakenly told by a fellow web developer that the best way to test a blind user’s experience is to use an obscure text-only browser like Lynx or w3m.

According to a study by WebAIM the majority of screenreader users use Internet Explorer and Firefox on Windows. Testing your site in anything other than the common browsers might not be giving a true experience of a blind user. Users of the free screenreader NVDA are most likely to use Firefox, which is recommended. You might be surprised to know that Chrome, the web developer’s browser of choice, is only used by a small percentage of blind users.

Myth: Blind Users Don’t Have JavaScript Enabled

How many users of any kind actually disable JavaScript A long time ago I heard it was something like 1 in 10, but that was long long ago. JavaScript is not only pretty useful these days, but for many sites it’s necessary to get the intended experience. As blind users will use common browsers, it’s mostly safe to assume they’ll have JavaScript enabled too. It’s completely possible to make JavaScript interfaces accessible by screenreaders, using ARIA roles to enhance keyboard navigation.

Myth: Dynamically Loading Content is Bad for Accessibility

Sites like Twitter load content dynamically, for example when scrolling down the page Twitter will automatically load new tweets so you don’t have to click “more”. I originally thought this would be an accessibility nightmare for screenreader users, but after speaking to some blind people I learned that it’s actually preferable to pagination. Sure, there’s an awkward pause in the content that’s read aloud as the page is spoken, but this is preferable to going to a second page where you’ve again got to navigate through the headings and menu to the content.

This is still a bit of a hot topic though. I’ve read comments from some blind users who find auto loading content incredibly irritating. It probably isn’t flawless in all occasions, but my advice is don’t dismiss it as inaccessible; if you’re developing a site that loads content dynamically, have a blind user test it first.

Myth: Blind Users Have CSS Turned Off

We’ve already established above that blind users use exactly the same browsers as sighted users. It’s unlikely screenreader users will disable CSS, and in many cases the CSS will affect how the screenreader reads content. For example did you know that any page elements with the CSS property display:none won’t be read by a screenreader Many people think they’re helping screenreader users by providing a “skip to content” link at the top of the page, hiding to visual users with display:none. Actually screenreaders obey this and don’t read it aloud.

Myth: All Images Need alt Text

One of the very first things you might have learned about creating accessible webpages is to specify alt text on every image. This is still an important lesson, and giving appropriate alt text is essential to blind users using a screenreader, especially if the image contains text or conveys meaning. However, not all images on your page require alt text. If the purpose of the image is for decoration only, alt text will be irrelevant and might confuse a screenreader user. In these cases, you don’t need to specify any alt text at all. If this is the case, it’s best practise to show you intended to leave it blank by specifying an empty alt=”” attribute.

Myth: Everything Needs a Tabindex

No it doesn’t, leave it alone! Tabindex is intended to solve the problem that the order a screenreader reads content might not be the best order for the content (it’s actually called “focus order” in WCAG 2.0). If this is the case, you need to do some serious thinking about your content order, and not put tabindex in as a quick fit. Most of the time tabindex just makes things more confusing and can bounce users around the page in a non-logical way.

I tried to use a comments form on a blog last week, tabbing through each input box when I noticed the captcha box wasn’t included in the focus order. After some checking with Chrome’s developer tools I found that the tabindex had been specified for each element except the captcha, pushing it way way down somewhere in the order of things making it very difficult to submit the comment using the keyboard. Changing the focus order often causes more problems than it fixes. Put your content in a sensible order and leave it at that.

Myth: Blind Users Navigate Using Landmark Roles and HTML5 Structural Elements

You’ve probably seen the new HTML5 structural elements like <aside> and <nav> which are intended to make more sense of our page content. Also there’s ARIA landmark roles like role=”main” and role=”navigation” that we can add to our elements to indicate their purpose. This is definitely going a long way to making our content easier to navigate, but adoption of these new technologies still has a long way to go.

The WebAIM survey shows that almost 35% of people seldom or never use landmarks. It’s not a bad percentage, but each screenreader and browser combination does something different, and not all websites make use of landmark roles, so it’s not a reliable method to use. The largest percentage of screenreader users use page headings to navigate, skipping from one to the next using a keyboard shortcut.
When trying this out myself however I realised how easy it is to skip an important piece of content, especially if the website author hadn’t used headings correctly. This myth’s debatable. In the future I believe users will navigate using structural elements and ARIA roles a lot more than they currently do as it becomes more reliable, but remember this isn’t the only way screenreader users navigate.

Summary

Like so many others, I learn by doing. There’s been loads written about creating accessible websites, but much of it is boring and theoretical. Simply by using a screenreader myself I was able to learn so much more about how a blind user navigates a webpage, and how to create better websites. Obviously though, blindfolding yourself can’t give a true experience of being blind, so what I really recommend is get a blind person to check your sites, or at least teach you how to use a screenreader properly. I’ve had some great conversations with blind users recently after publishing my first article about accessibility, and there’s a lot you can learn by just asking. If you’re a practical hands-on kind of guy like me, trying it out yourself is a valuable experience!

Regular supply of work is vital for the health of your budget. When you don’t have projects lined up, you may enjoy the free time you have but at some point you will begin to feel the monetary pressure. We have all been through the phases when no decent project is around but when this happens frequently, life gets very stressful. One of the ways to solve this problem is by implementing the subscription model.

While the subscription model is certainly not a panacea and it does have its downsides as well, not to mention that there are many cases when you simply can’t apply it, it’s a good model to build your financial health on. If you manage to avoid the pitfalls, the subscription model can offer really a lot.

Why the Subscription Model Is Good for You and Your Business

The main advantage of having subscribing clients is that this brings a regular supply of work (thus income) to you. This model is a form of repetitive business, the best of which is that it is scheduled at regular intervals, allowing you to plan both your workload and your finances.

If you have 3 subscribing clients at $30 a month each, this might not be much but it is guaranteed money. Of course, you can have many more than 3 subscribing clients and charge more than $30 a month, so that the amount is more tangible but you get the idea – every month you are entitled to your subscription fees.

When you manage to find subscribing clients, you sell your services in advance. You don’t have to look for work or have unpaid downtime. The existence of subscribers could be a huge time-saver because you don’t have to get familiar with a new project, don’t have to draw contracts, don’t have to negotiate. All these activities you can’t avoid with new clients and new projects are eating into your time for real work and the more you minimize them, the better.

Pitfalls of the Subscription Model

The subscription model does work but it also does have its pitfalls. First, your type of business might not be suitable for a subscription type of charging, though honestly almost always you can adapt your business, so that it can be.

For instance, if you create sites and you offer ongoing maintenance, this is a good candidate for a subscription service. However, if you just create the site, turn it to the client and have no more involvement because the project doesn’t require it, or because you hate the very mention of the word ‘maintenance’, then you won’t be able to take advantage of the subscription model.

Another issue to watch for is your fee structure. Basically, it is best if you have a fixed monthly fee and incident charges. If you have only a monthly fee, and there are lots of work, this can drown you. If you decide to avoid this by offering a high monthly fee, your clients will rightfully frown because they will have to pay you this fee even when there is no work needing done.

Workload balance is especially tricky with subscription services. If you manage to find many subscribing clients, you might get overbooked. It happens frequently that many of your clients need more service than what’s offered in the subscription and this could be hard to meet, if you have filled your schedule to the limits. Of course, you can always hire help but this isn’t issue-free either.

Additionally, when your schedule is filled with subscription work and better opportunities pop up, it’s quite possible you will miss out on them. Sure, if you are to choose between missing great opportunities because you are filled with subscription work and having no work at all, the choice isn’t difficult but if you value diversity of projects, these missed opportunities will be an issue.

How to Find Subscribing Clients

One of the hardest things about the subscription models could be finding subscribers. However, it could also be very easy to do – it all depends on the type of services you offer and your sales skills. One of the easiest ways to find subscribers is to simply tell your existing clients (and any new clients you land) that you offer ongoing maintenance, or any other form of subscription services, and the chances are they will be interested.

If the subscription service is not directly related to your present business – i.e. you decide to start a site where you offer premium images, rather than expand in the direction of offering site maintenance – you will hardly be able to use your existing client pool of clients for whom you have created sites in the past.

The reason is that your new service is more suited to designers rather than end-users. In this case you can’t use your existing client base. Instead, you need to find new clients. One approach is to advertise your services – for instance with PPC ads, or post in forums where designers gather. This is harder than converting your existing clients to subscription clients but if your service isn’t of interest to your existing clients, you have no other choice.

However, the hard part doesn’t end here. You need not only to attract subscribing clients but also to keep them. Obviously, you need to offer good quality for your services but this alone isn’t enough. If clients don’t need your service, even if the quality is good, they will leave. Therefore, always factor some drop rate – you can’t retain 100% of your subscribers even if you offer out of this world products/services.

One way to ensure your clients stay longer with you is to offer discounts for pre-payment. For instance, you can offer 1-month fee for $30, 3-months for $80, 6-months for $150, etc. Of course, you can’t avoid refunds (unless you explicitly state there are no refunds but this will make it harder to attract new clients), so don’t count on prepayment as a way of tieing up your clients.

Membership Sites As a Form of Subscription Service

One of the forms of subscription services that requires special attention are membership sites. This form could be suitable if you offer electronic goods, such as images, articles, templates, etc., or consultation-types of services, such as tutoring. However, you need remember that a membership site is very hard work and you need to have a good number of subscribers in order to stay afloat.

There are many platforms to build a membership site on but probably the easiest is to use WordPress and a membership site plugin. There are a bunch of good ones – free and paid – and setting them isn’t rocket science.

The second most difficult thing to retaining subscribers is the regular supply of content. In some cases it might take you just a few days a month to create the monthly content but in other cases this could turn into a fulltime job (unfortunately, not necessarily accompanied by a fulltime income).

Anyway, membership sites and the subscription model as a whole are really promising and it makes sense to try them. They might not make you a millionaire but they allow for a steady income, so for a freelancer or a small business they are a viable option.

Image Source: Vintage retro grunge sale labels via Shutterstock.

Comments and Reactions