Intro to Web Design - tait0524.rayvnmanuel.infotait0524.rayvnmanuel.info/docs/TAIT0524_WebDesign... · Describe principles of visual design Design for your target audience Create

Intro to Web DesignTAIT0524 RAYVN MANUEL

COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ 1

AgendaPart I

Practical Exercise

Welcome & Attendance

Part II

HTML Review

Usability Discussion


Part III

Introduction to Tables

Part IV

Introduction to FTPs

Open Lab

Review of the Elements


Heading Elements – the h*=> h1…h6

Content Elements - <p>, <div>

“Design” Elements - <br />, <hr />

Phrase Elements - <strong>, <em>

List Elements - <ol>, <ul>, <dt>

Special HTML Entities

© ©

< <

> >

& &

&nbsp

® ®

More on Hyperlinks Absolute link

Link to other websites

<a href="http://yahoo.com">Yahoo</a>

Relative link Link to pages on your own site Relative to the current page

<a href="index.html">Home</a>


Opening a Link

The target attribute on the anchor element opens a link in a new browser window or new browser tab.//in new browser window

<a href="http://yahoo.com" target="_blank">Yahoo!</a>

//in same frame [default]

<a href="http://yahoo.com" target="_self">Yahoo!</a>

//in parent window

<a href="http://yahoo.com" target="_parent">Yahoo!</a>

//in same window

<a href="http://yahoo.com" target="_top">Yahoo!</a>


Email Hyperlinks

Automatically launch the default mail program configured for the browser

If no browser default is configured, a dialog box is displayed

<a href="mailto:[email protected]">[email protected]</a>

<a href=“tel:2125556641">212-555-6641</a>


HTML5 Structural Elements

Header Element<header></header>Contains the headings

Nav Element<nav></nav>Contains the main navigation

Main Element<main></main>Contains the main content

Footer Element<footer></footer>Contains the footer


main

Proper Nesting

CODE:

<p><i>Call for a free quote for your web

development needs: <strong>888.555.5555

</strong></i></p>

BROWSER DISPLAY:

Call for a free quote for your web development needs: 888.555.5555


Writing Valid HTMLCheck your code for syntax errors

◦Benefit:◦ Valid code

more consistent browser display

W3C HTML Validation Tool◦ http://validator.w3.org

Additional HTML5 Validation Tool◦ http://html5.validator.nu


http://validator.w3.org/

http://html5.validator.nu/

Basics of Web Design

CHAPTER 3WEB DESIGN BASICSKEY CONCEPTS

COPYRIGHT © 2016 PEARSON EDUCATION, INC.,

HOBOKEN NJ10

Learning Outcomes

Describe the most common types of website organization

Describe principles of visual design

Design for your target audience

Create clear, easy-to-use navigation

Improve the readability of the text on your web pages

Use graphics appropriately on web pages

Apply the concept of Universal Design to web pages

Describe web page layout design techniques

Describe the concept of responsive web design

Apply best practices of web design


HOBOKEN NJ11

Design for Your Target Audience


HOBOKEN NJ12

Consider the target audienceof these sites.

Web Page DesignBrowser Compatibility

Web pages do NOT look the same in all the major browsers

Test with current and recent versions of: ◦ Internet Explorer◦ Firefox, Mozilla◦ Opera◦ Safari

Progressive Enhancement: Website functions well in browsers commonly used by your target audience Add enhancements with CSS3 and/or HTML5 for display in modern browsers


HOBOKEN NJ13

Web Page DesignScreen Resolution

Test at various screen resolutions◦ Most widely used: 1024x768, 1366x768, and 1280x800

Design to look good at various screen resolutions◦ Centered page content ◦ Set to either a fixed or percentage width


HOBOKEN NJ14

Website OrganizationHierarchical

Linear

Random (sometimes called Web Organization)


HOBOKEN NJ15

Hierarchical Organization

A clearly defined home page

Navigation links to major site sections

Often used for commercial and corporate websites


HOBOKEN NJ16

Hierarchical: Too Shallow

Be careful that the organization is not too shallow.

Too many immediate choices a confusing and less usable website.

Group, or “chunk”, related areas


HOBOKEN NJ17

Hierarchical: Too Deep

Be careful that the organization is not too deep.

◦ This results in many “clicks” needed to drill down to the needed page.

◦ User Interface “Three Click Rule” A web page visitor should be able to get from

any page on your site to any other page on your site with a maximum of three hyperlinks.


HOBOKEN NJ18

Linear Organization

A series of pages that provide a tutorial, tour, or presentation.

Sequential viewing


HOBOKEN NJ19

Random Organization Sometimes called “Web” Organization

Usually there is no clear path through the site

May be used with artistic or concept sites

Not typically used for commercial sites


HOBOKEN NJ20

HTML Table

Tables are used on web pages to organize tabular information

Composed of rows and columns – similar to a spreadsheet.

Each individual table cell is at the intersection of a specific row and column.

Configured with table, tr, and td elements

21Copyright ©

2016

Pearson

HTML Table Elements

<table> Contains the table

<tr>Contains a table row

<td>Contains a table cell

<caption> Configures a description of the table

22Copyright ©

2016

Pearson

The Table Element<table>

<table> ElementContains the table

<tr> ElementContains a table row

<td> ElementContains a table data cell

<th> ElementContains a table header cell

<caption> ElementConfigures a description of the table

23 Copyright ©

2016

Pearson

HTMLTable Example

<table border="1"><caption>Birthday List</caption>

<tr>

<td>Name</td>

<td>Birthday</td>

</tr>

<tr>

<td>James</td>

<td>11/08</td>

</tr>

<tr>

<td>Karen</td>

<td>4/17</td>

</tr>

<tr>

<td>Sparky</td>

<td>11/28</td>

</tr>

</table>

24

Birthday List

Copyright ©

2016

Pearson

HTMLTable Example 2

<table border="1">

<tr>

<th>Name</th>

<th>Birthday</th>

</tr>

<tr>

<td>James</td>

<td>11/08</td>

</tr>

<tr>

<td>Karen</td>

<td>4/17</td>

</tr>

<tr>

<td>Sparky</td>

<td>11/28</td>

</tr>

</table>

25

Using the <th> Element

Copyright ©

2016

Pearson

HTML border Attribute

Indicates the table is specifically not used for page layout◦ Optional◦ border=“1”

Visible browser default border

◦ border=“”No visible browser default border.

26 Copyright ©

2016

Pearson

HTMLcolspan Attribute<table border="1">

<tr>

<td colspan=“2”>Birthday List</td>

</tr>

<tr>

<td>James</td>

<td>11/08</td>

</tr>

<tr>

<td>Karen</td>

<td>4/17</td>

</tr>

</table>

27 Copyright ©

2016

Pearson

HTMLrowspanAttribute

<table border="1"><tr>

<td rowspan="2">This spans two rows</td><td>Row 1 Column 2</td>

</tr><tr>

<td>Row 2 Column 2</td></tr>

</table>

28 Copyright ©

2016

Pearson

Accessibility and TablesUse table header elements (<th> tags) to indicate column or row headings.

Use the summary attribute on the table element to provide an overview of the purpose and organization of the table.

Use the caption element to provide the title/caption for the table.

Other attributes that provide for accessibility:◦ headers & id◦ scope

Copyright ©

2016

Pearson

29

Accessibility:headers & id Attributes

<table>

<caption> Word Schedule</caption>

<tr>

<th id="day">Day</th>

<th id="hours">Hours</th>

</tr>

<tr>

<td headers="day">Monday</td>

<td headers="hours">4</td>

</tr>

<tr>

<td headers="day">Tuesday</td>


</tr>

<tr>

<td headers="day">Total</td>


</tr>

</table>

Copyright ©

2016

Pearson

30

BREAK!


Online Resources | To Learn Stuffo Online Tutorials (Free & other than Utoobs)

o W3C Schools - http://www.w3schools.com/ (the ULTIMATE resource)

o Tizag Tutorials - http://www.tizag.com/

o Lynda.com


http://www.tizag.com/

Online Resources | Prototyping Toolso Gliffy - http://www.gliffy.com/

o MS Office Suite - MS Word and PowerPoint

o AxureRP [not free]

o https://getlorem.com/

o http://ipsum.com


http://ipsum.com/

Online Resources | Colorso https://color.adobe.com/create/color-wheel/

o http://visibone.com/colorlab/big.html

o http://www.webpagefx.com/web-design/color-picker/

o http://www.w3schools.com/tags/ref_colorpicker.asp

o http://www.colorpicker.com/


https://color.adobe.com/create/color-wheel/

http://visibone.com/colorlab/big.html

http://www.webpagefx.com/web-design/color-picker/

Usability | Krug’s First Law

Don’t make me think!


KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition.

New Riders PTG, 20131223. VitalBook file.

Usability | Design for your visitors

Scanning, Satisficing

& Muddling


KRUG’S FIRST LAW OF USABILITY(Krug)Krug, Steve. Don't Make Me Think, Revisited, 3rd Edition. New Riders PTG, 20131223. VitalBook file.

Usability | Design for Scanning

Conventions & Billboarding



Usability | Mindless Choices

Think for me…



Brief: The smallest amount of information that will help me

Timely: Placed so I encounter it exactly when I need it

Unavoidable: Formatted in a way that ensures that I’ll notice it

Usability | Needless Worlds



o It reduces the noise level of

the page.

o It makes the useful content

more prominent.

o It makes the pages shorter,

allowing users to see more of

each page at a glance without

scrolling

Using FTP


Intro to Web DesignTAIT0524 RAYVN MANUEL


Documents

Intro to Web Design - tait0524.rayvnmanuel.infotait0524.rayvnmanuel.info/docs/TAIT0524_WebDesign... · Describe principles of visual design Design for your target audience Create