Download Design for the Web

Digital Media
Week 08, 2010
SM1001 Digital Media, Semester A
School of Creative Media ©
A Brief Review:
Design For 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

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).
SM1001: Week 8, 2010
Designing for the Web
Part II
A basic introduction to the Web design
Variable: Connection Speed




This variable affects every single user
on the Internet!
No matter if you make sure you use
common fonts, or don’t require uncommon
plug-ins, this factor still affects your site.
Everyone must connect to the Internet.
Different technologies provide different
bandwidths (like the lanes on a highway).
Bit or Byte?

Filesize (how big a file is on your computer) is
usually measured in units of byte (B), e.g
"kilobytes," "megabytes," and "gigabytes."
• 1 KB (one KiloByte) = 1,024 Bytes
(approximately 1 thousand Bytes)
• 1 MB (one MegaByte) = 1,024 KB
(approximately 1 million Bytes)
• 1 GB (one GigaByte) = 1,024 MB
(approximately 1 billion Bytes)
Bit or Byte?




Data transfer speed on the other hand is
expressed in bits (b). Exampls:
1 kbps = 1,024 bit per second
1 Mbps = 1,024 Kb per second.
1 Gbps = 1,024 Mb per second.
Example: Download speed
Download speed in KB = 124KB/sec
Download speed in Kb = 124K * 8 b/sec
= 992 Kb/sec or 992 Kbps
Download speed in Kb = 992Kb/sec
What is your internet speed?

http://www.speedtest.net
Website for Mobile Device (save bandwidth)
• http://m.facebook.com
• http://hk.m.yahoo.com
• http://www.openrice.com/mobile
What is your internet speed?
Speeds of mobile technologies

GSM Modem 9.6 – 14kb/s but typically 9.6kb/s too slow for web browsing

GPRS 56 – 114kb/s but typically about 33kb/s similar to dial-up modem speeds
for PCs, suitable for web browsing

EDGE 2.5G 236 Kb/s

3G 384kb/s but typically about 144kb/s less than typical ADSL broadband speeds
for PCs but adequate for streaming music and video (under ideal conditions)

3.5G HSDPA 1.8Mb.s ~ 7.2 Mb/s

802.11b (WiFi) 11 Mb/s (11000kb/s) – typically 4 Mb/s connection between
base station and handset/laptop

802.11g (WiFi) 56 Mb/s (56000kb/s) – typically closer to the same speeds as
802.11b

802.11n (WiFi) or 802.16 (WiMax) 70 Mb/s (70000kb/s) – over much wider
distances than WiFi
iPad: Wifi + 3G
SmarTone: 3G vs Wifi
PCCW: 3G vs Wifi
Connection Speed

A lot of the Internet users are still
using 56K modems.

56K = 56 kilobits = 56, 000 bits.

Remember,
• 1 byte = 8 bits
• 56000bits/8 = 7000 bytes = 7 KB
• At the most, it downloads at 7KB per
second.
Connection Speed



Most users will not wait any more than 10
seconds for a site to load.
On a 56K modem, a site that is only 70KB will
take over 10 seconds to load completely.
Unlike print, the web requires a minimalist design
strategy where less is more.
Loading….
Optimizing download Speed



Use repetition to reduce file size (Download one
file, use many times)
• Use the same graphics on different pages
when possible.
Include graphics only when necessary.
Try surfing the Internet on slower modems or
mobile devices such as 28.8KBps, 33.6KBps, etc.
to get a good feeling of the typical modem user,
mobile/3G user, wifi user.
Variables – Internet Browsers



An Internet/Web Browser is like a window into
the World Wide Web (WWW).
Most users today use Microsoft’s Internet
Explorer (IE).
In fact, there are many other browsers available
that are much better (personal preference) and
more safe to use than IE.
Internet Browsers







Mozilla ---------------Mozilla Firefox -----------Opera ------------------------------Netscape -----------------------------------Safari (Mac only) --------------------Google Chrome
And many more!
Internet Browsers



Similar to plug-ins, other than the different
available Internet Browsers, each browser has
different version numbers.
Sometimes when you look at a site using IE 8,
IE7, Firefox 3.6, or Firefox 3.5, they will look
different.
This means that you have to not only test out on
different browsers, but also different versions of
the same browser
Versions of Internet Browsers

Internet Explorer 7
Versions of Internet Browsers

Internet Explorer 8
Versions of Internet Browsers
Internet Explorer 7
Internet Explorer 8
Different Internet Browsers
IE 8
Firefox 3.6
Safari 5.0 OSX
Essential tools for optimizing the
website appearance

http://cross-browser.appspot.com/ is
a site that enables you to test your
web-pages in commonly available
and popular Browser-environments.
Result
Quality Web design
Design for Internet Browsers



The hardest part of Web design is trying to make
a website compatible with every browser and
user.
Due to all the different variables, Web design
should be fluid and optimized.
We review the key concepts for quality Web
design.
Quality Web Design

Fluid interfaces grow with the user.

Some designers, however, prefer fixed interfaces.
17”, 800 x 600
17”, 1024 x 768
Quality Web Design

Using common fonts means the user sees what
you want them to see:
Most users don’t have this font so
they won’t be able to see it
This is a common font so a user
should have no problem seeing it
Quality Web Design

Understand the plug-ins required so users are not
left out.
Users who have the correct version of
the plug-in required can see the site
Users who have the wrong version or
don’t have the plug-in see nothing
Quality Web Design

Understand that different browsers may render
the same site differently.
Firefox 3.6
Safari 5.0 OSX
SM1001: Week 8, 2010
Designing for the Web
Part III
A basic introduction to the Web design
The World Wide Web



Accessing cross-referenced documents,
known as hypertext linking, is probably the
most important aspect of the Web because it
allows you to quickly open other Web pages
A document on the Web is called a Web
page, identified by a unique address called
the Uniform Resource Locator, or URL
URL commonly referred to as a Web address
The World Wide Web

A Web site refers to the location on
the Internet of the Web pages and
related files (such as graphic files)
that belong to a company,
organization, or individual
Website Example
Sitemap
The World Wide Web

A hyperlink, contains a reference to a
specific Web page that you can click to
quickly open that Web page
http://www.abc.com
http://www.xyz.com
What do you need to make a web?
1.
2.
3.
4.

Apply a Domain Name (e.g http://www.abc.com)
Find a web server (e.g sweb.cityu.edu.hk)
Make website on your computer - Local Site
Upload or FTP you website to the web server Remote Site
Domain Name/Web Hosting Company:
•
•
http://www.godaddy.com/
http://www.icdsoft.com/
What is a Web Server?


Computer that host the web site
Software that lets the computer
server the site to another computer
What is HTML?
HTML Documents


Hypertext Markup Language (HTML) is
a simple language used to create the Web
pages that appear on the World Wide Web
A markup language is a set of
characters or symbols that define a
document’s logical structure or how a
document should be printed or displayed
Basic HTML Syntax

HTML documents are text documents
that contain:
• formatting instructions, called tags
• the text that is to be displayed on
a Web page
Basic HTML Syntax


All HTML documents begin with
<html> and end with </html>
Two other important HTML tags are
the <head> tag and the <body> tag
Common Structure and
Formatting HTML Tags
Basic HTML Syntax
Web Page Design


Web page design refers to the visual
design and creation of the documents that
appear on the World Wide Web
Web designer need a web development tool
to develop the Website.
Web Page Design

Web development tools, such as
• Adobe Dreamweaver, Adobe Flash…etc


These are called WYSIWYG tools
WYSIWYG = What You See Is What You
Get.
Web development tools
• will do the dirty work for you,
• but are unable to ensure the quality of the
work.
Standard: W3C


In order to help set a standard for Web
designers to try to follow and support,
there is an organization called the World
Wide Web Consortium (W3C)
By following standards, Internet Browsers
can be built so that the variables are
minimized
Learn from W3C

In order to help new and inexperienced
web designers learn and follow the latest
Internet standards, the W3C has an online
school of its own:
http://www.w3schools.com/


It features tutorials for beginners as well
as advanced web developers.
It’s free!
The Internet



The Internet’s lies in the fact that no one
owns it but everyone and anyone can be
a part of it.
It has become a necessary part of life as a
vital and up-to-date knowledge base.
Virtually all information is available on the
Internet, it’s just a matter of whether or
not you can find it.
The Internet
Summary



When you design anything for the Web
(e.g., A Website), remember that you are
designing for the Web.
Take into consideration all the variables
that the Web involves and then think of a
proper plan to tackle these issues.
Your target may not be an identicallooking Web product, but an identical
(intended) user experience of your Web
product.
Summary

What is WWW, Website ?

How to make a web?

What is HTML document?