Transcript Designing for the Web

Digital Media
Week 07, 2010
SM1001 Digital Media, Semester A
School of Creative Media ©
A Brief Review

Color’s three qualities
Hue (dominant frequency component);
Saturation (purity);
Lightness (luminance).
Visible Color Range
Color Relativity (illusion)
Additive Nature of Color
+
RED
+
+
GREEN
+
BLUE
=
RGB
Neutral color as reference

A neutral color is represented in computer as
{128, 128, 128} which is exactly half of 256 (28).
SM1001: Week 7, 2010
Designing for the Web
A basic introduction to the Web design
Designing for Print vs. Web
They are different the following two
major aspects:


Different mediums have different
requirements.
Easier to design for print than for the
Web because there are less variables
involved.
Design for print
Design for Print


Fixed final product
The whole printout is available
Design for Print



The product that leaves the creator’s
hands is the final product itself.
Does not require another
transformation of the product for it
to be seen by someone.
No need to wait for the printout to
load because the viewer either has
the whole product or nothing at all.
Design for the web
Plethora of Factors




Many Variables
Mix display platforms, e.g., CRT, LCD,
projector, iphone, Android, etc.
Content must be transformed by a
software at the viewing time (e.g., Using
a Web browser to display a Website).
These factors cause differences in the final
product and challenges in design.
Design for the Web
Variable display size
Different shades
of color!
Design for the Web

Variables include:
•
•
•
•
•
•
User’s display’s screen resolution (e.g., 800x600);
Display device’s color gamut (color range);
Display device’s actual size (e.g., 15”, 17”);
Available fonts (discussed in details later);
Available plug-ins (discussed later);
Internet bandwidth (how fast the user can
download content, discussed later);
• Browser version and compatibility (discussed
later).
Variables - Screen Resolution

Screen resolution of the display
changes the way the intended design
looks. (Remember that a pixel’s actual
dimensions are not fixed.)

A 17” monitor using 1024 x 768 is
different from the same monitor
using 800 x 600 for its screen
resolution.
Variables - Screen Resolution



Use different resolutions to compare the
site’s appearance on the same monitor
If the site at different resolutions
looks different – fixed web design.
Let’s look at the example in next page:
Fixed Web Design – case 1

17” monitor at 800 x 600 screen resolution
Fixed Web Design – case 1

17” monitor at 1024x768 screen resolution
Fixed Web Design – case 1
17”, 800 x 600
17”, 1024 x 768
The site at different resolutions looks different – fixed web design.
Actual Size for web



Notice how the same monitor using
different screen resolutions shows
the same product in a different size.
The site just fits within a screen
resolution of 800 x 600.
This site was designed with users
who have a minimum resolution of
800 x 600 in mind.
Actual Size for web



In fact the Website is has 760 x 420
resolution (targeted for an audience
who uses 800 x 600 ).
The reason for this is because when
people look at Websites, they need
to use an interpreter – a Web
browser.
This leaves room for the browser’s
own menus, scroll bars, etc.
800 pixels
Actual Size for web
Actual
available
height for
the site
before the
user needs
to scroll
This is
known as
Screen
Estate
Actual Size for web

Since the displayable space is not fixed, this means a lot of
space might be wasted on fixed-size designs (static design)
Wasted
Screen
Estate
Actual Size for web

Iphone 4 vs Galaxy S
Wasted
Space
Wasted
Space
Fixed Web Design – case 2

17” monitor at 800 x 600 screen resolution
Fixed Web Design – case 2

17” monitor at 1280x1024 screen resolution
Fixed Web Design – case 2
17”, 800 x 600
17”, 1280 x 1024
The site at different resolutions looks different – fixed web design.
Dynamic design for the Web

Designers create fluid (dynamic) web designs that
expand and contract according to the size of the browser.

This allows for optimized use of the available screen
estate on any monitor at any resolution.

Websites which use a fluid layout design include :
1.
Amazon.
2.
http://css-tricks.com/examples/PerfectFluidWidthLayout
3.
http://flashtuts.s3.amazonaws.com/054_FluidWebDesign
/easing/preview.html
Take a look at http://www.amazon.com

Using a 19” monitor at 1024 x 768 :
Dynamic design for the Web
http://www.amazon.com

Using a 19” monitor at 1280 x 1024:
Dynamic design for the Web
19”, 1024 x 768
19”, 1280 x 1024
The site at different resolutions looks and feels almost the same.
This is an example of fluid web design.
Essential tools for optimizing the
website appearance


If you care about your readers and want
them to be always able to read your site
or blog conveniently in any monitor
resolution, then you’ll be probably
interested in this one.
ViewLikeUs is a site that enables you to
take a look on how your site’s appearance
on different monitor resolutions. .
Variables - Monitor


Imagine how many more variables in display
sizes there are when we compare different
monitor sizes! (15”, 19”, 21”, etc.).
Fact: a 15” CRT (measured by the diagonal length
of the screen and the border) is not the same
size as a 15” LCD (measured by the diagonal
length of the screen only) monitor!
Variables - Monitor
A 15” CRT
monitor
A 15” LCD
monitor
Variables - Fonts

Another variable in web design is fonts.

A website does not normally embed fonts.

This means that if you design your site using a
very rare font (e.g., Barrakuda), if the viewers’
computer does not have the same font
installed, they will not see the site the same
way it was designed.
Variables - Fonts

The site was originally designed to look like this:
Barrakuda
font
Variables - Fonts

If the viewer’s device does not have the Barrakuda font:
Auto-replaced
with an available
font
Variables - Fonts

There are two possible solutions to this:
• Use commonly available fonts (e.g., Arial,
Courier, Times, etc.)
• Use a graphic to display the text
Variables – Plug-ins



Another variable factor on the web is
the availability of a plug-in on a
viewer’s device.
A plug-in is like a self-contained
modification or enhancement to the
browser that gives the browser the
ability to load certain programs.
You may think of a plug-in like the
tools for a carpenter.
iphone don’t support Flash
iPad don’t support Flash
Suddenly, Apple announced
Variables – Plug-ins

One of the most common plug-ins is the
Adobe Flash Player.

A lot of Websites have Flash animations.


Only if a user’s browser has the Flash
plug-in installed on their devices can they
see these animations.
What if the full website is made in Flash
like http://www.2advanced.com ?
Variables – Plug-ins

If the user has the Flash plug-in:
Variables – Plug-ins

If the user does not have the plug-in:
Versions of Plug-ins


Another factor that affects plug-ins is the
version of the plug-in.
For example, the www.2advanced.com
website requires the user to have
version 6 (or above) of the Flash Player.
Versions of Plug-ins

If the user has the Flash 10 Player plug-in:
Versions of Plug-ins

If the user has the Flash 5 Player plug-in:
Versions of Plug-ins


Not every user immediately updates their
plug-ins when a newer version comes out.
It is important to make a decision:
• Design using the latest technology and risk
losing potential viewers because they can’t see
the site (if they do not install the newer plugin).
• Design using older but more common
technology so most visitors will have no
problem seeing the site.
Plug-ins

Other common plug-ins that a lot of
Websites take advantage of are:
•
•
•
•

Apple Quicktime
Realplayer
Windows Media Player
Adobe Acrobat Reader
Since the user might not have the plug-in
required, it is common for Websites to
have a link to the plug-in download page.
Get Plug-ins

The Website below not only tells you what
plug-in is required, but also gives you a
link to where you can download it.