The traditional web development process goes something like this.

1. Design a mockup
2. Code mockup
3. The client hastily rushes at the last minute to add some content to the website before the launch date.

1. Clean and compliant HTML and CSS code
2. Mobile optimisation
3. Responsive design
4. Graceful degrading
5. No flash – we hate flash

When formed Rocoru in 2008, I talked to a lot of businesses about what I could do for them online. Here are some of the reasons they gave me that they didn’t need a website.

My work comes in through word of mouth

That’s great – but why don’t we try to deliver a better customer experience? Surely it’s frustrating when they are trying to find your store and have to search for your details in the yellow pages, when the important information could be a simple Google Search away.

I sell carpets, People want to see before they buy

Yes but we don’t necessarily have to sell carpets on your site. Why don’t we get you to the top of Google for ”Carpets Blackburn” and watch the enquiries come in. Remember  that just because your product cannot be sold online, we can lead the user to making contact.

I’m swamped with work, I can’t handle any more clients

Why don’t you increase the cost of your service? We can then focus on promoting the quality of the service and delivering real value to the customer, meaning you can charge more and run a more lucrative business.

I just can’t be bothered

Ok. You got us here. If you have no ambition for your business – you’re probably not someone with whom we’d like to work.

Obviously, smartphones are capable of displaying desktop versions of websites perfectly, but how does this work in the real world. Let’s explore how mobile web development differs from desktop web development.

Context

What is the context of the user: where is he? What is he doing? What does he want to know? The answers these questions vary greatly when we consider the desktop environment vs the mobile environment. It’s likely that a user viewing the site on his mobile whilst grabbing coffee on the way to work wants to find different information compared to a user who is casually browsing from home.

This normally means that a mobile site serves as an “e-business card” which will offer users quick contact details or directions. See how the McDonalds mobile site realises that the most obvious reason users will come to the site is to find a McDonalds. This isn’t just guessed though; we can use analytics data to gauge the motivations of the mobile user and thus tailor a site specifically.

Load time

Obviously, it’s not practical to have homepage that takes a long time to load. Mobile users also often end up in terrain where the signal is low, so it’s important to keep file sizes to a minimum. There is nothing more frustrating that a slow loading site because the code is bloated.

Design

Remember that most mobile users don’t navigate with a pointer but a finger. This means that buttons need to be big enough for use of those with stubby fingers. It’s unrealistic to expect people click point 10 links. All links on a mobile site should be buttons with good 20px padding; this allows larger thumbed users accessibility.

Information should also be fluidly stacked. The screen is way to small to have a two column layout and it would be a shame to lose space by developing a fixed width layout, or even worse; make a user scroll to the right to read an article. I find this to be the case far too often

Text size should be bigger! We don’t know how far away the user is forced to hold their mobile phone or if the sun is glaring into it. The best thing we can do is develop easy to read typography that is of a good size and well spaced.

Finally

When developing a mobile site, it’s not good enough to simply create a stylesheet. Go back to the drawing board and re-evaluate your user and build a tailored mobile experience.

I recently started working on translating the copy of our site into Spanish. As a speaker of spanish, you wouldn’t think that I’d have any problem at all with such a task, but in truth I’m finding the process almost impossible. There are words i do not know (that aren’t used in everyday speech) which don’t appear in a bilingual dictionary either. Some examples being

• Standards based web design
• Wireframing
• UI Design

Of course it would be easy to translate these phrases word for word – but who knows if a spanish speaker would understand them? What we need is a Multilingual web dicttionary for the latest web terms, updated at least annually.

There would only be around 100 terms per langugae. My proposal for included languages would be:

• English
• Spanish
• French
• German
• italian
• Portguese
• Russian
• Arabic

The main problem that I forsee is that these words or concepts simply do not exist in some of these other languages. Most professionals in the Arab and Russian speaking world will work in English; so such concepts of ”wireframing” will be unknown to their native language.

Who knows what will happen, as an avid linguist myself; this is something I’d like to see or potentially collaberate with some other multilingual web professionals to develop.

As an agency we work with our clients on every aspect of the project from beginning to end. This generally means that we never ask them to write some content and copy and paste said content into the site. We like to get involved with copywriting so that when the projects signed off; we’re secure in the knowledge that we’ve developed a genuinely good piece which will genuinely benefit a business or organisation.

In order to create the best possible piece, I’ve tried to define the role of the designer. Here’s what I think the designer should be responsible for – and in my case si responsible for.

• Designers code accessible content, that must be optimised for:
  • The blind (High contrast versions of sites must be available and screen readers should be able to read content)
  • Different devices. (A site should be viewable on a mobile platform along with on a computer – this generally includes developing another version of the site. Another style sheet should be developed for printing onto paper)
• Designers research what the client needs. This most certainly involves speaking with the client and getting their ideas but it doesn’t mean the client should have to come up with anything. I always develop mock ups for clients based on research that I’ve conducted. Research is based around a goal. A good example of a goal would be to increase sales by x per cent. From a clearly defined goal, we can begin conducting research into how we’re going to reach that goal. Some potential research areas would be
• Competitors in the same sector. What are they doing? How can we do it better
• Analysis of data. What data do you have about your customers? Using this data – we can tailor a site that better fits the needs of the user.

When you hire a web designer, you’re partnering with them and you too have a commitment to them. This includes

• To work together to develop good quality content. If your content isn’t any good; don’t be offended if it’s insisted you hire a copywriter.
• Have good branding. Branding is the base for any graphic project undertaken by your company or organization. If your logo was designed on paint, the designers clients are going to think that they’re responsible for it. If your branding is bad; be prepared to start from scratch to develop something new.

Some examples of goals would be

• Increase sales by X%
• Educate the user about an issue or political campaign
• Action users to participate in an event

Armed with these goals, we could work on a strategy to achieve them.There are many methods that we will use to reach a goal and developing a good user experience is almost certainly one of them.

Goals should be specific, relevant, measurable and we should be able to track them, this helps us understand if we’ve reached the goal, and if we haven’t then we can analyse the information to tell us why. Sometimes company’s aren’t 100% sure of the goal. A lot of web design companies say that they ‘’always listen’’, but if we’re going to achieve the goal; this often isn’t enough, we have to get knee deep in the clients business.

As web developers; there is currently no guidelines as to how we should write code. As long as code validates, it can be considered acceptable even though this is not the case considering the development of CSS3 and HTML5 specifications. This is however not ideal. As a web developer, it can be an absolute headache to make changes to someone to a project that someone else has designed. Working out what a CSS class does is no fun at all and wastes lots of time.

Because of this problem, I am working on sketching some internal guidelines for code development within our organisation. This is useful because:

• We are expanding – code I write will need to be understood by other members of the team
• A client may go elsewhere – even though we’d never want this to happen, if it did; we’d like to make the transition as smooth as possible. We’d just pass them on our internal guidelines and they would understand everything.
• I believe in structured and ordered code which is thus easier to understand and thus quicker to work with meaning a saving is eventually passed onto the client.

Things to consider when developing internal coding guidelines

There are many things to consider when developing such guidelines and we will inevitably need to update them in the future as we solve new problems.

A few initial thoughts are for the HTML side of things are:

• Defining an order for elements appearing in the head tag
• Sticking rigidly to ‘’strict’’ mark-up
• High use of comments so people understand what is doing what

Some ideas about CSS guidelines would be

• Including a Table of contents for all CSS documents
• Commenting often
• Defining an order to classes. Should we define type, box position then colour?
• Combining class names e.g. the name for a class called “centered” would appear as “centered, centred” so a US develop wouldn’t have to think in British English

What do you think about web guidelines? Should W3C come up with it’s own guidelines and implement them across the whole web?

Most businesses are interested in improving their green credentials whilst maintaining cost, quality and usability. We all love green ideas like cycling to work as opposed to driving but in reality how effective is this and how many of us are truly interested in it? A cycle that takes 5 times longer and carries one person is no match for the car even though it doesn’t create emissions. We have to find somewhere in between; if we’re talking transport this would mean a hybrid car. The same goes for web design.

The environmental impact of a website is relatively low but we can look at ways in which we can make a website greener. How green are the designers and developers? How green are the tools? How green is the host?

The Designers and Developers

If the designers and developers that build sites are greener is this ‘’greenness’’ passed on to the website itself? We try and keep printing to a minimum (We manage with just one laser and inkjet in the office) and probably go through just a handful of cartridges per year. On top of this; I cycle to the office.

Do our actions as designers when designing your site add onto the carbon footprint of your site?

The tools

To create the best websites, we have to use the absolute very best tools. The fastest computers, the biggest screens and the most intelligent software is a must. This means that the eco friendliness of a product is not as high up on our list as we’d like; but simply the reality of the industry.

Fortunately, computers are getting faster and consuming less power. Apple are leaders in this area of the industry.

The servers

This is where we can make the biggest difference. The eco friendliness of the designers and the tools that they use are dwarfed by the potential of the web servers. It is possible to have web servers running on 100% solar energy, which is however passed down as a great cost to the client.

The solution

If you’re interested in greener web design and development then it makes sense to choose a company who is aware of the problems that they may be causing the environment and makes a conscious effort to minimise them. I’m not aware of any serious design company that offers completely eco friendly carbon neutral web design as quality would be reduced and cost would increase.