Tag soup – 5$

Tag clouds help users make a choice among many categories. Sometimes they are referred as tag soups to describe the mix of ingredients. We know that too many cooks can spoil the soup but what about too many ingredients? The use of tag soups is highly controversial and not always desirable. Here I try to describe their advantages and disadvantages through my own point of view.

Advantages

• Users can quickly determine the relative importance of a particular topic, because they have a base to compare with.
• Content is accessed directly as opposed to a simple search, which is slower.
• Trends and interesting information are easily discovered.
• Categories are search engine friendly and may increase traffic, because of higher search engine rankings.

Disadvantages

• In most cases they consume too much screen space.
• They look as if a child from the second grade spilled some text over the page and tried to solve the puzzle.
• The choice of too many category options clearly overwhelms the user. I would consider reducing them to the smallest reasonable number.
• The variety of font sizes makes the tag soup almost unreadable. I would consider reducing them to the smallest reasonable number.
• Less important, but valuable information may remain undiscovered.
• A higher inbound traffic doesn’t make a statement if users actually find what they are looking for, especially if many other sites use the same technique.
• Search engines think that a tag overuse is equal to abuse.

As you can see, I think that tag clouds should be used sparingly, if at all. Content will always be king, not tags. Where appropriate, a good search can replace many of the downsides of using tag soups.

Yahoo Mail Classic interface changes

I have been a long-time user of the classic version of Yahoo Mail and I have seen recently some interface changes, which are (from my point of view) unnecessary or not intuitive. I have included a screenshot of my mail account to show what I mean. Today I was shocked to find that the “Compose” button wasn’t there, which immediately put me under pressure. I just wanted to quickly write an email and send it. Because I couldn’t find that button, I thought it should be among the other links on the left or placed above the list of emails. I found again nothing. The button has disappeared and has been replaced with “Check Mail”, so I thought they must have disabled temporary the option for sending emails. Because I was searching for the “Compose” label, I couldn’t find anything. The problem was that Yahoo introduced a “New” button for writing emails, but I had a quite hard time to figure that out. This is a clear interface problem. “New” doesn’t say anything, it’s just not descriptive enough.

I previously refreshed the page, when I wanted to check for new emails, now I have a special button for that, which is on the left of “New” and therefore read first. Sounds like checking email after you are in your inbox (and emails are automatically checked) should be the most important activity. Again, a clear interface problem. I hope that the Yahoo engineers solve these problems soon.

Blog advertisement trend

Lately, I am seeing more and more blog writers enter in networks like BuySellAdds to sell advertisements seeking how to monetize their work. Having ads is undoubtedly beneficial, but some bloggers have around 10 or more on their pages, making them slow, and carrying the accent to the advertisements than to the content. Another group has seen this effect and tries to compensate for it with placement of larger, more impressive graphics in their content areas. The result is one big mess of graphics, which relies more on the “WOW” effect or SEO, then on real content. Have you seen on large portal sites like Yahoo, MSN etc. 10 advertisements staring at you? They have just the right amount, and will not overdo it, or they will lose real visitors. There is always reason not to do something and lessons to learn. Just because everyone is on the network and making money, doesn’t mean you should follow. Always think on consequences in advance or you may pay a higher than expected price.

Dependencies rule our lives

Do you feel free? Can you scream loud “I am free!”? This post is dedicated to the things that quietly rule our lives and determine our subjective degree of freedom. It has nothing to do with the blog theme, so I place it in the “Main” category. I’m comming periodically to the same thoughts (that rule my life), so I decided to share them with you. What do I mean by dependencies? These are the things, that define our physical and mental relation to something or someone. While most of us may be physically free, our thoughts can still be easily manipulated. Dependencies are just that – they enslave our beliefs and actions. They determine our life and take our freedom away. Many people ask themselves, why can’t they easily change after their 40th year. It’s not that they can’t. The problem is that they became dependent on too many things, to be able to think on something else. Their thoughts and actions are conquered and they can go only in one direction. The most important human freedom – the flexibility to choose a path is gone. There are bills to pay, children to take care of, work to be done etc, etc. This is only a mot of all available dependencies.

I try to organize my thoughts on dependency types on the following lines, trying to give some examples to illustrate better what I mean. Some common dependencies are:

Your work place
You fear that if you don’t do your job well, you may get fired and lose your income. The inability to buy indispensable goods makes you dependent on your job and your boss. Although you may not like your job, you can never take this decision to leave. You are dependent.

Things you do
Try to imagine what is the possibility for you to willingly discard the work you’ve done in the last week and begin from null again. That is, you invested your emotions, time and energy in this work. You are dependent on it.

Friends, relatives, parents, strangers (humans)
This category is large. All people around you influence you more or less. Listening to and accepting what they have to say, makes you dependent on their thoughts. That’s why questioning everything you hear is a good alternative to have a less biased mind. If you hear the same opinion 10 times, you are far more ready to accept it for truth, although it can be far from that. If someone tells you that you are stupid or incapable, never make the mistake to listen to this person again. Free your mind.

Debt (banks)
The more debt you have, the easier banks operate with your life. Once there, you can hardly come out of the spiral. Banks and creditors like it, to have you pay higher interest rates.

Water, food, air, electricity, petrol (resources)
In order to exist, you need multiple resources. Their lack makes you immediately dependent. With the time you are ready to give more and more from everything you have for even а few amount of them. Without water and food you may survive only a week. You’ll just forget everything else you wanted for little food. The food determines and controls fully your actions and thoughts. Without a clean air, you’ll become ill and dependent on medicines and doctors. Let’s say you can’t find a better doctor. Then you are dependent on his/her service quality, which may not necessary help you. Without electricity you don’t have light, you can’t operate electronic devices and do simple things you have previously taken for granted. Without electricity, you have no access to knowledge(except reading printed media during the bright day). Traffic lights won’t be working and car driving would be very dangerous. In fact, electricity shortage makes people look for new renewable sources to prevent this from happening(and make us less dependent). You know what would happen if petrol sources are depleted.

Everyday things
Consider your bank debit card. If you want to withdraw money from your account, you are dependent on a bank’s cash machine. In turn, the machine is dependent on money availability, electricity and mechanics, in short on the people who take care about it(which may just enjoy their break). If you can’t withdraw money, you can’t fly to Costa Rica – you are dependent.

If you buy a monthly bus card, it may be for a particular bus line. Every time you go out, you must think about ways, how to make the most effective use of your card. You are dependent on the route of this bus line.

Coffee, tea, cigarettes, alcohol, drugs
These are very common human weaknesses, which we allow to take part in (and out of) our lives. By the end of his life, an average smoker has lost a couple of years in continuous smoking. The result of this dependency is a lost time (loss of opportunities) and introduction of illnesses (decreased quality of life). Alcohol dependency makes people aggressive and unable to take responsibility for their own actions.

Company acquisitions
Many small companies allow to be acquired by big ones. But that does not necessary guarantee them a brightr future. If the company-mother gets into trouble, the daughter will be affected too. A fresh example is Opel’s dependency on General Motors, which may have driven the first to bankruptcy without the help of the german government. My point is that many great companies allowed to be bought, became dependent and ended unpopular.

TV, radio, internet (mass media)
We believe what we hear every day. Because today’s news were like yesterday’s, we assume they should be true. TVs are incredible manipulators of human thoughts; we saw this last by the introduction of the global crisis. In fact, I think that mass media even accelerated the delivery of bad news to the average news consumer. News have just united some common negative information from yesterday, now and tomorrow and presented them as an impressive “trend” package to the audience. In this case mass media is equal to mass panic maker. We stopped buying, became distrustful and highly dependent on these news. Stock prices follow news the same way.

I should confess that I’m dependent on internet. This isn’t something that I entirely like, but it’s a way to reach information, which was not available to me before. This argument alone is not enough. But part of what I want to become has to do with internet, which also determines why I’m using it on a daily basis. I only try to find information I really need, and always follow my convictions, even if I have to ignore manipulative information.

My goal here was to make you aware of some dependencies that exist around you and to make you avoid them. The first step is to sit down and think, which of them you can overcome, to filtrate your life of the things you don’t like to do. Not all dependencies could be bad though. But a conscious decision to be dependent on something is much better than an unconscious one on everything.
I don’t want to make you dependent on my article, so I always ask my readers to break the information through their own prism and take only things they consider as useful. Hope you’ll do it this time too.

Mobile web design obstacles

Mobile web design isn’t as popular as desktop web design right now, but many people think that this will change soon. They talk about the huge market and its potential for revenue. Many telecom companies invent new smartphones with high-resolution displays, better processors and user interfaces. Apple made iPhone and awakened the consumers’ need for better touch-screen user interfaces. Despite this technology progress, mobile web development hasn’t changed radically. In the next lines I’ll try to describe, why I am sceptical to its evolution in the next decade.

Too many stakeholders
Although technology is getting better and better, there are many problems. Most important, there are far too many stakeholders involved, which influences market decisions. This is partly promoted by the marriage of telecommunication, marketing and computer branches. The pie is large and the participants are many large organizations, which chase their own revenue goals and act against the interest of consumers. There are operators, operating system developers, browser makers, advertisers etc. They all want to charge potential consumers.

Too many constraints
There are far too many different phone devices on the market, each of them with its own limitations. It is unfortunately impossible to address all devices with a given website, due to different screen sizes, processor power and capabilities. Even battery life plays a role, if you consider using loops in JavaScript-capable devices. In the past we have seen a proportional increase in display size. I think, this couldn’t last forever, or the devices will become less and less mobile. Until probably a niche between ordinary mobile phones and netbooks is introduced – borders are getting more and more blurred.

There are much more browsers on mobile devices than on the web. They use many different operating systems. The same browser name on a different OS means a different browser. This makes development of mobile websites a nightmare. Browsers are too different – they have different levels of support of XHTML, CSS and JavaScript(if even available). Before choosing the right browser to support, it is probably a good idea to choose the device(or device category) you are developing for. Developing for fewer devices can decrease the development time and keep ambiguous code to a minimum. If you target only iPhone users, that market may not be big enough(most iPhone users come from the USA). And what happens, when a newer and better device penetrates the market and all those users convert to it? Suddenly you may need a new website specific for the new device, if you are not properly using the principle of graceful degradation(or progressive enhancement, if you like positive words).

Lack of standardization
Because everyone tries to pull the strings(and standards are not of their interest), many web developers (also: advertisers) have troubles reaching a larger consumer audience. I think even if there were any standards, a simple adoption would still take a couple of years.

Too high operator taxes
Why should a user be motivated to pay again for an internet access on a small-screen mobile device, when he/she already has internet at home? You may say – to feel more mobile. Ok, but the mobile experience on a netbook/laptop could be much better. Lets say the user doesn’t have such accessories(like me). He opens the browser, types an address and sends it. A simple test on a simulator to open a 12kB website showed me that the operator will charge 0,20euro cents on the average. If you open a site of 50kB, which isn’t so much for today’s standards, you have to pay almost a euro. Only for this website. 10 sites, 10 euro. This is simply too much, and in fact I think that WiFi should be available unconditionally on every mobile device, just to circumnavigate these taxes.

Usability difficulties
Typing an internet address is only the beginning of a use of a website. How does the user interact with the website is another thing. If the display doesn’t have touch-screen, the user may need to go through all available links to reach the appropriate one. And what happens if he/she needs to fill a form? From a usability point of view, this is very hard. Even harder if you need to press the same button four times to come to a single appropriate character. So again – why should users interact with your website? What makes it so special?

All already mentioned factors will likely continue to exist in the future. At least to me, making mobile websites is not an option right now. But I may review my decision when the time is right.

The power of symbols

We see symbols every day and everywhere. Examples include the recycling symbol on trashcans, road signs, pictograms of sport types in the olympic games etc. They have one thing in common. We know their meaning almost immediately after we see them. We derive it based on associations from the real life. Below, I want to discuss some symbol characteristics the way I think about them.

Intuitiveness
Not all symbols are equally intuitive. Even slight changes in what is thought to be intuitive can produce unexpected results. If you don’t know exactly, what a pictogram is about, it has probably a bad design. Steve Krug has a book, called “Dont Make Me Think” dedicated to web, but its title is actually more universal. Everything you see should not make you think, but look familiar.

Simplicity
To achieve maximum influence on the viewer, a symbol has to be very simple. Complicated symbols impede our brain’s ability to memorize them, if even possible. Clear forms should always be favored over complicated ones. The second may have to be splitted into many simpler parts, which takes time and slows down the perception process. Consider chewing a big bite on your meal. It may be three times bigger than a normal one, but you will probably need five times as much time to digest it. I think the same is true for symbols. A linear increase in complexity means a logarithmic increase in processing time. I think simplicity and influence are in direct correlation as a precondition for a better reach. It also means a better effectiveness.

Consistence
It doesn’t make sense to use different styled symbols for the same or similar purpose. Symbol sets on the web often violate this rule. Especially small 3D icons, which are rotated to a different angle, have a different scale or annoying variety of colors. I think that consistence is far easier to achieve on 2D symbols. A good example can be found here. I would also pay attention to contrasts of any kind(color,form etc.) and try to keep them reasonable.

Uniqueness
When a similar symbol is found everywhere, it ceases to be distinguishable. As more and more symbols are created, the task to make a symbol unique gets harder. Nevertheless, the effort is worth, especially if the symbol remains memorable. Important steps here are initial research on availability, target audience, intended message. A unique symbol is an eye-catcher.

Clarity
As clarity I mean, that when you step back and look at your symbol from a relative big distance, it should still remain clear. Consider your symbol next to another one. Which one is more crisp? How far should you step back, before you see the difference? Simple forms contribute to a better clarity.

Look-and-feel
Not only the look is important, but also the feeling we want to express with the symbol. How do people respond to it, when they see it? Is it joy, happiness or something else? Try to define it. An initial test with a small group of people may be helpful, before going large scale.

Where can these characteristics be used?
I would say in everything that consists of a symbol – pictograms, logos, signs. Sectors include branding, marketing, indusrial design, print design, web design etc. Possibilities are limitless.

Review of the Singularity website

Recently I visited the online presence of a web agency based in Philadelphia, called Singularity. They have a beautiful flash website, introducing a playful loading animation with a man spinning a ring. The website grabbed my attention, because it has a unique personality, which is guaranteed not to be found elsewhere. I decided to explore their work and see, if I can learn something valuable for myself.

What makes the website distinguishable is its combination of carefully thought-out elements. Here I will try to explain my observations.

Background: Gradients and Blur
The background is made of blurred white clouds, which are placed in the middle of a two dimensional gradient. It goes in the x-axis from dark green to dark blue, and in the y-axis from light to dark nuances. I could see some color superimposition in the corners, meaning that transparency may have been used.

Menu: Transparency
The menu has one transparent element, which moves horizontally to mark the active menu choice. It ends with an arrow, pointing to the content pane. I couldn’t figure out for myself if the arrow was placed deliberately, as the target(content pane) it’s pointing to isn’t moving.

Page Transitions: Smoke effect
When a new flash ‘page’ is loaded, a smoke effect comes up. It actually goes above the man, indicating a change in his figure. There is a unique man animation for every page, except for the ‘Work’ page. That’s why a smoke there isn’t so intuitive.

Pages: Man animations
The sympathetic 3D man animation variations add a visual interest and awake our empathy. Sometimes they could also intercept the reader’s concentration, like it was in my case, when I came to the ‘About’ page and tried to read the last paragraph.

‘Work’ page: Caroussel element
The work page has also some interesting effects. When you hover a project block, it flashes for a moment. The flash is nice, but could be more subtle. The brightness difference between normal vs. hovered block is big, but most importantly the transition duration is very short. A horizontal caroussel-like element cares about appending and removing project blocks to the queue with a blur and scale effects.

Overall Impression
This was one of the best visually appealing websites that I have visited recently, and the fact that I made a review of it is not by accident. I think some of it’s elements will find a good use in the future. And potentially move the web forward.

Guides and grids

Guides and grids are probably the best friends of a layout designer. They help him organize the content and divide it into digestible chunks to achieve better clarity. If we take a building as an example, the layout would be its base and the content its height. Without a proper base, the building will be unstable and eventually fall apart.

But what is a proper base? There isn’t a universal solution, which can simply be reused. Every situation requires a different approach. Factors that might influence the decision are the type of information, its precedence and length, important titles and quotes, supportive imagery or even feeling to be transmitted.
One of the functions of guides is to lead the human eye from top to bottom and from left to right. Guides are not just an alignment, but a mean to help scanning the document for important cues. The eye follows simple 2D primitives with a structure (like an invisible line in this case) much easier than a chaotic figure.

Make the grid
The grid hasn’t survived by accident so many years since the existence of ink and paper. Many books, newspapers and magazines rely heavily on its simplicity. There are simple reasons for that. Content on a two-dimensional paper has also two dimensions – width and height. To fill it at its maximal density a horizontal text and photos should be used. You can’t simply fill the same amount of content if the text was written diagonal and images scattered over the paper, without overlapping. And back in the days I could imagine that paper wasn’t cheap. If it had a circle form, we would have needed another type of “grid”, probably one with a circle form if we looked for maximal density or a square form for maximal legibility. In other words, the type of media (rectangular paper) defines to a great extent the type of grid we need for a most effective layout organization.

Break the grid?
Many designers find grids boring and begin to break them in every possible way they imagine. I am not a firm believer of the approach to learn the limitations and then to break them. Unfortunately, more and more advertising agencies do that, just to look more “original” and “creative”. They provide whole paragraphs of text written diagonally(hard-to-read) and sloping images(hard-to-look-at). Now, imagine a whole day sitting and reading a text diagonally. Have you ever learned that? You may receive a headache, or if you are like me, you’ll rotate your head the same amount degrees as the text to make it easier on the eyes, but potentially leading to neckache. If you are lucky to have a very adjustable monitor, you may tilt it to 15 degrees. Paper can be rotated easily, so print media is not so much affected. Web designers are influenced in this direction since the introduction of new properties in CSS3, specifically for content rotation, which I am sure will be the next big thing misused. My point here is that we can’t rely on unconventional solutions to a conventional problems like getting the information across. These techniques could be really enhancing, if they are used sparingly and thoughtfully.

Why bother?
Breaking grids could slow down readers or even make them ignore articles. Don’t spend a huge advertising budget to find out, that your beloved one won’t be read. If everyone breaks the grid, that wouldn’t be “trendy” either. Don’t hurry with your solution, but think if it is going to survive the next five years. And then stick to your vision, no matter what other people think.

Users and attention

I heard someone saying that attention is the new currency of the today’s world. We are longing for attention in all possible ways – whether in our private life or in our relations with friends and relatives. More important – the lack of attention between people is getting immense dimensions and is now like a global disease. We learn to rely on technology for communication, which leads to alienation. We are not aware of this and as a result our relations begin to suffer. When a human beeing receives attention, wonderful things begin to happen. It is getting more open and willing to share thoughts. It feels more valued, respected and soon changes its attitude to gratitude.

There are billions of web sites on the internet, exactly as there are billions of people on the planet. The goal of each of them is to have more visitors, more sales, better profit etc. But unless each one receives more attention, nothing could happen. There are all kinds of advertising tricks that are dedicated to this aim. Unfortunately, advertising is bound with huge costs and is often the reason, why some companies start the chapter 11 procedure. It leads only to temporary results, which are hard to retain in the long term.

I want to describe few things, which I think are important for a web site to receive and for a user to pay attention. Below I try to introduce three different perspectives – of a site owner, of a user of this site, and of the middle man – the designer involved. I have tried to include only 3 factors at each side, which combined can have tremendous impact in the way attention is drawn.

Site owner perspective or how to attract more users
1 .Have a great product/service
Product/service uniqueness and innovation are among the things, which can guarantee you more attention. Things that can be found on 1000 other places decrease your chance to be found and to differentiate yourself from others.

2. Be more transparent
This means to show more details about what you are doing, to maintain a blog or even to have a staff page, where the people behind the company are shown. Describe eventually processes, which are hard for the potential user/buyer to imagine. Always offer a preview of your service to make user decisions easier.

3. Engage with users in continuous communication
Asking for simple feedback can have extraordinary results. Replying on a user question immediately can leave him with positive experience, no matter if her problems are solved or not. People like it, when their opinion counts.

User perspective or when users love to come back
1. User interface
This is one of the first things we see as users. The ease of use decreases the time needed for certain things and makes us more productive. Note that by user interface I also mean the tone of the language used. Many users hate long and complicated processes, so let them achieve their goals by using the least possible amount of steps. They will appreciate it. Use descriptive error messages in human language(not like: “Error 404″) and offer ways to resolve them.

2. Value
When we find interesting content, we are more inclined to visit again. Our visits will be proportional to the value we find. More updates(with respect to quality) are equal to more value, which is equal to more frequent visits.

3. Speed
Our perception is to have less time then ever before. We want to have everything here and now. Thats why speed is more important than ever. It is not only what you deliver, but how you deliver it.

The designer perspective or how to please both worlds
1. Identify the most important things
It is the designer’s job to accentuate on the most important interface elements and to communicate their relative importance to the user. This can be achieved with a suitable color sheme, appropriate size and meaningful positioning of elements. Somebody said that programmers should be paid for actually deletng code. My opinion is that also visual designers should be paid for discarding unnecessary elements.

2. “Lead” the user through the interface
Think about real world examples of interface use. It depends only on you, how you are going to support every single step of your users. If the steps you offer collide to the user’s expectations, they will be much more cautious(and reluctant) to continue.

3. Make things obvious and self-explanatory
A good design doesn’t need a description. Just as an illustrative example – avoid inscriptions that read “Open here” if you are doing a package design. The minute you make your user think about how to open the product, you’ve already lost.

Personal view of the web design process

I always wanted to have an image of all components that should be considered while designing for the web. While they aren’t too much, a sample image on the wall can help see things immediately and prevent getting lost. I decided that it is time to make this classification, the way I see it through my lenses. If you don’t agree with me on the model I present here, be sure to express your anger in the comments section. I hope that this initial attempt will give me (you hopefully you too!) a better understanding of whats really going on and serve as a base for future improvement.

First, I must apologize for the small text, but unless I was limited in width (WordPress allows images up to 700px width), I couldn’t do it bigger without breaking the sequence line. As you can hopefully see, we have a sequence of events and each one receives an input and produces output. Below, I describe the same sequence, that is found on the image with additional comments.

1. Idea
Everything begins with an idea. No matter if you have your own project, or your customer is giving you the task. This is often where creativity and sometimes innovation come in. You may think that an idea is worth very much, but you are wrong, unless there is an excellent realisation. Many people can have the same idea, but they all will implement it differently and will be therefore have different levels of success. Generating many ideas should be a priority, so take a step back, then pen and paper and test your brain processing power. Brainstorming is challenging, but it would be even more if you set up the clock and work under time constraints. Don’t worry if you are not doing well initially, the goal is to get better slowly.

You need to know exactly what you want from your idea or what your client wants from you, so there should be a written (in the worst-case oral) requirements specification that takes into account the most possible number of stakeholders involved (clients, company employee, potential users). It also serves as a contract between the party.

2. Feasibility study
This is the place, where you decide, if its feasible to continue. It depends on many factors – ressources, budget, competition, time required, motivation, etc. Finding out that the project is not feasible in the middle of the work, will lead to a failure.

3. Sketch
If the project is feasible and the specification already exists, an initial sketch could be done. It may consider the goal of the web site and its target audience, navigation, layout, information architecture, small facets of user experience etc. The advantage of the sketch is that it can be done quickly and serves as a starting point for initial discussion.

4. (Graphic) layout
This is the digitized sketch to be presented to the client. It helps outline the contours of the sketch and serves as a final setp before beginning the functional prototype.
This step can be omitted if you are doing your own project and already have clear idea what you are going to do. Not opening the image editor can sometimes save valuable time.

5. HTML
This is the fundament of the World Wide Web. There isn’t a browser, that can’t support HTML. Even text browsers like Lynx, that don’t support media (such as images,video and audio), CSS and JavaScript are capable of that. The structure of the HTML may seem unimportant, but the decisions made here have actually a very big impact on the other components I’ll discuss below. At least I think so. On the image I wrote as input text, media, and hooks (generalized). The textual content is very important for search engines. They like unique content, frequent updates etc. and rank sites accordingly. You should have a content strategy in the long term, or you risk your rank. Media like audio and video(Flash, Silverlight, Youtube etc.) are increasingly valued by users, as most of them hate to read lengthy articles (like this one). Hooks are used in them HTML to bind it with the CSS and JavaScript. Often they are in the form of classes and ids. Sometimes self-defined attributes can be added to support the function of the JavaScript. However these solutions are not W3C valid, but they work the way you want. As always you have to make a compromise.

I placed HTML in a green box, indicating that in my workflow I think its better to test after the initial HTML is ready. The reason for this is to avoid early mistakes that can cost more time later. Simplicity should be a main goal here, as well as using the minimum number of needed tags. The HTML validator could be of help here.

6. CSS
CSS is often viewed as an inseperable part of HTML. As input it receives the sliced images, that were made in the layout phase. Although it is said everywhere – only presentational images should be placed inside. By presentational I mean decorative or very small icons that aren’t viewed as a content. In contrast the logo or news photos should always remain in the HTML (and therefore have width, height and alt attributes to be valid). Always have the least amount selectors defined, where possible. Here is an extention that can help you find unused selectors. The only problem is when you have one stylesheet for multiple pages. The only way to find those selectors then would be to visit all the pages. At least I haven’t found another way. And since I’m always looking to minimize HTTP requests, this tool is not very useful for me. Validation of CSS is exactly as important as of HTML. Especially if you look for consistency among more browsers. The W3C CSS validator can help you resolve any problems.

I placed both HTML and CSS in a box, because I think they should be tested together as a second test. The reason is to make sure that the user interface functions properly under broad variety of conditions. After all that is what users see and perceive as the ready product, not the code behind.

7. Back-End Development
Why should we do back-end before front-end development? It simply works. Because functionality is on the server, the layout presentation on the screen never depends on the user’s preferences. Everything is transparent, so the end user is not aware of anything. The validation of user input of crucial here. We should never assume anything about the input in the forms. A use of regular expressions can be handy here.

The third testing box I think is important contains HTML in combination with the server language (e.g. PHP). If here everything is working, we already have a fully functional website(although fairly limited, considering there is still no DB). Note that this box is completely independent from the one consisting of HTML and CSS. I would better test both combinations separately from one another. You probably have already seen that CSS and PHP are overlapping in the my time sequence diagram. Thats why I think they can be done in parallel. But you should never start with CSS or PHP(even by more people on the team), before having the actual structure in HTML. It will certainly result in unnecessary code and this means additional clean-up time or (even worse) failed project.

8. Database
Every possible modern web site is using some kind of database now. Knowing how to integrate the communication of the server side language with the DB can have a big impact on its usefulness. phpMyAdmin is freely available on packages such as WAMP and XAMPP and its easy to use in case you like MySQL. It’s not only knowing how to use this tool though. Databases are a multibillion industry, and knowing how to properly create and connect tables with all possible normalization methods, primary and foreign keys, indexes, triggers, stored procedures etc. can be a daunting task. I still have to learn many things here. If you are new to SQL, I can recommend you the book “SQL queries for mere mortals”. I has many query examples, that can help you jumpstart in the field of database design.

Its clear that the server side language should be tested with the database it uses. This is marked as the fourth box in my diagram, still combining both with HTML.

9. Front-end development
Although HTML and CSS are “front-end”, to me they are not really “development”. As front-end development I mean here a language like JavaScript. Note that in my diagram JavaScript comes into play after the end of CSS and PHP development. The reason is that JavaScript should be seen as an enhancement of the front-side usability, not its substitute. JavaScript can be easiliy disabled and some older browsers even don’t support it. An attempt to implement all features on the client side will
fail, as the user can easily bypass form validation for instance. This is why you needed to have a “backup” solution first in the face of the server-side language. JS can make or break usability, so caution is needed. Another thing to consider is that you are allowed to place style definitions in your scripts. This sometimes can’t be avoided. You have to think about a consistent way to do so. Properties dedicated to style like color, font-size etc. is better to remain in the CSS if possible, while other such as position may stay in the JS. You must find your own solution here – there is no recipe.

The last 5th testing box in the diagram contains everything – HTML, CSS, PHP & DB, JS. You could have tested JS only with HTML, but because main functionality is already working, you could test it as a whole and see the big picture.

10. Verification & Validation (V&V)
Verification (Are we building the product right?) and validation(Are we building the right product?) are very important not only after the end of the development, but during all phases. I have included them to remember that if anything by the code creation was wrong, a new iteration from the beginning may be needed. Not very convenient – that’s why you always have to be sure.

11. A/B Testing
A/B Testing is a process that end users receive multiple different variants of the same site with the goal to find the best one. This is fully transparent and visitors never know that. The way they interact and behave is tracked by statistic measurements, so a precise decision can be made. This method helps solving some potential usability problems.

12. Optimisation
After you have the final code, you go through multiple iterations to optimize it for better performance. A decision of how far should you go can also be made. Sometimes a slower code may be more maintainable, so you have to account for all possible combinations and find a compromise.

13. Code Compression
After the code is optimized, it can be compressed to save more additional space and bandwidth. See one of my older articles for more information how to do that.

14. Marketing
When the web site is ready, it is very important to receive enough visibility. At least a search engine registration should be initiated. Advertising campaigns, brochures etc. can further help achieve more publicity and popularity.

I’ll be glad if you share your opinion on the diagram provided, and how you think it can be improved. I’m sure there are things I haven’t considered.