Jump to content

.London Domains - £4

Highest Reputation Content

#14730 Copy Clinic #1: You are not your client

Posted by Notbanksys Copy Shoppe on 14 May 2013 - 22:22

Welcome to part 1 of my brand spanking new Copy Clinic series. These articles are aimed at you lot, with particular attention to the humble freelance web designer, but the techniques you'll learn will be invaluable whatever copy you need to write.


Ready? Go!


When it comes to web design, you lot are the mutts nuts, but I'm aware that there's a fair bit of uncertainty surrounding writing copy for your portfolio sites in particular. You may even think you're just not cut out to write anything.


But here you are, day after day, writing reams of really good stuff right here on this forum. I'm going to show you how to modify your skillz to help get more clicks on your HIRE ME buttons.


There are two really important things you can do to make your copy ten times better. Only two. Get them right, and your web copy will be transformed. I promise.


First up, you need to change your perspective. When you wrote your site, you probably thought you needed to write about your business? What you're good at, how you do things, and what you think is important in web design? So long as you carry on writing about yourself, you're going to risk alienating prospects. Why? Because they're not interested in reading about you!


Clients want to hear about themselves. You need to get inside their heads, and modify your message to suit their needs and expectations. Good news is, this is much easier than you think.


All you have to do is become your client.


A web design client generally wants the following:

  • A web designer who answers the phone when it rings, takes time to listen, and replies in a friendly, helpful way.
  • Someone who can steer their web project in an affordable and profitable direction.
  • Someone who can justify their design choices, and explain them clearly.
  • Someone who's not too proud to let the client stick their oar in (sorry clients)
  • Someone who knows how to get clicks goddamnit


Every time you write 'clean web design', 'html5', 'responsive techniques' and 'custom wordpress code', you risk your prospects thinking so what?. They don't need to know technicalities, they need to know there's a high chance of success when they work with you.


So give them what they want. Stylish, sexy design? Good. Quick loading times? Excellent. Easy to get hold of, and quick to act? Brilliant. A return on their investment? BINGO.


Compare this:

BS Web Designs offer affordable and clean web design that excels in every way, and is coded to industry standards



With this:

Take the stress out of success with a custom-built, high-performance website designed for maximum return on investment



You see what else I did? I gave it personality. You know, that thing you have when you talk to people, that you throw out of the window as soon as you write something down.


This is the second important thing you need to know.


Forget what they taught you in school, and write how you talk. Ok, if you're all innit tho blud, and fo' shizzle fam you might want to tart it up a bit, but as a rule, copy only works if it reads as though someone is speaking it.


It doesn't matter whether you're marketing to the top or the bottom end of the market. People buy from people. So relax, step into your prospects' shoes, and be yourself, and watch your inbox fill up!


And that's a wrap!


What do you want to learn about in article #2?

  • 18

#11397 Please read this topic before posting - Looking to Hire posting rules

Posted by MikeChipshop on 05 April 2013 - 10:20

Welcome to The Web Designer Forum (tWDF to our friends!).


We're pretty pleased you're looking to hire someone, it shows you've thought about your site and that you'd like it done properly by a professional. So if you read these few F.A.Q, you'll be well on your way to the website of your dreams!


  • All offers and discussions are to be carried out by Private Messaging or Email. No private discussions to be carried out on the thread except for those that relate directly to the job at hand, such as any question that have been asked that may be needed to facilitate the smooth running of the job.
  • As with any professional, we work for money and this means that you need to have a budget.
    Anyone who posts in the looking to hire section must have a budget designated for the project. This means letting us know what your budget is or be willing to accept quotes for the work to be carried out.
  • Have an idea of what it is you want doing in the first place. "I want a website" isn't a satisfactory statement. Think about what you want to achieve from the site, how many visitors you're expecting and the functionality you expect.
  • Have a time-frame in mind but be aware this will depend on what you want doing. "I want a whole site by 5PM" just isn't going to fly.
  • Be realistic with your goals. We hate nothing more than "I want the next Facebook". Although the next Facebook could be out there somewhere, the level of work and budget needed to carry out such a build are huge. Just remember this.
  • No partnership offers / pay when complete / equity in the company / free advertising exposure offers. This is not the place for discussing those.
  • No "Spec Work" - http://www.nospec.com/faq
  • tWDF holds no responsibility for any of the work that passes through this part of the board. We're just here to give people a place to find each other and that's it.
  • Unless otherwise stated by the thread starter, no cross country working. We'd always encourage anyone seeking someone to complete a job for them to find a professional from as close to them geographically as possible.
  • Please do not post here if you're from outside of Europe, The USA or Australasia. 
  • Tag your post with either "Permanent", "Contract" or "Freelance" and tick "Use first tag as prefix"


All topics created made in this board have to be approved by a Moderator before they become visible to the public. Duplicating or re-creating topics that are currently in the moderation queue will be considered spamming.



If any of the guidelines above are ignored then the thread may be deleted without warning.


Happy hunting!

  • 14

#27903 Website Redesign Competition

Posted by Renaissance-Design on 03 April 2014 - 13:30

No worries mate. We're just a start up with no income. The competition is mainly designed for uni students looking to make a bit of extra pocket money while gaining some experience working on a live site and gaining some exposure.

If you've been running for 18 months you're just calling yourself a startup because you think it sounds cool. Also, if you have no income after 18 months, it's time to give up.
Here's the contradiction in what you're saying: your website is at the centre of your business. In a sense, it is your business - yet here you are, trying to skimp on redesigning it by paying chump change. This isn't a competition, it's barely-disguised spec work. I've seen better "prizes" in cereal boxes.

Was not intended to offend anyone.

Well, you've fucking offended me. You've come onto our site as you probably have umpteen others, completely ignored the Looking to Hireboard and its posting rules (which clearly state that spec work is not allowed), picked a random board and spammed your cheap-arse exploitative "competition". Do you walk into other people's houses, shit on the coffee table and wipe your arse on the curtains? No. So mind your fucking manners online too.

We could delete this thread, but we're not going to. We're going to leave it here so the world can see what a chancer you are.

  • 12

#4298 Useful Resources

Posted by Renaissance-Design on 07 February 2013 - 15:31

Here's a few resources that might be useful to you, relating to handling the business side.
  • 11

#29262 Five things you can do today to at least double your conversions

Posted by Notbanksys Copy Shoppe on 11 June 2014 - 10:20

Did I just say double your conversions? Damn straight I did, and if you can't find 30 mins to follow these simple steps, you're quite frankly a mug.

I'm gonna keep this short and sweet cos I've got to write, design and build an entire new website today, and I've done nothing towards it so far...

This article is for all you pixel pushers out there who are good with the old corel draw or whatever, less so with the part of your website that actually sells. I'm talkin bout the words, dawg.

So, with no further ado...


Why does a hit record's songwriter earn so much more than its singer?


Five things you can do today to at least double your conversions!


Being a web designer is a little bit like being in a band. In the beginning it's really exciting. Getting all 'creative' is a lot of fun, and putting your work out there for everyone to admire is a thrill.


But after a while, you realise that your band sucks, because you never learned to play. Fast forward a few years of bedroom isolation and hairdresser avoidance, and you emerge a fledgling virtuoso. If Eddie Van Halen was a web designer, he'd be shitting his pants right about now.


All the local bands suddenly want you to play for them. It feels amazing. But once the excitement levels off, something dawns on you. Although your playing sounds good, your songs are terrible. If you'd spent all that time learning to compose rather than just play, you could be winning over huge audiences right now. Instead of playing to an audience of 7, including your mum and dad for the 3rd time this month.


In case you need this lazy metaphor explained to you, the song is your copy, your sales message. The part of your website that earns its keep. And a good song needs a good arrangement, which is where this article comes in.


So, here are 5 things you can do right now to massively increase your readership. Depending on its current state, this will easily double (or more) your conversion rate. If your bounce rate is high, expect to see it drop right off afterwards.


  1. Stop using tiny text. Just because you're under 25 and can read a number plate at 3000 metres without a telescope doesn't mean the rest of us are, or can. Nothing makes folks click away like not being able to read a site. Set your body text at a minimum of 16px. As screens get smaller and resolutions bigger, you may need to increase this.

  2. Improve your contrast. Did you know that 40% more people will read the same copy set in black on white vs white on black? It doesn't have to be black and white - just a light background and dark text, with lots of contrast will be fine.

  3. Long lines are tiring. This really is one of my pet hates, especially among web designers (no offence). Y'all just love your 24" iMacs too much. A website doesn't need to fill your screen, it needs to communicate effectively. Long lines of text are just plain hard to read. Keep your line lengths to around 75 characters and you'll see a jump in readership.

  4. It's a website, not a novel. So stop using massive blocks of text when you can easily break them up into short, readable paragraphs. The same goes for sentences. If you can average at about 12 words a sentence, your readership will skyrocket.

  5. Use a call to action, dawg! If I had a pound for every website I see without a call to action, I would be in the Carribean right now, and you'd be staring at a 404 error page. Do not be shy about asking readers to take action. They want and expect to be told. And the bigger the better. Use lots of contrast, and include a verb (and ideally a benefit) to really get those clicks flowing. For example "Double your conversions in 5 easy steps today"


Told you it was easy.


All you need to make it really sing is some top-notch copy. If you need help with that, give me a shout now (or anytime) at anthony [at] vividcopy.co.uk

  • 11

#10790 My work has been stolen!

Posted by jackdanieltracy on 30 March 2013 - 16:35

Not a problem mate. Just been going through the rest of his portfolio on peopleperhour, and it seems that most of what he has uploaded isn't actually his own work :')

  • 11

#30030 5 common design errors that will ruin your copy

Posted by Notbanksys Copy Shoppe on 01 July 2014 - 20:04

You know what amazes me? When people pay good money for great sales copy, and then ruin it with poor design and presentation.


What the flock is going on with that?


So, in case you're one of those pushers of pretty pixels who doesn't understand the importance of presentation when it comes to your sales message, here's a quick crib sheet.


And if you're a perpetrator of one of these heinous crimes against profitability, consider yourself duly reprimanded. Say 5 Hail Marys and read anything by David Ogilvy as penance.


Wait. You don't know who David Ogilvy is? You need to get hip, bro. He's the patron saint of using words and images to sell products and services. In other words advertising.


Yep - advertising. Because guess what? If you're a web designer, that's your job dude. If you don't know how to make people act, then you're doin' it wrong...


So without further ado or sanctimony, here are the 5 deadly sins of typographic design:


1. Hard-to-read type. For some reason, many web designers don't seem to consider readability when they set type. Maybe it's because they are too concerned with bevelling the shit out of everything in photoshop? Whatever. Here's the plain truth. Font choice matters. Leading matters. Contrast matters. Justification matters. And if you don't believe me, just visit any newspaper site and tell me what their typography has in common.


Alright then, I'll do it for you! Here's what you'll notice. Serif fonts - and lots of them! Why? Because, they're easier to read. With one exception (and no I'm not talking about Windows XP). You'll probably notice they use sans serif below a certain size, because serifs don't translate well on the screen if they're too small, and end up hindering reading.


You'll also notice plenty of leading (or line-spacing if you're only familiar with how CSS describes it), short line lengths, lots of contrast and left-justified text. I can't emphasise this point enough. If you want body text to be read, justify to the left column only.


2. Defiling the sacred left margin. You'd think this one would be obvious, but I see violations all the time. In an ideal world, your body copy should have its left margin on the left of your site. Because we read from left to right, so you want to put your copy where the visitor's eye lands, right? Ok, but even if there's a left column and then your body copy, there's one rule you must never break.

Do not interrupt the left margin. That means floating images and other 'break-out' content on the left. The only exception is bullet points, which readers are used to breaking a left margin slightly.


If you need to include a relevant picture, it's ok to place it against the left margin so long as you don't float text to the right. Make your picture wide enough to have a place of its own between paragraphs.


3. Wimpy headings. Your headings need contrast like you need money. They won't work without it. Not just black-on-white contrast. I'm talking contrast with the rest of your copy. Ideally, at least 50'% bigger than the body copy, in a bold/ slab/ high-impact face and with an accent colour maybe.


4. Claustrophobic copy. Words need space to breathe. Correct use of a grid is paramount if you want your copy to be read - and acted upon. Make sure there's plenty of padding around your text, so that it doesn't feel hemmed in. Peoples eyes jar against other elements that get too close, so the more space the better. A minimum of 1em should be observed at all times. Likewise, when padding between paragraphs I recommend 1em, although you may get away with .5em. Just. Don't tab indent paragraphs. It may look cute, but it's hard to read, okay?


5. Bloody interruptions! I don't care how creative you are - the only thing you're going to create by shoving random 'design' elements in among the copy is a lower conversion rate. If you've got some pretty pictures you want to use to decorate your site, do not put them in with the copy - unless - they directly support the copy. In which case, knock yourself out. Everything else is an invitation to stop reading. Which means fewer conversions. You know, the reason you created your website.


Now you're hip to that, all you have left to do is make sure you have some engaging and persuasive copy that's written to help you achieve your business goals.


If you need help with that, hit me up at tony [at] copyshoppe.co.uk

  • 10

#525 List Of Tools

Posted by Jason Dexter on 06 November 2012 - 11:48

Every man and his SEO team have released tools at some point but it's pretty difficult to decide which ones are the most useful.

Here's a list of online tools that I use:

Open Site Explorer - Great for getting rich and valuable information about a domain. They provide information about where the links are coming from, their anchor text, how diverse they are and a bunch of other cool stuff.

SEOGadget - A great way of quickly looking at backlinks pointing to a website and providing you with a quick overview of which links should be removed. It's great to get a good understanding of backlinks and what to look out for.

Serpfox - SEOMoz provides a great rank tracker, but I find serpfox to be so much easier to track rankings and they update daily so you get a more up to date feedback. They also check rankings of up to 500 places. Your site is useless down there but it helps to gain a greater understand of where you rank and if you actually rank. Easy to quickly look at how well a website is doing as well.

Ahrefs - Another backlink checking tool. However, this one claims to update their index every 30 minutes. They constantly crawl the internet and that explains why their premium accounts are pretty expensive but the free accounts are useful enough. They show when backlinks have dropped, when new ones have been added, where they're from etc etc. The interface isn't as great as OSE but it's a useful tool to have a quick insight into what's happening.

Linkstant- This a new addition to the tools and something I've just set up on my own blog. Much like Ahrefs in terms of speed of link discovery, this one actually sends you an email when new links are found pointing to your website. Completely free, easy t set up. It took me two minutes to get things running. You can actually have an SMS sent as soon as a new link is found pointing to your website. It might not be as deep and thorough as Ahrefs but it sure as hell keeps you motivated to get those links! Also, unlike Ahrefs, you don't run out of credits.

Link Detective - A great tool for anyone that is serious about beating competitors. Basically, download a CSV from Open Site Explorer and throw it into the system. It will then tell you the websites makeup of links; directory, sitewide, blog comments, forums and so on. It also tells you the anchor text percentage as well. So if your website has been hit by a penalty on Google, run it through this. Any anchor text, that isn't you brand or naked URL, that is over 20% needs fixing. Diversify your links! It also tells you which links are dead, too.

These two tools require you sign up to SEOMoz. You can take a free 30 day trial which can be cancelled at any time, so give them a try!

SEOMoz Keyword Difficulty - If you're looking into a keyword and need to decide how difficult it is, then this is a great tool. They provide a percentage of difficulty for the keyword along with visitor numbers for this keyword. This information is found within Adwords keyword tool, but it provides a much easier way of determining just how difficult a keyword is. It's also an excellent way of comparing keyword difficulty and it's easy to then delve even deeper and find out which websites rank for a particular keyword.

SEOMoz On-page SEO - SEOmoz provides a great tool here. Enter your keyword and web page you're looking to rank and it will give you a run down and a grade of how well the website is optimised. They tell you if you need to add more keywords into the document, whether the title tags need tweaking and so on.
  • 9

#30312 How to add images to your WordPress theme

Posted by MikeChipshop on 09 July 2014 - 10:37

This is the first in a series of basic WordPress theme techniques i'm going to be dropping on to this site.

Quite often i'm called in to do fixes on sites where the original developer was just lacking that little bit of knowledge and easy fixes are required. To this end, i'll be taking these as i get them and posting them up here.


So with out further ado....


How to add images to your WordPress theme


This one i actually come across a lot!

It's not that original developer was being lazy, cutting corners or really even realising they were doing anything wrong. It's just they've always learnt to link to images in the same way, from static site using either a relative or an absolute URL and they've not thought anything of continuing this trend.


To be clear, we're not talking about images intended for content here, those should be managed with the WordPress media uploader/manager, we're talking images used in the design element, consistent across the site.


Example of an absolute image path
<img src="http://yourdomain.co.uk/img/image.png">
Example of a relative image path
<img src="img/image.png">


Why wont this work?


In the case of absolute paths, what if the image folder location changes? What if the domain name changes? That's an instant break right there. Same goes for relative paths with the added grief that if you're visiting from a category, tag etc, that'll get stuck in to the path as well. So "http://yourdomain.co.uk/img/image.png" could quite easily become "http://yourdomain.co.uk/category/yourcategory/img/image.png". Strangely enough, this wont work.


Wouldn't it be nice if WordPress had an easy way to deal with this?


Just as well it does then eh?


This is where i introduce to the 'bloginfo' tag, specifically the 'stylesheet_directory" argument.


<?php bloginfo('stylesheet_directory'); ?>


'bloginfo' has a lot of arguments you can use to pull... well, information about the blog (or site in most cases).

'stylesheet_directory', as the name suggests, pulls the exact URL of the folder in which the current stylesheet resides. Which will be your current theme folder.


So let's say your theme is called 'awesome-theme' then 'bloginfo('stylesheet_directory');' would contain the url...




simply use the call in place of any image url's you'll be adding...


<img src="<?php bloginfo('stylesheet_directory'); ?>/img/image.png">


Which WordPress handily turns in to...




Things to note


The above example assumes you're using "img" as your image folder name, if not, continue to use what ever you were using.

Also... please god make sure your theme image folder is in your theme folder! I can't count the amount of times people have come to me with the image folder in the root or in wp-content. If the images are directly related to the theme, then they are to be kept within that folder!


I hope this helps in some way but if not, leave any questions in the thread and i'll do my best to update this post.


  • 9

#24032 Copy Clinic #3: Notbanksy's 5-minute guide to the perfect 'about me...

Posted by Notbanksys Copy Shoppe on 27 November 2013 - 13:18

Notbanksy's 5-minute guide to the perfect 'about me' page

Or why your about page is off-putting to potential customers and ruins your website


Writing a brilliant about page is far from easy, but learning the elements that make one up is a piece of cake, so discover here my 5 minute guide to the perfect about me page.


Get ready to see your current about page commit hare-kiri in shame, and learn these simple, fundamental techniques for engaging customers and building rapport:


  • Building a window instead of a wall gives clients the insight they're looking for

  • The picture that helps build trust

  • Telling a story puts prospects at ease

  • They're waiting for you to make an offer


Put simply, your 'about me' page isn't what you think it is. It's not there for you to tell the world about how you like to go train-spotting or whatever in your spare time, it's there because, (believe it or not) clients and prospects are interested to know you.


For freelancers, this is especially important. If you think they want to know how your clean designs and standards compliant solutions are the dogs teabags, then get to the back of the class and pay attention.


Who reads this crap anyway?

You feel more comfortable working with people you know, right? So don't be surprised to learn that anyone who is considering working with you is interested in your about page, because they want to know what you're like. What they actually want is to steal a glimpse of your humanity, because they need to know if they can trust you.


I'm gonna repeat that in case you weren't paying attention (at the back).


They need to know if they can trust you.


Which is why, when it comes to your about page, you should build a window, not a wall. (Yeah, OK, I nicked that from another page - but it's good, innit?) Meaning, don't graffiti the page with boastful claims about how you're passionate about great design, progressive enhancement, Columbian coffee and zzz....


Sorry, bored myself shitless for a minute.


They want to know what you're like to work with. I know - weird ain't it?! But it's only weird because you've been conditioned by the great British education and the illiteranet at large to write about your business as if you've just had a frontal lobotomy and still coming around from the general anaesthetic.


The truth is, you're not used to talking about yourself openly and honestly, especially where your business is concerned - but that's exactly what you need to do, while retaining a strong business focus. In other words, build a 'window.'


It's not an essay, it's a conversation

There's a common theme in all the copy clinic posts so far, so no prizes for anticipating this one. But your about page is not an essay. It's a part presentation, part conversation. But it's only gonna work if you come across as approachable, genuine, and honest.


So what sort of things should you say?


Well, to begin with, a gentle introduction into how you got started as a freelance web designer wouldn't hurt. But not in too much detail, and don't be boring! Just give prospects an overview of your background so they can quickly decide if you're worth reading more about.


For example, compare

"I studied computer systems for 6 years at MIT before deciding to become a web designer"


"During my gap year I started writing poetry, and decided to publish it online. Not trusting any of the blogging platforms with my work, I decided to design and build my own. I don't write poems any more because I'm too busy perfecting my open source CMS..."


The first one sounds like someone trying not to say "I failed my IT exams, so now I'm a web designer" while the second sounds like someone you'd trust to take a project seriously.


Get it? Not so hard, is it?


!Important: Be specific


If you feel it's important to demonstrate your value to prospects (which it absolutely is) then you need to make sure you're always specific; never vague. The difference is huge.



"All my work is built on an agile grid framework with multiple jQuery hooks to create a lean, clean, proper-fancy solution that local businesses go crazy for."


"When Bill from LocalCorps came to me, his bloated, ugly home page had a bounce rate of nearly 70%. Two months later, we had his page load time down to under a second, his bounce rate down to 25% and his conversions more than tripled. Now we're working on his social media strategy together..."


For some reason, you see a whole lot of the first kind of writing on about pages, and not a lot of the second. But I can GUARANTEE you that your prospects will take more notice of the second. Why? Because it gives them something they can understand in terms of a potential benefit to their business, and it proves that you're trustworthy (to Bill, and by extension to all your clients). The first kind of writing just comes across as boastful and boring.


I'll show you mine...

If you show me yours! Ok, get your mind out of the gutter - this is a serious point I'm trying to make here. The point being, wherever possible, use visual and emotive language.


The better you are at describing actual, tangible things, or feelings, the more likely you are to land yourself a new prospect. Which is why taking a case study of a particularly successful job is such a good way to go. You get to say just how thrilled Bill from LocalCorps was with his fast-loading new website and tripled conversion rate. Prospects will naturally put themselves in Bill's shoes, and imagine that working with you is going to be not only good for business, but pleasant.


What's the best way to make room for emotive and visual language in your about page? Tell a story. It doesn't have to be a novel and it doesn't have to be a beginning-middle-end story. The paragraph about Bill is a story. It's about people, and what happens to them. And people like to read about things they can relate to. Like people. And things happening to them. Capiche? Good.


Launch a thousand ships with your boat

Do you want to learn a trick that will make your competitors laugh at you while you steal all their prospects? Thought so!


All you've got to do is put a picture of your boat* on your about page. (*in cockney rhyming slang: boat race = face).


I can hear y'all complaining already: But !b, I'm not good-looking like you. Who wants to see my hideous mug on a webpage? Shut up already!


Because actually, you're wrong. Obviously, make an effort for the photo, and wipe the tomato sauce off your chin before the shutter closes. But it's a clever psychological trick. When clients see your face, they see that you're not Brad Pitt (or some snot-nosed Hollywood upstart). They see you're just an average guy or gal who feels a bit awkward in front of the camera, and they're gonna empathise. They're gonna say to themselves: this person is like me. Cha-ching!


Before you go

So you've done everything I've taught you? Great. But there's one more thing. And if you don't use this, you've sort of wasted all that effort. Sort of.


If you don't tie your about page in to your offer in some way, you're a mug. Because it's the perfect place to ask for their business. And it doesn't make you look desperate or smarmy. It makes you look smart and proactive. Like someone they'd want to work with...


Finally, a great example of a well-written about page: http://mailchimp.com/about/ for pretty much all the reasons given above. And because there's a monkey!


Post your questions in the thread and I'll answer them!


And if you're just too damn busy to write your about page yourself, give me a shout at anthony [at] vividcopy.co.uk

  • 9

#34313 October site of the month

Posted by CraigP on 03 November 2014 - 14:34

I can't help but feel that the reason I have no votes by others is that people have taken a disliking to me on this forum. Come on guys, this isn't a popularity contest!

This is a ridiculous thing to say.. I have entered many sites with no votes... 


Wait a minute...

  • 8

#30424 Vertically align (just about) anything with 6 lines of CSS

Posted by rob on 13 July 2014 - 15:13

I stumbled across a couple of different versions of this and kind of collated them into one that seems to work across most browsers. Use it as you wish. It could have been done in just three lines, but the three lines in the parent element stop some funky blur happening in IE when the main element is on a half pixel point.

.my-parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

.my-item-to-vertically-centre {
  position: relative;
  top: 50%;
  transform: translateY(-50%);

Granted, for some browsers you will need to add vendor prefixes, but all in all, it's really solid code.


Source of inspiration from Css Tricks and a couple of other sites I found with similar code that seemed to be a bit fudged. This is as clean as I can get it.

  • 8

#28518 Just another night in irc

Posted by Jheg on 06 May 2014 - 21:27


<notbanski> brb - moving downstairs

* notbanski (~anthony@ has left
<jheg> hands up who just had the disturbing thought of Mr !b going down on his missus
<jheg> no me neither
* notbanksy (~tone@ has joined
<jheg> welcome back how is it down there?
<notbanksy> a little light rain
<notbanksy> how's you sir?


  • 8

#27886 Just launched my new portfolio/personal site! now gathering thoughts

Posted by isaacpvl on 02 April 2014 - 22:47

You can check it out here.


I guess the biggest thing this time around for me was doing really original things that show personal flair and style. I'm aware I come on really strong, and with a lot of people that's not a good thing, but hey, I'm choosing to go for it.


Would love to hear what anyone thinks (critiques included)

  • 8

#21950 Ryan's 4 Step process to getting shit done, or: "Seriously, I will fi...

Posted by Ryan McFadyen on 23 September 2013 - 16:00

If you've been in this industry for any length of time you probably have a side project or two. I think it's nigh on impossible to dip your toe into many different peoples little passion projects all the time and not come away with a surging urge to make your own dent in the world. They may be sitting on a sub domain somewhere half finished, they might be trickling in a few pennies every month or they might solely exist in your head.. but they are there, I'm certain of it. 


A couple of weeks ago I found myself in an odd situation. There I was doing bits and pieces for a side project and I was distracted by another side project. This didn't seem right. Of all the reasonable and respectable things I could be distracted by (like Monster Trucks or /r/EarthPorn) my mind chose this rare slice of 'my project time' to forget about actually making progress and instead just think up more stuff I'll never actually get around to doing.


So naturally rather than doing either I stopped what I was doing and just thought about all of my side projects. Just how much crap have I started but never actually pushed to the point of noticeable effect? Seven. Seven bloody side projects, seven china plates on sticks spinning extremely slowly with nobody watching. Seven domain names that just result in blank white pages.


Now I'm not a disorganised guy, I keep my bank statements in a ring binder and not on the floor (like I used to.. ) so how did it get to the point where I had seven things I barely remember starting but actually would quite like to bring into the world? 


Simple. It turns out there is a vast world of difference between organising your work load as a web designer/freelancer and organising separate projects. As a designer/developer/whatever-you-might-be you have maybe 3, 4, 5-ish projects on the go at once. It's a lot but ultimately you are doing more or less the same thing on each of them. You are doing your job, you don't need to worry about the entire business concept and every aspect of it from start to finish.


So with my seven projects I set about organising it all and now I'm going to tell you what I learned because so far.. I think it's worked.



Step 1) Remember the original idea.


It's only natural that over time ideas evolve, nobody would ever create anything good if we didn't tweak as we went but you have to keep in mind with side projects that you are not only just one person but a person who primarily does something else with their time.


Scope creep essentially and the more you let it happen the further away your project will be from becoming reality. This will dishearten you, progress slows and your mind wanders to another idea. Rinse, repeat.. until you die having never accomplished anything.


To combat it sit and have a think about the original idea. What was it that made you create the folder or register the domain? Something extremely simple was enough to give you the inspiration to make it happen so don't lose that. Write it down on a piece of paper and stick it to the wall. "Facebook for dogs!".


I now have 7 pieces of paper on my wall above my monitor, they are just simple overviews of what each project should do.. a list of things that I want that project to accomplish. It's a reminder to halt the scope creep, to stop getting ahead of yourself and just accomplish what you originally wanted to accomplish. Never mind what you think the world expects of the project, just do what you set out to do.


Step 2 ) Separation of church and state (or day-you and project-you)


Your mind is powerful.. but not in the ways you think it is. You assume that if you just import your project emails into your main email account and label appropriately it will be easier to manage, or, If you just throw the project files into the same directory you keep client files you can work on it at the same pace you would client work.


You can't. It's just not the same.


The more separation the better, you need to take yourself away from your work environment and isolate the project. When working on it you should feel different, you should feel like it's new and that will make it feel exciting. 


I created a user profile on my computer for each project. When I want to work on one I have to log out of my usual profile and log in to one that has a different background, doesn't automatically open up my email and twitter, doesn't know my reddit password, doesn't even have the same browsers installed. 


Maybe go even further, deliberately use applications/websites you don't normally use. If you usually have twitter open in the background why not instead create a pinterest account and do that? The goal is to put yourself in a mental state that's new and different from the day to day. You should feel a little lost and since you probably can't shake up your physical environment too much you do it in your virtual environment. 


Step 3 ) Write todo lists like a five year old.


Everyone knows todo lists help, it's not a secret but I think a problem a lot of people run into is they decide they are going to get organised, get stuff done and put together a to do list like this ;

  • Open code editor

  • Write social network for dogs

  • Market social network for dogs (not to dogs!)

  • Sleep

That's no good. You need to write todos like a five your old, break everything down into stupidly simple parts. Aim for tasks that take no longer than 10 minutes to complete. "Call to action button should have paw icon"


The more often you are ticking things off that list the more progress you feel you are making. It's a simple psychological trick but it's an effective one. You can use paper if you really want a physical confirmation of your work but I'm good with something like Wunderlist


Step 4 ) Tell people


Any side project that actually comes into existence has at some point spent a very long time in the company of just one person, its creator, and sometimes that creator will find motivation a very hard thing to come by.


The easiest way to get motivation in those moments is to tell people what you are doing. Create expectations for yourself. Give yourself a bit of social pressure to get the thing out there. Don't worry about it being embarrassing if you never manage it.. just telling people where you are at and showing them what you have puts you 95% further than most people will ever get.


For example, why not write a 4 step tutorial on your forum about how to get shit done, maybe end it by promising that within two weeks of posting you'll show everyone that you have actually finished one of your seven sodding side projects. Not a beta, not a quick peek.. but actually produced something that bloody well works.


Now go get shit done you bunch of layabout dreamers.

  • 8

#32015 Smooth scrolling...

Posted by notxalckram on 22 August 2014 - 12:30

Got it working using this:

  $(function() {
  $('a').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(0) +']');
      if (target.length) {
          scrollTop: target.offset().top - 15
        }, 1000);
        return false;

Just incase anyone wanted to know.

  • 7

#29996 jquery select show hide divs

Posted by DigitalSquid on 30 June 2014 - 20:06

Here's how I'd probably do it


// A shorter version of "$(document).ready(function() {"
$(function() {
	var area; // Since we'll be using the same selector more than once, it's better to declare a variable so we can store it and use it later instead of re-selecting the same content
	$('#myselectid').change(function() {
		area = '.' + $(this).val(); // Convert the selected option value into a class so we can use it as a selector
		$(area).show(); // Show the selected one
		$('p').not(area).hide(); // Hide all the others that don't match the selected option

	$('#myselectid').change(); // Trigger a change event on the select so it hides the non-selected option when the page loads

Thrown some comments in there to help you understand what things do and why you should use them

  • 7

#22481 Quoting

Posted by Gibson on 05 October 2013 - 16:38

Man - I still find this difficult. Perhaps one of the most difficult aspects of freelancing.


I keep thinking I know how long something's gonna take, and then halfway through you encounter "gotchas" of the most hidden kind and it takes you just as long to sort them out as it did to make the page.


And they're always the kind of gotcha that wouldn't make itself apparent until you're halfway through the job. You know the kind of thing.


It's a kind of catch 22.


I'm not talking contracts or documents, rather than just quotes here. It's true what they say, you MUST add 25% or whatever on to cover these eventualities. If I find the job goes particularly smoothly and I'm well under budget, I like to give a little back to the client. Nothing pleases them more than getting loose change from their expected expenses, and it shows honesty.


Also, I know this seems obvious but




I've been caught out like this a few times - you know the client saying to you "There are a couple more pages to come, but they're very simple, shouldn't take you long - can you quote for them?".


Don't. Insist on holding out until you have the entire thing in front of you.


When the client says they're simple - they're not. How does the client know they're simple? If they knew that much about coding, they wouldn't have hired you in the first place.


When the client says "There's a few more" - they mean there's 10 more.


When the client says "Shouldn't take you long" - now this is one of my pet hates. How the fuck do they know how long it should take? Guess what - it is going to take a long time. Have you noticed this? Seems to be a favourite catchprase of people trying to get stuff cheap.




Make it very clear that the quote is for what's been submitted. Anything outside of that is obviously going to cost extra. When you start getting the old catchphrase halfway through a project of "Just one little thing....." - be careful. Get a written down scope.


Only reason I'm writing this is more for the noobs really - I don't want to see you exhausted and demoralised which is what you will get if you don't follow these rules. I know that you more expericend guys obviously know all this already.


To sum up -


ADD 25% / 30% / 50% whatever. You can always give change back at the end if you're that kind of person (I am, for my sins, it's a reputation thing).






Hold your ground. Clients will get arsey with you for trying to stick to these rules, but a moment's uncomfortable confrontation is well worth it if it prevents 20 extra hours of unpaid work down the line.


Obvious stuff, there are many articles on the net about this, but just thought I'd put my two pence worth in

  • 7

#17874 Re-Learning native JavaScript: Part 1 (Selectors)

Posted by Jock on 29 June 2013 - 11:41



Everybody knows jQuery is the #1 most used JavaScript library on the planet right now, its difficult to find a modern webpage that doesn't use jQuery somewhere. While jQuery makes it much faster to write code, it also makes it much slower to run on the users browser. I love jQuery but I do find its overused where it shouldn't be. In this small tutorial I'm going to show you some of the native alternatives of jQuery and how you can use them to accelerate your websites performance. Its not indented to take the p**s out of jQuery but I just want to highlight the performance gains you can make in your web applications by using native functions.



This is going to be a multi-part tutorial, in this first tutorial we will concentrate on the most basic javascript function - selecting DOM Elements for manipulation. We will cover selecting by ID, class, tag and demonstrate advanced selectors.


Demo HTML code:

<!DOCTYPE html>
        <title>Selector demo</title>
        <ul id="list">
            <li>List item 1</li>
            <li class="active">List item 2</li>
            <li>List item 3</li>
            <li>List item 4</li>
            <li>List item 5</li>
            <li class="node-break">List item 6</li>
            <li class="node-break">List item 7</li>                      
            <li>List item 8</li>
            <li>List item 9</li>      
                <a href="http://www.google.co.uk" title="Google" id="google-link">Google</a>

Selecting by ID

In jQuery this would be as simple as $('#my-element'); However you can also use the native getElementById function to select that element.

var google = $('#google-link');
var google = document.getElementById('google-link');


As you can see from our jsperf test case, Firefox was able to perform this function over 4 million times whereas jQuery only managed to perform it just over 50,000 times.


Selecting by class

We can also select elements by class name, again its very easy to do this in jQuery - $('.my-class'); Alternatively we can use the native getElementsByClassName function, which will return an HTML Collection object which is populated with elements matching that class name.

var node-links = $('.node-link');
var node-links = document.getElementsByClassName('google-link');


Again, its much faster to use the native functions for this particular task. jQuery was about 99% slower than the native Firefox function.


Selecting by element tag

So you want to get all of the anchor tags? In its easy in jQuery, $('a'), however with just a few more characters you can reap massive performance gains by using document.getElementsByTagName

var list-items = $('li');
var list-items = document.getElementByTagName('li');

I'm not going to write jsperf test cases anymore... you probably get the picture - native is faster.


Selecting by anything!

One my favourite features in jQuery has to be the ability to select DOM elements by CSS selectors and CSS pseudo-elements, for example $('li:last-child'). Its possible to do this natively using the querySelector & querySelectorAll functions. QuerySelector will return an node and querySelectorAll will return a Nodelist.

document.querySelector('ul li:last-child');
document.querySelector('ul#list li:last-child');
var odd = document.querySelectorAll('li:nth-child(odd)');
var even = document.querySelectorAll('li:nth-child(even)');

Again the performance of the native querySelector is much faster than jQuery. I've not written test cases here either, there are plenty already on google.


*Some important notes on querySelector & querySelectorAll - its only supported by modern browsers so you should consult canIuse.com to check that it matches your browser support SLA. Its also worth pointing out that IE8 is limited to its own CSS2.1 selectors.


That's all for this tutorial... Now you know about native slectors please use them whenever possible, your users will thank you!.

If you have any comments, questions or suggestions for more tutorials then please post them below or send me a private message. Thank you!

  • 7

#1194 Savings 'App'

Posted by Ryan McFadyen on 15 December 2012 - 18:47

User systems are all about putting known information (username) together with given information (password) and running it through the same process you did when they signed up, checking the results match.

When a user registers you need 3 pieces of information, minimum.

Username : Joey
Password : mycatsteve
Salt : A1B2C3D4E5

The username and password the user obviously provides, the salt is something you create. A good way of doing is to generate a unique one when the user is registering. So when they hit the 'Sign up' button you generate A1B2C3D4E5 and check it isn't already in use.

When they hit save you do the following ;

1.) Clean their inputs. Lowercase usernames, remove punctuation, remove spaces, don't allow brackets etc. Don't place any public restrictions on passwords. Don't say they can't have numbers, don't say they need to be between 4-8 characters, don't say they need one upper and one lowercase letter. All you are doing is increasing requests for password resets and speeding up the time it takes to dictionary attack you by telling them the words it can't be.

2.) Put together the known data into a single string. joeymycatsteveA1B2C3D4E5 and hash it. SHA256 is considered good enough just now but obviously won't last forever. This will get you a 64character string.

3.) Store the username, the salt and the 64-character string in the database.

4.) Every time someone logs in you essentially repeat these steps, except instead of storing the data you compare the 64-character string you generate to the one you have stored. If they match the username + password + salt combination must be exactly as it was the day they registered.


Keeping people logged in works in much the same way, except you use changeable information. Take their IP, their user agent*. Add that together with their username and again hash it. Then store the 64-character string and their username in session. On every page that requires them to be logged in go through the calculation and compare. If the strings match, show them the content. If they don't then IP/User Agent has changed. Boot them out.

For extra security incorporate their password hash into their session hash, which would have the effect of logging users out if their password is changed. It's a trade off though, the more information you put into your secret-sauce hash the more database searches you have to do, the slower the site gets and you might find the site being overly sensitive to change and logging people out constantly.
  • 7