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.

The BBC interviewed Richard Quick and Paul Boag about the Microsoft Browser Ballot being introduced in an effort to give Microsoft users more choice over which browser they install. Rich and Paul argue that the ballot is unfair because almost half of the browsers use IE’s rendering engine, Trident.

A debate was sparked on whether designers should know how to code. Elliot Jay-Stocks offers his opinion. We have based this issue’s Twitpoll on the same question.

Cool sites we found

Please start from the beginning is a series of interviews asking people who work in the web how they started out.

Upcoming Conferences

PairUp in London on the 8-9th April 2010 – A conference for everyone who works, or wants to work, in the world of the web. Many of the speakers are under 21. It aims to bring together both the learning and professional communities together. Earlybird student tickets £35.25, ranging up to £132.19.

DIBI – Design it, Build it. A 2 track web conference full of top class speakers. Earlybird tickets £128.08.

Books

2 books that are due to come out in the Autumn to watch out for are Andy Clarke’s Hardboiled Web Design and Cennydd Bowles and James Box’s Undercover User Experience.

This is a new section of Scrunchup which we’d like to expand. If you find anything that you think is newsworthy for our next issue, please send us a message on Twitter to @scrunchup or email mail@scrunchup.com

No related posts.

Do web designers need to know HTML and CSS?

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.

Ooops! Looks like there was a little problem making the poll!

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.

For example, would you like more articles written by young designers and developers? Are you interested in a particular subject that you’d like us to write about? Would you like a forum?

This is your magazine, so let us know what you want to see in it.

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.