Digital Media SM1001 Digital Media, Semester A School of Creative Media © Week 08, 2010

A Brief Review: Design For Web

Plethora of Factors Many Variables Many Variables Mix display platforms, e.g., CRT, LCD, projector, iphone, Android, etc. 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). 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. These factors cause differences in the final product and challenges in design.

Design for the Web Variables include: Variables include: User ’ s display ’ s screen resolution (e.g., 800x600);User ’ s display ’ s screen resolution (e.g., 800x600); Display device ’ s color gamut (color range);Display device ’ s color gamut (color range); Display device ’ s actual size (e.g., 15 ”, 17 ” );Display device ’ s actual size (e.g., 15 ”, 17 ” ); Available fonts (discussed in details later);Available fonts (discussed in details later); Available plug-ins (discussed later);Available plug-ins (discussed later); Internet bandwidth (how fast the user can download content, discussed later);Internet bandwidth (how fast the user can download content, discussed later); Browser version and compatibility (discussed later).Browser version and compatibility (discussed later).

SM1001: Week 8, 2010 Designing for the Web Part II 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! 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. 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. Everyone must connect to the Internet. Different technologies provide different bandwidths (like the lanes on a highway). 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? Website for Mobile Device (save bandwidth)

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 b (WiFi) 11 Mb/s (11000kb/s) – typically 4 Mb/s connection between base station and handset/laptop g (WiFi) 56 Mb/s (56000kb/s) – typically closer to the same speeds as b n (WiFi) or (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. A lot of the Internet users are still using 56K modems. 56K = 56 kilobits = 56, 000 bits. 56K = 56 kilobits = 56, 000 bits. Remember, Remember, 1 byte = 8 bits1 byte = 8 bits 56000bits/8 = 7000 bytes = 7 KB56000bits/8 = 7000 bytes = 7 KB At the most, it downloads at 7KB per second.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. 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. 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. Unlike print, the web requires a minimalist design strategy where less is more.

Loading….

download Speed Optimizing download Speed Use repetition to reduce file size (Download one file, use many times) Use repetition to reduce file size (Download one file, use many times) Use the same graphics on different pages when possible.Use the same graphics on different pages when possible. Include graphics only when necessary. 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. 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). An Internet/Web Browser is like a window into the World Wide Web (WWW). Most users today use Microsoft ’ s Internet Explorer (IE). 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. 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 Mozilla Firefox Mozilla Firefox Opera Opera Netscape Netscape Safari (Mac only) Safari (Mac only) Google Chrome Google Chrome And many more! And many more!

Internet Browsers Similar to plug-ins, other than the different available Internet Browsers, each browser has different version numbers. 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. 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 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 Internet Explorer 7

Versions of Internet Browsers Internet Explorer 8 Internet Explorer 8

Versions of Internet Browsers Internet Explorer 7 Internet Explorer 8

Different Internet Browsers Safari 5.0 OSX IE 8 Firefox 3.6

Essential tools for optimizing the website appearance 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. 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. Due to all the different variables, Web design should be fluid and optimized. We review the key concepts for quality Web design. We review the key concepts for quality Web design.

Quality Web Design Fluid interfaces grow with the user. Fluid interfaces grow with the user. Some designers, however, prefer fixed interfaces. Some designers, however, prefer fixed interfaces. 17”, 800 x 60017”, 1024 x 768

Quality Web Design Using common fonts means the user sees what you want them to see: 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. 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. Understand that different browsers may render the same site differently. Safari 5.0 OSX Firefox 3.6

SM1001: Week 8, 2010 Designing for the Web Part III 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

What do you need to make a web? Apply a Domain Name (e.g 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:

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 and end with Two other important HTML tags are the tag and the 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 designer need a web development tool to develop the Website.

Web Page Design Web development tools, such as Web development tools, such as Adobe Dreamweaver, Adobe Flash…etcAdobe Dreamweaver, Adobe Flash…etc These are called WYSIWYG tools These are called WYSIWYG tools WYSIWYG = What You See Is What You Get. Web development tools Web development tools will do the dirty work for you,will do the dirty work for you, but are unable to ensure the quality of the work.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) 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 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: 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: It features tutorials for beginners as well as advanced web developers. It features tutorials for beginners as well as advanced web developers. It ’ s free! 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. 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. 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. 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. 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. 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 identical- looking Web product, but an identical (intended) user experience of your Web product. Your target may not be an identical- looking Web product, but an identical (intended) user experience of your Web product.

Summary What is WWW, Website ? What is WWW, Website ? How to make a web? How to make a web? What is HTML document? What is HTML document?