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

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

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

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:me@hotmail.com">me@hotmail.com</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

Proper Nesting

<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

Basics of Web Design

CHAPTER 3WEB DESIGN BASICSKEY CONCEPTS

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

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

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

Pearson

HTMLTable Example

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

<td>Birthday</td>

<td>James</td>

<td>Karen</td>

<td>Sparky</td>

</table>

Birthday List

Pearson

HTMLTable Example 2

<th>Birthday</th>

<td>James</td>

<td>Karen</td>

<td>Sparky</td>

</table>

Using the <th> Element

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.

Pearson

HTMLcolspan Attribute<table border="1">

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

<td>James</td>

<td>Karen</td>

</table>

Pearson

HTMLrowspanAttribute

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

</tr><tr>

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

</table>

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

Pearson

Accessibility:headers & id Attributes

<table>

<caption> Word Schedule</caption>

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

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

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

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

</table>

Pearson

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

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

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/

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

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

Documents

Audience Intro

In Design Intro

Intro Graphic Design

Intro analysis for target audience segmentation

Design Course 1 intro to design

Ra intro and audience 1

Intro Beam Design

Huddle design intro

Design Process & Target Audience

Intro to Social Media Tools: Audience Usage

MerisCon Intro - Design

Intro Design Principles

Graphic Design Intro

Workshop Barcelona: Intro to Creative Commons 4.0 for...

Network Design Intro

Ra intro and audience