Listen to the interview

Interview with Brian Suda (.mp3, 7.4MB)

Audio transcript

No related posts.

Speakers include Dan Donald (@hereinthehive), Elliott Kember (@elliottkember), and Scrunchup’s Anna Debenham (@anna_debenham).

Students can attend for £20. There are currently only 50 student tickets available, so hurry!

Use the discount code debfollowers to save 15% off your ticket.

Related posts:

1. Upcoming Event: Young Rewired State hack week

It’s a week for young developers across the country to go and build visualisations, digital and/or non-digital products using government data, alongside working devs in businesses across the UK.

These would be presented back to government at the end of the week, either in person, or by live stream from wherever you are based.

Hack events are a great way to get hands-on experience working on real projects, and they’re also really good fun. This will look amazing in your CV or portfolio.

If you’re interested in taking part, please register, or if you’re a bit too old but would like to help out, maybe your organisation can volunteer some time and space for the hack days to take place.

A message from the Brighton hub:

We’re looking for up to three people to come and spend the week in our offices, working together, with some support from us to code/design an application, website or digital/non-digital visualisation, and present it back via live stream to people from the Government on the Friday.

As above, the criteria for signing up are:

• 15 to 18 years old.
• must be able to code or design to a reasonable standard.

To take part, sign up on the website.

Related posts:

1. Upcoming Event: Web Developer Conference

Take away the hours spent sitting at tables in echoing school / college halls, confused attempts at assembling exhibition panels and the embarrassing spells when no-one wants to speak to you, it has all been a very rewarding experience.

Variously I’m speaking to students who are looking at A level choices, HND or BTEC choices or degree choices. And in almost all cases I find that the careers advice given to students is getting better. It really is. What I find quite remarkably lacking though, is good interview advice.

Students looking to win a place in Further or Higher education generally need to win over an admissions tutor or two, demonstrating that they have flair enough to respond to teaching, and hopefully a style or passion that shows that they are dedicated to their subject. This is pretty fundamental stuff. You’ll notice that I didn’t make reference to anything in that last statement that said they need to be ‘good’ at
their subject. We all know how subjective that statement is; what is vital is that they show a passion for their subject and (here’s the kicker) an interest that goes beyond anything that they have been asked to produce before at school.

I’ve spent hours looking at portfolios that show exactly the same work, all school or college projects, and all of them predictable and executed using the same techniques. This is because most A-level or BTEC courses up and down the country generally request the same or similar projects of their students. These students then tidy up these projects, pack them in their portfolios and take them to interviews to
present to a tutor who has seen 20 students already that day, all with the same work. And those tutors get bored. Really bored.

So how to break that boredom? It shouldn’t even require explanation, but it does because when you are young it is hard to see things from the point of view of the tutor. And after all, most of the advice you receive comes from your careers advisor who is generally telling you to take school work.

Creative subjects should be fun. They should be something you are passionate about, and that you work on outside of school or college hours regardless of what project your tutor has you working on. You should be scribbling in scrapbooks, taking photographs, building sites, working on Flash animations or making videos. Why would you not?

Most students I speak to, when quizzed persistently about their personal projects have plenty to show. If you’re lucky enough to find the right student, they will have plenty of good work to show. But they all look shocked when you suggest that they present it! In my experience it is assumed that you show school or college work only at interview.

The fear is of course that this work somehow has less value than a project your school or college has asked you to, because surely all that schooling has been leading up this moment? That’s undeniably so, but your admissions tutor will want to see a little bit of what makes you, you. What makes you tick? What are your personal interests creatively and how do you plan to explore those interests during the
course?

Take one case in point. Day 2 of interviews, 15:30. 12 students in, and so far we had seen mostly the same projects presented to us. Enter student ‘A’ who wants to show us his portfolio website of photographs. Photographs of manhole covers from across Europe. The are beautifully photographed, hand printed on bromide paper, and then scanned, annotated with fabulous typography and worked
into a slick slideshow with music, transitions and the option to buy prints. Bizarre? Certainly. But it was so accomplished the he stood out from the crowd, and got a large tick by his name. I won’t go so far as to say I bought a print, but I was impressed by the dedication and hard work that had brought this project together. He was working on this in his spare time.
No tutor was asking him to do this. Don’t get me wrong. I’m not advocating the wholesale rejection of school or college work from these interviews – rather I’m encouraging students to consider that they will be one of many who will be presenting (more than likely) the same work over and over. I am also highlighting the huge importance of your personal interests and creative ambitions as these are ultimately what will fuel you through your course. Don’t undervalue these projects, no matter how unfinished they might be, or how insignificant you might consider them. They all show a dedication to work that is never evident in course work. Straight away this makes you a safer bet as a student as it shows that regardless of your education, you
are a creatively active person.

Being creative is something you are. It’s not something you just ‘do’.

No related posts.

We’ll assume here that the partnership is two people, but of course you can have larger partnerships. Just be wary of putting too many cooks in your kitchen, because you won’t get many chances at getting that particular broth right.

Why bother?

There are a whole bunch of reasons why creating a partnership can be a better strategy than going it alone.

Two heads are better than one

You’ll have someone else to bounce ideas around with, which will help weed out the ridiculous ideas, and nourish the good ones. Every time you come up against a design or coding challenge, you’ll have your partner to lean on and mull it over with. You know how when you explain the problem you’re having, suddenly you realise what the solution is before the person you’re explaining it to has even had a chance to open their mouth? It’s great when that happens, and it will be part of jobs as partners to be those mute sounding boards for each other. Two heads are better than one in pretty much every challenging situation you’re going to face.

Double the resources

With two people, you’re better resourced for bigger chunks of work that come your way. Providing you have overlapping skill sets (and more on that in a while), that’s two people who can be working on something, greatly increasing your productivity.

Looking bigger and meaner

While you won’t have the weight of an established agency, having two people on the team will inspire a little more confidence in potential clients. After all, you can’t be a complete lunatic because you’ve convinced someone else to work with you, and the random chance of two lunatics pairing in the same place is much lower.

Teach me teach you

Working alone means that you’re solely responsible for honing your abilities. While it’s important to spend time reading and practising your techniques by yourself, it’s much faster to learn directly from someone else who’s already experienced in the area. Learning and feeding off each other’s knowledge is one of the key strengths of every small close-knit team.

Broader skill set

Unless you’re actual clones of each other, there’ll be something that one of you does better than the other. Picture the Venn diagram of your talents combined – that super set is your offering to the market, and it will enable you to go after broader end-to-end projects, rather than smaller projects, or just segments of the larger ones.

Howdy Partner

While working alone as a freelancer certainly has the potential to send you a bit crazy at times, that’s nothing compared to what working with one person who you grow to despise will do to you. It’s absolutely critical that you choose to partner with someone that you can work with day in day out through the hard times and the good.

In fact, it’s more important that you find someone you can have a great working relationship with than it is to find someone who is a master in their field, but a complete doucheface to work with. You can always develop your respective skills to become masters, but you can’t change your personalities anything like as easily.

It’s a good idea to partner with someone that you’ve worked with quite extensively in the past so that you know they’re fun to work with and that you’ll have great professional chemistry. If you’re currently at a large company and you’re thinking of breaking off and freelancing, maybe there’s someone else there in your team who you know you work well with and would be a great business partner. Perhaps you’re already freelancing and you’ve shared projects with another freelancer on a few occasions and it all went really well. Just don’t pluck someone at random off a freelancer project auction site or approach people purely on the basis of their CVs or portfolios – work with them in some capacity first.

There’s also the question of skill sets. If you and your partner are both expert UI designers, you’ll be able to take on bigger pure UI design projects, you’ll probably have to turn away projects that aren’t based on pure UI design work. If one of you is a UI designer and the other a wizard developer, you can go after the larger projects that involve both disciplines and which are generally better paying.

The implications of a partnership

The dynamic

Being in a partnership is not the same as being in a group of freelancers who happen to work together, even if you’re not working in the same room as your business partner. Some freelancers choose the solo path because they thrive in that solitude, and if you really need to be completely alone to be productive then a partnership might not work for you. That said, a small partnership is typically still more relaxed and flexible than an agency or studio with a couple of handfuls of people working together, so it’s a good balance.

Cash is king

Another very important point to consider is the financial impact of having two people to pay. All the work you do will need to generate enough money to cover two salaries which can make it tough, especially when you’re starting out. This makes it harder to get the ball rolling for a partnership than a freelancer, because you’ll need bigger cash buffers and slightly better paying projects right from the outset. Make sure you take all of this into account when you make your cashflow projections, which of course you’ll do with religious devotion, won’t you. Won’t you?

Branding

You’ll also need to work a bit harder on your brand. As a freelancer, you can get away with using your name as your brand and identity. That can work for partnerships as well (combining your names), but you might be better off going a bit further and conjure up a new name for your venture.

Summarising

Partnerships can be a more attractive option than going out on your own as a freelancer, but you need to be wary of a few unique challenges that can arise when you try and work with someone else on a small business scale. If you have any questions about specific aspects of partnering, feel free to post them in the comments below, or get in touch with me directly. Good luck, however you choose to work!

No related posts.

Dreamweaver

Need I say more? Adobe just does stuff right when it comes to software, they always have and always will. Dreamweaver is the perfect environment for hand coding sites from scratch or just managing the content in the WYSIWYG editor. I get to pick and choose how I want to work, the WYSIWYG is great for editing stuff like content and images so you don’t have to spend time looking through all your code for that one typo. In Dreamweaver CS4 they did some major updates to make the WYSIWYG view even more realistic to what actually shows in the browsers. It doesn’t stop there, when it comes to developing, I build the entire site in the Code View and don’t switch over until I get ready to insert the copy onto the site.

There is other software out there that provides just the coding environment and they are okay, they just don’t offer all the features that Dreamweaver does. FrontPage however is absolute junk and I would never recommend that to anyone. Microsoft likes to inject a lot of their own meaningless code into websites that are built using FrontPage. They were out of the game for a while and just came out with a new FrontPage. I haven’t had a chance to look at it in depth however I still wouldn’t suggest that another developer give it a shot.

Photoshop

Photoshop is another awesome Adobe software and if you do anything with web or graphics then this needs to be in your A List of programs. It has been around for years and now offers the ability to do 3D design work, great for logos and those out of the box websites. You’ll notice some of the 3D work on our website Minds Eye Design.

So as a web designer, how do I use Photoshop? For me personally I use Photoshop to do all the design work of the website, header graphics, logo design, buttons, page layout, etc. Once I have a finished look I send it off to get approval from the client. It’s always easier to edit a .PSD than it is to change the layout and design of a site when it’s built out. I never build out even a rough draft of the site until I get approval of the design. Always keep your file layered so that you easily manoeuvre, remove, add new pieces to the design. Once I’m ready to start building I slice up the .PSD to be different sections of the website and I deal with those graphics individually.

Basecamp

It doesn’t matter how many clients you have, you must use some form of project management. Basecamp is an online based project management tool that grows with you. Think of how helpful it would be if you had one go-to place with document collaboration, to-do lists, milestones, file storage, etc. Not to mention creating a login for your client to login and give feedback on designs, write the content for their site, upload graphics and logos, along with seeing deadlines that you posted for their project. If you’re saying to yourself, “that it would be awesome” then you need to get Basecamp, because they do all that and more.

Freshbooks

Since I found Freshbooks a few years ago not a day has gone by that I haven’t used it. I’m able to manage my clients and all of their login information. I have the ability to put together proposals and notify my clients via email when they are able to login and view them. I can send out one-time or recurring invoices, even auto-bill through my Authorize.net account. For my clients that aren’t very tech-savvy Freshbooks can send them a statement in the mail with a pre-addressed return envelope.

My clients can login and create support tickets which will automatically notify me or another staff member that is responsible for that item. I never loose track of where I spend my time thanks to the timer that helps me to log time spent on projects. I can also create staff & contractor logins for them to track their time as well. Clients can also login and see how their project is coming along by viewing how many hours have been tracked to specific tasks on the project.

Of course you got to have some way to manage all your expenses paying for domain names, hosting, and contractors so Freshbooks gives you an area to manage all of your expenses. Freshbooks will even give you a report at the end of the year to hand over to your CPA.

MailChimp

MailChimp 
I’ve used a lot of email marketing applications such as ConstantContact, Benchmark, Campaigner Pro and none of them have even come close to touching the usability and functionality of MailChimp. They are the most affordable, have great analytics and the ease of use is mind blowing. They also just brought their new supercomputer, Omnivore, online. Omnivore is a powerful abuse detection technology that helps keep their clients free of Blacklisting. They were actually one of the first email marketing platforms ever made, however at the time there wasn’t a big demand so they kept it for in-house marketing. They launched MailChimp to the public a few years ago and since then have become one of the best Email Marketing companies around. Check out how they compare to iContact and ConstantContact.

WordPress

I’m hoping that you’ve heard of WordPress if you’re reading this. Most people think of WordPress as a blogging platform but really it is a CMS platform. It just so happens that WordPress is so easy to use that just about anybody can run a website. It’s one of the more popular platforms for bloggers since most of them don’t know a lot of HTML/CSS. It has been underestimated by web developers as a CMS for websites, although it has been picking up a lot of steam in the past year. I proudly use WordPress as my one and only CMS platform for clients.

There are ofcourse other blogging platforms that are pretty good such as Blogger and Typepad. I personally don’t care for Typepad simply because you have to pay for it. I understand they want to make money but at a minimum of $9/month I don’t see why you wouldn’t just do a Blogger site. Blogger however is a little annoying because of the shameless advertisements and that you don’t have the flexibility as you do with WordPress. Now it’s important that you understand there are two genres of WordPress, one is WordPress.com which is hosted online and you can get a free account however that is the same as a Blogger account. Everything I’m talking about is WordPress.org which is a free download that you can install on your own server and customize as much as you want. If you’re not going to host it yourself then it’s really a toss up between Blogger and WordPress.com

Wufoo

Last but definitely not least is Wufoo, an online HTML Form Builder. Wufoo changed the way that I do HTML forms. Now instead of it taking me almost an hour to create and setup a custom form I can have it done in under five minutes. Wufoo also creates a database for every form that you create where it saves form entries. If you’re a freelancer then you need to have Wufoo on your A List, they can save you time and they are very affordable. You can even use them for to create a paid event registration form able to accept all major credit cards via an Authorize.net account. Wufoo forms can even send instant notifications to your cell phone, which comes in handy when you want to keep up with new client consultation requests.

What’s on your A List?

What are some programs or third-party apps that are on your A List? Have you had the pleasure of working with any of the programs I listed above? I’m interested to hear how you use them.

No related posts.

How you can take part:

To cast your vote, simply mention @ScrunchUp in a tweet and include the hashtag #yeshtmlcss or #nohtmlcss. Your tweet will automatically go into its respective column, and your first vote will be counted. Subsequent tweets will not count.

Tweet to this account: @ScrunchUp

Most recent tweet date: Sat, 05 Jun 2010 20:46:44 +0100

#yeshtmlcss

Total votes: 11

Most recent votes

@ryansuchocki wrote:@ScrunchUp #yeshtmlcss2 months ago

@xentek wrote:@ScrunchUp #yeshtmlcss (can you call yourself a web designer and not know the medium your designing for? no. that's called graphic designer)3 months ago

@onishiweb wrote:@ScrunchUp #yeshtmlcss3 months ago

@Bargok wrote:@ScrunchUp #yeshtmlcss http://bit.ly/cAb1lk yes they ca..ehh do!3 months ago

@sarahebourne wrote:@scrunchup #yeshtmlcss It's like a writer needing to know the alphabet.3 months ago

@DariusKM wrote:@scrunchup #yeshtmlcss5 months ago

@jamesdoc wrote:@scrunchup #yeshtmlcss5 months ago

@samanthacr wrote:@ScrunchUp #yeshtmlcss6 months ago

@designbyadmiral wrote:@scrunchup #yeshtmlcss6 months ago

@dougoftheabaci wrote:@scrunchup #yeshtmlcss6 months ago

No related posts.

Not all types of content can be accessed by all of people, hardware or software so alternative formats are needed.

Images

Images can’t be seen by people with sight problems and are not supported by older mobile handsets or text-only browsers such as Lynx. An alt attribute must always be provided as an alternative ie alt="Short image description". This text is then read by a screen reader (software used by blind users to read the content of a web page), or is rendered by the mobile or text-based browsers as an alternative to the image.

If the image is decorative you simply give it a null alt attribute – alt="", – and the image will be ignored altogether. Complex images should be given a longer description (elsewhere on the page, or linked to from the image).

Video

Video is not available to people with sight problems, some mobiles and devices, and people on low bandwidth. Ideally you should provide captions, audio description and sign-language versions, and if not, at the very least a text transcript and brief description of the video. Google this week announced they will be supporting automated captioning for YouTube video’s and you can check out my article making video accessible, localised, mobile and searchable by captioning for tips and tricks.

Audio

Audio also needs text alternatives in the form of transcripts. The added bonus of this is that they can be indexed by search engines and boost your web page rankings. In fact, much of what you do to make pages accessible helps with SEO (Google is often referred to as the biggest blind user on the web.)

Device Independence

Many people don’t have the ability to use a mouse, including users with mobility problems, RSI, Parkinson’s disease, Multiple Sclerosis, sight problems and other dexterity related illnesses. In addition to this many mobiles and devices have small, fiddly keyboards and no mouse alternative.

All content must be keyboard accessible for users who can only use the keyboard. This means that all content and functionality must be available via the keyboard. Having informative text contained within title text or a fly-out JavaScript menu can be problematic so always ensure key information is available within in the page itself or via the keyboard.

Tab order

Tab order is very important for keyboard-only users who want to be able to cycle through related links and grouped form elements in a way that is fast, efficient and logical. Often you have to do nothing more than code content in a logical order with important links and information presented at the start of page content.

Tabindex should be avoided as it is difficult to maintain and easy to break. Simply having content coded in a logical order will address any tab-order issues so always make sure you focus on a logical flow of content there. The big exception is using negative tab orders as outlined in WAI-ARIA. This is used to give keyboard focus to dynamic widgets in a page such as sliders, tree menus, progress meters and so on.

Highlighting elements

Linked to tab order is highlighting elements within a page so you need can track visually where you are in a page. Many browsers, such as Opera, highlight links and form elements that have focus automatically however some designers choose to suppress this for aesthetic reasons – this is not advised.

As a general rule it is good to ensure that links are highlighted when they have received focus, are active or have been visited. This can all be done using the :focus pseudo-class in your CSS:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: magenta; }
a:focus { color: magenta; }
a:active { color: red; }

Note the order of the above; certain browsers need these pseudo-classes in a specific order to stop one pseudo-class overriding the styles of another. The LoVe HAte meme should help you remember the order they should be in.

The importance of good copy

Well written, clear copy goes a long way to making content easier to read, as well as easily digestible by search engines. There are some very simple, easy to implement rules to follow if you want to do the right thing:

Link text

Link text should always be short and descriptive. Avoid putting links on your pages that say “click here”, “download”, “more”, “download” etc., and use words that describe the target page. This helps users when visually skimming a page including screen reader users who may access a list of the links on your page, navigating them out of context.

Good alternatives to “more” on a news website for example would be linking the heading name. Descriptive file names (including file type and size) are always preferable to “download” as well. Descriptive link text will also boost your search engine optimisation.

Be careful to avoid repeating the same link text, and linking it to different target pages. This can be a problem for voice input trying to activate a specific one of these links – they may not activate the link they want.

Headings and page titles

As with link text headings and page titles should also be short and descriptive for the same reasons. Just about anyone will find this helpful but especially people with reading problems, people who speak English as a second language and blind users.

Paragraphs

Keep paragraphs of text short and to the point, ideally with one idea per paragraph. Don’t be afraid to reinforce meaning with good use of colour, layout and images. This helps deaf users, people whose first language may not be English and people with learning / reading difficulties, anyone else who struggles to read a lot of text on the screen – that’s most of us.

Remember that people rarely read web content from top to bottom and they generally skim read so lengthy text is not a good choice. Additionally use proper English throughout and avoid idioms and slang.

Fonts

You will also want to choose readable fonts and set font sizes so they are flexible using em or %. This gives the user flexibility to scale text up or down to suit their reading needs although modern browsers tend to include in-build page zooms.

In addition to this you want to select fonts that are as easy to read on screen as possible. Typically these include fonts such as Ariel and Verdana. Chunks of italic or underlined text – that is not a link – are also best avoided. Not only are they hard to read on screen for many people mobile handsets have differing levels of support which can impact on your design.

Colour

Never rely on colour alone to convey information as some people can’t see colour – such as blind, low-vision of colour blind users – and others may be using a device that doesn’t support colour. On the flipside it;s good to use colour to reinforce meaning to help users read the page. An example of this is using alternative colours on rows of a data-table or colour to reinforce layout.

Always test your colour to ensure you have sufficient contrast too. This is one of the main accessibility problems on the web today. There are many tools available to help with this, Roger Johansson has a list of ten colour testing tools that are all very useful.

A useful book to read to give more depth to writing good copy is Steve Krug’s Don’t Make me Think!.

To wrap up

If you follow the above advice, you’ll be going a long way to producing websites that are accessible, viewable on mobile, localised and cross-browser compatible. To help you further, check out the Opera Web Standards Curriculum, which walks you through all the fundamentals you need to know about HTML, CSS, JavaScript, accessibility, colour, copy and more.

The costs of ignoring universal access is too high. In many countries – including the UK, United States and most of Europe – it is illegal to have an inaccessible website which means you could be taken to court. While this is unlikely to happen to a small website it is important to remember that court action not only costs money in legal fees but also in terms of your reputation and trust in your product.

It is always better to build in accessibility from the start of a project too. You’re building web pages anyway so you may as well do it right from the outset, that way you don’t need to think about costly retrofits later on to bring the site up to standard. Some web site and web applications are so vast and complex that retrofitting for accessibility can run into millions. If built in from the outset however you stand to reap the benefits of additional customers and users at little or no additional cost.

On today’s web it is madness to not consider universal access and accessibility. By building sites with accessibility in mind you open your doors to the widest possible audience while creating a website or web application that is easier to scale, maintain and is future proofed as browsers (on desktop, mobile and devices) as well as assistive technologies evolve.

No related posts.

Hello, my name’s Jamie Rumbelow and I’m a 15 year old developer, entrepreneur, musician, philosopher and artist from Cambridge in the UK. I’m here to talk about real time web applications, their use, some examples, and what you need to do to start creating real time apps.

Real time web applications are exactly that – real time. They allow us to push the boundaries of the web and turn it into a communication platform rather than just a resource. They enable instant communication, collaboration and contribution – and are slowly taking over and revolutionising the web. From simple chat apps to word processors to drawing programs to social networks to books to online lessons to reviews and ratings to heaven knows what else, they allow our web experience to feel faster and more open. We can finally feel other people working with us, along side us and communicating.

You’ve probably come across real-time web technologies before. Take a look at Facebook. For starters, the instant messenger fixed at the bottom right of every page allows users to chat to their online friends in real time. It tries to mimic a desktop instant messenger as much as possible, and although there are occasional problems with it, it is a remarkable achievement and goes to show what some simple JavaScript can do. Facebook is also starting to merge real-time features into the rest of their application. If you visit the home page you can see friend’s status updates and other elements of the stream appearing in real time. Some of these smaller, less complicated touches can utilise real-time tech and make the user experience that little bit nicer.

One of the very big and groundbreaking uses of real time technologies is, of course, Google Wave. Google Wave is a communication tool that allows people to chat in real time, and actually see each other’s characters appear as they’re typing. It’s a novel idea, and while Wave hasn’t proved that useful it is still a very clever bit of kit. Wave also allows support for attachments and other forms of media or gadgets, to add much more real time functionality. You can chat, brainstorm ideas, play games or tweet all from the Wave system. Check out Wave at http://wave.google.com

Another, lesser known system is Etherpad – something that has really impressed me and I will definitely use in the future. It’s an online, real time word processor. It’s fast, I mean really fast, and works really smoothly. Although it’s not the most full featured word processor ever, its interface is really simple and easy to use and the real time features work brilliantly. Creating a pad takes literally a second, you don’t even have to sign up, and then you can just point people to the URL and they can join and start collaborating. I highly recommend it, so check out http://etherpad.com for more.

Now we have looked at a bit of what real-time technologies can do, let’s get to the nitty gritty. How can I add real-time functionality to my app? There are a number of different techniques that I’ll touch on, but the simplest is called polling. During polling, the client (your user) makes a regular connection via an AJAX request to the server. The server responds with a status code or a message which notifies the client of an event – the event could be a new chat message, or the event could just be a simple response letting the client know that everything’s still okay and functional. Messages are generally in the form of a data serialisation format like JSON or XML, but can be any format, as long as the client knows how to parse it. Generally a session key is used to persist data across a polling session.

A second technique requires Flash – where a pixel flash widget is embedded into the page, which using Flash’s socket support connects to the server and keeps the connection open. The server then pushes data to the client when it receives it, and the Flash widget receives the data and triggers a JavaScript event, allowing the client to update the page. A good approach for when Flash isn’t installed is to fall back to polling, but there are other socket-based techniques such as a Java applet or HTML5’s Web Sockets API.

There are open protocols such as XMPP to provide real-time communication. XMPP is used by Google Wave, Apple’s Push Notifications, Google Talk, and much more. XMPP not only supports its own protocol (which uses a custom server to send and receive messages), but also support for connections over HTTP using servers like Tornado, which was recently released and powers the real-time stream on FriendFeed.

The most important thing to remember though is to only use real-time tech when it will add to the user experience – if you just want to play around with real-time stuff, try creating a mini chat app or something else, but don’t just build real-time support into your application for the hell of it. Real-time is difficult to do, and get right, but once done properly it can add real benefit to the user’s experience on your application, and provide a bit of that wow factor.

If you’ve got any questions about real-time web applications, web development, programming, or anything else, just send me an email at jamie at jamierumbelow dot net. You can find my blog, Jamie on Software, at jamieonsoftware.com. You can follow me on Twitter at @jamierumbelow. Good luck, and let me know if you build something cool!

No related posts.

Defining accessibility

Web accessibility, in its purest form, is the practice of coding your web sites and applications so that users with disabilities can access all the content and functionality they provide. These users can break down into four main disability groups:

• Sight: Blindness, low-vision and colour blindness
• Hearing: Hard of hearing and deafness
• Mobility: Loss of limbs, paralysis, broken bones, Multiple sclerosis, Parkinsons and other illnesses
• Cognitive: this might include people with learning disabilities (such as Down’s Syndrome), people on the Autistic spectrum, with Asperger’s Syndrome, dyslexia, or other reading or memory difficulties.

While accessibility is about people with disabilities I like to think of it as at the core of a bigger picture: universal access. This covers areas of “accessibility” that are not traditionally associated with disabled people (although they can be too) but are of equal importance when designing web sites:

• Age: This isn’t just about your mum, grandfather or uncle who may struggle with age related illness or general deterioration. This is about you as well – no one plans on dying young right? In 10, 20, 30, 40 years time, you will be your own audience in this respect
• Mobile and devices: We consume the web everywhere on mobile phones, games consoles, TVs, kiosks and other devices that aren’t desktop or laptop computers
• Internationalisation and localisation: It’s a “World Wide Web” and, while you may not think so, users from all four corners of the globe could be reading your content

Where do you start?

This seems like an awful lot of diverse users to take into account on top of your existing customers and you may be thinking “how can I accommodate all these people?”. Well the good news is that if you use web standards and best practices to build your web sites and applictions, you will already be at least halfway there.

Many people also think of accessibility as an extra requirement that costs lots of extra money and must be bolted on to your web site, but this isn’t the case if you plan for accessibility form the start of the project. Accessibility should be built in and not bolted on to any website or web application build and if it is from the outset then you wont incur much, if any, additional cost. If anything you will get a better return on investment as more users will be able to access your content.

What follows are seven key areas that you need to think about when designing sites that are universally accessible.

Standards and Guidelines

I’ve already mentioned using web standards. This means correct use of open, non-proprietary web technologies such as HTML, CSS, SVG and JavaScript as outlined in their specifications.

Many standards are produced by the international standards body World Wide Web Consortium (W3C). This group also produces a number of guidelines that help you make the right decisions when creating accessible content:

• Web Content Accessibility Guidelines (WCAG): Guidance on how to make web content – text, images, forms, links, applications, audio and video – accessible to disabled users
• Accessible Rich Internet Applications (WAI-ARIA): Defines a way to make dynamic content and advanced user interface controls (developed with Ajax, HTML, JavaScript and related technologies) accessible to screen readers and keyboard accessible
• Mobile Web Best Practices (MWBP): Mobile web access is becoming increasingly mainstream as more powerful mobile browsers and handsets come onto the market. These best practices outline how best to produce content that is mobile ready
• Relationship between Mobile Web Best Practices and the Web Content Accessibility Guidelines: The cross over between issues and solutions relating to mobile web browsing and accessibility is significant. If you design with one group in mind you will go a long way to accommodating the other

All browsers and assistive technologies are built to understand web standards so if your web pages use them your website should be interoperable, future proofed and robust. Unfortunately there are some bad browsers that do not support web standards as well as they could yet still have a significant market share such as IE6 so this is not an absolute rule however designing with web standards will still take you a long way to universal access.

To better understand how web accessibility relies on the several components working together (browser, assitive technology and web content) see essential components of web accessibility from WAI.

Graceful Degradation and Progressive Enhancement

Graceful degradation and progressive enhancement are complementary principles, with one aiming for backward compatibility and the other forward compatibility.

Graceful degradation

Graceful degradation means building for the mainstream while adding in alternatives for less capable browsers, assistive technologies (software used by disabled users to access web content) or devices.

A good example of this is the use of noscript to house alternative content for browsers that can’t handle JavaScript (some mobile browsers for example) or users that may have JavaScript switched off. Similarly, alternative text – eg alt="Image description" – provides graceful degradation for browsers or users that can’t see images. More on that later.

Progressive enhancement

Progressive enhancement is the concept of building a basic version of a site and adding enhancements on top for those browsers, assistive technologies and devices that can handle them. All site functionality should work perfectly without any bells and whistles. Progressive enhancement then detects support for more advanced features and adds them only if the browser, assistive technology or device supports them. If not the browser shouldn’t even let the user know they are there. The enhancements are there to improve user experience and usability but never be relied on for code functionality.

A common example is form validation. This should always be done on the server-side, but to speed up the process it can also be implemented on the client-side for users who can access JavaScript. The client-side validation saves some round trips to the server and therefore speeds up application responsiveness, while the server-side validation acts as the ultimate security gatekeeper – it is not affected by browser support, and cannot be turned off by the user, as long as you exercise appropriate security measures in your code.

WAI-ARIA is also becoming a common tool of progressive enhancement. As this is a new specification browsers and assistive technologies have varying support for WAI-ARIA; while this is improving all the time, you still can’t rely on it across all browsers. Gez Lemon has written an excellent article an Introduction to WAI-ARIA.

Progressive enhancement is a great way of implementing new techniques and technologies on your site without compromising accessibility. It also shows an accessible site need never be boring and can be cutting edge.

Content and Presentation

At its most basic, separating content and presentation into separate HTML and CSS files is a form of progressive enhancement. It’s needed so that a user can view a plain page should their browser or assitive technology not be able to handle styled content. As such it protects the content and functionality within the source from being lost in styling.

Content

Content should live in the HTML with all styling and presentation housed separately in a style-sheet. No content should appear in the CSS as users who are blind or have CSS disabled will not be able to access it. A good example background images and CSS as well as CSS generated content – you should ensure these are for decoration only. Any text should appear within the HTML.

Presentation

Housing presentation in the CSS also allows you to target styling according to the type of media you are using. Media types and media queries allow you to tailor your single source of content so that it renders well on different screen sizes with varying support for colour, fonts and styles.

By separating presentation into CSS you also give flexibility back to the users so they can customise pages to better suite their needs via the browser. Many low-vision users like to read white text on black, scale text up or choose bespoke background colours.

Page Structure

Having a good page structure is closely linked to separating content from presentation. Visually, we rely on headings, lists, titles and suchlike to easily understand text and scan the page. If headings and lists were styled only using CSS or old-school HTML such as font tags we would lose a lot of the semantic information of the page; information that is essential for screen reader users and voice input users (who use voice commands to navigate headings).

Headings

Headings should be coded using <h1> to <H6>. Ideally one <h1> should be used per page and the headings should flow in a logical order – much like the contents overview of a book – and avoid skipping levels. Don’t be shy about using headings to break up long and complex forms as well.

Lists

Lists should also me marked up using <ul>, <ol>, <li>, <dl> and <dt>. They can be styled later for aesthetics but having them coded correctly means a screen reader can identify a list as a list and pinpoint what number list item you are on.

Paragraphs

Paragraphs should be coded using <p> elements, one for each paragraph! DON’T do things like using <div>s

and then adding spacing later on, or using a single <p> and then breaking the different paragraphs with <br> tags (line breaks). There is one right way to mark up paragraphs, and loads of wrong ways!

The example below shows the importance of using headings and list elements to code headed sections and lists:

1. <h1>Party checklist</h1>
2. <ol>
3. <li>Food.</li>
4. <li>Drink.</li>
5. <li>Invitations.</li>
6. <li>Music.</li>
7. <li>Venue.</li>
8. </ol>

This code then renders as follows:

When a screen reader encounters the above list it will know to say “Heading level 2: party checklist” followed by “List of five items. List item one: Food”. If the heading and list items were not there a screen reader would just read the text which is not as helpful.

Continued in the next issue of Scrunchup

No related posts.

• You know what Twitter is and are familiar with the terminology
• You know what a RESTful API is

Rate limits

Twitter has 2 different rate limits in place for IP addresses accessing the API. The standard rate limit is 150 requests per hour which can be enough for simple applications. But for apps that require more regular polling or requests that are started from a user visiting a page or running a script this simply isn’t enough. So you can get your application whitelisted, once approved (not more than 48 hours) you get 20,000 requests per hour. To get whitelisted Twitter has made a simple form. You must be logged in with the user that will be accessing the API and you need to list all servers that will be accessing the API.

It is always best to do this before you launch an app. I learnt the hard way with TwitterLeague (which I no longer operate) and had some unhappy users who couldn’t log in due to me hitting the rate limit for the hour after only a few minutes.

Unauthenticated methods

By “unauthenticated” I mean that you do not require a users login credentials to access the method. For instance getting a feed of the latest tweets from the public timeline, or getting a list of followers for a user who does not have their status set to private.

Sample PHP code for requesting the most recent tweets from the public timeline

//Initiate a curl session
$ch = curl_init();

//Set the URL to the Public timeline
curl_setopt($ch, CURLOPT_URL, "http://api.twitter.com/1/statuses/public_timeline.xml");

//Set a reasonable timeout of 5 seconds
curl_setopt($ch, CURLOPT_TIMEOUT, 5);

//Make sure we return all the data
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Put the contents into a variable
$xml = curl_exec ($ch);

//Close the curl session
curl_close ($ch);

//Print out the xml
echo $xml;

These methods are great for applications that want to gather statistics and do not require users to sign up or have a customised user experience. For instance Twitter Grader is a site where you enter a username and every day from the time you enter your username it will gather statistics about the number of followers, number of tweets and an overall rank. This can then be analysed with lots of different filters like location or popularity etc. This can all be done because you don’t need to be authenticated to read someones tweets (if their account is not set to private).

Authentication

Authentication is used for a couple of reaons. You either want to secure your data (we won’t get into an argument about basic authentication without SSL), or you want to have a personalised view. When you login to Twitter.com you see your tweets, your settings and your mentions etc. API authentication acts in the same way. If you want a web app that has an area for a user to login to, where they get a personalised page with data from the Twitter API, then you need to connect to the API as that person. That all make sense? If it did then you can read about the 2 types of authentication offered by Twitter.

Basic HTTP Authentication

When Twitter first announced their API back in 2007 they only had one method of authentication. This was Basic HTTP Authentication, which means sending a users username and password to let Twitter know you are requesting data on behalf of the user. This is great for Twitter clients like Tweetdeck and Tweetie because users are used to doing that with Instant Messenger clients etc. Beware that there are some big drawbacks.

With web apps it means that phishing is an issue. Any website could grab your Twitter credentials and take over your account and do a lot of damage.

The next biggest problem that Basic Auth brings is that it hides which user/application that’s sending tweets. This means that if an application gets your details and does malicious things with it, the only thing you can do is change your password and then go back to all the legitimate applications you use and update your credentials with them.

Sample PHP code for requesting a users direct messages

//Initiate a curl session
$ch = curl_init();

//Set the URL to the Public timeline
curl_setopt($ch, CURLOPT_URL, "http://api.twitter.com/1/direct_messages.xml");

//Add the users username/password (you will need to get this from the user)
curl_setopt($ch, CURLOPT_USERPWD, "someusername:somepassword");

//Set a reasonable timeout of 5 seconds
curl_setopt($ch, CURLOPT_TIMEOUT, 5);

//Make sure we return all the data
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Put the contents into a variable
$xml = curl_exec ($ch);

//Close the curl session
curl_close ($ch);

//Print out the xml
echo $xml;

OAuth

If you don’t know what OAuth is please see this wikipedia article. There are 2 main advantages for users who authenticate using OAuth, the biggest being that they don’t have to enter their username and password into a third-party application because when authentication is needed the app redirects to Twitter.com so the user can enter their credentials there. When a user does this the application gets a couple of codes that are unique to that user and that application. This leads on to the second advantage. Because the codes given to the application are unique to the user and application it means Twitter knows who is sending tweets on the users’ behalf and therefore the users can remove a single applications access to their account without disrupting other applications access.

The image below shows you how you can connect to Twitter and get access tokens so you can then send status updates etc without using a users username and password.

Future changes to the API roadmap

At Le Web 2009 Ryan Sarver from the Twitter Platform team gave us a preview of where the API will be going in the next year. There were a few changes to authentication. One of those was that there is going to be a 6 month deprecation of Basic Authentication. This is a big step and could well stop thousands of applications working. So they have done a couple of things to ease the transition:

• If you use OAuth authentication the user will have 10x the number of request available in their request limit
• You can use a persons username and password to get OAuth access tokens

So both of these points are encouraging you to start using OAuth as the only method of authentication for Twitter. It’s a great step forward to make Twitter more secure for their massive user base.

Ollie’s golden rule for authentication

Only use Basic auth if you absolutely have to. If you are doing a web app don’t use basic auth! Promise me!

No related posts.

One of the questions that most young people ask me is “how do you get into this industry?” It’s a bit of a catch 22. To get a job in the industry, you need experience, but to get experience, you need to have worked in the industry.

Clearleft are offering a 10 week internship in the spring. This is an incredibly valuable opportunity to work with an award winning web agency alongside a group of amazing people. If you’re a web designer or aspiring user experience designer and would like to work in the coolest city for the coolest company in the UK, you’d be an idiot not to apply.

Here’s some more information about Clearleft’s intern role and who to contact

We asked Clearleft’s previous intern, Jon, to tell you a bit about what it involves, and what he got out of it in the end.

No related posts.

What is Upload Robots? What does it do and when did you start it?

Nick: Upload Robots is a file sharing application. We feel that most of our competitors over run their site with advertisements, and have too many useless features. I started the initial plans for Upload Robots on the back of a math test in fifth grade. I had an initial prototype in 2006, which was visually horrible and without branding. David joined the team summer 2009.

What motivated you to set it up?

Nick: I created Upload Robots to transfer academic papers from my house to school, as I never seemed to have any printer ink. Upon checking analytics, I found that dozens of students as well as many teachers were also using the program. I guess the initial inspiration were the kids and teachers in my school who were relying on something I built to manage their important documents, but we wanted to build a file-management system more powerful than that.

David: When I joined Upload Robots and co-founded the site earlier this year, we were talking about a project to start for the summer and thought developing Nick’s earlier proof of concept for Upload Robots would be a great idea.

What’s your business model?

David: Our hosting and various other fixed costs are covered by the revenue generated by our premium membership and a sponsorship program. We insist on the lack of adverts on the file manager, and fortunately current free to premium conversion rates indicate that our business model is sustainable and scalable.

How did you find the whole business side of the project? Did you have anyone you could turn to for help?

Nick: We actually found the business aspects of the project to be pretty simple. The only management we had to provide was responding to contact forms. We sometimes receive a dozen per day, and we respond to every one. One benefit of being so small is that you never ran into any problems with bureaucracy. Our jobs were very clear: David designs, I develop. We rarely interfered with the other’s job. As Upload Robots grew, we have met some really cool people such as the wonderful Scrunchup team that have helped us by providing suggestions as well as assisting with marketing by featuring us on their site.

David: We’re not too good with P&Ls though.

What obstacles did you hit during development, and how did you overcome them?

David: The first obstacle was a simple one: finding enough time to complete the project. I currently work as an interactive designer at a non-profit and I know Nick works on various side projects almost constantly.

Nick: The hardest part of development was the uploading (big surprise). Instead of just using the solely the standard LAMP setup, I combined a few languages such as Perl and Python, using the best of each language to greatly increase performance.

Do you think your age has been a help or a hindrance to the development of the project?

David: Hush. Please don’t tell anyone, no one yet knows and we’d probably lose all of our customers if they did.

Nick: I think that it was both a hindrance and a benefit to the project. Being so young, VC backing was not an option as it’s too risky to invest in a couple highschoolers. We also have to constantly conceal our age because we are dealing with people’s important documents, and they might not trust us because people, including ourselves, are inherently ageist. One benefit is that by living in our parents house, we have virtually no living costs, so we could work full time on Upload Robots instead of having to get a side-job to sustain us.

What/Who are your inspirations?

David: I am really inspired by minimal, Swiss-styled design. Although classically minimalist site would not have been practical for Upload Robots, I still carried the philosophy of necessity & functionality over unnecessary adornment when creating the user-interface. This may sound trite, but the interactive designers at Apple have really been pioneers in user-interface design and I was certainly inspired by the revolutionary interface on the iPhone.

Nick: Although there aren’t too many famous programmers to look up to, I’m a fan of John Resig, the creator of jQuery.

Where do you see yourself in the next 5 years?

David: I will be at a university in the UK, studying classical history. I will of course be running Upload Robots and doing web design in my free time.

Nick: I’ll be at college studying computer science, hopefully running Upload Robots on the side.

What resources would you recommend to others wanting to create a cool app?

David: For aspiring app designers, learn HTML/CSS before going anywhere near Photoshop. Knowing how the web actually works is significantly more important and will save you time in the long run. A great resource for learning HTML and CSS is the ubiquitous W3Schools and the HTML validator. Design resources are everywhere, open your eyes.

Nick: Know what your application does. If you cannot explain exactly what your software does in five words, it is too complex. When you have a working prototype, write down features you want to build before you call it finished. Otherwise, you will keep adding features till it unusable.

What are your favorite quotes?

Nick: The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time. – Tom Cargill

David: Opportunity is missed by most people because it comes dressed in overalls and looks like work. – Thomas Edison

How did you start learning web design?

Nick: My father used to be a programmer, he taught me a bit of Visual Basic when I was 8. Since that point in time, I have spent hours a day learning about technology.

David: DM: A course in high school, no social life, and a love of logic, simplicity and beauty.

Do you have an idea of what your next big project is?

Nick: We are actually writing a book that is scheduled to be published this Summer. We still need to work on a title, but it will be something along the lines of ‘When Do I Start? The young entrepeneurs guide to staring a web business’. It will be roughly one hundred fifty pages in length.

No related posts.

There haven't been any tweets yet :(

No related posts.

From reading the previous parts of my article series, you are probably starting to get an appreciation of web standards and why they are a good thing. You are probably also thinking that the majority of web developers out there are therefore following standards, and the web is a nicer, more fluffy place as a result.

Unfortunately, this is not the case. As a measure of how widespread web standards adoption is, Opera’s MAMA project trawled over 3.5 million web sites and collected various types of data about them, one of which being whether the page’s HTML validated or not. The rather worrying result was that 4.13% of sites surveyed actually validated. Why is this figure so bad? There are many reasons why people are not creating valid code and following standards:

• They’ve been paid to create sites this way for years – why should they bother to take time out to learn new skills?
• They’ve never been taught the importance of standards, and don’t really know they exist. Their course at uni or school didn’t contain anything about web standards
• They are developing sites for a company or university Intranet, and they can guarantee that their users are being forced to use Internet Explorer, therefore they don’t need to bother with worrying about cross-browser compatibility, and can use Internet Explorer-only technologies such as ActiveX.
• They are inexperienced hobbyists, and don’t want to know about the underlying technology and how it works; they just want to get their “look at my kittens” page up on the Web as easily as possible, either by copying and pasting code off a tutorial site, or using a template from an authoring tool such as Dreamweaver or Frontpage.

Whatever the background, I think education is the common thing lacking in all the above cases.

The education deficit

People think that web standards are too hard to learn, or it is too hard to find decent training material, or too expensive to buy books or go on courses.

University courses that touch on web development are usually hopelessly behind the times, and students are rarely taught about web standards. they are usually taught about the Web from the programming direction (“this web thing isn’t like real programming; it’s a bit fiddly and annoying, but I guess you’d better know about it”) or the graphics/multimedia direction (“this web thing is heavily related to graphic design, but it’s a bit complicated and requires code and stuff – let’s see how you go”). There are few courses that teach web development or design as the central focus, and fewer that teach web standards. I’ve even heard stores of students being marked down on their course work for using CSS rather than HTML tables for layout and <font> elements for styling, because that is what the curriculum still says to use.

Secondary schools seem to have it even harder. When I was talking to Anna about writing this article, I commented than when I was at school, IT courses sucked because they were nothing more than Word and Excel courses. She commented that basically nothing has changed (in the last thirteen years!) I found this really worrying – “the younger generation” is a lot more IT-literate these days, and from my experience kids already know how to do Word documents and Excel spreadsheets before they get to secondary school. By that point, they are customizing their own pages on social networking sites, and even putting up their own web pages. But courses at secondary school don’t teach them what they want to learn, so the courses tend to be really poorly subscribed.

I’ve also heard a lot of my friends at professional companies comment that when recruiting new employees, it is hard to find graduates that possess the basic web standards skills, even though these skills are becoming increasingly more sought after.

DISCLAIMER: Note than in the above points, I am stating the general pattern I have experienced over the years; I am certainly not trying to say that these points ring true in all cases. If you are, for example, a school or university teacher that does teach web standards effectively, don’t feel offended. In fact, get in touch with me so you can share your experiences!

Making a difference – the web standards curriculum

WAIIIIIIT A GODDAMN MINUTE!! I said one day (If I remember rightly, it was at about 9.43 one evening, and I was in the bath. It caused quite a stir).

These kinds things were worrying me, so I decided to do something about the situation. I decided to get together with some of my friends and create a definitive course to teach how to do client-side web development properly, using web standards, and make it available online for free:

• It would dispel complaints that teaching material was hard to find, or expensive.
• It would make it easier to get web standards introduced in school and university courses, if ready-made teaching material was available.
• It would also give existing web developers a useful resource to learn from, teach others from, or use to justify investment in web standards to their bosses.

My employers – Opera Software – are passionate about web standards too, so they agreed to fund the project. After many months of hard work, the Web Standards Curriculum was released upon the world. It is completely free for you to use, and released under a creative commons license, so you can feel free to distribute and republish it, as long as you give the original source a credit, and don’t try to sell it for money. The granular nature of the course is very useful, as it is easy to chop articles out, change the order, etc, to suit your particular educational needs. There is also another curriculum available called WaSP InterAct that works in tandem with my course. Opera provides the raw tutorials, and InterAct provides course structures, teaching resources, etc.
.

Let’s all work together

So how can you make a difference? I think my course could really make a difference to web design and development education, and web standards adoption. I’d like to recommend that you all check out my course, and pass it around to any of your friends that are interested in making their own web pages; I’d also like to suggest that you give me any feedback that you have on the course, good and bad – what have we done well, and what could we improve on? What bits of it are hard to understand?

We can go further than this as well – I’d like you to help me by evangelising web standards at your school, university or workplace. Share my course with your teacher or boss, and we can try to get them to understand the importance of web standards more.

I’d also like to start work on introducing some pilot education schemes at universities and secondary schools. I’d like you to introduce me to your teacher, send me their e-mail address (asking their permission first is a good idea) perhaps, so I can talk to them and see if they are interested in helping to create some kind of scheme, or at least evaluate my course for use at their school.

It isn’t gonna be easy – we can’t hope to effect big changes overnight – but I believe that if we work together, we can start to make a difference.

Summary

And so concludes my overview of web standards, with a small education rant tagged on the end. I hope you found it useful. You can get in touch with me on Twitter, Facebook, and My Opera.

No related posts.

What is 24ways and why did you set it up?

24ways is a website publishing 24 web design and development articles each December. The idea is supposed to be that it’s a bit like an advent calendar, but instead of a picture and a chocolate behind each door, we have a handy tip or technique that you can use to help improve the way you work.

I’d seen a site for the Perl Advent Calendar, which had been running for years, publishing articles about the Perl programming language. I thought that was fun, and wondered if there might be some way to do something similar based around Web Standards. The only snag was that this was November 2005 – late November, in fact, so if I was going to get something ready by 1st December, I would have to move fast.
At the time there were a lot of Web 2.0 companies and sites springing up, and many of them had numbers in their names. 37signals, 43folders and so on. To play on this a little bit, I picked the domain name 24ways.org, with more full title of “24 ways to impress your friends”. Seems a bit weird now, thinking about it, but I wanted the articles to be something that would enable readers to go away knowing they’ve learned something cool that could later impress their friends (or more likely colleagues) with.

I quickly threw together a design and a site based on Textpattern and set about asking everyone I knew in the industry if they’d be prepared to contribute. Lots of them did, and we were off! That first year I wrote four articles myself, but the other 20 were contributed by friends and colleagues. It was very intense, but a lot of fun.
We’re now in our 5th year, and will have published 120 articles by this Christmas. That’s a lot of content!

How do you fit 24ways around your other work?

24ways doesn’t generate any money (in fact, it costs a little to run, which is covered by edgeofmyseat.com) so I fit it around work. The effort falls into two halves – there’s the prep during November getting it all lined up and then the donkey work of publishing articles once we’re into December.

Since 2007 I’ve had Brian Suda helping me with the co-ordination and planning. It’s really just a big admin job – planning topics and possible authors, sending emails, juggling the schedule. We run everything using Google Docs, which allows us to collaborate on the same files whilst being in different countries.

During December it’s a constant game of trying to stay far enough ahead of the schedule that we don’t crash. We always try and get as many articles in as possible before December, but as all authors are volunteers fitting writing around their work schedule, we can’t be too demanding, and most articles come in later than we’d ideally like. We start out with our perfect vision for all 24 days, beautifully flowing between themes, but we’re then constantly reworking based on what articles we have in our possession. We try to keep it at a point where we’re not forced to publish the only article we’ve got, but we usually get close with days where we only have one completed article in the buffer.

All this happens on and off during the day, at the same time I’m also dealing with regular client work, but when you run your own company the distinction between work time and spare time doesn’t always exist!

Do you give people a specific topic to write about, or do they come up with one themselves?

I always encourage authors to write about what they currently find interesting. The idea being that if the author is excited about a subject, then the audience will be too. So the topics usually come from the authors.

We have a general idea of the sort of things we’d like to cover during the series, and we’ll usually target specific people to invite to write based on that. For example, this year we’re covering a few different aspects of HTML5, and so we researched and invited authors who have been doing a lot of work around HTML5. We then work with them to come up with an interesting idea in that area.

Which articles that people have written for your site do you think young people starting out would find the most useful?

The great thing is that we’ve got a lot of reasonably bite-sized articles on a very wide range of topics. So it depends where your interest lies.
We’ve got articles on design techniques and inspiration, on writing markup, advanced CSS and all sorts of interesting JavaScript and Ajax techniques. There’s stuff about website performance, using APIs and running sites in the cloud. For young people starting out, particularly if they’re starting out by freelancing and doing bits of work around education, we’ve got a few business-related articles that are great.

• Charm Clients, Win Pitches by Marcus Lillington
• Contract Killer by Andy Clarke
• Recession Tips For Web Designers by Jeffrey Zeldman

What other interesting projects are you working on at the moment?

This summer we launched a small content management system aimed at people building smaller sites. It’s called Perch and is perfect for sites where the client needs to be able to update the content, but you don’t want to go mad implementing a really complex CMS.

Other than that, we’ve got lots of client projects on the go – we build a lot of content managed sites, we’ve just launched an ecommerce store for one client, and we’ve been hired to build a web app for another startup. So it’s all go – we’re lucky that even in the current economic climate we’re busier than ever.

No related posts.

Freelancing “on the clock”:

So, how much should you charge per hour? Some would say, “whatever you can get away with”. And while there is an element of truth in that, it’s more about your confidence in your ability to do the job. If you are just starting out from University/College and decide to charge your first ever client a fairly premium hourly rate like £35 per hour, for example, you are setting the bar fairly high and setting an expectation with the client that they are going to be getting a high standard of work. This could go wrong, and you could end up looking stupid. This means no repeat business from that client and possibly a bad reputation for you within that clients network of contacts (“Oh, him. He ripped me off and the work wasn’t great”). Bad times.

Sticking my neck out: I think if you’re a Graphic or Web Designer just starting out (I mean literally starting out, your first ever real clients), but you believe you can do a great job for your client, you should be charging in the region of £12-£16* per hour for the first 6 months. Once you’ve got some great portfolio jobs under your belt and a few happy clients, I think you can start to increase your rate every 6 months or so. After a year or so, you should be aiming to charge c.£20 per hour. Then increasing each year by around 20% + inflation.

Other factors to consider:

Geography plays a part – London designers tend to work with clients that expect (or have learnt to expect) to pay higher rates. The same goes for other major cities but generally speaking to a lesser extend than London. I will often charge / price differently according to region (usually because of travel costs etc, but also because in some cases (like London) if you under-price, the client might wonder if you’re up to the job).

Economic climate has become a factor too, and it’s worth taking a look at the latest industry news to see how rates (or expectation of rates) is being affected. (Design Week is a great place to start for this info)

There is also a variation between rates across different disciplines. A top-end Flash Animator or 3D artist would tend to command more than a Print or Web Designer, for example. Some skills become “fashionable” and so become in demand and attract higher rates. I think Ruby on Rails Developers would be an example of this right now. They are not easy to come by and in much demand.

Pricing for “Projects”

Of course, pricing becomes more complex when you are pricing a “Project” (where you may be working with a sub-contractor or partner) as opposed to simply Freelancing for a certain amount of hours or days. Project pricing is something I still learn and get better at every day, but here are some tips I’ve picked up along the way:

• Don’t forget how much time you put in “either side” of the project. Research, initial meeting, proposal, phone calls, emails, project management and reviews. Estimate all of this time using your hourly rate and build it into the project fee.
• Add a contingency margin. What’s that? Well, it means if the client is asking for a “fixed fee” quotation you need to expect things to drag on a little bit and build this time into your quote. (I go a bit further than this, but that’s more to do with Scoping and Contracts – which is another issue :0) – If you’re pricing in a sub-contractor, add a margin to their hourly rate. It’s your client, and your project, and you will have to spend time briefing the sub-contractor and being the liaison between them and the client
• Be open (but not THAT open). I often break my proposals down into Consultancy, Design and Development. I sometimes even make it clear the Contingency I have added in. This sets up an honest and open relationship. It also re-assures the client that you know what you are doing and have not just plucked a figure out of the air.

Of course, if you can – ask what the client’s budget is. Most clients will have some idea, some won’t want to let on. It’s worth asking. If they ask why you want to know, just be honest and say “There are probably a few different approaches / technologies we can adopt for this project… your budget will determine which one we take and allow us to deliver as best we can for the budget available”.

I base this on the following:

Junior Designer jobs tend to pay between £13,000 and £16,000 on a PAYE Salary. This is an average hourly salaried rate of 7.55 p/hr. If you take this rate but add to it:

• your own self-employment tax contribution and National Insurance payment (around 27% of everything you earn)
• your time to find more work (you’re trying to make a living after all)
• time spent proposing on, winning and managing the project
• misc costs for running your business

Then, £12-£16 per hour is a fair equivalent freelance rate for a Junior Designer starting out in the industry. Later you can start to charge for your experience, knowledge and flair too. :0)

No related posts.

There haven't been any tweets yet :(

No related posts.

This is a question many people ask when they first start creating a web page. After all, one reason why web development has always been so accessible to a large number of people is that web browsers are a lot more forgiving when rendering web pages. In contrast to programming in say Java or C++, where syntax errors and suchlike will cause the code compiler to refuse to run your program at all, you can break all kinds of rules in HTML and CSS and still get something that looks ok on the web browser on your computer at home. So why bother imposing extra rules on yourself? The benefits are not immediately obvious, but believe me, you will start to appreciate them as you delve more and more into web development. I’ll summarise the main reasons in this section.

Semantics

Another related concept that is very important when creating web pages is semantics – this basically means making things self-describing, ie their appearance describes their function or purpose. This may not sound immediately that mind-blowingly useful, but think of it like this – how useful would a stop sign be if it said “go” on it? How useful is a light switch if it is painted to look like a fire alarm?

Transferring this logic on to the Web, how useful is a navigation menu if you can’t tell what information the links lead to, or even that there are links present at all? I think you get the point now. Semantics are very important in many ways on web pages, and web standards provide you with a perfect means to implement good semantics, as long as you use them properly.

Let’s look at a quick example. Say you want to put a title up on a web page, followed by a list of things to do on a day (Let’s not choose a work/school day). How would you structure this using HTML? It is best to choose elements that describe the function of the text, like so:

1. <h1>Things to do on Saturday</h1>
2. <ol>
3. <li>1pm: Wake up! Have a quick bite to eat at nice cafe down the street.</li>
4. <li>2.30pm: Meet more friends in town and go shopping.</li>
5. <li>5.30pm: Grab something light to eat at home.</li>
6. <li>7.00pm: Have a jam with friends, form a new band.</li>
7. <li>8.00pm: Go to local venue and watch metal bands play.</li>
8. </ol>

Well, that’s my idea of a good time anyway. This code would render as follows:

(I’ve also used a list-style:none; CSS rule to get rid of the default 1, 2, 3, 4, bullets that appear on ordered lists – view the page source to check this out.)

This is a good way to do it because heading elements (<h1>-<h6>) are the one and only choice for headings/titles on pages, and an ordered list (<ol>) is the best choice for a list of items where the order of the list items (<li>) matters – it wouldn’t make sense to try to do these activities out of order! You’d use an unordered list (<ul>) in cases where the order doesn’t matter, for example a shopping list.

So why not just mark it up with any old element? You could get a very similar-looking page using the following:

<font size="5">Things to do on Saturday</font>
<br><br>
<font size="2">1pm: Wake up! Have a quick bite to eat at nice cafe down the street.</font>
<br><br>

<font size="2">2.30pm: Meet more friends in town and go shopping.</font>
<br><br>
<font size="2">5.30pm: Grab something light to eat at home.</font>
<br><br>
<font size="2">7.00pm: Have a jam with friends, form a new band.</font>

<br><br>
<font size="2">8.00pm: Go to local venue and watch metal bands play.</font>

(You could even use elements like <banana> and <weasel>if you wanted, and then style them how you want them to look using CSS.)

But this is really bad. In terms of what its function is, it isn’t a heading followed by a list – it is a large line of text followed by some smaller lines of text. And that’s how it will be seen by browsers parsing the code, by search engines (such as Google) looking to pull up content in search engine results and by screen readers (used by blind people to read the Web.) Plus it is larger in terms of file size, harder to style, and more time consuming to make changes to later on.

Ease of maintenance and flexibility

When you separate your structure (HTML) from your presentation (CSS) and behaviour (JavaScript) and use good semantics, you will make your code a lot easier to make changes to in the future. Writing clean HTML to mark up your content and using human-readable class names means that it is a lot easier to find the parts you want to alter later on (it is hard to style just the lists in your page when you have used <font> elements to mark up all your content – how do you point your CSS to just the lists?), and having your JavaScript and CSS nicely laid out with descriptive comments added means you will find it a lot easier to understand how it all works if you come back to a site after not touching it for six months (or if someone else has to maintain your code in the future).

Standards also mean a lot more flexibility. For example, if you are administrating a book review site, and you are using <font> elements to specify the colour of all the quotes on your pages, and you wanted to then change the colour of all those quotes, you’d need to painstakingly pick through every page of your site and change all those instances. That wouldn’t be too bad for 5 pages of reviews, but what about when your site gains popularity and you have 50 reviews, or 500 … or 5,000? If you instead structured all your quotes correctly using <blockquote> or <q> elements and controlled all the styling from an external CSS file using a simple rule along the lines of blockquote { color:red; }, all you’d need to do is change that style in one place, in one file, and it will alter all of the instances, on all pages.

Here’s another example – a lot of sites still use HTML tables to lay out pages into various numbers of columns, or rows. If you for example had a two-column layout consisting of a main content column and a navigation menu column (you’ll see loads of these on the Web), laid out using two table cells, and you wanted to change the position of the navigation menu from the right of the screen to the left, you’d need to mess about changing the position of the content in the HTML. If you were creating the same layout, but using CSS to float the columns beside one another, all you would need to do to make the change is reverse the float values in the CSS – a much simpler change.

Accessibility and cross-browser compatibility

In general, using standards and best practices makes it easier for people with disabilities to access your content – let’s look at a few examples:

• Marking up content properly using proper semantics – heading structures and paragraphs – make it far easier to navigate your content quickly when using a screen reader to read content out (blind people use these a lot.)
• Some people suffering from mobility impairments cannot use their hands very well, or at all, so have problems using a mouse. They therefore need to use the keyboard to navigate web pages, using the tab key to move between links or form elements, or access keys, or features such as Opera’s spatial navigation.
• People who cannot see obviously will not be able to access words inside images, so just don’t do this! If you do wish to use images to convey useful information (eg pie charts or graphs), make sure the image has meaningful alternatives available via the alt or longdesc attributes.

Disabled people represent a significant web audience, and it is wrong to ignore them – how would you feel about being denied access to the web because of the language you speak, or because of the colour of your hair? I know this last example is a bit trivial, but it still serves to illustrate the point. As well as being the right thing to do, it also provides businesses with access to an extra market that they could not reach before. Check out Accessible design makes money for some more details about accessibility business benefits.

IT’S ALSO THE LAW. Well, it’s a bit more complicated than that, but many countries now have acts/motions passed into their law to prohibit web sites that offer a service to the general public (or members/employees, etc.) from being inaccessible to people with disabilities. It is discrimination, pure and simple. And there have been a few high-profile lawsuits against companies and other entities because of inaccessible web sites. If the “get more users” carrot doesn’t make the business donkey run faster (I paid Bruce Lawson a fiver for this metaphor), then the “avoid getting your ass sued off” carrot will…

See Olympic failure for some details about the Sydney Olympics accessibility legal case, and Update on the Target accessibility lawsuit for some details about the lawsuit against American store chain target for having an inaccessible web site.

And accessibility doesn’t end with disabled people using the web. It also describes people using many different desktop browsers to browse the Web, and alternative devices such as mobile phones, televisions and games consoles. These browsers all expect web standards, and if the code they are given is nice web standards code, then they have a higher chance of rendering your code consistently and correctly (some browsers still have bugs and other quirks which may cause problems). If you don’t bother to use good valid code, browsers have to kind of guess what you intended and fill in the blanks, and because they don’t generally guess correctly or do it consistently, you will get errors and unexpected behaviour.

In some parts of the world, more people use mobile phones to access the Web than desktop computers, because of cost or lifestyle choices. Using web standards means that your web sites are more likely to work on these different devices. This is not only because of pure standards support, but also because good use of standards, image optimisation, etc. can mean less processing required and smaller downloads, which means a better user experience, and less cost for those paying for downloads by the kilobyte, which is still common in some places.

Ease of debugging

If you don’t follow best practices, and don’t write good code (eg don’t close and nest HTML elements properly), you are making web browsers work harder to render your sites. This is because when a browser comes across broken code, it attempts to second guess what you were intending, and fills in the gaps for you. But browsers don’t do this consistently, and you will get unexpected behavior when trying to traverse the DOM, leading to further problems with your site (“traversing the DOM” is done when elements are selected, for example when a CSS style is applied to an element). Following the HTML standard properly (applying a doctype to your HTML pages, and then validating your HTML against the rules defined in the doctype using the W3C validator) means your code will work more consistently across browsers; validation is a powerful debugging tool.

Search engine rankings

Using standards and semantics effectively makes your pages more likely to appear higher in search results from search engines such as Google, Yahoo!, etc. This is because these engines rank the importance of search terms by their appearence in heading elements, meta elements, and the frequency by which they appear. If your page is seen as being a more relevant resource concerning these search terms, then it will appear higher in search rankings; if you use no heading elements, then your “titles” will not be seen as important by search engines. Thinking carefully about what terms use on your pages will logically make your pages appear higher in more relevant searches!

A few of your are probably wondering why browsers still support outdated features such as <font> elements when they are generally considered bad practice? Well, a lot of people are still using these outdated methods, and a lot of web sites still feature them. To stop supporting them now would break a lot of existing web sites! All we can do is start doing it right from now on, in the hope of seeing these outdated methods phase out gradually.

No related posts.

So why would you bother? Firstly, maintainability. The goal is to keep the mechanics of your code separated from your HTML. By removing these dependencies you can re-craft your HTML without making huge changes to your functions. Secondly, re-usability. By abstracting the function you are trying to perform away from the specifics of the site you’re currently working on, you can easily apply your code to future projects with little effort.

So, here is our quick-hack. All we want to do is create a sideways slide-out menu. Click on our button and out it slides.

Ok, still with me? Excellent. What we’ve done here is animate our slide-out div from 0 pixels wide to 100 pixels wide in 300 milliseconds. Pretty smooth. Now let’s list the things that are wrong here.

1. This will only work with the 2 divs specified, we can’t easily apply this to any other divs.
2. We have hard coded the width of the div, rather than letting the CSS handle layout.
3. We have no way of re-binding the click event in case we make changes to the document, such as we often like to do with AJAX.
4. If we place all our Javascript inside our document load function, we’ll eventually end up with one huge function, very difficult to manage.
5. We’re pros, we wanna take it to the next level.

Right, the first thing we do is place our code in its own function. This is easy enough.

This is great, we can now turn any pair of elements into a slide-out menu and at any speed. Great start, and already several benefits. Where do we go from here? Let’s tackle the width issue. Browsers let us add custom data to any element on our page, and jQuery provides handy methods for us to achieve this.

And here is our new function:

That wasn’t so bad, this is also how built-in jQuery functions like slideUp and slideDown remember the original sizes of stuff that you ask it to animate.

What we have so far is good, and there’s nothing wrong with leaving it there. However, we’re now gonna make this a full-blown jQuery plugin. What we want to be able to do is make anything we like slide-out whenever we like. This separates our sliding logic from our menu setup logic. Here’s what we want our makeOurSlideyMenu function to look like.

That’s a beauty, clean and simple with no animation logic included. However, it doesn’t work yet. We now need to create a slideOut function, so this is where we get clever. jQuery lets us extend the jQuery object itself and add custom functions using the jQuery.fn.extend method. There are just a couple of simple rules to remember, we wouldn’t want to break convention now. As a rule, jQuery() functions return a jQuery object. In the cases of animation we’ll return the same object that was given to us, which allows for function chaining (y’know, like $(something).doThis().doThat() etc). Also, we try not to assume that the user will always send parameters into a function (so, if they forget to give you a speed, just assume a default speed). Inside a jQuery function, ‘this’ refers to the jQuery object containing the elements we care about.

So, let’s get stuck in:

What we’ve done here is called a function within jQuery that extends the jQuery functionality. We pass into this the name of our function and its definition. We can now call our slideOut function on any jQuery collection of elements and each one will animate over the specified time. This will really make our life easier in the future and keeps the site specific logic tidy.

Related posts:

1. CSS Nuggets in Scrunchup

:first-of-type

For an example of this, have a look at the first paragraph of this article. I have set the font size of the first paragraph to be slightly larger than the paragraph text in the rest of the article to draw the reader in.

:last-of-type

The :last-of-type selector is useful if you want to take the bottom border out of a table. In this example I’m changing the bottom border from black to red so you can see it working.

Remember this isn’t just restrained to tables, you can use it for other elements too.

nth-of-type

One of the things that CSS is not great at (at the moment) is grid layouts. Scrunchup’s homepage has grid blocks for each article, and getting them to line up vertically and horizontally was a bit of a challenge. I want to tell the block on the end of the row to clear, but none of the others, and the only way of doing this with CSS that I knew of was by adding a class to the last block on each row with, and targeting it with clear:left. Not only does this add extra markup, but the content I’m styling is dynamic – what is the last block in the row at one time may be the first at another. Our search results page is a good example of this.

Why you shouldn’t define heights

We could give each block a height of, say, 400px and that would solve the problem. But this is a really bad idea. If someone visiting your site wants to increase the text size, or you have just a little more text in the block than the block can hold, it will break the layout. This is one of the things that differentiates web design from print design – content on the web is dynamic.

Using a wrapper div

Having different sized boxes without setting the 1st one on each row to clear causes the layout to break. The most common way of fixing this is to put each row in a wrapper div. But this adds extra markup, and you still have the same problem if the grid blocks are not static.

Using nth-of-type

Here’s the code I used to solve this problem:

It uses a little bit of maths that, very basically put, tells the 4th block in every row to fully clear the blocks above it. Being able to specifically target an element without giving it a different class is incredibly useful.

We can also use exactly the same technique to turn off the margins in the 3rd block of every row so it lines up flush to the left and the right.

nth-of-type is an incredibly powerful selector, and can be used in some really creative ways.

Faux Randomness

For the tag cloud at the bottom of each page, I got the tags to rotate at different angles. It looks random, but it’s not really. Here’s the code:

Shadows

In case you didn’t know how to already, here’s how to use CSS to make shadows.

I’m going to break this up to show you what does what. The first bit we define is how far we want the shadow to offset to the right, so 1px shifts the shadow 1px to the right. The next bit shifts it down, so in this example, it will be shifted 2px down. Where I’ve put 3px is the amount of blur the shadow will have. If I put 0px, it would be a solid shadow. Finally, I’ve given the shadow a colour of #333333 which is a dark grey.

Inset Shadows

You can also do inset shadows. These can look quite good on form labels, such as search boxes to make it look like it’s cut into the background. Here’s the code:

Each browser has its own proprietary way of understanding box-shadow because it’s quite new, so to make sure it shows up in previous versions of browsers, you’ll need to repeat the code like this:

IE has it’s own unique way of doing shadows, so you’ll need to put this in your CSS too…

Transform

If you have a look at the author photo at the top of the page, you should see it’s slightly tilted (depending on your browser version).
To achieve this effect, you can use the following code:

This rotates the element 2 degrees clockwise. If you put (-2deg), it turns it the opposite way.
To make it look like a polaroid photo, you can use this code:

Icons

To automatically show a filetype icon on a link to a file, you can use something called an attribute selector. In this example, I’ve set all links to .pdf files to display a little pdf icon. The href$=’.pdf’ bit looks for anything that ends with the string .pdf.

You can also do the same thing with links. I’ve set all the links on this site that go to Flickr to display a little Flickr icon. The href*=”http://flickr.com” bit looks for anything that contains the string http://flickr.com.

Browser Support

Most modern browsers support all of these CSS nuggets, with the exception of IE. I’d put a full browser support table for each of these selectors but it would date very quickly, so to find out which browsers currently support which selectors, head on down to www.quirksmode.org – it has a lovely compatability table and resources which I refer to extensively, and I really recommend it.

Got your own CSS Nuggets? Share them in the comments.

Related posts:

1. The Evolution of a jQuery Plugin

How you can take part:

To cast your vote, simply mention @ScrunchUp in a tweet and include the hashtag #yesunpaid or #nounpaid. Your tweet will automatically go into its respective column, and your first vote will be counted. Subsequent tweets will not count.

Tweet to this account: @ScrunchUp

Most recent tweet date: Fri, 07 May 2010 09:27:04 +0100

#yesunpaid

Total votes: 5

Most recent votes

@timjnx wrote:@ScrunchUp you could consider working for free if you need the experience, or you believe in the cause you are working for. #yesunpaid10 months ago

@DanBlog wrote:@ScrunchUp #yesunpaid Hooray for good karma!10 months ago

@prettierpixels wrote:@scrunchup #yesunpaid I volunteered to do some web work for @dogstrust earlier in the year, and found it to be very rewarding.10 months ago

@LauraKalbag wrote:@scrunchup #yesunpaid - it's good to do charitable and experimental work to help improve yourself (as long as you have other paying work!)10 months ago

@ollieparsley wrote:@ScrunchUp I'd have to say #yesunpaid all my work is unpaid as it increases profile and adds to my portfolio10 months ago

#nounpaid

Total votes: 7

Most recent votes

@paulrandall wrote:@ScrunchUp I would have to say #nounpaid work, however personal projects are fine (and highly recommended)10 months ago

@simonhamp wrote:@scrunchup it's a tough call, but #nounpaid : a worker is worthy of his wages!10 months ago

@dannycalders wrote:@ScrunchUp You should never ever work for free #nounpaid10 months ago

@adrian wrote:@ScrunchUp Only do unpaid work if its for a charity and they wont be making any money everyone loves the karma. So my vote goes to #nounpaid10 months ago

@dbushell wrote:@scrunchup #nounpaid Always work for what you think you're worth. Are you worthless? No! Then don't work free (unless it's charity ;-)10 months ago

@anna_debenham wrote:@scrunchup Your work is more than just a bunch of pixels on a screen. It's your time and your knowledge, so charge for it. #nounpaid10 months ago

@Cennydd wrote:@ScrunchUp #nounpaid – particularly if it's a family member or close friend. These are potentially the most dangerous jobs of all.10 months ago

No related posts.

Now is an exciting time to be getting into creating web sites — the Web touches many aspects of our lives, it allows you to have an instant global audience, the technologies involved are pretty mature for the most part, there are more educational resources available than ever before and pretty much everyone wants a web site (except my dad). Your friends will love you even more for your new-found skills, and even though it is a very competitive marketplace these days, web design and development can be a very profitable career.

But how do you get into it, and how do you learn what you need to know? In this article I will aim to point you in the right direction, and give you a basic framework of good key concepts to take on board and develop your knowledge of.

Get into web standards!

Being part art and part science, web design and development has never been a very straightforward discipline — there are many good ways to build a web page, and many more bad ways (I hesitate to use right and wrong here, as the right solution for one context can easily be completely wrong in another context). There are many skills to use when coding a web page, some of which I’ll talk about below, and many technologies and techniques to consider, a lot of which are very daunting and complicated for novices to behold. You’re not going to be able to study for a week and then build the next Facebook.

In spite of all this complexity and uncertainty, however, one thing remains pretty consistent amongst all good web sites — the use of client-side web standards to create the web site’s content, visual appearance, layout, and dynamic behavior. And this is where you should start off your learning path.

Client-side web standards?

By this, I am talking about code that runs in your web browser. When you surf to a web page, generally your web browser sends a request to a server, and the server sends back a web page to the client; the client-side technologies used to build that web page are not processed until the page gets to the client. Once there, they are processed, and the result spat out for you to view in your web browser.

Web standards are defined in recommendations — vast sprawling documents maintained by standards bodies (most notably the W3C), which define how those technologies are supposed to be processed by web browsers, and how developers are supposed to use them to create web pages. The W3C are an organization with the aims of standardising web technologies and furthering the evolution of the Web.

But these documents are not the best place to go to start learning web development — they are completely exhaustive in the detail they go into, to try to eliminate as much ambiguity as possible, but this makes them rather cumbersome to digest. You are much better off reading web design tutorials such as the Opera Web standards curriculum.

What other technologies are available?

There are many technologies used in the creation of web pages other than client-side web standards, but I’ll keep things simple and not talk about them much in this document. Here is a short list, just in case you come across some of these terms are are curious:

• Server-side technologies: These are technologies processed by the web server before the result is then sent to your web browser along with the rest of the web page. Such technologies are generally used to connect to a database, and deliver different results to you depending on what options you choose, for example when looking up train times, or buying something from an e-commerce site. Examples include PHP, .NET, ASP, Ruby, Python, and JSP.
• PDF: This isn’t really a web technology as such, although you find it on the Web a lot. It is a format created by Adobe that is good for publishing documents you want to keep as read-only, ie you just want people to read them, and not alter them. They require a special program or plugin to view.
• Flash: Flash is a technology delivered in the form of objects embedded in web pages (termed movies), which need a special plugin to view. Flash is good for delivering certain types of content, such as video, animations, and banner adverts, and can sit nicely alongside web standards, but it is terrible for creating entire sites in, and can be rather inaccessible to people with disabilities (ok, so client-side web standards content can be inaccessible too if done badly, but I’d argue that web standards are easier to make accessible than Flash).
• Silverlight: This is kind of Microsoft’s answer to Flash — a technology created recently to provide dynamic content for web sites. It has many of the same advantages and disadvantages as Flash.

HTML, CSS, and JavaScript

There are many standards maintained by the W3C, but the three you should start off learning are HTML, CSS, and JavaScript, in that order (they get harder to learn in this order, and it is fairly logical to learn them in this order too).

• HTML: This is a markup language that you use to structure your content — it uses a system of elements that you wrap around various bits of content to give them meaning. View the source of this document now — Right-click (Ctrl + click on Mac) and select View source or similar depending on what browser you are using — and look at how the different elements define paragraphs, headings, lists, etc.
• CSS: A rule-based language that you use to style your web page — you can for example select a specific type of element and choose to alter font size, colour, or position on the page.
• JavaScript: A scripting language that allows you to apply dynamic behaviour to sections of your web page, for example allowing you to drag and drop sections, animate things, make things fade in and out, or change styling on the fly.

In general, you should keep your content, style, and behaviour information separate in these three layers, and follow best practices as outlined in my web standards curriculum course. For example, you can add styling information directly to HTML using <font> elements and inline CSS inside <style> elements, but it’s generally better to not do so. In the next issue I’ll talk about this and other benefits of using web standards and associated best practices to create your web sites — accessibility, flexibility and ease of maintenance, search engine optimization, etc.

Related posts:

1. Interview with Zac Gordon

Introduction

Paul Boag: Hello and welcome to boagworld.com, well, at least, a micro-mini little segment of boagworld.com which is a podcast for all those involved in designing, developing and running websites on a daily basis, but this episode for the guys at scrunchup.com. We said that we would do a little bit for their site, talking about a few things that are relevant to people starting out in web design, those of you that maybe are students looking to move into web design. We think that ScrunchUp is going to be a great site and we want to support it loads. So basically they’ve asked us to look at a couple of issues today. Number 1 is what makes a good portfolio, and 2nd we’re going to look at how we go about selecting employees, what gets you hired I guess is the question there. Joining me as always on our podcast is Marcus Lillington, hello Marcus!

Marcus Lillington: Hello Paul, how are you? I’ll be very amazed if this is a very small mini-micro boagworld because they never are!

Paul Boag: Oh, it’s gotta be shorter than we normally do, because that would just be so wrong! So.. you’re sitting there scribbling notes aren’t you.

Marcus Lillington: I’m finished!

Paul Boag: You’ve finished? So you’re ready to go? Ok, that’s good.

Portfolios

Paul Boag: So let’s talk first about what makes a good portfolio. Now, I’ve made a few notes on this one, this is kind of my area of expertise. Marcus is going to do the hiring area because I’m notoriously bad at selecting people. I’m a very poor judge of character and think everybody is wonderful, whilst Marcus is cynical and, you know, and thinks the worst of everybody, so he’s much better suited to that kind of thing…

Marcus Lillington: Oddly, I have to say that actually, we’re probably we’re more the other way round in real life, but when it comes to interviews you’re absolutely right.

Paul Boag: Yeah, it’s weird isn’t it. Anyway, let’s look at what makes a good portfolio. So, a little bit of advice; you’re creating a portfolio, you want to get yourself hired, so what do you do?

Quality not Quantity

Paul Boag: Right, first of all, quality not quantity. So, look, as an employer, both myself and Marcus employ graduate web designers all the time or new web designers all the time, and we recognise you’re not going to have a lot of work, you’re not going to have done a lot by this stage, so it’s quality that matters, and if you can just show me 2 or 3 pieces of work that are really good quality, that’s enough, we don’t need to see loads.

Client Work

Paul Boag: Now, what is useful is if you can show me real commercial work done for real clients. Now admittedly you might not be able to get anyone to actually pay you money at this stage, but even if you can do some work for a charity, a friend’s business or anything like that, having a real client is really useful from our perspective because it tells us quite a lot that you don’t get told on personal projects. So try and at least have something in your portfolio that is real commercial work.

Background Information

Paul Boag: Also, I’m not just interested in pretty pictures. Your portfolio, if it’s full of nice designs, or to be honest, if you’re a coder, nice code, you know, that’s nothing, that doesn’t tell us enough. What I’m interested in is the background information on the project. I want to know what the aims of the project were, and what the exact nature of the work you were doing was. So I need to know that background information to be able to judge whether you’ve done a good job or not in the portfolio piece. So make sure you provide some of that information as well.

Good Understanding of Code

Paul Boag: Certainly, as well, even for designers as well as developers, I want to see a good understanding of code. I want to see nice, semantic markup, I want to see that you avoided hacks, and also, a bit of understanding of JavaScript wouldn’t hurt as well. So, you know, a real kind of knowledge. Now, obviously, if we’re hiring developers here, then I want to see that you’ve got an understanding of server-side code as well, not necessarily that you know the specific language that I want you to code in, but that you’ve certainly got an understanding in object oriented programming and all those kinds of things. I’m going to be careful here because I’m not a developer so I’m going to show my ignorance.

Marcus Lillington: (laughs mockingly)

Design Fundamentals

Paul Boag: From a designer’s point of view, I want to see that you’ve got an understanding of design basics, and to be honest, I quite want to see this from developers, because, developers end up doing a bit of design in the same way that designers end up doing a little bit of development, so, in the same way as it’s important that a designer understands code, and does nice semantic markup blah blah blah, you know, I kind of want a basic understanding of design from a developer as well. But certainly from designers I need to see that you’ve got a good grasp of things like white space, typography, use of grids.

Usability and Interactive Design

Paul Boag: I also want everybody I hire to have a good understanding of usability. Usability is core to what we do as a company, we need to know that you really grasp that, and grasp the importance of user-centric design. Also, I need to see that you’ve got a grasp of interactive design. Some of the graduates that we see are very print orientated and are thinking from a print perspective. That’s not enough when it comes to the web, the web is a very interactive medium, it’s about what users click on, what happens when they click on it, you know, how’s the interface going to respond to them, so it needs to be a lot more than just pretty pictures.

Consideration

Paul Boag: I think what probably sums it up most is what I’m looking for is a portfolio full of stuff that is considered and understated and isn’t flashy design, and I don’t mean the use of Flash, I’m talking about showing off. I want to see a design that meets the brief, that is simple, easy to use, and intuitive. So, that’s the kind of thing that I’m looking for from a portfolio. Have you got anything that you want to add to that one, Marcus?

Marcus Lillington: Errmm.. no, not really. Obviously, quite a lot of the things I’m going to say kind of overlap with what you’ve said, so I guess I have, but I’ll come to that in a bit.

Paul Boag: Ok, go on then, you talk a little bit about hiring.

Hiring

Marcus Lillington: Ok, sure. So, what makes you employable, why are you going to win the job over people with similar qualifications, that kind of thing.. I mean, talking about qualifications, I’ll dive into the one that.. ermm.. er..

Paul Boag: (giggles)

Degrees

Marcus Lillington: People can end up having endless discussions about education, do you need a degree, that kind of thing, and simple answer to that one is no you don’t need a degree. Basically, a university education teaches people to think analytically, so if you’ve come out at the other end of university with a degree of, you know, 2:1 in whatever really, it just shows that you can apply yourself and you can think analytically. So, it’s a box ticked I suppose, but it’s not the be all and end all.

Be Prepared

Marcus Lillington: Basically the next point I’ve got here is about being prepared to show examples of work, so obviously your portfolio which is something Paul’s just talked about, but it can also include non web design related stuff. Just show that you’re someone that’s done various.. you know, "I’ve done this piece of work" or "I worked for a charity" or whatever, that kind of thing just shows that you’ve got the ability to work hard and apply yourself, all those kind of things. Let’s face it, often a job is.. you’ve got to knuckle down and get on with it, it’s not all thinking up creative ideas, and you’ve got to show that you’ve got the ability to be able to knuckle down I guess.

Tests

Marcus Lillington: A separate point here, be prepared to be tested. We don’t test our designers as such, but we have a standard test for all developers we employ, so don’t be surprised if you’re asked to do some kind of test.

Keenness

Marcus Lillington: I guess the main thing, the main thing that’s going to differentiate you from other applicants would be keenness. Just the fact that you’re in love with what you do, Paul’s talked many times in the past about blogging, joining in with forums about web design, that kind of thing. Obviously if you do this to get a job, then that’s not genuine. But if it’s something that you do and you enjoy, that will come shining through. I’m thinking of all the people we have employed, and usually they end up going off in a long diatribe about how much they love what they do, and it’s obvious, by the end of it, this is someone that’s going to work hard because they like what they do, be it design, be it development.

Paul Boag: It’s not actually… you don’t want someone sitting there and going "oh yes, I love web design" because that sounds false. It’s when you get onto a subject, I don’t know, frameworks, right, whether you should use a CSS framework, and this person is really passionate. Either way, even if they disagree with me, even if they think frameworks are the best thing since sliced bread, and I’m not a great fan of them, that doesn’t matter, that wouldn’t put me off hiring them, it’s the fact that they’re passionate and enthusiastic and have got an opinion that matters to me.

Marcus Lillington: I’ve written down here "genuine", and that’s what I mean here. Not everyone’s the same, we’re not all great talkers or wonderful orators and we can express ourselves beautifully and that kind of thing, but you can always tell when someone is genuinely passionate about something, and if you are, that will shine through.

Thumbs up, Thumbs down

Marcus Lillington: The last thing I was going to say is how.. this is something that I heard the guys at Adaptive Path talk about at last year’s SXSW (South by South West) conference, and it really captivated me. When they interview someone, they won’t go into a long chat about will they, won’t they, etc. The first thing they do is the people who were interviewing the applicant, they either.. basically it’s thumbs up, thumbs down or thumbs to the side. And basically, if it’s thumbs up, they’re in, no discussion, thumbs down, they’re out, no discussion. So only if someone has got their thumb on the side there will be any discussion about it. Now, all I would say about that, is how would you feel during an interview knowing that that’s what’s going to happen at the end? Put people in a position where they are going to talk passionately about what they love. So, yeah.

Conclusion

Paul Boag: Ok, that’s hopefully useful stuff and that’s what the great powers at ScrunchUp were actually after, I don’t know.

Marcus Lillington: (laughs) Probably not!

Paul Boag: But there you go, that’s what you’ve got, I hope it’s useful, and, yeah, good on the guys for taking on and doing ScrunchUp, and I wish them all the best in the future. Goodbye from us at Boagworld!

Related posts:

1. The Path to Epic Success
2. Interview with Zac Gordon

I teach full time at a high school in the states (Silver Spring, MD). This involves two web design courses (design and development) and two internships (the school site and work for paying clients). I also adjunct teach at a few local colleges and universities

What sorts of things do you teach to students on your courses?

I take a very web standards approach from the beginning: semantic markup, unobtrusive scripting, mvc programming. Since the classes range quite a bit we cover everything from HTML to WordPress theme development.

What makes a good web designer/developer?

A good eye, patience, ambition to improve one’s skills and widen one’s perspective. Some sick nasty Photoshop skills don’t hurt either ;) Oh, and networking. It can’t hurt to go to conferences or meetups and get to know folks out there in the industry.

Tell us a bit about “dabrook“

Ha! The high school I teach at is Springbrook, affectionately called “Da Brook.” So that’s the name. I use the site to pass information on to my students and any other folks interested in the content my courses cover. I’m all about creative commons licensing so go to town with dissemination!

Why do you teach and work at the same time?

Cause I’m crazy! I teach full time, part time, and run a web design business. Not a very sustaining practice. But I LOVE everything I’m doing and seem to very quickly fill up my time in different arenas regarding webucation and business. Working in the industry gives me a lot of experience interacting with clients and building different types of sites on different platforms and in different environment. So I bring that to the students. That’s tough stuff to learn in school. Teaching forces me to really know my stuff inside and out, on a technical level–reading lots of tutorials and the W3C specs, stuff like that.

What’s it like teaching web design in the States?

Webucation in the states is very promising. Connecting with WaSP and the Interact curriculum has given me a really good framework for talking to institutions, writing curriculum, etc. What’s happening now in the education system is what was happening a decade ago to the professional world in terms of advocating for web standards.

What’s your favourite part of the job?

My students!!!!! You all rock! Want to warm a teacher’s heart? Stay in touch… drop a line… something small really means a lot to teachers who put their heart and souls into their work.

Is there anything you would encourage other teachers in your field to do differently?

Yeah, email me! I’d love to be in touch with other webucators out there ;) It’s hard to say without knowing their specific situation.

What would you recommend to young people wanting to start a career in the web?

You gotta do what you gotta do. I am still taking classes for certification because of No Child Left Behind policies regarding the requirements of high school teachers, so I empathize with those out there in a similar situation. That said, I would never recommend taking a course if its outdated. You’re better off with a book and some time to focus and learn on your own.

What’s your favorite quote?

“My duty is to my heart” – Mulan (from Disney’s Mulan 2)

Related posts:

1. Employment and Portfolios
2. A Proper Web Standards Education: Part 1

Photo by Paopix

It often feels like you’ve got to try twice as hard at being professional to make up for your age. People often assume that because you’re young, you’re the typical teenage stereotype – sitting in your room bashing out table-based websites for quick money, not caring about the meaning of code you churn out as long as the site looks ok. I would like to point out that this is not you, because you have come to this site to learn more about the industry and how to do things better. But how do you get it across to other people that you are not that stereotype?

What follows are some mistakes that not just young people make, but also people who have been in the industry for years. Many of these have tripped me up along the way.

Don’t pretend to be something you’re not

If you have a website, make sure the ‘about me’ page has information about you, about what you do and how long you’ve been doing it. This is usually the first thing that people want to know when they visit your site. Put a photo up to prove you’re a real person. If you’re studying, say it.

Don’t make out you’re more than one person. Never, ever use “we” when you mean “I”. There’s nothing wrong with being a one-man-band, and making out you’re more than that will cause problems later on. Also, be up front about your age early on…

Tell people how old you are

Avoid an uncomfortable situation later on and let the client/potential client know how old you are. If you don’t tell them and they find out later on, they may think you’ve been deceiving them. They may even walk away from the project (leaving you out of pocket).

It can feel really unfair when someone turns you down because of your age (this has happened to me a couple of times), but you’ve got to accept it and move on. In a few cases, my age has been a big advantage. Some clients perceive me as some sort of computer whisperer (aren’t all teenagers?!). I’ve even given advice to computer technicians who have been so impressed, they’ve taken a load of my business cards and handed them out to their clients.

Don’t take on too much work

Photo by Coldcut Crew

If all goes well, you may find you’re so successful that you’re constantly being asked to do work for people. This is where, if you’re not careful, it can all go horribly wrong.

Firstly, make sure you have enough time to complete these projects. Are you still studying? Have you made allowances this? What if you become ill?

It’s a good idea to break down projects into stages and work out the number of hours each stage will take. Then triple it. In my experience, a project will take 2 to 3 times longer than you think it will take. As you get more experienced, you’ll be able to work faster.

Don’t be afraid to turn work down. Politely say that you’re very sorry but you’ve got a lot of work on at the moment, and that you will get back in contact with them when things calm down in a few weeks to see if they would still like your help. Or if you’re a really nice person and know someone who is in need of some work, recommend they contact them.

Watch out for clients who will rip you off

Some clients may want to take advantage of your age, and they’ll either be really bad at paying you, or get you to do more work than you’ve agreed. Other web design companies can be the worst offenders if you do freelance work with them. Make sure your invoices state that they need to be paid within 30 days, and don’t be scared to follow up late payments.

Write everything down and confirm it with the client. If they’re asking for more than you’d originally agreed to charge them, tell them this. It’s vital to write a specification before you start work so both yourself and the client know where you stand.

Don’t Undervalue Yourself

Don’t lead yourself down a slippery slope by undercharging. I have made this mistake too many times, and from it I learnt that by undercharging, I am undervaluing the work I do. If you charge too little, people will assume you’re not very experienced at what you do. However, at the same time you’ve got to be careful not to tip the scales the other way.

But Don’t Overcharge

You are not a web agency, and if you’re just starting out, you don’t have the experience or the running costs to justify charging a lot of money yet.

Use qualitative calculations when working out how much you should charge. A good way of finding out how much you should charge is by using the Freelance Switch web calculator. this calculates an hourly wage, and you can increase this wage as you become more experienced and your running costs become higher.

Do your paperwork

Photo by Videolux

If you’re working as a freelancer, you need to contact HMRC (her majesty’s revenues and customs) to tell them you’re self-employed. This is no biggie, you just need to fill out a form, and pay national insurance contributions every 3 months. Otherwise they might fine you for earning money and not telling them.

You must must must keep receipts for everything. Invoices (your own and other peoples), travel expenses when meeting clients, software and phone bills. I’d recommend attending a free Business Link course on this (see the paragraph on milking it).

I’d strongly recommend writing down how long everything takes you to do so you can learn for estimating a project next time.

Don’t blame the tools… Too much.

Just because you use GIMP to make sites doesn’t mean you’re a bad designer. It sucks not being able to afford CS4, but having amazing software doesn’t make you a good designer. Know your limitations, and know your software, whatever you use. I’m still discovering things I didn’t even know I could do with Fireworks, and I’ve used it practically every day for the last 3 years.

Don’t use the same website that you market your services on as you do to blog about getting drunk

If looking professional is important to you, make sure your online life projects that. If the website you use to attract client contains feeds from Twitter, Facebook or Flickr, make sure the content you put up there projects the same image you want to convey.

I’ve visited too many portfolio sites where people plug in their Twitter feeds, and tweet inappropriate things about their clients.

And related to this…

Get to grips wiv gramma an spellin an stuff.

Be professional with all communication with your clients. It reflects badly on you if you’re spelling is sloppy, and makes it look like you don’t care. We’re not all perfect, but take a minute to spell check your emails and webpages before publishing them.

If you’re terrible at spelling and grammar, use the phone more, but make sure you write everything down (see being ripped off).

Plan ahead

Think about what you’re going to be doing in 6 months time. Will you be heading off to uni? What will you do if a client phones you up in a year asking for changes, or saying their site is down or their email is down. Remember that you are taking responsibility for part of the functioning of their business. It’s incredibly unfair and unprofessional to neglect them 6 months down the line because you don’t feel like doing it any more. If you decide web design isn’t for you, make sure your clients are given all the information they need to hand over to someone else.

Be realistic

You’re not going to have the opportunity to redesign Coca-cola any time soon. Start small.

Thinking “it’s good enough”

This is a very difficult lesson to learn. There are so many terrible websites out there, and it’s easy to compare your sites to these and think “hey, the sites I make are a lot better than some of this rubbish”. Do you want to make average websites, or do you want to make amazing websites? Aim to make sites that stretch your abilities, that make you learn new techniques and at the same time perfect the old ones.

Find out what’s important in the industry

Well, you’re reading this, so you obviously care about the industry. I’d really recommend making an effort to attend any web-related meetups too. This can be difficult for cash-strapped students, especially if the events are far away or require a stay in a hotel. When I started out, I really wanted to attend the Future of Web Design conference in London. There was no way I could afford it, so I asked my school if they could help me with the ticket cost (in return for redesigning their website) and they did!

Don’t forget to milk it ;)

Photo by Tim Welbourn

Often schools have budgets set aside for this sort of thing. If you’re in secondary school, I’d recommend talking to an IT teacher and showing them the details of the conference. Say you’d represent the school (they love it when you say that). If they say no, it may be worth emailing the conference organizers to explain your situation and ask if they could offer you a student discount, or if you could volunteer and help them set up.

Enjoy what you do

Finally, you need to enjoy what you do to be successful.

Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.

Herman Cain

Related posts:

1. Employment and Portfolios

How you can take part:

To cast your vote, simply mention @ScrunchUp in a tweet and include the hashtag #education or #employment. Your tweet will automatically go into its respective column, and your first vote will be counted. Subsequent tweets will not count.

Tweet to this account: @ScrunchUp

Most recent tweet date: Thu, 06 May 2010 23:07:06 +0100

#education

Total votes: 25

Most recent votes

@DefMex wrote:@ScrunchUp if think #education is the way to go, but also try to create as many sites/content for friends/charity to get a portfolio going.10 months ago

@a_murray wrote:@ScrunchUp For me, it's #education although I feel it differs depending upon the individual.10 months ago

@sjehay wrote:@ScrunchUp Since I'm doing a PhD I'd better vote for #education (at least, I enjoyed it enough to come back for more!)10 months ago

@gesiwuj wrote:@scrunchup – #education10 months ago

@sanchothefat wrote:@scrunchup #education its not for everyone but the university experience is worth it IMO. My degree subject was the least of what i learned10 months ago

@meeratank wrote:@ScrunchUp #education - for a good grounding, gives you a good backup plan and educate you on discipline towards work/deadlines.10 months ago

@leesto wrote:@ScrunchUp #education - but get a uni course with a placement year. It gives you the best of both worlds then and is what I'm doing10 months ago

@craigburgess wrote:@ScrunchUp #education - But most UK unis are so out of touch with the industry its tough to find the right / good one.10 months ago

@chirdeep wrote:@ScrunchUp My vote is for #education If one can - can be no better substitute10 months ago

@LiquidSquid wrote:@ScrunchUp #education - as long as it is the right course. They are few and far between, but they are out there.10 months ago

#employment

Total votes: 17

Most recent votes

@thepru wrote:@ScrunchUp #employment --but make sure you read all the time, and not just books with pictures.10 months ago

@FataL wrote:@ScrunchUp #employment Even though I had some education (mostly not related to my current job), most of things you get being employed.10 months ago

@csswizardry wrote:@scrunchup #employment Universities are well behind the times—I declined a place at Newcastle and they now use my site to teach students!10 months ago

@rem wrote:@ScrunchUp #employment still get educated, but it's learning how to learn, not learning a trade. Make sure you also work on your own stuff.10 months ago

@replete wrote:@scrunchup #employment - vs 2007-09 education, it seems much better to have real experience. As long as you have space to learn at work.10 months ago

@Baskwalla wrote:@scrunchup #employment The web changes too quickly for classes to keep up. A solid base education is important though. English, etc.10 months ago

@Steve_Day wrote:@scrunchup #employment all day long. You get to keep up to date with the latest technologies, in Uni I think you miss out on that big time10 months ago

@ChristopherCarl wrote:@scrunchup there's no subsitute to real-world experience. #employment can teach more than any class out there.11 months ago

@BenMoorhouse wrote:@Scrunchup I went for #employment . I'm working for uks biggest bank and have no debt (exc mortgage!)11 months ago

@Coronatus wrote:@scrunchup #employment - I went down the education route but dropped out, and leaving uni was the best decision.11 months ago

No related posts.

Aaron Walter wrote this in his article “Brighter Horizons for Web Education”:

Schools that teach web design struggle to keep pace with our industry, and those just starting their curricula often set off in the wrong direction because the breadth and depth of our medium can be daunting.

Leslie Jensen-Inman quoted the following in her article titled “Elevate Web Design at the University Level”:

Let’s face it. Technology moves fast; academia doesn’t.

Practitioners in the web industry often make the point that students leaving courses are largely not at the required level of standard. Their courses have taught them how to build sites as they were built years ago, but not how they are currently built, and there are few that teach how to build bulletproof sites using semantic and valid code. Many put an emphasis on how the pages look, rather than the usability, accessibility and the code behind them.

Why Should We Care

If we want the web to progress, we have to start with the younger generation, and by that I mean primary and secondary school students. Web design is part of the ICT GCSE curriculum now, and students are also learning about it outside of school by customising their MySpace profiles. However, we believe that the current curriculum is not adequate to teach the skills they need to work in the industry.

Chris Mills nails the problems young people face in his article “how do we educate the web standards kids?”

The problem is that many of the pre-higher education age group have nowhere to go if they want to be taught web design or development.
[...]
The next stage is for the geekier kids to start looking further into the Web. They want more. they want to start creating their own web pages. They can start to tinker, view source, read blogs, and learn the craft themselves, but having a course to do at their school would be a much easier and more effective path for them to follow. But most schools do not offer this. In fact, you are unlikely to find anything except basic Microsoft office tuition at the average high school!

The IT curriculum that is being taught at GCSE level across the country is largely teaching web design to a very poor standard. Students are being taught how to build sites in tables, using frames, inline styles, or even in PowerPoint. They are encouraged to take images straight from Google, and nobody seems to know any better.

Here is what AQA’s specification for 2010′s GCSE ICT says about what students should learn about web design:

In addition to generic features, [the student is expected to] understand the features of web design software to design pages and links between them, master pages, hotspot, hyperlink, navigation bar, templates and layout guides, forms, marquee, animation, flash tools, RSS feed, counters and conversion to HTML.

In fact, the code isn’t even looked at by the exam board.

Candidates need only print a final hardcopy of the web pages in colour. Printouts of earlier key stages may be in black and white or colour.

If we don’t do anything about this problem now, this may be the future of web design.

What we want to achieve

We want Scrunchup to be a place where young people interested in web design can come to learn skills that are vital to their job prospects and will make them employable in a highly competitive industry. We want to give access to a wide number of topics that the curriculum doesn’t cover. We also want to encourage institutions to adopt more up-to-date curricula such as Opera’s Web Standards Curriculum and WaSP’s Interact Curriculum. We want to help move this young industry forward.

No related posts.

How you can take part:

To cast your vote, simply include your message with the hashtag #h1logo or #h1title. Your tweet will automatically go into its respective column, and your first vote will be counted. Subsequent tweets will not count.

Tweet to this account: @h1debate

Most recent tweet date: Mon, 02 Aug 2010 11:02:08 +0100

#h1logo

Total votes: 145

Most recent votes

@dianagtr wrote:H1 for the logo. Semantic code for accessible websites. #h1logo1 month ago

@mathcoll wrote:The H1 Debate http://www.h1debate.com #h1logo7 months ago

@andyjrowland wrote:The H1 Debate: http://www.h1debate.com. Damn marketing folks subverting semantically correct HTML. I'll weaken, but I don't like it! #h1logo8 months ago

@chilev wrote:It's kinda more logical for me! #h1logo9 months ago

@ohneworte wrote:following #atag09 via Twitter --opinion: #h1logo10 months ago

@fissl wrote:#h1logo11 months ago

@el_kev wrote:@ramsden ha thats cool i'm #h1logo1 year ago

@daniel_howells wrote:@ramsden We as an industry debate some brilliantly important issues. I'm going for #h1logo. http://h1debate.com/1 year ago

@blisster138 wrote:@h1debate I'm going with #h1logo. Could go either way, but I prefer items like "Contact" with a bit lesser weight than organization name.1 year ago

@StyleProne wrote:#h1logo It depends really, H1 can affect keyword density and SEO if used properly.1 year ago

#h1title

Total votes: 339

Most recent votes

@alecsaiko wrote:H1 title should be used for page title, not for logos. H1 stands for 'Heading 1' so more semantically correct as a page title #h1title1 month ago

@camerondube wrote:my vote in the http://h1debate.com goes to the #h1title1 month ago

@dstreefkerk wrote:I vote H1 for the page title, not the logo: http://www.h1debate.com #h1title3 months ago

@adam_robinson wrote:my vote #h1title http://www.h1debate.com/4 months ago

@safwanrahman wrote:The H1 debate: http://h1debate.com #h1title4 months ago

@eazyd wrote:Have to go with #h1title , as Google uses h1 to know what the page is about- logo alt is generic http://www.h1debate.com/ #seo @derekallard4 months ago

@lotidesco wrote:The H1 debate: #h1title is better for SEO and is semantically correct5 months ago

@shyles25 wrote:Id say #h1title, not that it really matters.5 months ago

@JamesGreen wrote:You probably want the logo text in the domain name + high in keyword density too #h1title ultimately let GWT & GA be your guide6 months ago

@hourlily wrote:Voted #h1title in the H1 Debate http://bit.ly/aGlFQP . The W3C QA Tips agree http://bit.ly/c9tkhj . Semantic code and web standards ftw.7 months ago

No related posts.

Many designers will worry about the message and tone of what is being communicated, either though copy, layout or imagery. While the message of the design is most important, making something a user can understand and then act on may be aim of the page.

Importance has a vital role in design when you are looking for the user to respond a certain way. With careful thought about what is, and is not important, you can get the preferred behaviour from the user and consumers of a design.

So, with all that said, I am going to do a whistle-stop tour of 3 of the tricks I use in my day to day work to draw attention to important areas of a my designs.

Method 1: The Yellow Fade

Familiar to many web developers who make use of tools like Basecamp or Flickr, the yellow fade is a pattern used to draw the user’s attention to something important.

The yellow fade is often used with notices to indicate change. Change is an important bit of information to the user, outside of the normal structure of headings and layout devices. It works well for controls which are present for a small amount of time, or for information which the user must know before they can proceed. 

If overused this method can lead to the importance being lost, in my work i tend to reserve the “yellow fade” for only positive or neutral information. Using the red fade for errors and negative information.

There seems to be two ways to implement the yellow fade, for some its a flash, and for others it may be a notice which then fades away.

Method 2: Shadows and layering

An often overlooked way to communicate importance is the shading and layering of information on the page. There are both subtle and not so subtle uses of layering to inform the user.

For example, onthebox.com (screen show above) uses a “thickbox” call out to highlight to the user that something is required, either a selection of options or to log in etc. The thickbox makes use of a large dark background to further draw the focus of the user.  The “Lightbox” effect is another use of less than subtle layering to communicate importance. 

However, there is much more subtle ways that layering can be used. Slight transparency, overlapping and sometimes blocking out parts of a design can be used. The following image is a good example of using shadows to subtly block out a design.

Method 3: Icons & emblems

Icons can be seen in one of two ways, the first way to see them is as cool little pictures around the page, the other way is to see them as little keys into the users mind! Okay, thats a little over the top, but icons have more to them then just pixels.

A good icon is something which is recognizable & relatable. You can recognize that its an icon, and you can relate its meaning to what you are doing. Icons can work on many levels and can over be used to overcome language or cultural barriers. Icons are a powerful way to enhance the importance of elements of you design.

Much of the importance icons can bring to a design problem, is due to convention. For example, the common “add” button has its entire meaning based  on convention. Its a convention for the + symbol to mean add, its also a convention for positive actions to be in green. If you think about it, you very rarely see + buttons in red, or blue. 

Part of this use of colour and convention add importance to that area of the design and helps communicate what the user is expected to do. 

A great example of an interface almost totally reliant on icons is the iphone home screen:

Final Thoughts:

 Looking at ways to bring the important parts of your designs to the forefront is a great way to improve the usability of your site. I could keep writing about importance but i thought it would be better to end this short article with some great resources. If you have any methods or tricks you use in your work please share them in the comments.

Resources:

Pattern Tap - Pattern tap is a great resource for well designed page elements. Its a great place to see example of what works in the context of single area.

No related posts.

If you are looking to be, or already are a developer, then I’d think it likely that you have a good idea of what programming is and probably an idea of some of the different languages on offer. If however you are a designer, writer, artist or marketer then you probably don’t. Worse still, you will probably at some point have to work with somebody does. Thus follows a list of the languages that you may need to know exist and have a rough idea of how they work, that way when a developer says to you “lets use a combination of C# and PHP” you can tell him that maybe he needs to think this through a little more.

I’ve split the languages into three different sections: server side, client/user side and data definition. Data definition languages will not come with tutorial links as they’re best used in combination with something else and often covered there.

Language types

Server side:

These languages run on the server that’s “on the internet”. The user never sees any of the code and in most cases probably won’t even be aware that something complicated is happening. Server side languages are used for creating forums, contact forms and blogs to name 3 common examples. The upside is that you have exactly the same environment for everything (so no worrying about different browsers) and also a central store of information such as a database.

Client/User side:

These cause things to happen on the user’s computer. The user sees the code and if they want can edit it, therefore you cannot use these languages to connect to your database or perform secure actions such as logging in. They do however allow your page to become “interactive”.

Data definition:

Essentially these languages don’t quite fit into either of the above, yet are something it’s worth knowing about because some of them are very popular. These languages basically store information, that’s it.

Server side languages

PHP:

It’s free, and it’s supported by most hosting providers on the internet. It’s used for wordpress, phpBB, and on Scrunchup to name just a few. Aside from being free and widely supported, it also has extensive documentation, many tutorials and also connects easily to MySQL databases (covered later under data definition). The best tutorial site I have found for it is Practical PHP Programming.

Java:

The reputation of this language is one of boredom, bloat and general ickyness. It is not as “fun” as Ruby, it is more bloated than Python and is a lot stricter than PHP. These are not bad things, Java has an incredible range of features, is very well developed and secure. Sun know what they are doing and if I were to write a large scale application for something such as a local government, I would consider Java. Tutorials are not hard to come by, but the Sun website is a good starting point.

C# and the .NET framework:

It is developed by Microsoft and thus requires a Windows server to run on. Microsoft have many tools for C# developers which makes developing with the language much easier and faster. It also connects with MsSQL very easily and has no shortage of online tutorials and help sites. It is an industry standard comparable to Java in the corporate world. Examples of where it is used are StackOverflow, Microsoft, and MSN. I have not learnt C# but the tutorial at csharp-station seems to cover the key points to get started.

Ruby:

You’ve probably heard of “Ruby on Rails”, it’s the cool new language that everybody is talking about. This is not quite correct. Rails is a framework for Ruby, Ruby itself is the language. Ruby is not nearly as well supported as PHP but is gaining popularity fast for its clean writing style and easy to read nature. It also connects to MySQL very easily, has a thriving community and is free. Some examples of sites that use it are Basecamp, Penny Arcade, and A List Apart. Tutorial wise I suggest looking at the Ruby documentation page, it has links to several good tutorials.

Python:

Like Ruby is very easy to read and not as well supported as PHP is in terms of web hosts. Python was not designed as a website language and has uses far beyond making websites, its design philosophy is that there should be one way to do things and if you’re moving from writing code in PHP to writing code in Python, this can seem limiting at first. Having used both Python and PHP I much prefer Python for anything beyond a simple web-app. Python is used by NASA, Google App Engine, and EVE Online‘s game client. I recommend the official Python tutorial as a great way to start learning.

Client/User side

Javascript:

It’s popular and supported in all major browsers (though as you’d expect, some better than others). Being linked to HTML it requires you to know what the DOM (Document object model) is to some extent. It reads a lot like PHP and C# so if you come to it from Ruby or Python then you are in for a bit of a rough time at first. Ajax is a subsection of Javascript that involves loading content onto the page after it has already loaded. Javascript has a very large community and many frameworks to help you use it, jQuery and Scriptaculous being two that spring to mind. Javascript is used by Facebook, Apple and Twitter. For a tutorial on Javascript I suggest looking at W3Schools tutorial and looking at the source-code of sites.

Flash:

Flash can be good, Flash can be bad. Any time a site has a video playing on it (like YouTube), chances are it’s using Flash. Any time a website plays sound at you (last.fm) chances are it’s using Flash. Most internet games are written in Flash and a Flash plugin is available for all modern browsers. Flash can be bad because not all websites benefit from animations and music, it is also not readable by those that rely on screen-readers which can lead to accessibility issues. Flash is used by YouTube, Diablo 3, and Desktop tower defence. Entheosweb have a wide range of lessons in Flash to help you get started.

Data Definition

XML:

This looks a lot like HTML, indeed, some sites use XML combined with XSLT instead of HTML (starcraft2.com). Most languages have an “XML parser” that can read XML and then use the data it contains. XSLT is a set of commands that can be applied to the XML as a client side language that will transform the XML into something else such as HTML.

SQL:

Like chocolate this comes in many variants: MySQL, PostgreSQL, MsSQL, Oracle and probably more. SQL is the language used to communicate with a database and add, find, remove and alter data in it. SQL is used on any site that has a database.

Following this up

In future editions of ScrunchUp I plan to follow this article up with a more in depth look at each language and include a small program in them to give a better idea of what a language is like and how good each it is at various things, you may even find that programming is not as daunting and complex as is often made out and that you’d like to have a go at it yourself!

Related posts:

1. Starting out in Web Development

Further education or employment?

This was a major dilemma I came across when I decided I wanted to get into web development. Because the nature of this industry is fast paced, everything moves too fast for the education system to keep up with. But does this mean that the education system (in terms of technology) is redundant? Well I’m still not sure. But I will tell you my trail of thought.

• By the time I completed the course the technology would be out of date
• I can’t motivate myself to work at a place which I wouldn’t have much benefit from
• I wanted to learn and earn
• I work better teaching myself

Employment it is!

There is one type of employment that works really well in this industry. Apprenticeships. Most people think apprenticeships are just for plumbers and electricians, but its a great way to see what the real world is like. I started work (and still work there to this day) at Dorset County Council doing web applications with geographic/spatial data. But don’t think that I just worked 9-5. As soon as I knew enough about web development I started programming in my spare time.

Challenge yourself

It’s easy enough to pick up a programming language and develop a simple website, but how do you actually stamp your mark on the industry? You need to push yourself. My first website was a social network complete with video uploads, forums, chat rooms and everything. All I knew before I started the project was how to insert something into a database table and how to grab a value from a form (which I learnt on the job).

Keep going

Once you have a web app or two, just keep up the momentum. I currently have about 3 app ideas on the go at the same time.  This way I keep my head in the game, and learn about new technologies and methods. Plus I am working up quite a large portfolio to help me when I apply for another job.

Put yourself out there

When I created FootyTweets, my largest Twitter web app to date, I wanted to put myself out there, get some buzz generated, and getting people to recognise my work and efforts. So I looked at Twitter Developer Nest and put my name down to do a talk on the service and some of the issues I have come across.

I ended up speaking at the event and got lots of people asking me about the site and got lots of contacts. I loved it so much that I went back the next time and showed off my latest web app. Where did this lead? Well on Monday (30th September 2009) I went with a bunch of people I met at the event to have a photoshoot with UK Wired magazine.

I thought back and realised that if I’d just sat at home, made web apps and didn’t put myself outside of my comfort zone, then I wouldn’t be the developer I am today.

Your opinion matters!

I’m open to all of your input so please comment away below. You can also have a look at the Twitter polls that I put together for each issue of Scrunchup.

Related posts:

1. What are the different languages?