Egypt Designers

Do you use the right graphic format?

2006-10-14T11:43:00.000+02:00

When to Use JPEG or GIF Format for Your Web Images and PNG Too

There are Reasons to Use Each Format

GIF Images

Use GIF files for images that have a small number of colors. GIF files are always reduced to no more than 256 unique colors. The compression algorithm for GIF files is less complex than for JPEG files, but when used on flat color images and text it produces very small file sizes.

The GIF format is not suitable for photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF file.

JPEG Images

Use JPEG images for photographs and other images that have millions of colors. It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPEG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges. This is because when the image is compressed the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG Images

The PNG format was developed as a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. PNG graphics have a better compression rate than GIF images which result in smaller images than the same file saved as a GIF. PNG files offer alpha transparency as well as animation.

PNG images, like GIFs, are not well suited to photographs. It is possible to get around the banding issue that affects photographs saved as GIF files using true colors, but this can result in very large images. The other problem with PNG is that its special features are not well supported by Internet Explorer.

CSS History

2006-10-01T12:39:00.000+02:00

Like HTML, CSS is standardized by the W3 consortium. CSS is an open, independent and freely usable standard. As with HTML, a working group exists for CSS who concerns itself with development of the standard. This is being done in accordance with W3C rules.
CSS comes in different versions. CSS level 1 was released in 1996, and republished with corections in 1999. CSS level 2 appeared in 1998 and built on CSS level 1. CSS level 2 adds support for different output media. CSS 3 is currently in development and will be split up in modules.
The idea behind it was to seperate presentation and content of a web site. The advantage of this approach is that updates and changes to the presentation need only be applied once (to the stylesheet) to affect all pages. Especially large sites can achieve significant time savings. In order to enforce this separation of concerns, the W3C has deprecated the font tag in HTML 4. Newer (X)HTML versions will deprecate other tags in a similar vein.
CSS stylesheets are an immediate addition to HTML. CSS is a language to define format properties of HTML or XML tags. HTML has reached the end of it's shelf life and is not being developed further. XHTML is the new standard instead. XHTML reformulates HTML with XML syntax while at the same time getting rid of presentational markup. XHTML only contains content, presentation is the domain of a CSS stylesheet. This allows for different stylesheets for different output formats such as print, aural or small devices. Search machines on the other hand have an easier job if they are only presented with content markup.
New functionality in CSS2CSS2 retains backward compatibility with CSS1 which means valid CSS1 stylesheets continue to work without changes. CSS2 adds support for different media types. Different stylesheets can target media such as printers, TVs, screen readers and so on. Furthermore, there is the addition of pseudo classes and a few new styling elements for tables, text, colors and positioning.
CSS is supported, to different degrees, by all browsers starting with version 4. Unfortunately, all browsers have implementation bugs, and no browser supports the full CSS2 specification yet. Many browsers allow you to override the provided stylesheet with your own.

Box Model Hack

2006-09-13T14:20:00.000+03:00

Getting Internet Explorer to Play Well with CSS

Why Do We Need a Box Model Hack?

The CSS box model defines the width and height of a box created with CSS as the width or height of the content area of said box. If the width property is left off, then the box is as wide as the content within it. The same goes for the height. If padding, borders, or margins are added to the box, they are added outside of the content width or height.

However, versions of Internet Explorer before IE6/strict don't work this way. In their DOM, the width of the box is the width of the content plus any border or padding. Thus, a 100px box with 0 padding and 0 border would render the same in IE as in Mozilla. However, if 5px padding is added, the Mozilla box (including content and padding) would be 110px wide, while the IE box would still be 100px.

If a 10px border is also added, the Mozilla box (including content, padding and border) would be 130px wide, while the IE box would still be 100px. Finally, if you added 10px margin on all sides, the Mozilla box would be 150px while the IE box would then grow to 120px (100px for the content, padding, and border, and 20 for the margins on left and right).

Internet Explorer does not render the box model correctly. If you want your Web pages to look the same no matter what browser views them, then you have to do something to offset this incorrect rendering of the box model.

What is the Box Model Hack

In basic terms, the box model hack uses bugs in Internet Explorer to force it to use CSS tags that other browsers will ignore.

If you have a div like this:

div {

width: 100px;

padding: 10px;

border: 10px solid #000;

}

It will be 140px wide in valid browsers, and 100px wide in Internet Explorer.

To fix this you need to set up two div selectors, one which defines the width for compliant browsers at 100px and one for IE at 140px.

div {

width: 100px;

}

div {

\width: 140px;

w\idth: 100px;

}

The first line "width: 100px;" is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property "\width: 140px;" is for IE 5 and 6/quirks mode. The final line "w\idth: 100px;" will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px. The problem here is that Netscape 4 crashes when it sees escape characters in the property names, so this isn't done yet.

The Tan Hack

The Tan Hack relies on a quirk of IE 5 and 6 (quirks mode). IE believes that the html tag is not the root element of a document. There is an extra element outside of the html element which IE considers to be the root. By selecting for that element, you can force IE to read your CSS, while other browsers, including Netscape 4, ignore the style completely:

div {

width: 100px;

padding: 10px;

border: 10px solid #000;

}

* html div {

width: 140px; /* for IE5 and IE6 in quirks mode */

w\idth: 100px; /* for IE6 in standards mode */

}

So the next time you build a Web page for both Netscape and IE you can insure that your page displays correctly with these simple hacks. And hopefully, IE will eventually render CSS according to the standards.

CSS Box Properties: Think INSIDE the Box

2006-09-13T14:18:00.000+03:00

Cascading Style Sheets and Box Properties

"Think Outside the Box" - this has become such a cliche in business, but in CSS you want to stay inside of it. All elements in HTML generate a rectangular box. This is called the element box. This box describes the amount of space the element and its properties occupy within the layout of the document.

Each element or box will influence every other box in the document. For example, if the first element is two inches tall, the element to follow it will be two inches from the top of the document. If the first element shrinks to one inch, the following element will then be one inch from the top of the document.

Things are Changing

With Cascading Style Sheets, Web authors can now have more control over how their text is displayed on the page. Even to the extent of placing elements one on top of the other.

There are several CSS properties you can use to affect the shape and location of your text elements:

width

height

margin

margin-top, margin-left, margin-bottom, margin-right

padding

padding-top, padding-left, padding-bottom, padding-right

width

The width of an element is the distance from the left inner edge of the element to the right inner edge.

When you set the width on an element, you don't need to use tables to create text boxes.

This box is created using the width tag on the paragraph. 100 pixels wide.

height

The height of an element is the distance from the top inner edge of the element to the bottom inner edge. Just like with the width, you can create table-like elements within your document. If you create an element where the defined height is actually shorter than the text, the element will be taller than defined. This is exactly like how tables work.

Created with CSS. 100 pixels tall.

margin

Margins add space around the outer edge of the element. Using the margin property, you can define all four margins to be the same. Or you can set all four separately with the same property:

margin : top right bottom left;

Or if you only want to set the margin on one specific side, you can use the margin-* properties (ie. margin-top, margin-right, margin-bottom, margin-left).

This paragraph has a 15 pixel margin around it.

padding

Padding adds space around the inner edge of the element. Using the padding property, you can define all four sides to have the same padding, or you can set all four separately with the same property:

padding : top right bottom left;

Of if you only want to set the padding on one specific side, you can use the padding-* properties (ie. padding-left, padding-top, padding-right, padding-bottom).

When you look at the following paragraph, compare it to the margin example above. You'll notice that when a paragraph has padding there is more background. When the paragraph has margins, there is less background.

This paragraph has a 15 pixel padding around it.

Cascading Style Sheets can help you design your pages. Use these properties to create stylish pages that have the text exactly where you want them.

The Properties Used

The width paragraph

width : 100px; border : none; background-color : #cccccc;

The height paragraph

height : 100px; border : none; background-color : #cccccc;

The margin paragraph

border : none; background-color : #cccccc; margin : 15px;

The padding paragraph

border : none; background-color : #cccccc; padding : 15px;

Designing for IE - Design for Firefox First

2006-09-06T13:30:00.000+03:00

Tips and Tricks to Get Your Site Looking Right in Both Browsers

Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.

But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:

When IE 7 comes out, your site will need to be redesigned.

People who use other browsers won't get a good experience.

If new browsers come out and gain popularity, chances are your site won't be able to support them.

Standards-Based Web Design Is Best

If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.

But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.

How to Design for Internet Explorer

Build your site for Firefox or Safari first.

Build your site and test it using Firefox or Safari first. This will insure that your Web pages look good in standards compliant browsers. And it's actually fairly easy to do.

Use a DOCTYPE.

I prefer to use XHTML 1.0 Transitional, but another good one is HTML 4.01. By using a DOCTYPE, you insure that your page isn't displayed in quirks mode, and the browsers act the same.

Once you've got it looking perfect for Firefox, then start editing for IE 6 or 5.

IE 6 or 5 should come last because it's not standards compliant. When IE 7 comes out, your page will look correct because it looks correct in the other standards compliant browsers.

Don't use hacks to design for IE.

Instead, use the cascade and valid CSS properties and selectors that IE 6 and 5 don't recognize to hide styles for standards compliant browsers. Put the IE 6 styles first in the cascade - then the standard-compliant properties.

Hiding Styles from IE 6

It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.

In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:

div#nav { width: 150px; margin-left: 20px; }

This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.

So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:

body > div#nav { width: 150px; margin-left: 20px; }

Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:

#nav { width: 150px; margin-left: 10px; }

The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.

By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.

How Do I Include One HTML File in Another Using Dreamweaver?

2006-09-05T16:09:00.000+03:00

Use the Dreamweaver Library

One of the most popular questions I'm asked about HTML is how to include one bit of HTML code in another Web page, without having to re-write the code every time. Unfortunately, this is not possible with straight HTML. You can do it with other technology, but that usually requires that you have server technology like SSI or PHP or that you learn JavaScript.

Dreamweaver To the Rescue

Luckily, Dreamweaver recognizes that this is a very important part of Web page development. If you've ever built a site with more than around 10 pages, you'll recognize the value in having shared include files that you can edit once and update your entire site.

Dreamweaver calls these include files "library" files and they are stored in the assets of your Web site in the Files tab.

Before you can create a library item, you need to create a Dreamweaver site. The library item will then become an asset available to that entire site.

Create a Dreamweaver Library Include File

Open the library panel by clicking Window > Assets, and then choosing the Library button (looks like an open book).

Select the portion of HTML that you want to convert into a library element. This can be a block of HTML or a section of the page in design view.

Drag that selection to the library pane and drop it there.

Give your library item a name that will help you remember what it is.

Once you have a library item, you can use it on any page in your site. Simply drag the library item to the new page, and Dreamweaver will place code there indicating that the code displayed is a library item.

Updating a Library Element

The true power in the library items is not in creating them, but in re-using them. You can place your library items on any page in the Dreamweaver Web site it is defined in. Then when you edit it, Dreamweaver will update every page that is using that library item.

Open your library item for editing by double clicking on the library item in the Assets pane.

Edit your library item and hit save.

Dreamweaver will then ask you if you want to update all the files that use the library item. Click Update.

Close the log window. That is Dreamweaver telling you what it is doing. If you have a large number of files to update, that window will remain open until they are all complete.

Once you've updated all the files in your site, you'll need to upload them all to your server. If you forget to upload them, they won't be changed for your customers.

HOW TO (and not to) WORK WITH A DESIGNER

2006-09-05T13:55:00.000+03:00

Imagine that you’re Christopher Columbus.

You arrive in the New World and are so disappointed there is none of the oriental silks and spices you came looking for that you turn around and go home, missing all the wonders of the New World. That’s what happens when you have preconceived notions about design.

You can end up with something that’s better, but NOT SEE or APPRECIATE IT because you’re only focusing on the fact that it’s not what you had in mind.

That’s just one of the mistakes people make when they work with a designer.

A good designer’s work will make something:
WORK BETTER, SELL BETTER, LOOK BETTER

SHED NEW LIGHT ON OLD SUBJECTS

The trouble is a lot of people hire designers because they want their project to “look good.” But that’s just scratching the surface of what a designer can and should do. So they don’t know what’s possible, so they don’t get the most bangs for their buck. Just as writers are not just people who can type, designers are not just people who can use graphics programs.

Good Design is more than skin deep.

DESIGN IS COMMUNICATION.

OK, so how do you work with a designer to get their best work? Here are some suggestions:

1) Choose your designer carefully.

Look at their previous work.
The best designers don’t have a “signature look.” Their projects look as different as their clients do. Awards don’t necessarily mean the design worked for the client.

2) Leave your preconceived notions at the door.

Don’t ask for a project “like someone else’s but in a different color.”
Be open to new, unexpected ideas. Don’t be afraid of something different.
Let new ideas sink in.

3) Tell your designer what you want to say rather than how you want it to look.

4) Be clear about specific features you need.

You want your designer to create a design specific to your needs. If you try to add features as you go along, the design won’t fit as well.

5) Do your research and be specific about your needs.

“I need to sell meeting planners on the idea of hiring me to create costumes for their events.” That’s clear and specific about both the product and the audience. The more detailed and specific you are at the start, the better the designer can tailor the project to your needs. If you add requirements later on, the designer will probably just have to shoe-horn them in, which won’t give you the best results.

6) make sure your message and content are clear.

The more of your content you have complete, the better the designer can build your project around it. A good designer may make suggestions to refine your content to get your message across faster or more clearly, but the more content you have complete, the more the designer will have to work with.

7) Design for your customer, not yourself, your friends or your colleagues.

Be specific so your designer knows who your customers are and what they want. It’s more important that they like your project than that you like it. Always remember, “What’s in it for them?” *

8) Have good reasons for your preferences.

You can show the designer projects that appeal to you, but dig deeper and figure out why they speak to you. Think in terms of feelings.* *

9) Don’t design by committee.

No good design was ever created by a consensus. The more people who have a voice in the process, the more watered down the results will be. Your friends and coworkers will often give you conflicting advice and people often have ulterior motives when they give you comments (they may be jealous or threatened if you get something that’s too good, or they may just be ignorant). You should only have one person making decisions.
Don’t be wishy-washy and try to change direction late in the process.

10) Don’t tell your designer how to design.

That’s not your area of expertise. Instead, give the designer your requirements & preferences, while giving them the freedom to create something that answers them as effectively as possible. If you micromanage your designer, that person won’t be motivated to do anything but cash your check.

11) You can’t please all the people all the time.

Bill Cosby said “The only sure way to failure is to try to please everybody.”

If everyone thinks your project is “OK” then it’s probably too dull to get much of a reaction from anyone. If you design a project with NO personality no one will hate it. Or love it.

12) Trust your designer (you are paying for their expertise).

Designers aren’t just people who can use graphics programs, and if you treat them that way, they will become people who just want to receive a check.

* If the design pleases your customers, they’ll please you.

If you insist on a design that only pleases you, then your customers may not be inspired to buy your product or service and in the end you will lose.

* * Design makes you feel, so tell your designer how it makes you feel.

Instead of saying, “I like yellow,” get to the root of it and say “I want something that feels warm,” or “I want something upbeat and friendly.”
Focusing on your logical or emotional impressions gives the designer more to work with. Why? Because your customers may not “like” the same things you do, but a good designer can convey the impression you want them to have.

The way to inspire a designer is to give them the message you want to convey, and the freedom to convey it in a fresh, new way.

Then when they start to show you “comps” (design versions), give them specific comments.

Yes, designers can make mistakes and take wrong directions.
The reason that so many great discoveries have been accidents is because when you set out with a destination in mind then end up someplace else, you feel you’ve missed the mark and gotten lost.

The reality is different—you may have ended up someplace different—but better.
Yet if you’re only viewing things in terms of “this is where I wanted to go and I’m not there,” you will be disappointed, even with something better.

And yes, you need to tell them if you feel the design is off-track.
But you also have to stop and ask yourself if you’re just being Columbus, missing the wonders of the new world.