After nearly ten years creating web sites and web applications I have learned some lessons. Below are some points I chatted about with friends wondering about going into web development or web design and who asked me for some advice…

1) Be organized

Like any project, you need to be prepared before starting coding or designing anything. For me it is important to know and understand what is the role of a website we are about to build.
a. What are the functionalities expected?
b. Who is going to use this website, what can they do, are there some different role?
c. How will this website be marketed (think SEO)?
Essentially, knowing the functionalities is important to create your OOP modelization and your database structure. Knowing the type of visitors expected allows you to build the credibility of your website and to select the appropriate group to make some usability test. Finally, knowing how the website will be market is clearly a point that needs to be address while thinking about the web structure.

2) User Experiences: Do not reinvent the wheel

There are a few points you must not neglect during a conception, sometimes you will scratch your head to offer the best experience to the users but often a lot of people have scratched their head before… Using ‘Design Pattern’ will help you find nice solution, you do not have necessarily to respect it totally but it gives a good starting point to cogitate :)

Here are two links you may want to see about this:
Welie : http://www.welie.com/patterns/index.php
Yahoo!: http://developer.yahoo.com/ypatterns/

Do not forget about usability and accessibility.
Usability is to create the most simple user interface; there are a lot of books and website on that topic. If you do not have a specific budget for usability, simply ask your friends and family to do some tasks on your website model (paper is ok), see how long it takes, if they failed, where frustrated and so one. Solve those points. Also while designing the web site, think about the iconography: what does this icon mean to everybody?
Accessibility is to allow people with handicap to access your web site. For example think about screen reader for people with vision handicap, think about the color, the size of fonts…
Here is a list of resources about usability.

3) Framework and technology

The choice of framework and technology depend on your budget, the type of visitors you focus on and the time you have. There are a lot of frameworks for nearly all languages, selecting yours is really important and you should stick to your choice once done. I would strongly advice to use only one framework for each language you will use but it is not always possible but at least try to keep things separated.
To decide yourself, you might wonder if it has the all the feature you needs, if it will last (not a beta framework, is there community support, what is its size and if it is cross-browser…

Below are my two favorite’s frameworks:
CSS: http://code.google.com/p/blueprintcss/
Javascript: http://jquery.com/

4) Take the time to write clean code

Web browser and HTML allow a lot of errors but you shouldn’t allow yourself to use it.
Ban CSS hack from your mind and use conditional comments instead.

Find some information here : http://www.quirksmode.org/css/condcom.html
Here is a CSS validator: http://jigsaw.w3.org/css-validator/

Also stop using HTML 4.0, please jump over to XHTML and validate your pages.
Validate your pages here: http://validator.w3.org/

If you are using a server side language, try to apply OOP paradigm with it (even if you use php). For example, think that the name of your application will certainly be written more than once, so save it in a variable and call it when necessary. So if the marketing team asks you to modify the name, you just have to modify the variable once. Generally speaking, if you need to write something more than once saves it somewhere (it’s longer at the beginning but at the end you will be happy to be able to spend more time for other project).

5) Do not lose the time of your visitors

The first thing visitors do on your page is waiting the page to be downloaded…
There are a few things you can do to prevent a long loading time. Here are my way of doing things but it is not necessarily the common way of doing things…

For example some people advice to have one CSS file for a website, I prefer to split my CSS to pages. I usually have one CSS for the website structure, one for the general design and finally one for every pages that need a special layout. For Javascript files, I load only one .js at the end of my page, this one will load all the others .js needed.

For images, try multiple compressions, if you works with Photoshop in the Save for web panel you have a preview of the size of your image. Take the time to make some test to offer the better quality with the lowest file size. Do not use images when you can use CSS.

If you are using Firefox, I strongly advise you to use the YSlow plugin, It will display the load time length and gives tons of advices to reduce the size of your pages.

6) Do not lose your time

Maintaining a web site is not funny at all, there is no creativity you have to live with existing bugs without having the time to solve them and you want to redesign completely this web site :)
Whenever you build a web site, never forget that you will most certainly have to do some update or bugs solving. Prepare an error management system, prepare a safe server with a safe copy of your web site, keep all you work in a safe (and accessible) place and never write two times the same classes/functions. We got much better things to do :)

7) Help visitors finding you, help them coming back

The web is huge, visitors doesn’t come by chance. They are searching for a service or for information. Attracting visitors is a huge work and depending of the marketing strategy you may have to take different path. I’m a strong believer in the use of blog. For example during my studies I used to do some web site to earn some money, declaring myself a freelancer wouldn’t have helped me finding client, building this blog allowed me to drive much more traffic to my website (around 100x more visitors by day) and to position well myself on some keywords (web technologist Geneva).

Making people coming back is easier (sort of), offer interesting content and people will come back. Do not just create interesting content but contact the people that come to your web site. Offering RSS feeds and/or allowing them to subscribe to a newsletter is a good start. You can also jump in the game of buzz it can offer you a great visibility but this visibility is generally very short in time.

8) Security

The closer you are from the database the higher must be your security. There is multiple level of security, you should ensure that the client-side have functions testing the user input, the server-side must also have function avoiding any injections in your code.
There are some basic things to do about security, be sure to know them (depending on the languages you use).

9) Test, test and test …

As you certainly already know each browser behaves in its own manner. Cross-browser issues are easy to test and with the time you will learn what properties tend to bring bug. Keep in mind that JavaScript and CSS are the most common ‘languages’ that are misinterpreted by browser.
All functions and all interactions should be tested. Also you have to ensure to have proper alert in case of bug. Once your website is open to public you need to be able to react to any bugs easily. Know when a bug happen, where it happen, what made it happen and how often it happens.

10) Keep discovering

The world of development is for curious minded person with the will to solve problems and with a touch of creativity. Being curious is going around on the web and bookmarks pages that you find extraordinary cool. Willing to solve problems is applying the technologies behind those cool pages to your own. Being creative is special to everyone, for me it comes from the time I spend with my wife and my daughters walking around beautiful landscape.

 

I’ve just read via the AXNA that Adobe, Google and Yahoo! worked together to allow SWF searchability. My first thought was ‘finally they made it’ :)

But while reading the FAQ I’ve been a little disappointed by how this indexation seems to happen:

[...]The Flash Player technology, optimized for search spiders, runs a SWF file similarly to how the file would run in Adobe Flash Player in the browser, yet it returns all of the text and links that occur at any state of the application back to the search spider, which then appears in search results to the end user[...]

FlashFlex

[...]All of the extracted information is indexed for relevance according to Google and Yahoo!’s algorithms. The end result is SWF content adding to the searchable information of the web page that hosts the SWF content, thus giving users more information from the web to search through[...]

So I’m afraid that it means that there will be absolutely ‘semantic’ information on the indexed tag. Is this text a title, a paragraph or an image caption? Does this mean that the SEO effort we have to do on SWF are only based on text and keywords?

If you have text with an Alpha of 0 but that have a tween, will it be indexed?

I’m very happy that A_G_Y are working to offer a better indexation and searchability of SWF but as far as I understand it, they are completely missing the SEO point here.

What do you think?

Ahmet

 

Matt Cutts, the head of Google’s Webspam team has published on his blog his session at Web 2.0 Expo:

You can access all the video from the expo on Blip.tv

It is interesting to note that Google have no problem with SEO and that the politic again (web) spammer is to make them lose time, effort and frustrated them :)

You can also view the slide from his presentation directly on his post.

Ahmet

 

Shari Thurow, the Founder and SEO Director of Omni Marketing Interactive wrote a very interesting answer in led-digest.com about the solution I blogged a while ago: ‘Holy Grail: SEO Model for Flash and Flex Content‘.

Here are a few quotes of her, with my answer below:

[...]as long as you are giving search engines one version of a Web page and users another version, then there is a problem[...]

I totally agree but are we talking about the presentation layer or the data layer?
Most websites content are saved on databases, then called whenever needed. Now if the server side technology used produce an XHTML or an XML, we agree that there is no differences?
The XSLT just load a SWF (a Flash or Flex application) on top of an XML. The SWF then use the data from the XML. Whether it is possible to add content on the XML that will never be used on the SWF is an ethical problem, not a problem of Flash. You can also use ‘badly’ the HTML attributes in normal way.

[...]There is the assumption that users want content delivered to them in Flash. I’ve seen Flash used well. I’ve seen Flash used poorly. Only once in my entire Web design career was it necessary for us to do an entire section of a site in Flash [...]

So in your opinion, if the Flash player penetration is above 90% it is because of this assumption? As you said, SWF can be used greatly or poorly and everything in the middle. I’m not a partisan of using SWF just for using it. The best technological solution must be used for the need of the users (not for the developers nor the marketers need). I don’t want to go through to much point but just think about data visualization, broadcasting (TV / sound) or experimental marketing.
I must accord you that SWF changed a lot recently (the last two years) and I understand that you didn’t had to use it before, but keep yourself ready :)

[...]Do they really usability test to determine task completion, efficiency, etc. in order to verify whether users really prefer Flash-delivered content or not? I’m sure there is a
rare few out there who do.[...]

Most of the usability testing that I made or that I read showed that people tend to be more comfortable in front of a UI (user interface) they already know. So obviously ‘traditional HTML’ is often plebiscite, but in terms of task completion, efficiency, UI learning curve, the SWF have an immense advantage: they can follow every move of a user, learn from his mistakes, make elements bigger, dynamically improve the UI to his needs. Doing this with ‘traditional’ web technologies is much harder (IMHO).

[...]I have the kahones to tell a Web site owner that their users do not want Flash and they should change the design. And I can prove it with usability testing.[...]

Again, you talk about usability testing as if it comes from the sky. As far as I know, before doing usability test, there is a reflexion about the UI (I cannot teach you what you know better than me). Usability is everywhere: in the bus, in your kitchen and in front of a screen. But I do really not see the point of aiming at the SWF.

Ahmet

 

Lately someone found a hole on my wordpress blog and use it to inject hidden links.
I was a bit reticent of upgrading my wordpress as I had customize it with a lot of my own functions but enough is enough!

So I’m going to reinstall a fresh new wordpress and say goodbye to my functions :( Until I rewrite them…
It is totally useless to express my hate of spammers, finally they only use a security hole I couldn’t find and use to their advantage the algorithms of pagerank and back link of most of search engines.

This situation remember me the early ages of search engines where most of the search you would do would show unrelated content (with the meta tags abuse). Although search engines results aren’t as worst as they used to be more than 10 years ago…

Expect this blog to change soon :)

Ahmet

 

The discussion about SEO (search engines optimization) and SWF content(from Flash or Flex) has been long and turbulent.
Fortunately this discussion is coming to an end as now a proven solution exists. I made yesterday a presentation about it at the Adobe User Group of Geneva.

Here is the solution I prefer: using XSL (eXtensible Stylesheet Language) and transformation (XSLT) to rewrite an XML files containing data used in the SWF. As a result we got an HTML file for the search engines and a SWF for the human. Not clear?

SEO for SWF via XSLT

This diagram shows how XSLT is central to all the work.

How does it work?
You will need 3 files:
1) a .XML
2) a . XSL
3) a . SWF
Continue reading »

 

It was a great surprise to read that Nokia will help Microsoft to port Silverlight to S60 platforms (also S40 and Internet Tablet later). It is certainly a smart move from Microsoft to target the biggest market first (Nokia got 53% of the worldwide mobile device market) but it’s quite strange from Microsoft to target first Symbian then Windows mobile (maybe one is more stable than the other?).

[...]“There is clear market demand for rich, Web-based services across a variety of device types, but developing these can often be commercially difficult. For Microsoft this extends Silverlight to a broader range of vendors, platforms and devices. For Nokia it expands the web runtime options on its devices, enabling a wider community of developers and more applications. This should help the uptake of higher speed mobile services and advance a new era of anytime, anywhere device-based computing”, said Bola Rotibi , Principal Analyst at Ovum.[...]

Anyway, read the complete article from ZDnet, or read the press-release from Nokia and go back to Flash Lite 3.0 ;)

Ahmet