-
Notifications
You must be signed in to change notification settings - Fork 0
/
ass1.html
68 lines (47 loc) · 4.54 KB
/
ass1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype html>
<html lang="en">
<head>
<title>All Out Of Bubblegum</title>
<meta charset="utf-8">
</head>
<body style="color:#ddd;padding:20px;background-image:url(bluspark.gif)">
<nav style="text-align:center">
<h1>Graphic Design 45 — Web Design with HTML and CSS</h1>
<span style="text-align:justify">
<a style="color:#ddd" href="https://jrpabraham.github.io/web-design">Home</a> <a style="color:#ddd" href="http://www.garrettmedia.com/mission/gdes45/gdes45_main.htm">Instructor</a> <a style="color:#ddd" href="http://missioncollege.edu/depts/gdes/classes/gdes045.php">Catalog</a> <a style="color:#ddd" href="OReilly.Learning.Web.Design.4th.Edition.Aug.2012.ISBN.1449319270.pdf">Textbook</a>
</span>
</nav>
<hr style="width:75%">
<header>
<h1>Learning Web Design</h1>
</header>
<blockquote>
<q>Often, when we think of design, we think about how something looks. On the Web, the first matter of business is designing how the site works. Before picking colors and fonts, it is important to identify the site's goals, how it will be used, and how visitors move through it. </q>
</blockquote>
<section>
<h2>Chapter 1: The Designers & The Developers</h2>
<p>
The role of the designer is to determine, not only the color scheme, and images places on the website, but what logical, yet creative, direction the website needs to take to optimize your readers attention onto your product. Great design offers your visitors ease of access, gaining comfortability, and ultimately, their support for your brand. There are three main disciplines in Web Design: <strong>Interaction Design (IxD) Interface Design (UI), and User Experience (UX) Design</strong>.
<br />
The Interaction Designer's responsibility is to make the site as efficient as possible, in both pleasing aesthetics and ease of access. User Interface Design focuses on the functionality within the organization of the page: which mean they look at buttons, links, menus and see if the navigation towards the content is facilitated and abled. The newly discovered, User Experience Designer, focuses on the users of the website, and what they need to to have a good experience with your site. <q>All aspects of the user's interaction with the product: how it is perceived, learned, and used (Donald Norman, Director of The Design Lab at University of California, San Diego).</q>
</p>
</section>
<section>
<h2>Chapter 2: Web Bodies</h2>
<p>
There are multiple parts to a web page. Web pages use a <strong>HyperText Markup Language (HTML)</strong>, a document for hypertext links. They define a zone of text elements: headings, paragraphs, emphasized text and links. There are several versions of HTML: Ver 4.01, XHTML 1.0 and HTML5. Within the HTML are tags, which are abbreviation for the HTML element: for example, <code>h1</code> stands for the <q>heading level 1</q>, and <code>em</code> for <q>emphasized text</q>.
Including with the HTML, are style instructions in Cascading Style Sheets (CSS). The CSSS adds visual style instructions to the marked up text.
</p>
</section>
<section>
<h2>Chapter 3: The Importance of Web Design</h2>
<p>
Responsive web design is a strategy for providing custom layouts to devices based on the size of the viewport (browser window). The trick to responsive web design is serving a single HTML document to all devices, but applying different style sheets based on the screen size in order to provide the most optimized layout for that device. For example, when the page is viewed on a smartphone, it appears in one column with large links for easy tapping. But when that same page is viewed on a large desktop browser, the content rearranges into multiple columns with traditional navigation elements. It's like magic! Responsive web design helps with matters of layout, but it is not a solution to all mobile web design challenges. The fact is that providing the best experiences for your users and their chosen device may require optimizations that go beyond adjusting the look and feel. Some problems are better addressed by using the server to detect the device and its capabilities and then make decisions on what to send back. Using progressive enhancement, you can deliver a baseline experience for the most basic browsers and devices, but send enhanced options for devices that can use them.
</p>
</section>
<hr style="width:75%">
<footer style="color:#ddd">
<a href="https://jrpabraham.github.io"><img src="copyleft.png" style="width:12px;height:12px;"> Justin Abraham</a>
</footer>
</body>
</html>