Six years ago, I was still a student at the University of Geneva, I decided to host myself a blog in order to be able to share my ideas and views with other people. It was also a convenient way for me to be able to remember some random ideas I would have read or learnt.  

I quickly realized that nobody was reading my blog :)! So I changed the switched the main language to English instead of French, this helped quite a bit to increase the number of visitors. I remember that I was really proud when around 30 people per day would visit my blog.

With time my focus and the focus of this blog sharpened on web design and web development (mostly Macromedia/Adobe Flash). Being actively focused drive this blog high in page rank and I had a decent amount of daily visitors (for a personal blog, that said).

Since my professional focus shifted from web design and development to software engineering and testing, the focus on this blog has been lost. Frankly, I am writing about too much random stuff to be able to capture someone attention.

In computer science there is a known paradigm, called divide and conquer, that state that to fix a complex problem a solution is to divide it in simpler problems. Starting today I will apply this paradigm to my online presence.

I am a software tester by profession and I am passionate about software testing knowledge and theories. I have opened a blog dedicated to software testing: testingpatterns.info where I will be blogging about software testing whenever I have something to write. Join me there if you are interested by software testing :).

I work at Microsoft, on Lync server and I own the testing for Response Group Service and Call Park Service. I have opened a while ago a blog on MSDN dedicated to this topic. Join me there if you are interested by Lync server response group service and call park service :).

What about metah.ch / ahmetgyger.com blog? Well I am going to use this blog only for more personal related blogging, giving my point of view on technologies and sharing some information about my life in the US.

Thanks for reading!
A.

 

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.

 

Meeting June 10th
Comme convenu lors de notre dernière rencontre, la date pour la prochaine AUGG à été fixé au mardi 10 juin 2008 à 18:30 chez nos amis des Nomades.

Le programme sortira un peu de l’ordinaire avec une présentation de Florian Egger (PhD in Human-Computer Interaction), qui est Usability & User Experience Consultant, créateur de Telono.com. Il nous fera une présentation sur l’ergo Informatique (l’érgonomie appliqué à l’informatique).

Je ferais la deuxième présentation sur le même sujet mais appliqué aux SWF.

Après les présentations, pizzas et Limoncello :-)

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

 

The Acid test suite checking the browser compliance with certain web standards.
Since April 2007, the version #3 of the Acid Test is open to the world and the results are impressively bad to nearly all web browsers.
According to a Wikipedia article the test is a suite with 100 subtests, in six groups, called “buckets”:

  • Bucket 1: DOM Traversal, DOM Range, HTTP
  • Bucket 2: DOM2 Core and DOM2 Events
  • Bucket 3: DOM2 Views, DOM2 Style, CSS 3 selectors and Media Queries
  • Bucket 4: Behavior of HTML tables and forms when manipulated by script and DOM2 HTML
  • Bucket 5: Tests from the Acid3 Competition (SVG[5], HTML, SMIL, Unicode…)
  • Bucket 6: ECMAScript

Below is the reference result you should have at the end of the test:

Acid 3 Reference Result
Continue reading »

 

It seems that the Internet Explorer team from Microsoft is working hard to improve the quality of the much criticized non standard compliance IE generation (5 – 6 -7).

With respect to standards and interoperability, our goal in developing Internet Explorer 8 is to support the right set of standards with excellent implementations and do so without breaking the existing web. This second goal refers to the lessons we learned during IE 7. IE7’s CSS improvements made IE more compliant with some standards and less compatible with some sites on the web as they were coded. Many sites and developers have done special work to work well with IE6, mostly as a result of the evolution of the web and standards since 2001 and the level of support in the various versions of IE that pre-date many standards. We have a responsibility to respect the work that sites have already done to work with IE. We must deliver improved standards support and backwards compatibility so that IE8 (1) continues to work with the billions of pages on the web today that already work in IE6 and IE7 and (2) makes the development of the next billion pages, in an interoperable way, much easier.

But IE is from far not the only browser that does not pass the ACID Test 2:

Firefox 3 beta 2
Firefox 3 beta 2 Acid Test
Internet Explorer 6
Internet Explorer 6 Acid Test
Internet Explorer 7
Internet Explorer 7 Acid Test
Opera 9
Opera 9 Acid Test
Reference result
Acid Test Reference

According to Dean Hachamovitch the result for IE8 would be smiling:
Internet Explorer 8 Acid Test

The Acid2 test has been ignored by Microsoft IE for so long that it was quite a surprise to see them make an effort in that direction, certainly the rise of Firefox (who does not passes the Acid2 Test but is more standard compliant) is not for nothing in that move.

An Acid2 test is simply a complex web page using basic feature of HTML4, CSS1, PNG, and Data URLs.

* Transparent PNGs — The eyes are encoded as transparent PNGs.
* The object element — The eyes of the face are attached to an object element. Being able to use object (which can have alternative content) is one of the oldest requests from web designers.
* Absolute, relative and fixed positioning — Being able to position elements accurately is important for advanced page layouts.
* Box model — The original Acid test focused on the CSS box model. Acid2 continues in this fine tradition by testing ‘height’, ‘width’, ‘max-width’, ‘min-width’, ‘max-height’ and ‘min-height’.
* CSS tables — There is nothing wrong with table layouts. It is a powerful layout model which makes sense on bigger screens. However, the table markup is troublesome as it ties the content to these screens. Therefore, being able to specify table layouts in CSS is important.
* Margins — CSS defines accurate algorithms for how margins around elements should be calculated.
* Generated content — The ability to add decorations and annotations to Web pages without modifying the markup has long been requested by authors.
* CSS parsing — Acid2 includes a number of illegal CSS statements that should be ignored by a compliant browser.
* Paint order — We test that overlapping content is painted in the right order. This is not a feature in itself, but a requirement for other features to work correctly.
* Line heights — The Acid2 test checks a few key parts of the CSS inline box model, upon which any standards-compliant Web page depends.
* Hovering effects — One of the elements in the face changes color when you “hover” over it. Which one?

More information about IE8
More information about Acid2

That is one more good move from IE after deciding to remove the “Click to activate” by April 2008.

Ahmet

 

Read/WriteWeb has published a list of the Top 10 marketable web development skills. I’m happy to see that Flash and ActionScript are part of the list!

Even if I don’t fully agree with this list I do think that it is interesting to make such a list, so here the list of skills I found important for a web developer.

  • XHTML Valid Skills

    That can sound obvious but the number of so called web developer that does not develop according to standard is huge. Being someone writting valid XHTML code is a very important value IMHO.

  • OOP & UML

    I’m not so much interested by the programing languages a web developer know, but I am interested by the knowledge of Object Oriented Programing and communication of the architecture of a web service. That is why I added UML to OOP, one without the other may be useless in a team.

  • Flash & ActionScript

    Obviously for me it is a must have skill, the Flash Player has a so deep penetration in the market that to not have knowledge of Flash UI or ActionScript is really a bad point.

  • JavaScript & AJAX

    In my point of view we must not accept the culture of totally AJAX or totally Flash. Most of the time a nice combination of both gives the best result. Obviously knowing JavaScript and AJAX is a must!

  • Design skills

    The world of web developer can be split in two: Developers VS Designer. I think to be an “Interactive Designer” (a coder that understand design or a designer to understand code) is the best skill you can market, it also opens a lot more of position!

  • User Experience

    It is not enough to be a talented you need to understand how will your web pages be used. So for me capabilities like Usability, Accessibility and Navigation Design worth gold.

  • Database Understanding

    When developing web program we need mostly to rely on database, understanding the structure and architecture of Database helps to think about deep new way of presenting information and to architecture well all your web pages/services/programs.

By the way, if you have all those listed skills, don’t hesitate to contact me (ahmet AT MBA-Exchange DOT com), we are opening a new position at my work (MBA-Exchange.com & Careernomics.com & MBAGCF.com & LondonBankingDays.com).
We are located at Geneva / Switzerland and speak mostly French and English.

Ahmet