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

#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

#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.
  • 10

#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

#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

  • 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

#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

#39548 Is web design/development dying?

Posted by DigitalSquid on 24 January 2016 - 23:08

Welcome back!


Saying that GoDaddy (and other dodgy webhosts) are dominating the web industry, is comparable to McDonald's in the food industry.


Yes, it's popular. People will flock there and sing it's praises because it suits their needs - it's quick, it's cheap, it's easy and it's reliable. You can waltz in there pick a meal that suits your tastes off the fixed menu, eat it and then put the wrapper in the bin. No time wasted preparing, cooking or washing up; someone else does that for you. You know exactly what you're going to get, just like all the other people around you doing exactly the same thing.


However, not everyone wants to eat that way. Other people what different cuisines, more personal service, fancier food, selections of deserts, better ambiance, etc... No matter how much McDonald's wanted to, they'd never be able to break that market. It simply doesn't suit their business model and they don't have the infrastructure to support it. Not that they care though, they know they couldn't do it and they're perfectly happy with the success they're having with quick and easy dining. That's what GoDaddy are doing in the industry.


So is there a future? Hell yeah! The web industry is still one of the fastest growing. It's true that the web building services like GoDaddy or Wix do make up a huge portion of the market share for small business and personal sites but there are so many other facets of it that they can't touch. How many large businesses, eCommerce sites, game developers, app developers, API services, SEO, UX/UI designers, media/content streaming, data security/encryption and web accessibility services do you think would choose to use GoDaddy services over a specialised development company?


If anything, I'm grateful for the likes of GoDaddy and their budget services, as they're soaking up the "budget" customers that I hate dealing with. It lets people like me focus on doing more interesting, personalised and custom development for clients that want a reliable non-budget service instead of a disappointing Happy Meal that looks nothing like the picture advertising it.

  • 7