Designers guide to web styling

This is a mini article I wrote to go along with my presentation on modern development.  I’ve tried to explain to our designers how they can help us by understanding why we sometimes have difficulty converting their photoshop files into websites.


Designers guide to web styling

This document aims to try and explain the techniques used to make a graphical design transform into xhtml and css, the language of the web. The web is NOT a print medium. Where as you can draw to a sub millimeter level, we need to make lots of little blocks of content that can behave differently in different browsers.

Knowing what can be easily done and bearing this in mind will enable us to streamline the process of converting a design into a website. 

How are websites made up?

A website consists of a language called xhtml. This is series of words that tell the browser how to treat the information inside them. These are called ‘tags‘. 

So we create a page using a series of tags that the browser ‘tries its best’ to turn into blocks of content and graphics on the page. Problems arise because browsers are very compilcated and have to handle thousands of these content blocks on a single page. 

These tags can then be styled with CSS which tells the tags what colour to be, how big, what graphics to display, where to sit on the page etc.

Each browser does things slightly differently and this leads to the site displaying differently in different browsers. Taking this into account when designing can save a lot of work for us.  Some things, that are easy to do in a graphics package, are either impossible or lead to problems because they display differently in different browsers. If we can avoid styling (applying graphics and font styles) those items that cause trouble in the design stage we can save a lot of time and work.

Blocks, Controls and Content

A page is built up from a series of rectangular objects (blocks). Everything is a rectangle, no nice circles, curvy corners or wrapping text around non-rectangular objects. You may be asking how come you’ve seen such clever things on the web! These effects are tricks used by web designers. We will cover the main ones in this article so you can better understand what we do and how your design can fit easily into such trickery.

N.B. EVERYTHING IS A RECTANGLE

Controls (also called chrome) are the text boxes, drop down lists, radio buttons etc. we enter data through. These are called form controls.  This is where the largest difference is between all the browsers. The controls are drawn by the computer itself, not the browser. The same browser, say firefox, will display controls differently on the mac, windows and linux.
It is possible to style certain parts of controls but due to browser differences, they never display the same.

N.B. To see the issue and differences check out http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

Content is the actual information contained in a page. When a page is correctly produced, only content should be in the xhtml. All display information and styling should be done by CSS. This is not always possible but it desireable.

Who’s your daddy?

Each block can be contained in other blocks. This is called ‘nesting’. The more nesting that occurs the more likely it becomes that errors and display issues will occur. Each block has a parent that it lives within. Most of the graphical techniques we will discuss require a lot of nesting.  This means it is much safer if we can keep nesting to a minimum when designing sites so sticking with one technique a block is best.

To get to a sidebar menu item we need to specify as follows:

Page.Sidebar.Menu.Item

As you can see this can quickly get complicated so keeping nesting to a minimum helps us greatly.

So what is easy to convert?

There are a number of techniques that we use to give good graphical effects but each has a down side or limitation.  Below we will cover the main ones and how to consider the graphical side of them.

Mountain Top

Mountain top is a technique that allows us to easily change the background colours of an item yet still have a defined shape.  This is achieved by having an image that is transparent to show the background colour with graphics drawn in the same colour as the main page.

http://www.alistapart.com/articles/mountaintop/ 

Sliding Doors

Sliding doors allows us to have a background image that expands and collapses with the blocks size.  This means we can have images that effectively stretch to fill a block without distorting.  This is a good technique but does require extra nesting so is best kept for main object, like the sidebar or page sections.
You can do sliding doors in x only or as a wrapping box that has different sections.

http://www.alistapart.com/articles/slidingdoors/ 
http://www.alistapart.com/articles/customcorners2/ 

You can see the effect here http://www.fruitbatinshades.com/pages/css/pulls-or-extracts.php, just resize your browser window to see them change. The page content itself is in a sliding door on that page as are the menus.

What to bear in mind!

You can use these techniques to do some funky stuff and get some great looking designs, just remember that everything is a rectangle so if you put a big curved corner on a design, the content will wrap as if that corner is square!

Loading the background images can take some time and slow down page display so you end up with a page that appears without any images for the first second. Not a killer but something to bear in mind.

PNG is a fantastic format because it allows gradient transparency so you can get some great visual effects but it only works in FF, IE7, safari and chrome. The graphics need to be edited and saved as gif to be used in ie6 or older browsers.

All these techniques require extra blocks to be added to a page that are not content based. Overdoing these techniques can quickly lead to a real mess in code and performance!

Comments are closed.