ISTA 230

ISTA 230 - Introduction to Web Design

Design Patterns

CSS

CSS

Design

"Everything is designed.
Few things are designed well." Brian Reed
"Design is as much a science as it is an artform." Unknown

CSS

CSS

Purpose of HTML & CSS

CSS

CSS

Purpose of Design

CSS

CSS

Design Elements - Proper use of HTML elements

The first step in good design is the proper use of HTML elements. Using semantically sound HTML element choices to provide structure, organization, and meaning will inherently provide you with a better foundation for applying good design principles through CSS.

CSS

CSS

Design Elements - Balance

Balance occurs when the elements on our page appear to be equally distributed around a vertical axis.

When proper balance is achieved, it provides users with a feeling of structural harmony.

Contrarily, when balance is not achieved, users may feel uncomfortable or at dis-ease while visiting your page.

CSS

CSS

Design Elements - Symmetrical Balance

There are two types of balance that we'll look at in regards to web design: symmetrical and asymmetrical.

Symmetrical balance is achieved when elements are laid out on your page in such a way that one side becomes a mirror image of the other.

Symmetrical balance is easier to achieve than asymmetrical balance. That said, it is often considered more boring...

CSS

CSS

Design Elements - Symmetrical Balance

Leonardo da Vinci's The Last Supper

CSS

CSS

Design Elements - Symmetrical Balance

Leonardo da Vinci's The Last Supper

CSS

CSS

Design Elements - Symmetrical Balance

In order to create symmetrical balance, do the following:

The last note about monochromatic or analogous color scheme is important because different colors have different visual weight. Brighter colors tend to have greater visual weight (i.e. are heavier) than darker, more muted hues. When using more complex color schemes, it is more difficult to maintain symmetrical balance.

CSS

CSS

Design Elements - Symmetrical Balance

Below is an example of a website design that uses symmetrical balance. This site has a centered one-column layout, a centered page heading, and a centered navigation. While the text of the page uses left-aligned text, the larger content area is centered on the page as well, giving us a well-balanced page overall.

Example of a balanced one-column layout

CSS

CSS

Design Elements - Symmetrical Balance

This website design also has symmetrical balance, though the layout is more complex. This site uses a combination of one-, two-, and three- column layout areas. The page heading and navigation are centered, one-column elements. The two-column elements are balanced, with each one appearing on a different side of the vertical axis. Lastly, the three-column elements are balanced with the middle column centered on the vertical axis.

Example of a balanced multi-column layout

CSS

CSS

Design Elements - Asymmetrical Balance

CSS

CSS

Design Elements - Asymmetrical Balance

Asymmetric balance is achieved when the visual weight of elements is equally distributed so that the same amount of weight exists on either side of the vertical axis.

For example, the squares below are different sizes and colors. However, when the four smaller squares are placed on one side of the vertical axis, the overall picture is balanced because they collectively have the same visual weight as the one bigger square.

CSS

CSS

Design Elements - Asymmetrical Balance

In order to determine whether the visual weight of elements is equally distributed, we need to consider what impacts an elements visual weight.

In order to determine whether the visual weight of elements is equally distributed, we need to consider what impacts an elements visual weight:

CSS

CSS

Design Elements - Asymmetrical Balance

Below is an example of a website design that uses asymmetrical balance. This site has a large, relatively complex graphic on the left side of the page. On the other side of the vertical axis, there are a number of smaller elements, almost all of which are white. Using white for these elements gives them more visual weight. Additionally, the quantity and size of these elements provide us with a feeling of balance between the two sides.

Example of an asymmetrically balanced layout

It is worth noting that this design actually uses a combination of asymmetric and symmetric balance. Note that at the bottom of the page, there are four columns, two centered on each side of the vertical axis.

Combining symmetric and asymmetric balance is often a good approach to making a more interesting website design while maintaining the usability of the site.

CSS

CSS

Design Elements - Asymmetrical Balance

This website design also attempts to use asymmetric balance. However, this site feels less balanced than the previous example. The use of darker colors on the right-hand side result in less visual weight on that side of the page, which, in your instructor's opinion, throws things slightly off balance.

Example of an asymmetrically balanced layout

CSS

CSS

Design Elements - Divine Proportion

0 + 1= 1

1 + 1= 2

1 + 2= 3

2 + 3= 5

3 + 5= 8

5 + 8= 13

CSS

CSS

Design Elements - Divine Proportion

1, 1, 2, 3, 5, 8, 13, 21, 34, ...

CSS

CSS

Design Elements - Divine Proportion

1, 1, 2, 3, 5, 8, 13, 21, 34, ...

CSS

CSS

Design Elements - Divine Proportion

1, 1, 2, 3, 5, 8, 13, 21, 34, ...

CSS

CSS

Design Elements - Divine Proportion

Consider the following sequence of integers:

0 + 1= 1
1 + 1= 2
1 + 2= 3
2 + 3= 5
3 + 5= 8
5 + 8= 13
1, 1, 2, 3, 5, 8, 13, 21, 34, ...

This sequence of integers is known as the Fibonacci sequence. It is an important concept in the field of mathematics but also has a number of applications outside of mathematics.

Were we to draw squares using the above integers for widths, we would get a number of squares that can be neatly arranged into a rectangle.

Fibonacci squares

Taking that concept further, we could draw a spiral, connecting the corners of those squares, and it would look like the following:

Fibonacci spiral

CSS

CSS

Design Elements - Divine Proportion

The Fibonacci sequence can be found many places in the natural world. From the arrangement of rose petals to layout of a pine cone, the Fibonacci surrounds us everyday.

Rose Petals

These occurrences of the Fibonacci sequence in the world around us provide us with a natural, aesthetically-appealing, and proven approach to achieving balance.

CSS

CSS

Design Elements - Divine Proportion

Plant

CSS

CSS

Design Elements - Divine Proportion

Spiral Galaxy

CSS

CSS

Design Elements - Divine Proportion

Human Ear

CSS

CSS

Design Elements - Divine Proportion

Pinecone

CSS

CSS

Design Elements - Divine Proportion

Sunflower

CSS

CSS

Design Elements - Divine Proportion

Student

CSS

CSS

Design Elements - Divine Proportion

Da Vinci's Mona Lisa

CSS

CSS

Design Elements - Divine Proportion

So, now the big question: How do we actually use this in our website designs?

1, 1, 2, 3, 5, 8, 13, 21, 34, ...

If we were to take pairs of numbers in the Fibonacci sequence and divided the larger by the smaller, we would notice that they converge on a specific number.

2 ÷ 1 = 2

3 ÷ 2 = 1.5

5 ÷ 3 = 1.666666667

8 ÷ 5 = 1.6

13 ÷ 8 = 1.625

21 ÷ 13 = 1.615384615

34 ÷ 21 = 1.619047619

This ratio, approximately 1.618 for our purposes, is known as the 'divine ratio' or 'golden ratio'. In mathematics, this number is represented as Φ (pronounced 'phi'). Using Φ, we can provide natural balance and harmony to our website designs.

CSS

CSS

Design Elements - Divine Proportion

CSS

CSS

Design Elements - Divine Proportion

377px

377 ÷ 1.618 = 233

CSS

CSS

Design Elements - Divine Proportion

Consider an HTML element that is 377px wide. If we wanted to find a naturally balanced compliment, we could take 377 and divide it by Φ, giving us 233. These elements, while asymmetric, are naturally more balanced than if we were to simply chose two arbitrary widths.

377px
233px

377 ÷ 1.618 = 233

It is also worth noting that 233 and 377 are Fibonacci pairs, Using integers from the Fibonacci sequence is a great way to provide visual harmony and balance in your website designs.

Smaller numbers in the sequence (3, 5, 8, 13, ...) are good for spacing (margins, padding, etc.). Larger integers in the sequence (144, 233, 377, ...) are good for determining the width of elements on your page, particularly when using a multi-column layout.

CSS

CSS

Design Elements - Divine Proportion

Example of a design which utilizes the divine proportion

CSS

CSS

Design Elements - Divine Proportion

Twitter is a great example of a website that uses Φ in their design. The width of the columns as well as the spacing in between them are based off of the 'divine ratio'.

Example of a design which utilizes the divine proportion

CSS

CSS

Design Elements - Divine Proportion

CSS

CSS

Design Elements - Divine Proportion

Divine Proportion

CSS

CSS

Design Elements - Rule of Thirds

The use of the 'divine ratio' requires a fair amount of math. Because some designers are math-adverse, we can cheat a little and still achieve a fair amount of balance using the 'rule of thirds'.

By taking our site design and dividing it into three vertically and horizontally, we can take the resulting 3x3 grid.

Rule of Thirds

The 'rule of thirds' is a common approach for composition, not only in web design, but also in photography and image composition. The idea is that you want to put the most important elements on (or near) the intersections of the grid and along the lines of the grid.

As with the 'divine ratio', using the 'rule of thirds' doesn't guarantee a good design. It's just another tool that you have at your disposal for trying to achieve balance in your design.

CSS

CSS

Design Elements - Rule of Thirds

CSS

CSS

Design Elements - Rule of Thirds

Example of the rule of thirds

CSS

CSS

Design Elements - Rule of Thirds

Example of the rule of thirds - with grid lines

CSS

CSS

Design Elements

CSS

CSS

Design Elements - Proximity

All right, but apart from the sanitation, medicine, education, wine, public order, irrigation, roads, the fresh water system and public health, what have the Romans ever done for us?

Blue. No, yel…

Stop. Who would cross the Bridge of Death must answer me these questions three, ere the other side he see. What... is your name? What... is your quest? What... is your favourite colour?

CSS

CSS

Design Elements - Proximity

All right, but apart from the sanitation, medicine, education, wine, public order, irrigation, roads, the fresh water system and public health, what have the Romans ever done for us?

Blue. No, yel…

Stop. Who would cross the Bridge of Death must answer me these questions three, ere the other side he see. What... is your name? What... is your quest? What... is your favourite colour?

CSS

CSS

Design Elements - Proximity

Proximity is simply the concept that things that are close together are more likely related than things that are not close to one another.

In our designs, we can use spacing to show relationship between things while using larger spacing to provide divisions within our site. This concept is particularly important for your navigational links (which the user should be able to identify as related) and for article headings (which should clearly be associated with the article content)..

CSS

CSS

Design Elements

CSS

CSS

Design Elements - Similarity

Example of relationship through similarity

Source: JD Hancock, http://jdhancock.com/photos/heroes-and-villains/one-of-these-things-is-not-like-the-others/

One of these things is not like the others.

CSS

CSS

Design Elements - Similarity

Similarity is simply the concept that things that look alike are related while things that are not similar are not.

While this concept may seem simple, it is an important one that often gets overlooked by novice designers. Because users often scan your website before actually interacting with it, we want to make sure that our design helps facilitate that 'scanning' behavior.

For similarity, we want:

This is especially important for things like your website navigation!

CSS

CSS

Design Elements - Similarity

Here is an example of a website that used a number of varying styles for their design. While it's hard to say what the designer was aiming for, the result is that the site is confusing and difficult to use.

Example of inconsistent design choices

Because a number of the sections look similar, it is difficult to distinguish what each of them is for. That said, the columns are different sizes even when they're next to each other. While the designer did use consistent colors for some elements, making it a little easier to spot things like column headings, this design is a mess!

CSS

CSS

Design Elements - Similarity

This website provides a much more usable design. The navigational links on the page are consistent in size and color. Additionally, the sections of the website that are highlighted at the bottom of the page have a consistent look to them, making it easy for me to scan all four of them without having to do much work.

Example of consistent design choices

CSS

CSS

Design Elements

CSS

CSS

Design Elements - Focus and Emphasis

Focus and emphasis are arguably the most important elements of a site design. They are what allow us, as the designer, to draw the user's eye to specific parts of our website and to help guide them from one point to another.

In particular, we want to use focus and emphasis to draw the user's eye towards important items (warning messages, sale promotions, etc.) and towards actionable items (navigation, links, etc.).

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Donate Now!

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Example of contrast in design

CSS

CSS

Design Elements - Focus and Emphasis

Example of contrast in a monochromatic design

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Example of heirarchy by proportion

CSS

CSS

Design Elements - Focus and Emphasis

Example of proportion in design

CSS

CSS

Design Elements - Focus and Emphasis

In order to draw users focus, we can use any of the following:

Strong colors

We can use strong colors (such as 'red') to draw the users eye towards a specific element on the page. This can be something subtle (such as a red border) or something as simple as a small (but bright) icon.

Contrasting colors

By using colors that strongly contrast, we can draw users towards a specific section of the page. This is a versatile option, as it can be used to strongly draw focus (orange button on a green background) or do so subtly (a dark green button on a lighter green page).

Proportion

The human eye naturally assigns more importance to larger things than it does to smaller things. We can use this by making important elements larger than less important elements.
While it is a good thing to draw focus to important elements on your site, you should be careful to not try to draw focus to too many elements on a single page. This will only clutter your design and ultimately make your website less usable.

CSS

CSS

Design Elements - Focus and Emphasis

Example of overuse of focus-drawing methods

CSS

CSS

Design Elements - Focus and Emphasis

CSS

CSS

Design Elements - Focus and Emphasis

Example of drawing focus to the wrong things

CSS

CSS

Design Elements - Focus and Emphasis

Example of drawing focus to the wrong things

CSS

CSS

Common Pieces

CSS

CSS

Common Pieces - Header

The page header is an important part of every design. It is the first thing that users will see and should be well thought out in every design you make.

Some common characteristics of a page header:

CSS

CSS

Common Pieces - Header

Because of their prominence, page headers are often filled with additional elements besides the logo and/or page title.

CSS

CSS

Common Pieces - Header

An example of a page heading with just a logo.

Example of a header

CSS

CSS

Common Pieces - Header

An example of a page heading, with the logo on the left side and the site navigation on the right side.

Example of a header

CSS

CSS

Common Pieces - Header

An example of a page heading with a logo, a tag line, and also a promotional element.

Example of a header

CSS

CSS

Common Pieces

CSS

CSS

Common Pieces - Navigation

The navigation on your website is arguably the most vital element of your design. It is the primary way that users will move from one page to another and, if not well thought out, can be the thing that frustrates your users the most.

Some common characteristics of site navigation:

CSS

CSS

Navigation and Affordance

Affordance can be described as the relationship between an objects physical characteristics and its perceived function. Objects can have good affordance (when the physical properties accurately communicate how it should be interacted with) or it can have bad affordance (when the physical properties communicate something contrary to the way it should be interacted with).

For example, a door with a handle that opens only when pushed has bad affordance. The physical characteristics of a handle indicate that the door should be pulled. From time to time, you'll see doors that suffer from bad affordance, often with a sign explaining how it should be used. Given how often we use them, it seems silly that a door should require instructions.

On the other hand, a door with a flat panel that opens when pushed is said to have good affordance. The design naturally communicates how the door should be used, without any need for a sign or further embellishments.

Picture of two different door designs

CSS

CSS

Navigation and Affordance

Affordance - The property describing how physical characteristics of a design communicate (and facilitate) its function.

CSS

CSS

Navigation and Affordance

If you've ever stayed in a hotel and tried to use the shower, you've likely had an experience with bad affordance. As an impediment to an otherwise trivial task, the mysterious faucet handle can quickly become a point of annoyance and frustration.

Our goal is to provide our users with a design that maintains good affordance throughout its entirety. How can we do that?

One of the easiest ways to maintain good affordance throughout your design is to think inside the box. Sticking to patterns and conventions that are used on lots of other websites, while running the risk of feeling boring, is a safe way to lean on the experiences and insight of those who have come before you.

That said, there is never progress when we all stick to what's been done before. The key to successful innovation is making sure that your new idea is not only new but also well-founded. Your users will be impressed with your new approach on their first visit. Make sure they're not annoyed or frustrated with it by their second or third visit.

CSS

CSS

Common Pieces - Navigation

CSS

CSS

Horizontal Navigation

Horizontal Navigtion

CSS

CSS

Common Pieces - Navigation

CSS

CSS

Left-Column Navigation

Left Column Navigtion

CSS

CSS

Common Pieces - Navigation

CSS

CSS

Right-Column Navigation

Right Column Navigtion

CSS

CSS

Common Pieces - Navigation

CSS

CSS

Secondary Navigation

Secondary

An example of secondary horizontal navigation underneath the primary horizontal navigation. You'll note that the background color of the secondary navigation is different than the primary navigation, creating a clear division between the two. Additionally, the 'Business' link in the primary navigation is highlighted using the same background color as the secondary navigation, showing that there is a relationship between it and the secondary navigation displayed.

CSS

CSS

Secondary Navigation

Secondary

Here's another example of secondary horizontal navigation underneath the primary horizontal navigation. However, this designer chose to place the secondary navigation in the page heading. You can clearly distinguish between the primary and secondary navigational links because of the change in typography and background color.

CSS

CSS

Secondary Navigation

Secondary

An example of secondary left-column navigation. The secondary links are smaller in size and use a different background color to help set them apart from the primary links. The "Animation" link in the primary navigation is the 'parent' for the secondary navigation, as indicated by the background color, which is a brighter shade of the background color used for the secondary navigation.

CSS

CSS

Common Pieces

CSS

CSS

Common Pieces - Main Content

The main content area of your website is where you'll place things like the text of an article, interactive forms, pictures in an image gallery, and so on.

Your main content area should take up the most prominent amount of space on your website so that it is easily identifiable and users are drawn to it naturally.

CSS

CSS

Common Pieces - Main Content

While this website design may not have the best use asymmetric balance, it does use proportion and color contrast well to distinguish the main content area from the other elements of the website.

Example of an asymmetrically balanced layout

CSS

CSS

Common Pieces

CSS

CSS

Common Pieces - Footer

The page footer is one of the most flexible elements of your website design. It's almost exclusively placed at the bottom of your design and can be as large or small as you'd like (within reason).

Typically, the page footer contains copyright information and links to terms of use or privacy policies.

CSS

CSS

Common Pieces - Footer

Basic Footer

CSS

CSS

Common Pieces - Footer

CSS

CSS

Common Pieces - Footer

Footer w/ Navigation

CSS

CSS

Common Pieces - Footer

CSS

CSS

Common Pieces - Footer

Footer w/ Secondary Links

CSS

CSS

Common Pieces - Footer

Additionally, the page footer can be used for any of the following:

CSS

CSS

Common Pieces - Footer

CSS

CSS

Common Pieces - Footer

Footer w/ Related Content

CSS

CSS

Common Pieces - Footer

CSS

CSS

Common Pieces - Footer

Footer w/ Secondary Links

CSS

CSS

Common Pieces - Footer

CSS

CSS

Less Common Pieces

CSS

CSS

Less Common Pieces - Asides

CSS

CSS

Less Common Pieces - Asides

An aside is an element of your website that, while possibly related to the main content, isn't part of the main content of the site. They're often used for including links to social media (e.g., Facebook icon, Twitter status, etc.). Some designers may also use asides for including advertising on their site.It's worth noting that, because of the use of asides for advertising, they're often overlooked by users.

When designed well, asides are useful for highlighting content. They can be designed as either a small floating <div> or they can be designed to take up a full column of the page.

In either case, they can be styled so as to draw the users attention. Be careful, though, not to draw too much attention or your users may think it is your main content.

CSS

CSS

Less Common Pieces - Asides

Aside

This is an example of two asides, one used for allowing users to subscribe to the website, and the other for linking to page sponsors (i.e., advertisements). Note the use of the white background on the first aside, to help indicate that it is more closely related to the main content than the ads are.

CSS

CSS

Less Common Pieces

CSS

CSS

Less Common Pieces - Pull Quotes

CSS

CSS

Less Common Pieces - Pull Quote

Pull quotes are a way to draw a user's attention to a specific line (or lines) from the main content.

Pull Quote

By repeating a line of text in its own element, we can increase the size of it to draw user focus. Additionally, we can style the element to make it stand out from the rest of the content.

While pull quotes are useful in some contexts, they don't work well when used on smaller sections of text. Additionally, when overused, they become a distraction from the main content. Typically, I don't advise using more than one pull quote per page (or possibly two if the page is especially long).

CSS

CSS

Less Common Pieces - Pull Quotes

CSS

CSS

Less Common Pieces

CSS

CSS

Less Common Pieces - Sliders

Sliders are an easy way to highlight a set of images or a set of content on a page. They're typically JavaScript-driven and most often appear on a website's home page.

In larger organizations, you'll often have a number of elements that your organization wants to promote. Depending on whom you ask, these elements may have varying priority. Rather than trying to determine which element should be displayed first on the site, using a slider allows us to promote multiple elements in a single location.

When done well, sliders provide a natural focal point for users. Be cautious, however, as sliders with too many elements can often be a distraction to users.

Slider

CSS

CSS

Less Common Pieces - Sliders

CSS

CSS

Making it fit...

When designing your website, there are two types of approaches to determining how the layout of your site should work: fixed-width and fluid-width.

CSS

CSS

Fixed-Width Layouts

Consider the following HTML. We have a page wrapper, with a header, navigation, content, and a footer. We want to design the site so that it has a left-column navigation, with the header and the footer taking up the entire width of the screen.

<div id="wrapper">
   <div id="header">...</div>
   <div id="nav">...</div>
   <div id="content">...</div>
   <div id="footer">...</div>
</div>
Fixed-width layout

CSS

CSS

Fixed-Width Layouts

We can achieve this by using our understanding of the box model and floated elements. For the width, one might want to specify exact pixel amounts (as seen below).

#wrapper { width: 900px; ...
#header  { width: 770px; ...
#nav     { width: 294px; ...
#content { width: 476px; ...
#footer  { width: 770px; ...

Fixed-width layout

This approach provides the designer with full control of the display. No matter what size monitor or device the user is viewing the website on, the page wrapper will be 900px wide. While this approach is easy to grasp, there is a trade-off.

On smaller devices and monitors, 900px may be larger than the available space, resulting in the user having to scroll horizontally in order to see the full website.

On larger monitors, 900px may seem relatively small, resulting in lots of unused white space on the screen. While this is technically functional, it may provide a less visually-appealing aesthetic than you want.

Additionally, if you wanted to go and change the layout of your website, you'd have to modify the width for all of your elements individually.

CSS

CSS

Fixed-Width Layouts

CSS

CSS

Fixed-Width Layouts

CSS

CSS

Fixed-Width Layouts

#wrapper { width: 900px; ...
#header  { width: 770px; ...
#nav     { width: 294px; ...
#content { width: 476px; ...
#footer  { width: 770px; ...
Fixed-width layout

CSS

CSS

Fixed-Width Layouts

#wrapper { width: 900px; ...
#header  { width: 770px; ...
#nav     { width: 294px; ...
#content { width: 476px; ...
#footer  { width: 770px; ...
Fixed-width layout

CSS

CSS

Fixed-Width Layouts

CSS

CSS

Fixed-Width Layouts

#wrapper { width: 900px; ...
#header  { width: 770px; ...
#nav     { width: 294px; ...
#content { width: 476px; ...
#footer  { width: 770px; ...
Fixed-width layout

CSS

CSS

Fixed-Width Layouts

#wrapper { width: 900px; ...
#header  { width: 770px; ...
#nav     { width: 294px; ...
#content { width: 476px; ...
#footer  { width: 770px; ...
Fixed-width layout

CSS

CSS

Fixed-Width Layouts

CSS

CSS

Fluid Layouts

Because using a fixed-width approach has more drawbacks than benefits, we'll look at the option of using what we call a fluid-width layout.

Instead of using a pixel-based value for the width of each element, we'll look at using a percentage-based value.

#wrapper { width: 900px;
#header  { width: 770px;
#nav     { width: 294px;
#content { width: 476px;
#footer  { width: 770px;

CSS

CSS

Fluid Layouts

Assuming that the smallest desktop monitor is around 1024px wide, we'll use that as our baseline for determining the width of the page wrapper.

#wrapper { width: 87.89%; /* 900÷1024 = .8789  = 87.89% */
#header  { width: 770px;
#nav     { width: 294px;
#content { width: 476px;
#footer  { width: 770px;

CSS

CSS

Fluid Layouts

#wrapper { width: 87.89%; /* 900÷1024 = .8789 = 87.89% */
#header  { width: 85.55%; /* 770÷900  = .8555 = 85.55% */
#nav     { width: 294px; 
#content { width: 476px;
#footer  { width: 770px;

CSS

CSS

Fluid Layouts

Because elements width, when specified as a percentage, are based on the containing element, we'll use the original width of the containing element to determine the percentage-based width of its children.

#wrapper { width: 87.89%; /* 900÷1024 = .8789 = 87.89% */
#header  { width: 85.55%; /* 770÷900  = .8555 = 85.55% */
#nav     { width: 32.67%; /* 294÷900  = .3267 = 32.67% */
#content { width: 52.89%; /* 476÷900  = .5289 = 52.89% */
#footer  { width: 85.55%; /* 770÷900  = .7777 = 85.55% */

CSS

CSS

Fluid Layouts

#wrapper { width: 87.89%;
#header  { width: 85.55%;
#nav     { width: 32.67%;
#content { width: 52.89%;
#footer  { width: 85.55%;
Fluid layout

The resulting website design still looks about the same as it did when viewed on a monitor that is 1024px wide. However, it will now shrink down to fit onto smaller monitors without any horizontal scrolling. Additionally, it will scale up on larger monitors, leaving less unused white space.

While this does require more work by the designer, it provides users with a more consistent experience from one device to another and is almost always considered a better approach than using fixed-width layout.

CSS

CSS

Fluid Layouts

#wrapper { width: 87.89%;
#header  { width: 85.55%;
#nav     { width: 32.67%;
#content { width: 52.89%;
#footer  { width: 85.55%;
Fluid layout

CSS

CSS

Fluid Layouts

#wrapper { width: 87.89%;
#header  { width: 85.55%;
#nav     { width: 32.67%;
#content { width: 52.89%;
#footer  { width: 85.55%;
Fluid layout

CSS

CSS

Fluid Layouts

CSS

CSS

Fluid Layouts

CSS

CSS

Fluid Layouts

#wrapper { width: 87.89%;...
#header  { width: 85.55%;...
#nav     { width: 32.67%;...
#content { width: 52.89%;...
#footer  { width: 85.55%;...
Fluid layout

CSS

CSS

Fluid Layouts

One drawback of using a fluid-width layout is that on larger screens, elements might appear larger than desired. For example, on a monitor that is 1920 pixels wide, our navigation, set to 32.67% in the previous example, would be 627px wide. That is a lot of space for navigation.

#wrapper { width: 87.89%;...
#header  { width: 85.55%;...
#nav     { width: 32.67%;... /* 627px on 1920 × 1080 */
#content { width: 52.89%;...
#footer  { width: 85.55%;...
Fluid layout

Fortunately for us, CSS provides us with a means to limit how large or small elements can be...

CSS

CSS

Fluid Layouts

Using the max-width property, we can specify that our navigation should never be more than 250 pixels wide.

#wrapper { width: 87.89%;...
#header  { width: 85.55%;...
#nav     { width: 32.67%; max-width:250px;...
#content { width: 52.89%;...
#footer  { width: 85.55%;...
Fluid layout

CSS

CSS

Dimensions - max-width / max-height Property

div { max-width: 800px; }
div { max-height: 400px; }
/*
 * max-width and max-height are used to 
 * specify the maximum dimensions of an
 * element. Never use the same units as
 * width/height. In other words, don't do this
 *    width:     600px;
 *    max-width: 800px; /* This has no effect */
 *
 * Default Value: N/A
 * Inherited: No
 *
 */

CSS

CSS

Dimensions - min-width / min-height Property

div { min-width: 200px; }
div { min-height: 400px; }
/*
 * min-width and min-height are used to 
 * specify the minimum dimensions of an
 * element. Never use the same units as
 * width/height. In other words, don't do this
 *    width:     800px;
 *    min-width: 200px; /* This has no effect */
 *
 * Default Value: N/A
 * Inherited: No
 *
 */

CSS

CSS

Design Approaches

CSS

CSS

Design Approaches - Photoshop

Photoshop

CSS

CSS

Design Approaches

When setting out to create a new website design, everyone has their preferred method of figuring out what they want to do. Below are some of the more common approaches: