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.

Compatibility: do we need to consider IE7 support?

Tweet

I recently had a interesting conversation with a friend of mine. He develops web sites and we were talking about compatibility. Or, to better put it, how many situations a developer should consider when testing a new site. We started counting browser versions, and then we considered all the possible screen resolutions. After that, we added tablets and smartphones with related browser mobile versions.
We ended up with a long list and we were quite bewildered. If you stop for a moment and think about it, developing a new site, ensuring full compatibility, is a complete and utter madness.
I tried to shorten the long list of possible situation and the first thing that came to my mind was Internet Explorer, which, we know, is the most problematic browser. My friend said that we could remove IE7 from the list. I was not so sure. Then we made a bet: let's see how many 'major' web site do support IE7.

It has been a dirty job, but someone had to do it. And I did.
I tested a lot of corporate web sites using Internet Explorer 7 in a Windows Xp environment with a 1280x1024 screen resolution. However I would like to show only the following sites, that might be worth mentioning:

1. BBC;
2. Facebook;
3. Google;
4. HP;
5. Sony;
6. Nokia;
7. Twitter.

Would you like to see the results? Ok! Follow me.

HTML5 & CSS3: compatibility issues

Tweet

In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.

a) Do we really need them?  What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.

Web Development: how to test IE compatibility

Tweet

Lately, we have seen an increasing interest in HTML5 and CSS3. The (not really recent) introduction of new features has been cautiously followed by web developers, and I don't know what's your feeling, however my impression is that the path to the new web is just full of pitfalls.

I recently had to develop a new web site and, because it was a very basic one, I decided to experiment a bit. I must say it has been quite satisfactory (coding-wise), however I had to spend quite some time to test it. I wanted to have almost a full compatibility and - as we have seen lately - the browser that gave me most troubles has been Internet Explorer.

In order to test a web site for compatibility issues, I usually publish it in a not-known sub-dir and then display it with different browsers. I test it with Safari, Opera, FireFox, Chrome and Internet Explorer. In addition, I use services like Browsershots and IE NetRenderer. However, they usually take a lot of time (especially the first) and because we know that time is money, I recently decided to look for something else.

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.

CSS: use CSS3 for columns

Tweet

In the past, when we wanted to create columns we used a table. Today, CSS3 has a style called column that can do the trick easily. Unfortunately that is not working with Internet Explorer, but in that case, we can use the Columnizer jQuery Plugin. In this post, we will concentrate on the CSS3 rules, while we might talk about Columnizer in the near future.

Multiple columns

To create a rule for columns we use the following style:

.threecol
{
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
column-count: 3;
}

An the result will be:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, felis at vulputate tincidunt, turpis nisl egestas felis, sit amet auctor velit massa quis libero. Fusce tincidunt neque ut mi tincidunt sollicitudin. Mauris sed scelerisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis ligula quis velit luctus ullamcorper sed ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed egestas urna ac libero sagittis lobortis. Donec sapien nunc, porta at pharetra imperdiet, ornare eget eros. Fusce placerat nisi et libero faucibus ac condimentum nisl lacinia. Donec ut enim non dui tristique tristique sit amet a nunc. Nullam placerat felis a dolor aliquam auctor. Nulla pellentesque sem eu ligula aliquam ut blandit ipsum rhoncus. Integer tincidunt posuere nisi vehicula vulputate. Aenean non metus sit amet leo varius euismod in quis tellus. Pellentesque ut tempus metus.

CSS: Backgrounds with CSS3

Tweet

One of the most searched effects for web sites today is the background image covering all the visible area. I've already explained a method to achieve that in the past (Making background image fit any screen resolution). With CSS3 there are a set of new property that can handle it quite easily. Let's see them.

The background-size property

The background-size property defines the size of a background image (ah!). You can set the image size in pixels or percentages. With percentage, the size will be relative to the container.

div
{
background:url(example.gif);
-moz-background-size:100% 100%; /* Firefox */
background-size:100% 100%;
background-repeat:no-repeat;
}

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.

Browser statistics: which is the most popular browser?

Tweet

When publishing recent post on CSS3 and HTML5, I started wondering about browser compatibility. What's the point in using state of the art technologies when - potentially - only few browsers can benefit from it?
Recently some well known blogs have published statistics about browsers popularity and so I thought I should share some thoughts about it.

CSS: word-wrap, how to use it

Tweet

Word wrap is an almost obscure CSS property. It's rarely used, but it can save your day sometimes. So, to get to the point, which one of the two following boxes do you prefer?

ThisIsAVeryLongTextThatWon'tBreakUnlessForcedToDoSo

ThisIsAVeryLongTextThatWillBreakBecauseWasForcedToDoSo

I bet you prefer the second one. How to do it? Just one line of code! Follow me...

CSS: Vertical text

Tweet

Have you ever needed to create a vertical text? Something like:

Vertical Text

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility (ah! that is new, isn't it?).

CSS: cross browser gradient (a tutorial)

Tweet

I've already talked about CSS gradients in the past, but mainly together with other CSS features like box-shadow or border-radius. In the following article we will create only gradients for a simple box... and we are going to make it work for any browser. This time no compatibility issue, then.

The style
This time I will start straight from the code. Afterward I am going to explain how we can customize it, understanding what's behind.

.gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
  height: 200px;
  width: 200px;
  color: white
}

The result for the above code will be the following box:

This is the styled div with our gradient.
As you can see, the background has a gradient going from top to bottom, from colour #444444 to color #999999.
Let's now go on with the explanation of the style

SQL Server: useful query for DBAs

Tweet

If you are a Database Administrator and you work with MS SQL Server, there are some useful queries you could use to check how things are going with your databases. Being always aware of what's going on is very important, and in some cases a good control panel with appropriate queries can be developed just to quickly display the databases status.
We are going to explore some interesting administration queries. Just select those that you might be interested in and add them to your personal control panel.

HTML: HTML5 new input types

Tweet

HTML5 introduced some new input types with better control and validation. When the features will be completely supported by all main browsers, creating forms will surely be easier and faster.
The new types are:

• email;
• url;
• number;
• range;
• dates;
• color.

As you can see they are quite interesting. Let's take a tour and see how they work.

CSS: @media (are you ready for the new mobile users generation?)

Tweet

As said before, 2011 and 2012 will be the tablets years. Recently we have witnessed the wide spread of new generation devices increasingly used to surf the web. Because of that, web developers have been aware of possible restyling of old web sites needed to satisfy the new mobile users. It's really a matter of determining your audience. Is people visiting your site using mobile devices? Are you really interested in developing a new look for your site just to satisfy that portion of your audience?
That is quite an interesting point. I suspect that before jumping to conclusions, we need to analyse our audience, know who they are, what they want, what they expect from our web site, and how they want to browse the web site. Basically we need to know if we really need to make those changes to the structure of the site and if it's worth working on it, after all.

At-Rules

I don't know if you already have used CSS at-rules. Basically they enclose a set of CSS rules and apply them to a specific item. We have talked about one of them in the @font-face article. The at-rules are quite interesting and become handy when dealing with different medias. The usual scenario was when we needed to create a specific style for printing pages. However the @media rule can be used to style pages according to different situation.

CSS3: use hyphens to control text flow

Tweet

It seems that I somehow discovered CSS3 lately. I am aware that recently I wrote a lot about it, but today I feel like sharing the following info.
Have you ever needed to control the text flow in web page?
With the CSS3 hyphens property we can really do interesting things.

An intro
We can use hyphens to automatically hyphenate a justified text, giving it the same flow as we can see on books, magazines and newspapers.

Browser Support: even Google is dealing with compatibility issues

Tweet

As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. In these older browsers you may have trouble using certain features in Blogger as well as many other Google Apps such as Gmail, Google Calendar, Google Talk, Google Docs and Google Sites.
 
This is some news. It has been published on Blogger Buzz just last Friday (July 14th).

I've been talking about browser compatibility and support a lot lately. Older browser versions are still around, and - as web developers - we have to face more and more troubles just to make "everybody happy". When I recently had to show a new web site I developed, I couldn't believe my eyes when I saw IE6 running on the meeting room pc. And you can imagine how difficult has been to explain how IE6 is some very old software ("I bought the pc just 5 years ago! It's not old!") and that it should have been replaced a few years ago with a newer version.

I believe the above news is definitely a very good news. Everyone should force people to use newer browsers - and possibly auto-updating ones. That will make us, web developers, take a deep breath of relief!

You can read the original post (Blogger Buzz: Update on Browser Support) and then, please leave a comment about it in the section below.

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

CSS: create shapes in pure css

Tweet

It's been a long time ago that I first heard about creating shapes with pure CSS. Now things are evolving - as I've already explained in quite a few posts lately. Again, compatibility is like a proverbial sword, hanging on our heads, however, if we feel like experimenting, this article can actually be a good place.
I am going to show you how to create shapes in CSS. As said, nothing really new.

Simple shapes

Let's start with very simple shapes.

.square {
width: 100px;
height: 100px;
background: blue; }

jQuery: the magic wand

Tweet

I don't like CMSs. Well, I must admit: I really hate CMSs. I'm stating that just because I do like programming my own web site with complete freedom. And CMSs - even if they claim to be complete or complicated - are usually too tight for my needs.
Even though that is always true and I won't change my mind in the future, I do believe that sometimes programming everything in a web site is very hard and time consuming. So a little help - with complete freedom and customization - is welcome.

jQuery has nothing to do with CMSs