The Art of Building a website is a noble but challenging one. It got even more challenging after the advent of the mobile device. I can still remember quite vividly the moment when Steve Jobs introduced the reinvented Phone to much fanfare. The Tablet followed shortly after, and the concept of a ‘mobile web’ came into reckoning.

Sales of mobile devices (phones & tablets) currently surpass traditional personal computers by over 6 to 1. And mobile web traffic now makes up about 25% of all Internet Traffic. If you didn’t think you needed a responsive website two years ago, it’s getting a lot more difficult justifying that today. Responsive web design is not without criticism, but neither are mobile users when they arrive at a non-responsive website that compels them – albeit unwillingly – to constantly zoom in and out and scroll from side to side.

Building a responsive website doesn’t have to be a zero-sum proposition, where you endure the ‘bitter pill’ of an arduous process as a means of justifying the ‘sweet sensation’ of having a website that looks and feels good on Mobile Devices. It can be “Win-Win” and it must be.

In this article, I will show you a way to build responsive websites much faster than you do right now using Restive.js to streamline your workflow and eliminate the need for media queries entirely.

The Problem with Responsive Web Design

Responsive web design has evolved into the predominant technique for making websites adapt to mobile devices. Due to the varied and smaller screen sizes of these devices (especially for smartphones), and the obvious awkwardness of viewing a desktop website on smaller screens, it goes without saying that the ability to be ‘responsive’ is essential to ensure that your online visitors can enjoy your website regardless of what device they use.

However, traditional responsive web design makes the process of building websites somewhat challenging to say the least, and here’s why:

• Too Inefficient for Primetime: It takes too much time to build a responsive website. In the golden age of web design (before mobile devices), the only major problem was browser-compatibility (or Internet Explorer-compatibility to be fair to other browsers). Add all the challenges of adapting your website to multiple screen sizes to the mix and you have quite a major challenge. I remember reading answers to a question someone asked about how much longer it takes to build a responsive website and found the responses quite telling. One respondent said anywhere between 10% and 50% extra time. And yet another felt that the figure was much higher at 25% to 75% extra time. These kind of efficiency numbers can only hurt adoption, especially when time is tied to cost.
• Too Expensive for Mainstream: I’m yet to come across a profession that charges less for spending more time doing the same job. The whole concept of ‘overtime’ pretty much sums it up. If designing a website today [which is expected to be responsive] is taking an average of 25% to 50% more time to complete [not to mention Testing and ongoing Maintenance], I don’t believe there’s any chance of a responsive website being cheaper to build than your traditional desktop one. As a result, the cost implications will cause some trepidation for the majority of website owners, especially when building the old website wasn’t exactly cheap. This also puts web designers in a bind because whether its billing by the hour, or a fixed pricing model, some of that extra cost is going to be passed on to the client.
• Too Disruptive for Businesses to not cause Hesitation: Most websites today are hardly just HTML + CSS + Javascript anymore. Some use application engines like PHP, ASP, Rails, et al.; and some use content management engines like WordPress, Drupal, et al. And yet some have functionality that is powered by connected APIs and other external systems. For example, if your website has a secure personalized portal for customers, deciding to go responsive is a much bigger discussion than just HTML and CSS markup; it will involve a deep review of how you deliver service over the mobile platform, which may lead to very significant changes to your overall codebase. For a business that relies significantly on the online channel, a swift and pioneering sentiment may be quite easily usurped by one whose hallmark is caution.
• Industry-Standard Techniques are not Robust Enough: Media queries have become the predominant technique for enabling responsiveness in websites today, but are they robust enough to quicken adoption of mobile-friendly websites?! Right now, media queries are far from intuitive, sometimes quite confusing and frustrating, and sometimes don’t behave exactly as you think they should. This is quite evident when you are designing a website across form-factors e.g. Desktop, Phone, and Tablet. For example, if I have designed layouts for these 3 device categories, how easy is it to implement this using media queries?!

I know that there are always two sides to every argument. Some might say that the reason responsive web design takes too much time or costs too much is because the practitioner is ‘doing it wrong’. And some might say that media queries works just fine and ought to be enough to quickly and easily build in responsive features into websites.

However, even when facts are in dispute, the general trend is undeniable. In a recent report – State of the mobile Web 2014 – that my company [Restive] published recently, we found only 15% of all the Fortune® 1000 websites to be responsive to a single URL address space i.e. without redirection to a dedicated mobile web address. Being that these companies are not exactly lacking in finances, we can probably rule out cost as a factor for low adoption – but we can’t rule out the relative inefficiency of responsive web design workflows.

Now, I’m not exactly an authority on Formula 1 matters, but I can safely say that Sebastian Vettel can’t win a Grand Prix race [today, heyday, or any day] behind the wheel of a Prius, irrespective of how awesome he is as a driver. If you’re going to win a race where all the cars are Lamborghinis and Ferraris, you’re going to have to ‘pedal-to-the-metal’ in something equally spritely. In like vein, if you’re going to build responsive websites faster, you’re going to need a much faster workflow than the one you’re currently using.

An Alternative Approach to Responsive Web Design

Making your website look, feel, and perform well on every web-enabled device should be your ultimate goal and all your web design tactics should be focused on this. You might not get there today or tomorrow, but this should be an ideal that you constantly strive to attain. Mobile devices are here, they are not going anywhere, and more device categories might be around the corner. This is the new reality! As a result, designing a website today with the mindset that making it responsive is an ‘added extra’ is a losing strategy. Let’s face the facts: It doesn’t depend any more!

All web design should be ‘responsive’ by default. All websites must adapt to different environments that need access. It doesn’t matter if you are starting with the desktop version of a website, you must always pause and consider whether your design and functionality will work as anticipated on other devices, even if certain items of the layout are resized or rearranged, or certain devices aren’t as contemporary as you would like them to be. How to do this in the quickest, most-intuitive, stress-free way is the ‘holy grail’ of contemporary web design. And it all starts with a streamlined design workflow.

Inline CSS Responsiveness

If it is taking so long today to develop responsive websites, maybe we should go back to before phones [the smart ones] and tablets, and try to figure out what happened. Back then we still had HTML and CSS like we do today. We also had media queries like we do today, although they were intended for other special tasks like printing and accessibility. Therefore, it’s very plausible that the efficiency baseline of the traditional web design workflow was breached with the advent of mobile devices and media queries as the preferential technique for responsive web design.

We need to go back to a design workflow where the standard is that inline CSS rules are 100% responsible for responsive web design implementation. What I mean by this is that when I want to implement responsive enhancements on my layout, I should be able to define that enhancement directly in my main CSS markup.

So I should be able to do this:

 #my-element-id {/* Styles */} //my desktop style rule .phone #my-element-id {/* Styles */} //my general smartphone device style rule .tablet #my-element-id {/* Styles */} //my genereal tablet device style rule 

Instead of being stuck with this:

 #my-element-id {} //my desktop style rule  @media only screen and (min-width : 320px) and (max-width : 480px) { /* Styles for some mobile devices */ }  @media only screen and (min-width : 321px) { /* Styles for some other mobiles, probable to  */ }  /** ...And yet more Media Query Directives **/ 

Yes, media queries are CSS, but in this case they seem to be a serious productivity buster, primarily because of all the distributed and illogical ‘Markup Realms’ that they will introduce into your CSS. By virtue of @media directives, your once sequential codebase is now split into multiple regions, each of which you will have to manage and maintain separately, often with less than enjoyable consequences.

Let’s consider a real website project to put this in perspective.

A Real-world Responsive Design Project

Let’s assume you are designing a simple website. You have designed only the desktop layout and have the HTML and CSS markup finalized. You do intend for the site to be fully Responsive. Based on your expectations, you would like for tablet users to have a somewhat varied experience from smartphone users on account of the disparity in physical size compared to phones.

You can view a demo of our web page here.

As is evident, we are using a centered and fixed-width model that is 960px wide. And being that we have no major challenges with our desktop version, we now want to add responsive enhancements, specifically for phones and tablets.

First, let’s decide what we want to have happen when our website encounters a mobile device:

1. We want to move from a fixed-width to fluid-width layout if the device is a mobile device e.g. phone or tablet. Also we want to add 10px padding to each side i.e. left and right.
2. We want to reduce the size of the logo if it is a mobile device. Since our logo is text, we want a 10% decrease in font-size for tablets, and a 20% decrease for phones. And we also want the logo centered if the device is a phone, and right-aligned if it is a tablet
3. We want to collapse the main menu from horizontal to vertical if the device is a Phone (in either orientation) or Tablet in portrait orientation. When the menu is collapsed vertically, we want the height of individual menu items to be reduced, and we also want to place horizontal line dividers to demarcate said menu items.
4. We want to hide the Sidebar content for all Phones. We also want the Sidebar hidden for all Tablets in portrait orientation, but visible when in landscape.

So being that this is a simple website, we have just 4 Responsive enhancements we want to implement.

Using a media queries approach, let’s see if we can add these features to our website and make it Responsive:

 /** Responsive CSS - Using Media Queries **/ @media only screen and (max-width: 320px) {     /**phone in portrait CSS rules here**/     section {width: 100%; padding: 0 10px;}     header #logo div {font-size: 320%; text-align: center; margin: 0 auto;}     header #menu-container {height: auto;}     header #menu nav ul {height: auto;}     header #menu nav ul li {float: none; width: auto; height: 40px;  		line-height: 40px; border-bottom: 1px dashed #444;}     #content #main{float: none; width: 100%;}     #content #sidebar{display: none;} }  @media only screen and (min-width : 321px) and (max-width : 480px) {     /**phone in landscape CSS rules here**/     section {width: 100%; padding: 0 10px;}     header #logo div {font-size: 320%; text-align: center; margin: 0 auto;}     header #menu-container {height: auto;}     header #menu nav ul {height: auto;}     header #menu nav ul li {float: none; width: auto; height: 40px;  		line-height: 40px; border-bottom: 1px dashed #444;}     #content #main{float: none; width: 100%;}     #content #sidebar{display: none;} }  @media only screen and (min-width : 481px) and (max-width : 768px) {     /**tablet in portrait CSS rules here**/     section {width: 100%; padding: 0 10px;}     header #logo div {font-size: 360%; text-align: right;}     header #menu-container {height: auto;}     header #menu nav ul {height: auto;}     header #menu nav ul li {float: none; width: auto; height: 40px;  		line-height: 40px; border-bottom: 1px dashed #444;}     #content #main{float: none; width: 100%;}     #content #sidebar{display: none;} }  @media only screen and (min-width : 769px) and (max-width : 1024px) {     /**tablet in landscape CSS rules here**/     section {width: 100%; padding: 0 10px;}     header #logo div {font-size: 360%; text-align: right;}     header #menu nav ul li {width: 20%;}     #content #main{width: 65%;}     #content #sidebar{width: 33%; padding: 0 0 0 2%;} } 

As simple as this website appears to be, the above code took me about 20 minutes in all to rationalize and setup [I mean…I can get car insurance in half the time?!]. The markup looks like it could work, but it appears that we’re going to have a number of major operational challenges brought about by the unintended consequences of media query overlap:

• If anyone is using a desktop monitor with SVGA resolution (1024 x 768), they’re going to get the ‘tablet in landscape orientation mode’ version with a fluid width. Maybe not a major issue, but you would probably have wanted them to get the desktop version.
• There are numerous phones on the market that have widths in landscape orientation that are larger than 480 pixels e.g. iPhone 5. This means that the media directive that we had designated for ‘tablet in portrait orientation mode’ will be applied if the device is an iPhone 5 in landscape orientation. This is definitely not what we would have wanted to happen.
• Similar to point 2, there are also a lot of popular phones out there with widths in portrait orientation greater than 320 pixels. So the media directive for ‘phones in tablet orientation’ will be applied to any phone that fits this criteria.
• There are also numerous popular tablets with a landscape orientation width greater than 1024 pixels. Take the Google Nexus 10 (a tablet) which has device independent pixel dimensions of 800px high by 1280 pixels wide (in landscape). Changing our max-width value from 1024 to 1280 should sort this out, but now some notebook computers will get the look-and-feel not specifically intended.

I could go on, but I think the point is made.

This is a very simple website we’re trying to build here. Something as simple as the four responsive enhancements we have clearly outlined shouldn’t really be such a hassle to setup, tweak, and test. It’s clear that testing this website, and tweaking it, will probably take up to an hour if not more. For a more complex website, by the time you’re done with all the testing iterations, your brain and your body will be weary from all the time you’ve spent on StackOverflow, et al., trying to find the best route out of ‘Media Query Tweak Hell’. And we haven’t even drawn straws for who is going to maintain all this?!

I’m sorry, and I sincerely apologize to the entire responsive web design industry and everyone who believes that media queries are the best thing to happen in web design since HTML + CSS, but I simply CANNOT take this any more. I’ve looked at media queries… I’ve really tried to like them with all my heart… and I have failed. I don’t mind being one of the few that’s going to revolt against this — terribly inefficient — ‘machine’. There just has to be a better, faster way to build responsive websites in a timely manner.

Meet Restive.js

The premise behind Restive.js is simple: Go Responsive with Less Code. It is a jQuery Plugin [or framework if you like] that helps you add responsive features to a website almost instantly. It does some behind-the-scenes heavy-lifting and smart DOM manipulation to give you more flexibility. It has quite a lot of features [that you can explore at your own time], but in the context of building Responsive websites, it enables you to define all of your Responsive CSS markup inline.

Installing it is simple and everything you need to both install and set it up for our specific circumstance is roughly 10 lines of code + markup total.

 <!-- Install jQuery version 1.7 or higher --> <script type="text/javascript" src="jquery.min.js"></script>       <!-- Install Restive.js --> <script type="text/javascript" src="restive.min.js"></script>       <!-- Configure Restive.js --> <script>     $( document ).ready(function() {         $('body').restive({             breakpoints: ['10000'],             classes: ['nb'],             turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_portrait=portrait,is_landscape=landscape'         });     }); </script> 

Restive.js has the basic format of most jQuery plugins. In the above code + markup, we have defined 3 options, ‘breakpoints’, ‘classes’, and ‘turbo_classes’ and I’ll just briefly explain what they do.

breakpoints and classes are the primary options in Restive.js. What they do is setup declared breakpoint ranges, and then apply classes to the given selector as the viewport width of the device on our website matches that specific range. So if we had defined breakpoints: [‘240’, ‘320’], and classes: [‘240-css’, ‘320-css’], the plugin would setup the breakpoint ranges of 0 to 240 pixels, and 241 to 320 pixels, and then it would add the class 240-css to the <body> tag (which is our selector) if the device viewport width fell between 0 and 240 pixels, and it would add 320-css if the viewport width was between 241 and 320 pixels. This is pretty much how these two options work hand-in-hand.

turbo_classes is a special feature of Restive.js that adds classes [in addition to those defined in the classes option] to our <body> tag when certain pre-defined conditions are met e.g. when the device is a mobile device, when the device is a tablet, etc. There are about 9 specific conditions in all. Right now, we’re using 5 because that’s all we need. So for example, is_landscape=landscape will tell the plugin to add the class landscape to the <body> tag if the device is in landscape orientation, and being that Restive.js is stateful, this class will also be removed if the device switches to portrait orientation.

In our particular circumstance, we do not need conventional breakpoints, as we are focused primarily on form-factors. Hence we will simply define breakpoints: [‘10000’], and classes: [‘nb’], to create a range from 0 to 10,000 pixels that will match all devices. Then we simply use turbo_classes to apply specific classes pertinent to our aspirations.

So since we have set all this up, and knowing that Restive.js will take care of all the required DOM manipulation, we simply add the following CSS rules to our existing markup

 /** Responsive CSS - Using Restive.js **/ .mobi section {width: 100%; padding: 0 10px;} .mobi.phone header #logo div {font-size: 320%; text-align: center; margin: 0 auto;} .mobi.tablet header #logo div {font-size: 360%; text-align: right;} .mobi.phone header #menu-container, .mobi.tablet.portrait header #menu-container {height: auto;} .mobi.phone header #menu nav ul, .mobi.tablet.portrait header #menu nav ul {height: auto;} .mobi header #menu nav ul li {float: none; width: auto; height: 40px; line-height: 40px; border-bottom: 1px dashed #444;} .mobi.tablet.landscape header #menu nav ul li {float: left; width: 20%; height: 60px; line-height: 60px;} .mobi #content #main{float: none; width: 100%;} .mobi.tablet.landscape #content #main{float: left; width: 65%;} .mobi #content #sidebar{display: none;} .mobi.tablet.landscape #content #sidebar{display: block; float: left; width: 33%; padding: 0 0 0 2%;} 

And that’s it! Simple, straightforward, intuitive, and inline markup that allows us easily and quickly implement our desired responsive features. If you want to target a CSS rule for all mobile devices, you simply prepend .mobi to the existing rule. If you want to do same, but only for phones in portrait orientation, you just prepend .mobi.phone.portrait. This approach enables you to implement virtually all the Responsive features you want at the speed of thought.

So how does Restive.js know what is a phone and what is a tablet?! Well, the plugin has advanced device-detection built right in. How accurate?! Well, I’d have to say 99% accurate because I haven’t tested it on all mobile devices known to man. However, I’ve tested it on all the mobile devices on BrowserStack, and virtually all of the contemporary devices on Nokia Device Lab e.g. Nokia Lumia and Asha Series, with 100% accuracy. And Restive.js will only get better with time as more updates are made to it.

The primary benefit of this approach is in testing. Unlike when working with media queries, you simply do not need to test on a plethora of mobile devices. All you need to do is use pick a popular phone [or emulator] e.g. iPhone 4 or Samsung Galaxy; and a tablet e.g. iPad 2, and that’s it. You don’t even need a real device, you can use an emulator like the one in Google Chrome (see below for more on responsive website testing). The only reason you would need to test on multiple devices is simply out of curiousity, not out of necessity.

Also, a key advantage of this approach is code/markup maintenance. The initial Javascript code we highlighted earlier that is required to setup Restive.js is literally ‘Set-and-Forget’; you never need to maintain it, unless you want to add additional turbo_classes items to the mix. For the CSS markup, anyone can maintain it, even if they didn’t actually write it; you don’t need to figure out what someone was trying to do, it’s pretty clear and straightforward.

Note: You can download the files used for this simple website example here. Also, you can go directly to the media queries example page via http://restive.io/testing/speckyboy/htbrwsf/media_queries/index.html, and the Restive.js example page via http://restive.io/testing/speckyboy/htbrwsf/restive/index.html

A Quick Note on Testing Responsive Websites

It has sort of become a tradition that if your website doesn’t adapt when you resize a desktop browser window then that automatically means that it isn’t responsive. I didn’t know it was such a big deal until we launched the Restive.js website and had a lot of folks chastising us for being a Responsive Plugin without actually having a responsive website. That would, of course, be incredibly ironic if it were true. I can only hazard a guess that these lovely people were being misled by this often used – but terribly inaccurate – responsive website check.

The best way to determine if a website is responsive is NOT by resizing your desktop browser, but by using a mobile device emulator. On the Restive blog, there is a post highlighting a better way to test responsive websites using the emulator approach. It’s more accurate, and is much more professional, so I kindly urge you to drop the ol’ Resizing Browser Window habit.

Restive.js Drawbacks

So Yes, Restive.js significantly simplifies your workflow, but this simplicity comes at a small cost that we will review here:

1. Restive.js is a jQuery Plugin so you’re going to have to load jQuery before you can use it. If your site wasn’t using jQuery already, this will be 2 additional HTTP requests. In terms of bytes, Restive.js adds about 21 kilobytes (Minified + GZipped). So adding the approximately 33 kilobytes (Minified + GZipped) of jQuery, this takes the total additional payload to about 55 kilobytes. Given that the average website is over 1.5 Mb in size, it’s a small percentage of the total payload, but it is still something.
2. Performance-wise, Restive.js is technically not as fast as media queries. However, the speeds we are talking about here are in milliseconds and will be discernible to only the most pedantic Cesium atomic clocks. In the simple tests I did for both pages using WebPageTest, the total ‘first view’ load time was 0.497 seconds for the media queries page, and 0.942 seconds for the Restive page; for ‘repeat view’ the results are much closer at 0.314 seconds and 0.375 seconds respectively. Restive.js is fast enough for you not to notice that it’s actually there.

Responsive Framework Comparison

Restive.js is not the first framework for helping you build responsive web designs faster, and I thank God for that because there’s no way this issue hasn’t fired anyone up to actually do something about it. There are currently a number of popular frameworks available today such as Bootstrap, Foundation, Skeleton, and others. All these platforms do different things and it would ultimately be up to the web designer to choose the best one for the job.

The major difference between these other responsive frameworks and Restive.js is that the latter does not use media queries – and as a result is immune to all of its incumbent challenges. Also, being that these frameworks sort of pigeonhole you into a specific design motif, it’s quite difficult to maintain the uniqueness of your web design, unless you’re willing to spend even more time customizing UI components and such. And yet another difference is the bloat some of these frameworks impose on you: Bootstrap alone levies about 120KB in CSS markup, which might be overkill if all you’re looking for is responsiveness.

Restive.js is targeted more at the purist web designer, someone who is quite comfortable building a full website with HTML and CSS (without the use of any all-in-one frameworks), but who just needs to get past the responsive implementation hurdle without breaking a sweat. Let’s not forget that there are still lots and lots of websites out there that are not responsive, and it is much faster to tweak them by adding the required responsive features using Restive.js than it is to do same using some of the aforementioned frameworks (and I will prove this in a subsequent article).

In Closing but Moving Forward

Designing websites for Desktop environments is a relatively routine task, and web designers have done what they can over the years to optimize their workflows to that standard. The introduction of the mobile web-enabled device has created significant disruptions to these workflows, not only because of the learning curve, but because the media queries approach is somewhat unwieldy and inefficient. Granted, certain skilled practitioners of media queries can accomplish much in less time, but for the majority this general inefficiency still persists.

Restive.js provides both a tool and a technique for building Responsive websites in far less time and with virtually no interference to long-established design workflows. Normalizing the responsive web design workflow for efficiency will go a long way in enabling the rapid creation of websites that work everywhere we want them to. Here’s to that happening sooner rather than later.

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

Today’s gallery features 25 minimally designed sites that have not only stripped away all non-essential elements, but have also successfully soaked up popular modern design trends, like over-sized typography and imagery, simple yet effective navigation systems, continuous scrolling, carefully selected interactive elements, and all use the latest responsive techniques.

And, as you would expect from minimal web design, focus is firmly put on the content.

Modern Minimal Web Design Gallery

Another Pony

Huge

Manuel Rueda

Bedow

Adam Andrascik

Electric Bodies

MmD

Reducing the Obvious

Jorge Riera

Design Co.Mission

Socialis

0

Jonathan da Costa

1

Intersection

2

Tim Brack

3

Hatch Inc

4

Trois Oiseaux

5

McChillin

6

Cory Gibbons

7

AYR

8

BKKR

9

Pieternel Vermoortel

0

Lexican

1

Arne Meister

2

Mike Kus

3

Brault & Barnes Design

4

NewVision

5

Sang Han

6

The Mobile Index

7

We have a fantastic giveaway for you guys this week. Courtesy of Inky Deals, you can win 1 of 5 New Colossal Bundles ($10,063 worth of top-quality design resources) by entering here.
And just for entering you will get a pack of 19 premium resources that is worth $66 completely free. This way, you can test the resources before you win them.

Read on to find out more about this giveaway…

About Inky Deals

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner. They’re the only deal company that offers a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product!

Because Inky (the lovable little ink blob) and his team enjoy giving back to the community, they’ve launched this unique giveaway where you can win 1 of 5 New Colossal Bundles: $10,063 worth of Top-Quality Resources – From $49. Take advantage of this opportunity to win a fresh, premium personal library of design resources for 2014!

Testimonials

What can you win?

You can grab a pack of 19 premium resources worth $66 for free, by merely entering this contest. The free pack is sent to the email address you use to participate in the competition and comes from the New Colossal Bundle: $10,063 worth of Top-Quality Resources – From $49. This way, you can test the products before you actually win them.

5 lucky winners will be chosen from the list of participants and will win a free copy of the New Colossal Bundle: $10,063 worth of Top-Quality Resources – From $49.

How to enter the giveaway:

To enter the giveaway, please click here: Inky Rafflecopter Giveaway

You can gain more entries by leaving a comment or sharing it with your friends.

Thank you for participating! You’re now part of Inky’s extended design family!

Sit tight, because you’ve just embarked alongside 300,000 of your peers on a journey that will lead you to great professional and personal development.

Andy Pipkin tells his poor duped friend Lou that he wants tickets to the opera for his birthday. Its an unusual request, as Andy has been seen to have a bit of a love affair with action movies most nights, but after a short debate Lou gives in. A lot of effort later and the show is starting. Its everything Andy asked for, Lou is a proud man, the anticipation of the audience rises for that very first line as the curtain drops and the actors move into place and then out of the silence comes a lone, carrying voice:

‘I DON’T like it’ – Andy Pipkin, An Opera Theatre, Somewhere in Britain

Sound familiar? Its your graphic design client. The one that won’t stop demanding you create the impossible 3D shape to their exact specifications and then decides that actually, they’ve discovered a neat little font called TrebuchetMS which they think will do the job better if you’d just use it.

The following tongue in cheek article is a guide of how to survive when your graphic design client is being Andy from Little Britain. And let’s be honest, in our eyes, they’re all Andies.

“Want that one!…*gets that one*…don’t like it.” – Andy Pipkin (Image Credit: Little Britain Wikia)

Step 1: Don’t Be Lou & Other Common Pitfalls

Like Lou, you’re probably an incredibly patient, kind, sociable person that only wants the best for those around them (ahem!). But consider for a second that Lou, beloved as he is, is an enabler, and there’s nothing worse than being an enabler when you’ve got an Andy on your soft, manual-labor repelling, designer’s hands (wink wink, I’ve won awards for mine)!

Let the Andy know you’re Awesome at this

Yes, I know, they’re being a massive baby.

You’ve tried explaining everything at its most simple, and without overcomplicating things, just like Lou does. You say things like ‘are you sure this is the route you want to take forward?’ and ‘I don’t think this is the optimum solution…’. Well here’s the difference between you and the timeless fictional character Lou Todd. Lou is not an expert in his field, you are.

The thing about the Andies is that despite all the obvious signs, they haven’t yet worked out that you know what you’re talking about. Time to tell them, ‘straight up’.

Ever heard a doctor say, ‘Well I was thinking a simple injection would do but if you’re sure you want it then we’ll do a triple bypass, what the hell, I need the practice!’? Nope! You are the doctor in this situation, you are the expert, they just need to realise that.

Be concise, be firm, set out the plan of action. Scrap out the parts of your e-mail which state ‘I believe’ and substitute it for ‘In my years experience’. Get rid of ‘maybe’ and put ‘definitely’. Be strong with your views. The type of person who changes their mind quickly, your Andy, is most likely rather easy to influence. Make sure your voice stands out above the crowd by using an authoritative tone even if its not in your nature – you know that you’re the professional, the best way to put it across is by taking the lead with your tone.

This strategy won’t win you every battle. It might not even win you the first one because Andy’s friend Gary’s son, who lives down the road from Andy is studying graphic design at A-level and he’s been told that a logo that blinks every 3 seconds is the way to go. Plus Andy’s local butcher agrees with Garys son so your stuffed, that’s two-to-one. Note: your Andy is a ‘Parrot’ and therefore needs social recognition (see previous website design with DISC ANALYSIS article for a more serious short explanation!).

Send in the celebrities

It seems everytime Andy asks for something new and ridiculous, Lou, the Enabler, tries to persuade Andy against it with his only weapon, logic. In normal situations, its a great tactic, but Andies don’t care for logic, they just wan’t to know what Bieber would do on his logo. (answers in the comments section)

Logic is usually my weapon of choice, and probably yours too. But in this situation logic is a blunted blade…that’s rusty…has no handle…and Lady Gaga dressed it this morning.

Here’s a better weapon – your other clients.

Without reading my previous article you’re just going to have to trust me on this one. Andies need social confirmation. Back up your points with socially commendable examples. Or ask them to name a few companies that they like, then discuss their logos. I can guarantee they won’t be flashing. Say something along the lines of ‘we should be aiming for the crisp and clear style that you see in the logos of the latest big brands. Iconic but simple, like Apple.’ follow any sentence with ‘like Apple’ and they’ll be putty in your hands.

– (For all you Andies out there: Send all your money to <insert business name> and get a great logo, like Apple’. Sorted.)

Step 2: Adapt & Conquer the Andies

Slow Down

The truth is you just wan’t to get this project done and out of the way so you don’t have to deal with your very own little Andy for even one more day. Plus your a designer, once you get a project and you like to get it done, properly, and then its on to the next project, right?

I get it, I really do, but counter-intuitive as it may sound, when you’ve got an Andy on your books its time to go as slow as possible. Take three times as long to start the graphic design project, take the normal amount of time to complete the work.

The reason is that Dave, the Saturday guy at Andy’s local Pet Store, thinks that ‘blinking’ logos are a thing of the past (yay Dave!), he’s told Andy to get a logo with moving parts instead (I hate you Dave). So two days after he puts the order in for a blinking logo, Andy sends you an email saying ‘want that one now’…*shows you a .gif file on an old Geocities website that Dave owns*. Point being that if you already started the job, or even finished it, this is going to be more frustrating that it needs to be. Give your Andy some time to change his mind before you even get started. Half the time, it’ll save you from certain psychological damage. The other half of the time it’ll give you a chance to find Dave and ask him for a pet with more than four legs that sleeps all day but has funny ears (we’re coming for you Dave).

Switch them onto an Hourly Contract

The fixed contract might benefit you usually. It might even be your pull to the client – get a logo with us at £X only. But the thing about Andies is that more often than not they know they’re an Andy. They probably apologise once every eye-burning email they send, tell you that they’re not ‘technologically gifted’ and that its going to be a ‘long process’.

Chances are, they’ve factored their own difficulties into the cost of the project, so don’t be afraid of stating the switch clearly to them, they’re expecting it. Charge at obvious intervals.

Once you’ve explained that you’ve moved them on to an hourly contract you can sit back and relax for a second. Your going to do this in your own time, will be paid amply for said time, and some of the odd things they wan’t will remind you of the last time you did them, back in the 90s, when all the best music was around…

Step 3: Accept them. You’re Gonna Hate Me but Andy is your Best Client

Or at least he/she will be if you follow the above advice. Unlike poor Lou, you’re getting paid to come up with the wrong design time after time after time. If you need the business and come at it with the right strategy, Andy is a cheeky little gold mine. And he’ll love you all the more for your assistance. Just don’t agree to go to the pub with Andy, or play at the same local Badminton club. Because next minute you’ll be looking after his/her old featherless Budgie and taking out anger management classes while he’s on a cruise to Hawaii. I don’t even like budgies.

Humorous alternatives to your Andy infestation

Alternatively, if you didn’t stumble upon this article until you already flew over the Cuckoo’s nest, fell, broke the nest and chose the life of a hermit instead, you can also try one of the following ‘after-the-event’ solutions.

1. Remove anything sharp from you coat pocket and go for a walk…to the Pacific Ocean.
2. Google Image search ‘Lionhead Rabbit’ and become Andy for 5 minutes. Believe me, you want all of them.
3. Write a blog about your experiences and shamelessly plug your little Cornish Website and Graphic Design Business.
4. Take all your anger out and Destroy your Spanish Computer. WARNING: any more than 150 clicks and you need to put yourself in isolation again.
5. Offer Work Experience to Gary’s A-level Graphic Design student and turn up to work as you normally would… in your onesie. Subsequently demand he has a onesie as it is integral for excellence in design.
6. Accidentally e-mail your Andy a copy of this blog post, addressed to your ‘significant other’ with the following caption ‘How was I supposed to know your boss was allergic I didn’t have time to read the note properly’.
7. Give online dating another try.
8. Give to charity! Ha! Real one!
9. Give up on the holy grail of online dating and settle for the 47yr old Cat-Lady who keeps following you when you put out the bins.
10. Write a list where people are expecting 10 things and only give them 9. Congratulate yourself on your own impenetrable sense of humour – you’re going to need it!

Yes, we do have yet another flat UI kit for you guys. And yes, we do love them! Today we have an impressive UI kit from Canadian graphic designer Johnny J. There are a total of 25 UI elements included in the kit including buttons, pagination, form elements, widgets, pricing tables, sliders, and much more. The download ZIP contains the easy to edit and resize vector PSDs. As always you are free to use to use this kit in both your commercial and personal work.

Free Flat User Interface Kit

Click the preview below to view the full-size screenshot.

Download & License

You can use this Flat User Interface Kit in both your personal and commercial and projects.

About the Designer

This Flat User Interface Kit has been designed by Canadian graphic designer Johnny J. He specializes in web and mobile user experience and user interface design. You can view his work on Behance or on Dribbble.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

Worth Reading

Sacha Greif wrote the ‘The Ultimate Design Article’.

Getty has made 35 million images available to bloggers for free.

Dirk Weber wrote about adaptive images that “react” and “behave” according to context.

1910 wrote about taking a typographic approach to email.

Joshua Gross wrote the short post Please stop using Twitter Bootstrap.

What We Mean When We Say “responsive”, by Lyza Danger Gardner.

Ilya Pukhalski on Rethinking Responsive SVG.

Laying out iOS UIs in code by Harlan Haskins.

Shilpi Choudhury wrote about the future of information dashboards.

Survey says that 11% of Americans think HTML is an STD.

New Resources & Freebies

Glyphr Studio – A free HTML5 based font editor.
0

MVCSS – a Sass-based CSS architecture for creating predictable a maintainable application style.
1

Cerberus – A few simple, but solid patterns for responsive HTML emails.
2

Sticker.js – A Javascript library that allows you to create a Sticker Effect.
3

Official Sass Toolkit for for RWD and progressive enhancement with Compass.
4

ScrollMagic – A jQuery plugin for magical scroll interactions.
5

jQuery.mmenu – A slick app sliding menus for your website.
6

Blue UI Kit (PSD).
7

…and finally…

Cinematics – An Illustrated Collection of Classic Films and Characters.

Despite being free of charge, the free responsive WordPress themes we have for you today all have a premium quality to them. All are responsive, so they will adapt to various screen sizes straight out-of-the-box. They have all been built with modern design trends in mind, so plenty of flat designs, large typography and parallax scrolling. All are jam-packed full of useful features and little extras that helps makes each theme that little bit more unique.

As always, the themes will work perfectly well for you as is, but the real fun is using them as a base for further development and customisation. Here they are:

DW Timeline (Timeline-style blogging theme)

DW Timeline Download Page

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

You may also like to browse the Web & Mobile Creativity Archives.

Are you looking for a quick and easy to edit platform to speed up your web design process? Well, you have come to right place. We have collected 30 fantastic pre-built responsive HTML templates that with just a little bit of creative tweaking will have your web design project live in no time. And the best thing is they are all FREE!

As you would expect, all of the templates have been professionally built, and as trends do change very quickly in web design, we have only selected those templates that have been designed with the latest and greatest trends, and those that use the latest in development techniques.

Please note that some (very few) of the templates will ask for your email to access the download link.

Tessellate

Tessellate is a clean single-page template.

Tessellate Download Page