Web Development: Firefox 16 and the developer toolbar

Tweet

A few days ago Mozilla has released the new Firefox 16.
There are a few interesting things we should consider in this new release:
1) the incremental garbage collection which improves the browser overall performance;
2) web app support;
3) better CSS3 animations;
4) reader mode for Android devices improves the reading experience;
5) VoiceOver, a text reader for OSX systems;
6) the new developer toolbar.

The last is what we are talking about here: the developer toolbar. Let's see what it can do.

Web Design: the good use of white space

Tweet

White space in web design is, in my opinion very important. The correct use of it can really make a difference.
In this short article, I would like to share my ideas on the good use of white space in web design. What I write here is my personal opinion, and it comes from years of web design. I may have read the following things somewhere in the past, but I truly don't remember where and when. So, if you find something that you have already read somewhere, please remember the above.
Now, follow me, and don't forget to share your thoughts.

iPhone: web design and web development apps

Tweet

Do you like your iPhone so much that you take it everywhere and play with it every spare moment? Are you a web designer and/or developer? Well, here's a list of interesting iPhone apps that you should have.

Enjoy!

Web Design: Designers Toolbox

Tweet

Today I will share a very useful web site called Designers Toolbox.
As the name says, on the site there are different interesting tools making the life of a designer easier. Keep in mind that it is not just for web designers, in fact it contains information even for general design.
The list of the tools includes:
-  a lorem ipsum generator;
- web safe areas;
- HTML characters;
- banners sizes and formats;
- how to use fonts for the web.

Add to the above, useful info on envelope sizes, folding methods, paper sizes and so on.
The site is very well done and easy to navigate, with a simple design that will make the visitor curious.

I believe you might find the resource interesting... so have a look and let me know.

Web Design: a collection of progress bars

Tweet

In the past I've published a post about developing a progress bar/indicator for ASP pages. In that article we used a small rounded gif to make the user aware of the fact that something is going on and information is gathered.
Today, for your joy, I want to share my collection of animated gifs that can be used as progress bar. Some are simple, some are a little bit bizarre and some are a little bit intrusive.
You can choose the one you prefer, and use it on your pages. I believe they all are copyright free, but if you recognized your copyrighted work here, just drop a line and I will give credit to you or remove it, if you prefer.

Here we go... the great progress bar parade! (this post is some kind of a joke or not?)

Web Design: free images deposits

Tweet

When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:

• Flickr: Creative Commons
• MorgueFile: free photos
• FreePhotosBank
• FreeMediaGoo (audio, images, textures and flash)
• FreeDigitalPhotos
• InterfaceLift Icons

I hope the above list might be of some use for you.
In the meantime, happy coding!

Web Development: handheld device emulators

Tweet

In the past months I've made some researches about web development and design for handheld devices. The main problem, as we all know, is that we should have most of the devices sold, just to test how our web sites or applications are displayed on them. Does our newly created web site look just right on an iPad or a Galaxy Tab?

To be sure we are doing things properly, we need to test the web creation, and emulators can be of some help. In this post I gathered all the relevant tools, as a repository for future reference.

Web Design: develop an effective navigation menu

Tweet

When developing a web site, one thing we should concentrate on is the navigation menu. Considering that probably a menu is the most important part of our web development process, I would like to share some ideas about it, things to keep in mind while we start thinking about an effective navigation menu.

What kind of menu we need

The first thing we should consider - while our project is still a blank and white piece of paper - is: what kind of menu we really need? It seems a dumb question, but we need to focus on what is the true purpose of our - yet to be born - navigation menu.
Knowing what is the general purpose of our web site, lets us concentrate on the structure and content of the menu. For example: if our site is a marketplace, we need to focus on selling products, while if our site is just displaying our production range, we need to focus on products marketing.
The concept is quite clear if we compare two well-known web sites: Apple and Amazon.

Web Design: mistakes in big companies websites

Tweet

Christmas is near, and I know that we all need to rest a bit, without thinking about coding and programming.
That is why, today, I publish a post which might raise our spirits: I'll show you small or big mistakes made by web developers in big companies websites.
That will be fun!
I browsed a lot of websites on November the 25th 2011... all done in one morning. I screen-captured the mistakes while using Firefox 8.0 with a 1280x1024 screen resolution.

I will show you glitches in the following websites (strictly in alphabetical order):

1. cnn
2. coca-cola
3. eBay (Italy)
4. flickr
5. google (reader page)
6. hp
7. kaspersky
8. nintendo
9. philips
10. twitter

Ready? Enjoy yourself... with a bit of pride, because we know we do not make such mistakes!

Web Design: what to consider when re-designing a web site

Tweet

I've been recently asked to re-design a web site. I had to meet some people and talk about it. The company wanted a completely new web site, while the engine behind (SQL database) should have stayed.
As you may understand, that is a completely different situation compared to the development of a new web site. There are some things to be considered when approaching a totally new site that do not apply in a re-design. I'm talking about technical things like domain management, web site hosting and platform used; or marketing stuff like commercial targets, brand awareness program and other boring things.
In our case the story is different: many of the above questions have been already asked and settled. For this reason, I have created a list of matters that needed to be discussed and that I think might be useful to all those developers in the same situation.

So, here is my list of practical things to consider (and ask) when re-designing a web site.

Web Design: what gurus think and what I think about it

Tweet

I've been reading a lot lately. I actually follow many blogs and sites where skilled writers share their ideas about web design and web development. Those writers usually give advices on how to think the web and specifically how to create sites with the best user experience.
The language used is a complete melting pot of technicalities, often difficult to follow, as if the writers were explaining their ideas to a very restricted circle of scholars. New terms (neologisms) are springing everywhere, sometimes creating confusion. A cryptic way of spreading new ideas, in my opinion.

Lately I've been thinking a lot about that, and I would like to humbly share my thoughts. I'm not a guru and, even though I'm a little bit experienced, I've always been outside the chorus. So here - if you are interested - I begin.

Web site statistics: why are they important?

Tweet

I have recently published two articles in which we saw how to benefit from Google Analytics and which browser is the most popular, globally. The articles seem unrelated, but they are not. When we manage a web sites, statistics are fundamental and give us the right point of view in planning future developments. What I'm saying is that before changing something in our web site, or - more importantly - when we plan to change the whole web site, we do need to look closely at web statistics in order to plan our future work efficiently and effectively.

Recently, I have published other articles incidentally related to this one. For instance, I've been talking about the new mobile generation and handheld devices used to surf the net. That new way of surfing the web, is changing the way we develop web sites. There's - apparently -  the need to create handheld devices compatible designs, and target screen resolution becomes a nightmare for all of us.

That is all true, however I would like you to focus for a moment on the issue. We are basically assuming we need to change an old web site, or just add some features to it. Our web site statistics can really make a difference. And let me explain why.

Web Design: animated photos

Tweet

Recently I found an interesting article on the Smashing Magazine about CSS, HTML and JavaScript tools. The thing that struck me was at the very end of the article and it was referring to a blog called From Me to You. The remarkable thing about it, is that the author creates animated photos. Let me explain to you by showing the following photo:

Look closely at the tomatoes: there are drops of water falling onto them. Now that's an animated gif, isn't it? It weights 218kb, which is a lot. However there's a trick in order to create those animated photos, by keeping the weight lower and thus not wasting bandwidth.

Web Design: resizeMyBrowser

Tweet

When building web sites, one of the most important things we must deal with nowadays is the target screen size. I have published different articles on the subject, but everytime I think about it and search on the web, I find different tools to check if I've done things right. With the explosion of handheld devices, the screen size has become a more important matter, and what we see on our beloved widescreen monitor is just not enough to evaluate how visitors will look at our web site.
There is one tool I would like to suggest; a tool conceived to help us in that evaluation.

ResizeMyBrowser

resizeMyBrowser is a simple tool that will resize your browser window according to different standards like the iPhone 3G/3GS screen size (320x480 or 480x320), iPhone 4 (640x960 or 960x640), iPad and so on. In addition to the available presets, there's the possibility to create custom presets.

The testing is done quite accurately, and there's the possibility to see the result considering the outer window (including toolbars) or considering the inner window (the interior of the browser window).

If you use Firefox and the Web Developer toolbar, you would probably don't need this, but I think that an additional testing tool is always welcomed.

Happy coding to all of you!

Web Design: the colour scheme

Tweet

One of the first things we should think of when planning a new web site or application is the colour scheme. We usually create a layout (and I do it with pencil and paper), we can think about the menu and the position of important information, we try to use the work space in a smart way and generally we focus on the overall user interface. next step should be the evaluation of the colours we will use. We can start it all by deciding the basic colour and after that by creating the colour scheme. It is an old story and it started when our computer monitors were smaller and our graphic cards were less powerful. At that time we could rely only on 256 colours (remember?); now it is a completely different story.
Choosing the right colour scheme is one of the things that annoys me more. It makes me suddenly lazy, but I know it is very important. If you have a graphic designer or someone who knows exactly what the colour scheme should be, then you're lucky and you can rely (or be forced somehow) on that helping hand. But if you need to think about all alone, then some kind of tool might become handy.

Web Design: the golden ratio

Tweet

If you are a fan of Lost (the tv series) you may know everything about Fibonacci and his sequence. You may have explored everything about the golden ratio and its relation with things in nature. You may now wonder what has the golden ratio to do with and how it is related to web design. Well, I won't get into a complete mathematical explanation of the golden ratio because it is not the reason why I wrote this post. The main point here is that the golden ratio has been and still is used and applied to achieve rational proportions and create pleasing aesthetics. The golden ratio has been and is used in architecture, painting, music and industrial design, you can find it in nature, and it has been used even in finance. With that in mind, it is easy to think that we can apply it to web design, in order to achieve pleasant layouts with the help of maths (because sometimes maths is beautiful).

Web Design: fluid, fixed or mixed layout?

Tweet

When starting a new web site or application, the very first thing that I think about is if I will use a fluid, a fixed or a mixed layout. It's always been a debated issue: there are experienced web designers who think that a fixed layout is best, others who think that a fluid one has a more professional look, and the debate goes on. I don't know what you think - and I'd really like to, so please use the comment section below after reading this post - but I would like to share my thoughts about it, in any case.

The web safe area

There are different pros and cons about every single solution. And I believe there are very good articles around the web that explain them thoroughly. In my opinion, the main point is - to put it simply - understanding which is the layout that will be the best for any visitor. As you know, every single user might have a different browser and a different operating system. That means every one of them might experience a web site in a completely different way. Thus the web safe area comes into play: for each possible combination of browser and operating system, it is possible to determine which is the safe area to use in your web design. Designers Toolbox has a page which analyses every of those possible combinations, however let me summarise it for you in the following table:

Web Sites: how to keep things tidy (with style sheets)

Tweet

Almost three years ago, I have inherited a web site management. That web site was developed by a third party (a not-so-much-skilled web designer), using a mixture of different programming languages (JavaScript and VBScript) supported by CSS style sheets. In the past days, I've been asked to revamp the web site. Mainly, they asked for a change of colors... well, actually they wanted to obtain some sort of negative image of the web site. That means changing the black into white, and the whole grey color palette.
I am sure some of you will think that it's quite an easy task to do. And that's true... just when you (or your predecessor) have kept the things tidy!

Check Browser Compatibility

Tweet

When creating a new web site, it is very important to check browser compatibility. Sometimes customers are not really aware of the implication of that issue, but as developers, we know how important is a good cross browser compatibility. It is undeniable that we cannot have every available browser installed on our testing server, not to say every single version. That is why we have to rely on an external tool in order to actually see how the highest number of browser will render our beautiful new web site.
I discovered a useful site to do it. And I would like to make you aware of it, so that you can use it to test your work.

Firefox Extension: Web Developer

Tweet

If you are a web site developer you probably have got inspiration from other site sometimes. Again, while developing a new project, you had to deeply and thoroughly test your creation. These are the main reasons why - if you use Firefox or Chrome - you should consider installing the Web Developer extension.