Lesson 05 // Web Design, Layout & Structure

1. Web Design/Designer-Coder Relationship

2. Fixed vs Fluid Website Layouts

3. Screen Resolutions

1. Web Design/Designer-Coder Relationship

Maintain a checklist of what to provide to the programmer

1. Folder containing html, css and images folder. Images folder consists of each of the website’s page designs. This way, the programmer can open the index.html in his/her browser and see the final design exactly as it needs to be implemented.

2. Individual jpg or png images. For example: logo, specific images per page, little icons, etc.

3. Template outlining details of the website. Such as fonts, dimensions, colors etc.

4. Description of how elements animate on the page.

Example of a template outlining website details

HEADERSize W: 969px H: 62pxColor #1881e2Location At 0 distance from top of page, right above content area and occupying same width as content areaSearch W: 130px H: 19px Font: Arial, 9px, #333333

NAVIGATION BARLine Size W: 942px H: 1pxColor #333333Location Between line and bottom of header: 39px - Between line and right/left edges of content area: 14pxCopy Font: Arial Capitals, 12px, #333333Distance between words 15px

Example of a template outlining website details

MAIN IMAGESize W: 648px H: 480pxLocation Between top of image and bottom of header: 89px - Between left edge of image and left edge of content area: 14px

RIGHT SIDE BARSize W: 243px H: 480pxTitles Font: Arial, 15px, #1881e2Body Font: Verdana, 11px, #666666Location Between left side of copy (title + body) and right edge of image: 32px - Between right side of body and right edge of white background: 32px - Between top of first title in copy and bottom of header: 89px

Example of a template outlining website details

FOOTERSize W: 969px H: 27pxColor #093157Location Just below the content area – Between bottom edge of image and top edge of footer: 43pxCopy Font: Arial Capitals, 12px, #cccccc

Attributes of good website design

• Less is more• Avoid verbose text• Clear message• Attractive design• Good color coordination• Consistent fonts• Consistent layout across pages• Working links• Easy navigation

http://skywire.co.uk/http://www.theimagists.com/http://www.fusemarketing.com/http://www.cloudberrycreative.com/

Some Good Exampleshttp://aftmichigan.org/http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_hnsqhf/1/438579778_PCJPX#475922649_bsgAD-O-LB

Some Poor Examples

2. Fixed vs Fluid Website Layouts

There are 2 ways to prepare a layout: Fluid and Fixed.A Fluid Layout is a website layout that expands (or compresses) with a browser window’s width.

A Fixed Layout is one where a website’s size doesn’t change as a browser window’s width increases or decreases.

Some Examples

Fluid Layoutin a 1024×768 pxscreen resolution

Fluid Layoutin a 1280×1024 pxscreen resolution

Fluid Layouton a 320×240 pxBlackberry screen resolution.

Fixed Layoutin a 1024×768 pxscreen resolution

Fixed Layoutin a 1280×1024 pxscreen resolution

The picture means that the fixed width of the webpage is around 924 px, which leaves a margin of 50 px of the left and right.

The fixed width of the webpage is still 924 px, but since the screen resolution is 1280 px in width, it leaves a margin of 178 px on left + right. (1280-924)/2=178

50 924 50

1024

924

178

1280

178

Fixed Layouton a 320×240 pxBlackberry screen resolution.

Scrollbars appear.

Advantages and disadvantages of both:

Fluid Website

Advantages Disadvantages

• Ability to see more content• Ideal for people carrying small resolution monitors like mobile devices• Usually don’t have to scroll sideways

Fixed Website • Know exactly how your website will look for all people• Prevent long line lengths (especially for large monitors) which will comfort your readers

• Website might look minute on small resolution monitors• Could have long line lengths (content expands as screen gets wider)

• You’ll have a scrollbar on small resolution monitors

To make a fluid website, we mainly consider 3 things:1. Fonts

2. Layout

3. Images

We use the em or % unit of measurement in css, instead of px.

We use the % and not the px, normally on the width.

We use the % and not the px on either the width or the height.

To make a fixed website, we mainly consider 3 things:1. Fonts

2. Layout

3. Images

We use the px unit of measurement in css.

We use the px on the width and sometimes the height.

We use the px on the width and the height.

Em: 1em is equal to the default text size in a browser: 16px. Since scalable in nature, 1.5 em is 24px. Increasingly popular in web documents due to scalability and mobile-device-friendly nature.

%: 100% is equal to the default text size in a browser: 16px. Since scalable in nature, 150% is 24px. Text remains fully scalable for mobile devices.

Px: 1px is equal to one dot on the computer screen (the smallest division of a screen’s resolution). Since fixed-sized units, pxs are used in screen media (i.e. to be read on the computer screen) and popular among web designers in producing pixel-perfect websites. Pixel unit is not scalable so unfit for mobile devices.Pt: 1pt is equal to 1/72 of an inch. Points are traditionally used in print media, and like pixels, are fixed-sized units and cannot scale in size.

1. Fonts

(Conversions based on 16px browser default size.)

Pixels Ems Percent Points

16px 1em 100% 12pt

24px 1.5em 150% 18pt

Etc

2. Layout

<div id=“container”></div>

div#container {width: 70%;

}

div#container {width:

800px;}

<div id=“container”></div>

Fluid Website Fixed Website

Html CSS Html CSS

<div id=“containerbig”><div id=“containersmal

l”></div>

</div>

div#containerbig {

width: 900px;

height: 600px;}

div#containersmall {

width: 70%;height:

100%;}

Html CSS

In Nested Divs:

For fixed website layouts, we use the px on the width and the height.

For fluid website layouts, we use the % and not the px on either the width or the height.

(Applying % on both the width and the height will cause distortion on certain browsers. We need to leave one dimension loose so that it scales proportionally.)

3. Images

3. Screen Resolutions

1024 x 768 20.29%1280 x 800 15.73%1366 x 768 11.01%1280 x 1024 10.72%1440 x 900 9.22%

66.97%

Notice that around 70% of screen resolutions are over 1000 px wide. All other screen resolutions constitute around 30% of the market. So we can go ahead and decide to build a 900 px wide layout for the majority of users, and work on a fixed layout.(900px is smaller than the smallest width in the 70%)

Screen Resolution Usage Statistics / Feb – Jul 2011

When we talk about measuring or describing screens, we are basically referring to two things:• How big they are, their physical dimension, which we get by measuring the size of their diagonal.

• What resolution they have, or the number of pixels across, and the number of pixels down.

The way resolution is represented is by an invisible grid. At the center of each square of that grid is a circle. The closer the circles are together (or the shorter the distance), the higher the resolution, the further apart (or the greater the distance), the lower the resolution.

Consider an image 500 x 375 px, open on the same laptop, once with a screen resolution of 1024 x 768 px, and once with a screen resolution of 640 x 480 px.

12”

9”

Screen resolution 1024 x 768 px

9”

12”

Screen resolution 640 x 480 px

Even though the image on the right occupies almost most of the screen, it has a low resolution because the distance between each 2 pixels of the 640 in width and 480 in height is big. The image on the left occupies part of the screen only and it is of high resolution because the distances between the pixels is small.

So screen resolution is the inverse of the distance between 2 adjacent pixels.

The > the distance, the < the resolution

The < the distance, the > the resolution