It’s Just Good Web Practice

why

“Why do web designers do that?” Well, there are a lot of reasons, but most of them are just accepted and never explained. Here’s a little look at why we do what we do in the web world.

Why do you use san-serif fonts like Verdana and Arial for body copy?

San-serif fonts retain their appearance no matter how small their size and will read cleanly on any computer. They are also web standard because every computer automatically has them in their font folder.

Why do you mainly use jpg and gif for images?

Tiff files are usually big, having resolution of 300dpi or more, and take a longer time to load. They’re wonderful for print, but a computer screen only displays 72dpi anyway, so all that extra won’t show up even if it’s there. PNGs are wonderful with smooth transparency and a nice transition- but IE6 doesn’t display PNG transparency. (There is a hack for that if you really want it though.) In any case, jpg and gif images load faster and will display in all browsers.

Why do you need an alt tag on an image?

Alt tags are for when your image decides to go on holiday and doesn’t show up for work. A viewer will still be able to read the description of the image in the blank box where the image was supposed to appear. This way, they won’t have to guess at what was meant to show up. Alt tags also help the web readers that blind people use when they have a web page open. So remember to include an alt tag on your images!

Why do you use a grid to design a web page?

The eye reads things in a certain way. In order to create a clear path for the eye to follow, web designers use a grid to line up images and text. Just placing text wherever you like it makes it confusing for the reader. They won’t know which place you want them to look at next. Creating on a grid cleans up the page, creates an automatic hierarchy, and allows a better flow for readers.

Why do you use CSS instead of tables for design?

CSS helps design in a lot of ways. It is more flexible, makes faster changes across all pages, and multiple CSS can style the same page information in different ways for a variety of media. Tables cannot be layered, adjust to different screen sizes, or change their appearance readily over a succession of pages.

Example: Say you want to change a link color to red. CSS can do that for every page in the site with one line of code. With a table, you’ll have to go to every page and manually change the link color. It’s a lot of work, but by using CSS we can eliminate the tedium and save time.

Why are some designers so against Flash?

Flash is a useful tool, but if the same thing can be done with another script language most web designers will opt for that instead of Flash. Why? Because Flash is an application which must be installed on the computer trying to access the information. If Flash is not installed the viewer must download it- which takes them away from your page. Flash also doesn’t make content as accessible for people using alternative web browsing devices, such as the iPhone, or for search engines to pick up information.

Then why do some people use Flash?

Flash is a useful animation tool that provides a smoother movement than most scripts which require the browser rendering to keep up with their speed. Flash script is all internal and therefore must load before it plays. This allows Flash to become separate from the browser’s influence. Because of this, many use Flash for playing videos. It’s a good way to stream video content quickly and efficiently without worrying about what type of browser supports the video encoding.

What about music or sound effects on pages?

If you have to have music on your page- keep it optional. Let people be able to turn it off. In general, it’s not a good idea to have noise on a page since the people browsing might already be listening to their own music and will resent the jumbled sound of two audio waves at once.

Why are designers against flash intros?

Intros take up time that a viewer might not have. Also think about people who come to the site repeatedly. They will have to watch the intro every time they visit- which can get annoying no matter how good the intro looks. If you really want an intro- include the option to skip it. You’ll find that most people will skip.

Why do you test in different browsers?

Different browsers have different ways of reading code. IE and Firefox might display the same bit of CSS differently. It’s best to look at your website in all the main browsers (such as IE, Firefox, Safari, Opera, and Chrome) before you unleash it upon the world. Also keep in mind with IE that different versions display differently. IE 6, 7, and 8 are very different. I would recommend downloading IE Tester to have a look at your site in all the versions.

With this I hope to have demystified at least a bit of why web designers do what they do. Remember, everything has its reasons- especially on the web!

UA HTML E-mail Templates

As part of our effort to use the UA Web Guide as a fluid and regularly updated toolkit, a new resource has been added:  HTML E-mail templates.  Because HTML email has become more important recently and with it comes more and more questions about how to develop and send these emails, we went ahead and developed a set of HTML email templates, much like the web templates, for use by anyone on campus.

There are several options, including some that do not require design modifications.  However, we do have some templates that offer maximum customization by designers.  The templates are packaged with all HTML and images needed to create customized e-mails or you could use the “out-of-the-box” templates and simply add your content with minimal effort.

In addition to these templates, the Web Guide also lists several design guidelines and resources should you choose to go down the fully customized route.  Feel free to use these templates as a good starting point, though.  I leaned heavily on Campaign Monitor’s already fantastic work on testing and establishing any kind of email standards, so if you are starting out new, that’s where I would go first.

Hopefully, these email templates will be as helpful to the UA community as our web templates have been.  Comments and suggestions are welcome!

Web Standards self-study curriculum

In Web Communications, we are big proponents of adhering to Web Standards as we develop and manage web sites.  This is an important area to be well-versed in for web designers, because web standards have evolved from being a grassroots effort into being a pretty commonly-accepted platform on which to build web sites.  But what are web standards, truly?  That’s a challenge to communicate and educate.

There is a new resource called WaSP InterAct that encompasses a lot of the web standards approach, and it’s a free open-source resource for all to use and share.  You may already know a lot of this, but there’s a lot of good information there that might be helpful.  And even if you’re an old pro at this, it might be worth a look to refresh yourself in not only WHAT you do, but WHY you do it.

The curriculum is available in the form of open-source, independent study courses at http://interact.webstandards.org/curriculum/.

UA Web Guide revised

This week we’ve launched a major update to the UA Web Guide at http://webguide.ua.edu.  While the Web Guide has previously been positioned as a standard-setting document for all University web sites, this update serves to present it as a practical toolkit for developing and managing web sites at UA.  There are still minimum standards and requirements that must be followed of course, subject to the UA Web Policy, but this revision hopefully will make the Web Guide more useful for the University community as a whole by focusing on the practical process of building a web site at UA.

The Web Guide contains information about kicking off and managing a web project, design standards and recommendations, resources such as the web templates and web images library, information on accessibility and usability, and other tutorials and resources.

We see the Web Guide being a much more fluid, regularly-updated toolkit going forward, and there are more resources we have on the drawing board to add to as we go.  Comments and suggestions are welcome on how we can help improve it and make it more useful to you or the University community in general.