Hi, I’m Harry Roberts – a 17 year old web developer from the UK. I specialise in standards compliant, accessible and usable front-end development.

This article offers in no particular order the simplest yet often most effective tips for beginning life as an ‘accessible developer’. This list is by no means the be-all-and-end-all of building accessible sites – it is more of a starting point.

1) Web Standards

Probably the most obvious aspect of accessible web development is adherence to web standards. This means using CSS to separate content and style, tableless layouts and semantic markup. All these features provide a solid starting ground for crafting accessible sites.

By using external stylesheets to style a page’s elements users can disable CSS and be left with nothing but the content – arguably the most important part of any site. This coupled with not using tables for layout means a page can be brought down from a heavily styled document, to its bare bones text.

2) Validation and DOCTYPE

There is an age old debate as to whether validation is that important. In my eyes, and in the eyes of many other developers worldwide, it is. Valid markup means pages are rendered in standards mode, invalid markup means browsers try and interpret and render code themselves, in quirks mode. This can lead to undesirable results and simple errors such as an unclosed tag can have a domino effect on subsequent elements.

The correct DOCTYPE will instantly tell a browser how to render a document. It is a good idea to validate your xHTML documents in the 1.0 Strict DOCTYPE, or if that isn’t possible for whatever reason, 1.0 Transitional as a last resort.

3) Images

Images are a fundamental part of web development; however they can and should be used sparingly if a more accessible method can be put into practice. A great example is web text, where the font choices are limited and some developers are required to use an image of custom text, do not insert it as an <img /> element. Instead use image replacement. By far the most accessible means of image replacement is the Gilder-Levin method. This solution remains accessible when styles and images are disabled either independently of each other, or at the same time.

Another thing to look out for when using images for content backgrounds is to ensure that text is still readable when images are turned off. Always try and specify a background colour when applying a background image through CSS.

4) Printed Documents

Some users are required to print web pages for a number of reasons – this may be simply to read content offline, or because they need to through having a handicap or disability. One thing to realise when reading printed web pages is that links are (obviously) useless, and as such users can’t see where they point. A printed page can’t have its links followed out or the hrefs read/seen.

Bearing this in mind, any printed web page is taken out of ‘link context’ as soon as its interactivity is lost. A great CSS trick to alleviate this problem is the nifty :after pseudo-class:

a:link:after, a:visited:after{
content:"(" attr(href) ")";
}

By putting the above in a print specific stylesheet, the href attribute of any links are inserted after the <a> tag of any hyperlink. This means users reading printed sheets can see where links point.

In the same respect, <abbr> elements are useless to users reading printed documents as they actively require a mouse hover to display the abbreviation’s title tag, so by adding the following to your print stylesheet you can show users reading printed pages what abbreviations stand for:

abbr:after{
content:" ("attr(title)") ";
}

I put both of the above into use on my CSS Wizardry links page.

5) target=”_blank-faced”

First off I must admit that I myself have only recently stopped using the target=”_blank” attribute in my markup. This is for two reasons; a) it doesn’t validate under the Strict DTD and b) it is by all accounts an inaccessible practice. The reasoning behind this is that opening new tabs, or heaven forbid, new windows (yes IE6, I’m looking at you) disrupts the users flow, and also creates a ‘fresh’ back button. Less savvy users are suddenly confronted with a new window and no obvious means of returning the where they came from. This can be both confusing and frustrating.

I can understand why developers still advocate the use of target=”_blank”, after all, you don’t want users navigating away from your site when you could just set them up browsing an external link in a new window, leaving their session on your site still active. That is very true, but I look at it like this: if your site is worth them returning to they will hit the back button until they get back, if they don’t think it’s worth returning to – your fault!

6) Tables

Ok, hands up who didn’t see that coming. Those with their hands raised please leave now. Tables are the hottest of hot potatoes when it comes to accessible development. The cardinal rule is never use tables for layout purposes because this is one of the most inaccessible practices to have made it through from the nineties.

First off, tables for layout mean bulky code. Why nest dozens of <td> elements when a little semantic <div> work will work wonders. Properly implemented xHTML and CSS means semantic pages, which generally load quicker, contain less superfluous markup (which in turn reaps SEO benefits), and code which is infinitely easier to understand by both humans and screen readers alike.

Secondly, tables maintain their structural integrity when styles are turned off, so the page isn’t as easy to read when CSS is disabled. In terms of styling, a page created using semantic xHTML and CSS with styles on should generally be regarded as ‘all’, the same page with styles turned off should generally be regarded as ‘nothing’. A page built using tables for layout with styles off occupies the awkward middle ground between all and nothing – which is of extremely little use to anyone.

That said, tables are perfect for tabular data of all things. Who would have thought?! Do not rule out tables for displaying data such as a table of results, or a table of prices. A lot of developers try and create tables for displaying data by using lists and other CSS tricks. This completely defeats the object of CSS and xHTML – a CSS table is not semantic, and when styles are disabled they break shockingly. Buy CSS Mastery and learn how to code semantic, accessible and standards compliant data tables.

7) Flash

Once again, this was a dead cert in this list. Flash is a fantastic tool in the web developers’ arsenal. It is however inherently inaccessible when misused. As a general rule sites should not be made in 100% Flash. If they need to be, a HTML equivalent should be provided (adhering to the rest of this list, naturally).

Flash as a ‘bells and whistles’ addition should also be carefully considered when developing web pages. You need to consider the importance of the Flash in context of the document, and then decide whether or not an alternative should be provided. For example, a Flash banner ad need not have an accessible equivalent provided as it’s often of very little relevance to the content the user is after.

Headings

The heading tags are nothing short of a Godsend for developers wanting to craft accessible, semantic and meaningful documents. If you create an unstyled web page containing all the heading from <h1> through to <h6> in numerical order you will immediately see how a hierarchy is formed. Use the heading tags to apply a visual structure to your pages makes it easier to scan and ultimately more usable.

<h1> headings carry more weight than a <h4> heading, so bear this in mind when applying semantic emphasis to parts of web pages. For example, the <h1> should define the main title of the page and should be used once. <h2> tags obviously carry the next weight and can be used more than once, but not too much, perhaps defining sub categories of articles. Next is the <h3> which can be used more still right through to the <h6> tag. It is unlikely you will ever really get to the <h6> tag, but knowledge of the heading tags uses allows you to know when/where to use it.

9) The em based layout

A great way of adding to the usability and flexibility of a web page is to style it in a relative size such as ems. The nature of ems and their relative sizing mean that they resize flawlessly. Defining a <div> width in pixels give it a fixed width, styling the same <div> in ems allows the <div> itself to be zoomed.

Typically an em is defined as the width of the letter ‘m’ at any given type size. As most browsers’ default text size is 16px, one em is also 16px, thus 2em is 32px. This is not the simplest number to work with, so to convert one em to 10px instead of 16px apply the following CSS:

html{
font-size:16px; /* To make sure the default font size is 16px */
}

body{
font-size:62.5%; /* 62.5% of 16 = 10 */
}
div#wrapper{
width:90em; /* This equals 900px */
}

However, if you have a <h1> with a font-size of 2em and child element will be twice as big if you specify a new size in em:

h1{
font-size:2em; /* Equals 20px */
}

h1 strong{
font-size:2em; /* This equals 40px because it is 2 times the size of the parent */
}

Holding ctrl and scrolling the mouse wheel will now zoom not just fonts, but anything styled in ems – whether it be a <div>, <ul>, padding, margins and borders!

10) JavaScript

JavaScript is a fantastic way of adding further interactivity to web pages, whether it be flyout/drop-down menus, animated content such as accordions or slideshows/lightboxes.

What you must bear in mind however is whether or not the page/element will function without JavaScript – graceful degradation. The most critical of these are flyout menus or any JavaScript enhanced navigation. Navigation is undeniably the backbone of any website and if your navigation will not work without JavaScript then neither will your site. Make sure that anything reliant on JavaScript for aesthetics will still be usable (even if it is ugly) with JavaScript disabled.

There you have it – The Top Ten Tips for getting your accessible web development under way.

A strong portfolio is essential in order to become a success in the web development business. Fact.

Your portfolio is a client/companies first impression of you, your sales pitch. Fact.

Your probably havent thought thoroughly about exactly what makes up your portfolio and the impression it gives an audience…..Fact.

Its a common mistake amongst developers and designers to overlook the impression a website design and its content gives on an audience. On any site, you can often find elements which arent as thought out as they could have been – yet you overlook them; they are insignificant. On a portfolio however, these mistakes could be costing you clients and money.

Dressing your site up with all manner of features, fronting a crazy design and slapping your work in the middle of it all is extremely common. As its been said a thousand times – simplicity is the key. Why not strive for something better, something as good as this from ElectricPulp…

Design:

This is the ulimate first impression. The page loads and your potential clients instantly draw a subconsious conclusion about you. A design loaded with effects, filters and gradients might look fabulous but does it really fit the purpose? Have you just shown a potential employer, that yes you can design – but you cant design to fit a purpose. Suddenly you can see your photoshop magic may well be working against you.

A portfolio should be simple, easy to navigate, let the content speak for itself – whilst maintaining a little “wow” factor, a sparkle of inspiration. If you’ve got tons of effects on your page they often get mixed together and go un-noticed. Restricting yourself to maybe one or two effects will make them stand out against a plainer backdrop. This will show a potential user, yes you can stick to task and yes you can get creative.

However obvious it may seem – keep the navigation simple and extremely visable. These 2 examples use color contrasts to stand out.

So how could you limit yourself? Heres a few ideas…

• Javascript slide bar.
• A lightbox plugin.
• Use colour contrasts to guide the user around the page.
• A few images (that you have taken) – this underlines your creative mind.

Just sit down and think “keep it simple – keep it special“.

To summarise, the motto to design your portfolio from should be “functional first“. It should never leave a user wondering where something is- you should cover all the bases. How do you make it different from every other portfolio? Thats where you drop in a few touches of your creativity, to bring it to life.

Content:

So you’ve nailed a nice, simple yet elegant design for your portolio, in order to let the content shine by its own merit. This is where the problem lies for most developers – organising your content. Just because your doing something more creative with your CV/Portfolio it doesnt mean you should ignore the basic structural guides applied on other mediums.

For me as a prospective employer, a web design portfolio should not re-write traditional practices; it should apply creativity to the guidelines and structures that are commonly used.

In essence what is being said here is – remember to keep a solid structure of content. Keep areas of your portfolio in clearly organised sections, whilst always having a clear navigation to find what content you need. It has been said that you should never click more than 5 times on a website to find the information you want. For a portfolio I think this number should be 2-3. With potentially hundreds of applicants to look through a prospective employer wants information fast – if they can’t find it, your not considered. This should be motivation enough for you to establish a clear heirachy of content.

Contact details – This is so important for a portfolio. I personally like it when contact details are accessible or visable on every page. This gives potential users no reason not to contact you. In the world of business time is money – if your wasting their time, you wont get the work. Obvious contact details, in the header signifies the importance of them (see image below).

Summary:

I’ve highlighted a few ways in which you can improve your portfolio websites, to make them more functional and accessible but not run of the mill. Planning is the greatest prevention. Clearly plan your portfolio, invest time planning and revising everything from the impression you want to give, down to the organisation of work, through to the colours of links. Heavy planning may seem a lot of work, but it’ll ensure you cover as many bases as possible.

To finish, never underestimate your portfolio. Its your most important document as a web developer – so therefore deserves respect enough for good planning and well thought out execution.

Nothing spells hot traffic and lovely new subscribers like the front page of Digg. Digg, the user-driven social media network that relies on user submissions and clicks to get things Digg’d to the front page, has been jamming up poor server networks on blogs for a few years now. Now it’s your turn to get on the front page, and I’ve got proven tips that will get you there.

Stop Reading your RSS Aggregator

So you saw that one post on your aggregator and saw how many times it got Dugg. Wow, all you have to do is copy that post and it will be magic, right? Perhaps if you copy the formatting and ideas that got people to Digg it, you might have something going. However, if you plan on rewriting what they had originally said I’m going to have to hunt you down and slap you on the face. Originality is the key to nailing those Diggers on the head. That stems from your own brain, not someone else’s… unless you steal the idea from them before they get the chance to post.

Make a list

Diggers love lists. Make it a big one, too. A list of 50 or more things puts those Digg users into a state of ephemeral bliss, and lands you a butt-load of clicks on your Digg Me button. Lists take time to develop, especially ones you haven’t seen done before, but they almost always pay off if you can get the right guys on your team to Digg it.

Make it Useful

This one pairs lovely with a list. If you are handing out a bunch of links to tools or websites that people in your niche love to browse, you are ready to rock and roll. You don’t even need a list for this to be successful. The key to making a useful post is to give your post a sense of value to the reader. Provide them with data that can in turn make them feel successful.

Controversy Sparks Fires on Digg

Them Diggers love a little online abuse, and the best of that comes from controversy. Start a controversial post on a topic relating to the world of your niche. If I wanted to start a controversial post here on WebDev, I might try something like, “Steve Jobs really uses a Windows PC,” and put in some well photoshopped images of him toying around in his office on a Windows desktop. Anyways, that’s just an idea. There are plenty of other things you can do to make things controversial. Think about celebrities, politics, government, the war, racism, environmental pollution and other hot topics in today’s world. Just make something up that is out of the ordinary, or turn the ordinary into something extraordinary. Naughty language also has a way of playing its part in many controversial articles that have made Digg’s front page.

Encourage User Feedback

Your post is half of the battle. If you can encourage widespread feedback, you might get friends of readers and other bloggers linking to you. This provides you traffic which you can generate Digg clicks from. It is just a matter of setting the stage and allowing your blog readers to be the actors and actresses of the Digg drama.

And if at last you don’t succeed…

Add people on Digg and shout your story. The more friends you have, the more likely you will be able to get clicks. Start Digg trades with those you know, however avoid doing it to much as we here the Digg script likes to bury Diggers that are trading too much. Several web communities offer Digg services where you can actually purchase Diggs. This is cheating, and while I don’t condone it, I certainly don’t think it isn’t fair game.

It is up to you how you will make it to the front page of Digg, and there are plenty of shots to do it. If at first you don’t succeed, re-plan your strategy and try a new direction of attack. It may take 3 shots, or it might take 50, but if you can learn from the mistakes you made on posts that didn’t quite make it, I know that it will be possible to get onto Digg’s glorious front side.

Every experienced webmaster will tell you that the Big-G, Google, is a traffic god. With the right keyword targeting and link building strategies, you can rank for some heavily sought after keywords and gain the traffic they provide to your website. Traffic is music to a webmaster’s ears. It rings tones of money.

Sometimes Big-G doesn’t give that traffic love that we need, though. In that case, it is time to look over our plan of attack. Alternative traffic sources are plentiful, and with a hint of creativity and the spice of time, you can get active readers, clients and customers to your blog or website.

Get Social

Get active on social networking sites like Myspace, Facebook, Digg, StumbleUpon, Hi5, LinkedIn, Frienster, Twitter, and the multitude of other social networks. They are bountiful, and the more you join and participate in actively, the most traffic you will gain. Create custom layouts and use plug-ins that show blog updates on your pages to get a few bursts of traffic rolling around.

Comment Me

Bloggers love to see comments on their blogs, especially critical ones that can question the post or those that expand upon it. Leave criticism for bloggers in your niche and challenge them. This can bring in a fair amount of traffic if you create enough hype/controversy around your comment.

Email your contacts

I save the emails of every email I get in my inbox. Then I set up email runs. I might set up a complete sales copy pointed to my blog/webpage or just a simple, “Hey, check out this link,” email as I mail out hundreds of emails. It’s a legitimate emailing tactic that I have used and has worked, especially if you can learn to choose your words right.

Oh My Goodness, Totally Controversial

People love controversy, whether or not it is actually true. Bend someone’s words around, make fun of someone famous, say someone who is well alive and kicking is actually buried 6 feet under (Can anyone remember Perez Hilton?) use complex language, and put that stuff up on sites like Digg, Propeller, Mixx and all their relative sites. Traffic comes soon after. Be prepared for the backlash if you are posting inaccurate information, though.

I’m on the Tube, Dude

Make funny/sad/scary/idiotic movie and post it up on Youtube. Don’t forget to embed your link top of the video and in the description with “view more videos here at ______.com.” Rinse and repeat until you have acquired your traffic goals, and then expand.

Business Cards Do Your Business

Whenever I meet someone new, I hand them my business card. I don’t care if it is my next semester’s professor in calculus, my girlfriend’s 3-year-old sister, or a friend of a friend, I give them a card no matter who they are. Chances are if they don’t visit the website I advertise on it, someone else might pick up the card and visit it themselves.

Drop It Off

Some places may allow you to do this, some might not so check with security beforehand. You can either use your business cards or print off a bunch of leaflets. If you can use the printer free at your university or school, print some simple leaflets advertising your website and what it can do for others. I park at the rear end of the parking lot of a mall and weave my way through the cars to the front, placing some flyers under the windshield wipers and walk into the doors of the food court. I find the tables that are busy and start passing out flyers. If you are shy, too bad. You get the flyers immediately to the people you want to target and the cleaners don’t just sweep them off the tables. Then I’ll head to the central gathering spot of the mall and pass out the leaflets to the patrons hanging out there. With the remaining flyers, I then politely ask shop owners if I may tape them up in their display windows until I have used them all up.

Sponsoring the Ball Game

This one might cost a bit of money out of your pocket, but it’s an awesome way to brand your website. Offer to sponsor some sort of event. Charities work great because you can donate small amounts, yet still be mentioned in their pamphlet. If you pass up enough cash, you could become a main sponsor and have your logo blasted on the stage or backdrops. Sponsor a relevant event to your niche and don’t forget to take your business cards along with you. Chances are you might meet people that are looking for your services/info on your site.

The list goes on and on for chances of traffic. Bluetooth messages to those that leave their Bluetooth on in major public places, car stickers, shirts with your URL on them, asking family to send recommendations, posting flyers at busy universities, giving local bands opportunities if they push your website, link directories, traffic trades, and plain-old fashion word of mouth are just some of the suggestions I can offer.  SEO masters are saying the only way to build good traffic is through Google, but I’m thinking they are turning a blind-eye to something. Google can be a good establishment for great, targeted traffic, but effort and a little imagination shows us that we don’t have to rely on it.

When getting into the freelance business one of the most important things is to establish a name for yourself. Most people brand themselves under their own name rather than a separate name. Why do they do this? It’s simple! A personal brand is much easier to establish.

You may be wondering why it is simpler to establish your name rather than a separate entity. It’s because everything you do, you will get known for. Post an awesome picture on Flickr or a funny tweet on twitter it’s your name they are going to know. Where as having a separate entity it will only be known as a web development business.

Another reason for choosing personal in my opinion would be that it is just that: PERSONAL. Now you may find it strange but I would prefer paying Brian from Millwall to do my design work than “Shady Business” from somewhere in the vicinity of the USA. This is because I know if Brian tries to run away with my money I know his address, where as if “Shady Business” ran away with it they may have given me an address or a rough guide to where they are situated but you can’t always trust that.

A slight downfall to giving yourself a personal brand would be that if you hire someone else to do your work then they tell someone you may get called a fraud. I have found this when I have outsourced work when I have had too much on.

When you become bigger and more well-known becoming a non-personal brand is more likely. Starting out personal is what most people do and it will help them project their identity onto their non-personal brand. As you get more popular personal become harder to maintain.

Whether you’re a designer, a coder or even a writer having a name in the industry no matter how big or small it is, is very important. I’m sure a lot of you who have been freelancers for a while shall remember what it was like to start out and no one knew your name and now realise how much easier it is now that they know your name.

A good way to establish your brand is to start a website and show what you have done before. A portfolio to be precise. No matter what kind of freelancer you are it is important to only showcase your best work. If you are showcasing bad work people won’t hire you. You need to show what you can do. When they do hire you, you must make sure that your work is of the best quality you can provide. If they see this they will recommend you and hire you again. This is one of the best ways of establishing your brand as word of mouth is very powerful. If John tells Jane you are a brilliant coder and that you made him this brilliant site then Jane may hire you. Especially if she likes the work that was done on the site.

A top tip from me would be that when you do start and want to build a portfolio do not be afraid to do some free work. Not something huge for them but a taste of sorts. If they see you are good they will be willing to pay for you next time and you will have a valuable piece of work for your portfolio.

Thats all I have to say on personal branding for now. Thank you for reading.

Almost all the developers are given an opportunity everyday to work with stranger’s code which can sometimes become a dreadful experience which is when they don’t follow coding standards.

Coding standards is an essential part in a programmers life. It lets you work freely, letting you focus on the real work.

What happens when the developer doesn’t follow coding standards?

• Nothing is standard i.e the code, the file system, file names and etc.
• The developer will become a barrier in a team. More work for the other developers.
• The developer will take more time to write less code.
• The developer code will not generate standardized documentation.

What happens when the developer follow coding standards?

• A standardized documentation can be generated. A standardized documentation helps new / current developers to contribute/modifying the the code.
• The developer fits in the workflow of team without any hassle.
• The developer will take less time to write more code.

Clients never stick to the original developer, the original developer can die, get sick or just get fired. If the original code is unstandardized, the following developer will take more time to do less work until it remains unstandardized.

There are a lot of ways to standardize code.

1. Follow standards which are made by large organizations such as Pear, Drupal or Java / Modify the standards which are made by large organizations with your own coding style.
2. Use doxygen, PHPDocumentor, JavaDoc and etc, tags on your comment blocks which will generate standardized documentation for the client.

I follow modified version of Pear Coding Standards with doxygen tags on the comment blocks.

• Pear suggests 4 spaces of indentation, I use 2 spaces.
• Pear suggest line length of 75-80 words, I completely ignore the line length idea unless asked to do so.

The coding standards shouldn’t be followed only when writing server-side scripts. You should use them when you are writing any type of code.

I have hired many programmers, and I have been hired for many freelance programming jobs, and in all of them, I find people trying to work in a way to develop their own code. They feel like it would take too much effort to change an open source application to suit their needs, or that there isn’t an open source piece of software in the market that will do what they want, and usually they are wrong.

If you or a client need to run a content management system, then you are in luck as the market is full of well developed, highly featured CMS’s. You can have your choice of WordPress, Drupal, Joopla, Movable Type and more. Their is almost no reason today why a programmer would have to start from scratch in creating a content management system.

Even if you don’t want to use full open source applications, there are many people that release GPL code into the world that will quickly provide the functionality you need to get your custom application up and running.

The best thing that a coder can do is take stock of the features they would need, and then compare them to the base features of well produced open source software. If something fits ninety-percent of the way, then see if it is possible to expand it that last ten percent. Sometimes in doing so, you might add a feature that the market wants, and end up with a resell ready package.

Other times, you might not find something that easily fits into what you need to create, but if you list out the features you want to create, then you can quickly find the necessary code developed by others, cutting development time down by a fair bit if they have even slightly similar coding standards as you.

If you take the time to re-invent the wheel over and over, you are wasting time, making yourself look bad, and in the end, you’ll end up more frustrated than otherwise need be.

I’ve used WordPress for so many projects, and I have been able to quickly manipulate it in special ways to make it into a job board, design gallery, online magazine and more.

I’ve also been able to work with many free online scripts to build up projects that would have normally taken me months to develop in a matter of weeks. Finding code that other people have already created, especially code to interface with the increasing number of API’s in the market place.

On the other hand, if you build everything yourself and you are charging per hour rates, then you’ll definitely make more money than using any open source software or code.