ThinkCreation » web design

Adobe CS3 Overview

Elisabetta Bruno — Tue, 27 Mar 2007 20:06:35 +0000

Adobe released Creative Suite 3 today, which is probably their biggest release ever. Since the merge with Macromedia a lot of speculation has gone on about which programs were to make it into the Suite and which ones were to be ditched. For the web designers who were wondering, GoLive has been replaced by Dreamweaver, for starters. You will find Acrobat 8 in CS 3 Design Standard Edition (finally!) and Flash in the Premium Edition. Yet talking about CS 3 as 1 suite is a mistake. There are 6 different suites, which address the needs of print designers, web designers and video editors.

Sue Chastain of About Graphics Software presents us a comprehensive and very hard to beat overview of the Suite, so I am not going to repeat what she has one, and, without any more delay, I encourage you to see the overview for yourself.

All-In-One Designers

Elisabetta Bruno — Tue, 21 Mar 2006 23:13:52 +0000

Jacci Howard Bear, on About Desktop Publishing, writes about an interesting report on the Desktop Publishing job’s current situation. The report is by The Bureau of Labor Statistics, U.S. Department of Labor, and states an expected growth in the field.

They also report how desktop publishers often required to know web design and I can tell that the report holds true also in Italy and probably in other countries. Looking through job ads, I see many requests for designers who basically have to be able to do print design and web design, while bigger companies tend to leave the two separate.

Print and web design are very different and bigger companies seems to either understand this more or to have more resources to hire professionals who are specialized in those two fields.

There are also other interesting points in the report, but I’ll let you read Jacci’s article on it as she has done a really good job in summarizing it already.

[tags]DTP, Desktop Publishing, design, web design, jobs, business[/tags]

Boagworld.com: Pragmatic Accessibility

Elisabetta Bruno — Thu, 16 Mar 2006 02:38:51 +0000

Surely you have experienced many times the problem of having to sacrifice some design elements you really liked because of some technical skirmish that has bugged you for days. Boagworld.com tackles this very problem. As they put it:

How do you make sure your site is accessible while avoiding “design compromises” and ensuring a healthy return on investment? This episode of boagworld.com focuses on applying accessibility theory to real world scenarios.

Listen to the podcast.

Creating Your Own WordPress Theme

Elisabetta Bruno — Wed, 08 Mar 2006 23:49:58 +0000

I love blogging and WordPress just makes it an even better experience; it’s a powerful blog platform and you can build an entire website based on it.

I am sure there are many people like me wanting to get in there and do some dirty work to create their own theme, but they just didn’t quite get to it for a reason or another.

Recently I came across two excellent guides, a free one for beginners just about WordPress and another one that goes more indepth, which tackles blogging in general and also WordPress (as well as Movable Type and other things.)

The first guide is from UrbanGiraffe. You will be walked through the dissection of the Kubrick theme and you will reach an understaning of how a WordPress theme works. You will also find out how to install WordPress on your own computer so you can create your own themes without having to use a remote hosting service; you can also use that to create a working back-up of a WordPress blog you already own.

The second guide was suggested to me by Caterine Morley, the project manager of Creative Latitude, and the creator of Designers Who Blog. It’s a book entitled Blog Design Solutions, of which you can read a review on Godbit Project. This is a comprehensive guide and if you want to get into the nitty-gritty stuff, I advise you to purchase it.

Boagworld.com: Geek Dinner Podcast

Elisabetta Bruno — Thu, 02 Mar 2006 21:56:14 +0000

From boagworld.com:

This weeks “special” podcast comes from a geek dinner at which Paul was the speaker. Paul covers the subject of learning together as web designers as well as answering questions on web standards, podcasting and web 2.0

Download the show
Subscribe to the podcast through RSS
Subscribe with iTunes

You can also read the interview.

The Website Development Process

Elisabetta Bruno — Fri, 17 Feb 2006 16:13:23 +0000

For those who are just starting out into web design, here is the basic web design development process as explained visually and clearly by PingMag.

The process might vary from project to project but these guidelines give you a general idea of what steps to take when designing a site. Do you know when and how to build a wireframe? Do you know when the actual creative work starts? Do you know when the programming comes to play? You’ll find the answers in the article.

[tags]HTML, web design, design[/tags]

Why Tables Are Bad

Elisabetta Bruno — Wed, 26 Oct 2005 15:03:50 +0000

If you have ever put your nose into web design, you have probably heard that tables are bad for web design. Why is that? Tables are meant to be used for tabular information, not for positioning of layout elements. Not all browsers support tables is the second reason. The source code is also messy and complicated and makes it harder one the web designer himself when trying to modify things in a document with tables. There are also other reasons why tables should not be used to lay out documents.

CSS is the answer to tableless layouts. In actual fact, without CSS, you’d have to use tables to make pages look like those designed by print designers. There is a great article by Maxine Sherring about this which explaines why tables should not be used to lay out pages and how CSS replaces them: The layout is dead, long live the layout.

Maxine says:

There are many good reasons not to use tables to create web page layouts: unnecessarily complication code, they defy the most basic rule of information storage and retrieval by mixing content with appearance, they destroy logical document flow, and most of all, they were not a tool which was created to do this job. Why continue using them when CSS has a whole suite of far superior page layout features, with the added bonus of streamlined code, separation of content appearance and caomplete control over logical document flow?

Do read the rest of the article, as it does have some valuable information which you will need to know to understand the rest of this article.

How to Avoid Tables

Now that we found out the various reasons why tables should not be used for web design, you are probably asking yourself: “But how do you replace them?” The answer is block-level elements (or box elements). These are basically sections of a document. With CSS you can specify exactly where a certain block-level is on the page. You can give a measure in pixels or on percentages. Percentages are useful when you want to create a layout that expands depending on the resolution of the viewer’s screen.

You can specfy a position relative to the top of the page, the left, the right or the bottom. For example you could say that a certain section of your page (like a paragraph) is to be 50 pixels away from the top, or 50 pixels from the object above it. Or you can say that it is to be25 pixels away from the left. It is usually better just to specify the distance of an object from either one side and either top and bottom, to avoid strange effects in your page. In the example above it is sufficient to say that an block-level element is 50 pixels away from the top and 25 away from the left, without having to specify the distance from the bottom and from the left. Of course which side you decide to specify will be up to what you are trying to do with your design.

Block-elements are composed of several parts. See the full explanation in here.

Heading, paragraphs, lists are all block-level elements and there are more. You can also create block level elements by surrounding parts of your page with

tags. By using

tags, you are saying that the content surrounded by those tags are a section of a document and as such you can position it on your page as you would to with heading and paragraphs. You can have paragraphs inside

tags but not viceversa.

tags inside a paragraph will break it.

CSS Syntax

Elisabetta Bruno — Sun, 09 Oct 2005 15:30:18 +0000

CSS “commands”, style rules is the proper name, are composed of:

selector {property:value}

The selector is the HTML element to be specified, i.e., the element that will be affected by the rule which is expressed in between curly brackets. The rule is composed of a property, which is the “part” of the HTML element that you want to modify, and the value of the property. Property and value compose the declaration.

So if you want a paragraph to be red, you take the paragraph selector (p) and specify that its color property (color) has the red value (red). In CSS it translates:

p {color:red}

This is the result:

This is a red paragraph. It’s a short paragraph, but it’s stil la paragraph. So stop arguing about it!

Property and value are separated by a colon. If you are specifing more than one property, they have to be separated by a semi-colon:

p {color:red;align:left}

The example above will result in a left aligned red paragraph.

If the value is composed of more than one word, set the value between quotation marks:

p {font-family: “sans serif”}

This paragraph will use only sans serif fonts. Which font you will see is usually specified in one of the preferences of your browser (or of the browser of the person that will look at the page). If your browser’s preference says that you will see Helvetica every time it finds the “sans serif” value you will see Helvetica, but if someone else’s preferences are set to Arial, they will see Arial.

You can group selectors so they all have the same properties. If you want all of your headings to have the same colour, whether they are h1, h2 and so on, you can either write it like this:

h1 {color:red}
h2 {color:red}
h3 {color:red}

Or you can write it like this:

h1, h2, h3 {color:red}

The last method is much faster and more orderly. Each selector is to be separated by a comma.

While it isn’t necessary, if you are specifying several rules, you can put them on different lines, so it’s easier for you to locate them at a later stage. So the previous example with the red, right aligned paragraph would be written like this:

p
{
color:red;
align:left
}

When using inline styles (explained in What is CSS?) the syntax changes slightly. You have to say that you are about to apply a style (using style=). The rule then follows within quotation marks instead of curly brakets. Here is an example:

This is a heading

The result is this:

This is a heading

What Is CSS?

Elisabetta Bruno — Sun, 09 Oct 2005 15:18:03 +0000

CSS stands for Cascading Style Sheets.

It’s a method of specyfing how elements in an HTML page will look, i.e., it’s a method of specifying the style of elements in a page. While HTML tags say: “This is a paragraph”, “This is a headline” and so on, Cascading Style Sheets specify how those paragraphs, headlines and so on actually look.

One can write style sheets in external files, called “external style sheet”. One can use one external style sheet for any number of HTML files. Therefore, one can change the appearance of many HTML files just by changing one style sheet. This can save a lot of time.

Why are they called Cascading Style Sheets? Because there is a hierarchy where styles specified in one place take priority over styles specified in another place. It is said that those styles then cascade inside each other.

One can in actual fact define styles from his browser. An example is one of Opera’s preferences that allows you to specify which font you will see when looking at web pages where the is not specified.

Then you have the aforementioned external style sheet. That will override the default browser’s styles.

Next is the internal style sheet, inside the tag of a page. That overrides both the browser’s styles and the external styles.

Last but not least is the inline style. This overrides all of the above and is specified withing a tag. So you could have an external style sheet (or an internal one) stating that all your paragraphs will use Arial. But you can specify with an inline style that one of those paragraphs has to use Verdana.

So you get:

Browser styles
External style sheet
Internal styles
Inline styles

The last one has the most priority and will override the previous ones.