-
Notifications
You must be signed in to change notification settings - Fork 0
/
unfolding-app-site.html
85 lines (85 loc) · 5.46 KB
/
unfolding-app-site.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1">
<title>Accessibility Website Development | Benjamin Woodruff | Web Designer</title>
<link rel="icon" href="img/profile-icon.png" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="script.js"></script><!-- for the menu functionality -->
</head>
<body>
<header>
<div id="title-row">
<h1>
<a href="index.html">Benjamin Woodruff</a>
</h1>
<button id="menu">
☰<!-- hamburger icon -->
<span class="visually-hidden">Navigation Menu</span>
</button>
</div>
<nav id="nav" class="visually-hidden">
<div id="skills-nav-row">
<a id="ux" href="index.html">User Experience</a>
<a id="web" href="web-design.html">Web Design</a>
<a id="con" href="digital-content.html">Digital Content</a>
</div>
<div id="pages-nav-row">
<a id="contact" href="mailto:[email protected]">Contact</a>
<a id="about" href="https://dtc-wsuv.org/bwoodruff16/resume/">About</a>
</div>
</nav>
<p>
A passionate Web Designer skilled in HTML5, CSS3, JavaScript, and jQuery (mostly for UI animations). Also able to customize WordPress sites, optimize for users and search engines (SEO), and upgrade product pages with Schema.org metadata for more appealing search engine results.
</p>
</header><!-- end header -->
<section id="content">
<article id="accessibility-web-dev" class="project">
<h2>
<a href="https://dtc-wsuv.org/projects/unfold/" target="_blank">WordPress Web Design</br>for Unfolding AR Game</a>
</h2>
<div class="featured-image">
<a href="https://dtc-wsuv.org/projects/unfold/" target="_blank">
<img src="img/unfolding-app-site.png" alt="a thumbnail image depicting a brain icon representing web accessibility for cognitive disabilities" />
</a>
</div>
<p>
An advanced <a href="https://dtc-wsuv.org/projects/unfold/" target="_blank">WordPress-based website 🗗</a> created on the Jupiter6 theme by the Senior Seminar class of the Creative Media and Digital Culture Program here at WSUV for <a href="https://thehistorictrust.org/" target="_blank">The Historic Trust 🗗</a>. The website features content with a historic focus that highlights the amazing growth and development of Vancouver, WA in relation to the <a href="unfolding.html">AR game</a> we also created for them.
</p>
<h2 class="project-sub-h2">About the Project</h2>
<p class="readable">
In this project, I served on the web development team primarily in a user experience role. This means that I was heavily involved in the ideation process of coming up with the layout of the website elements or information architecture, planning ways to test the site to make sure it functions properly, and providing expert feedback and assistance at every juncture.
</p>
<div class="featured-image">
<a href="img/typo1.png" target="_blank">
<img src="img/typo1.png" alt="a screen shot of a typo found on our client's website while in production" />
</a>
</div>
<p class="readable">
The evidence of this kind of work isn't as obvious as flashy content or awesome interactive apps. My biggest contribution on this project was finding little problems with the website that would improve the user experience if changed or fixed. One example was that the About link in the navigation was originally leading to the section titled The Team, and I suggested we link it to the section titled About The Historic Trust. A small change like this would help prevent users from getting lost when trying to find out more info about this project. I also caught typos that would cause our client and our program look unprofessional on their public facing web property.
</p>
<div class="featured-image">
<a href="img/app-site-validated-smaller.png" target="_blank">
<img src="img/app-site-validated-smaller.png" alt="a screen shot of a summary of problems found by the validator tool" />
</a>
</div>
<p class="readable">
Another example of my contribution to this project is that I took the website's code and validated it using the World Wide Web Consortium or W3C's validation tools for <a href="https://validator.w3.org/" target="_blank">HTML</a> and <a href="https://jigsaw.w3.org/css-validator/" target="_blank">CSS</a>. These tools provide a helpful step for not only catching the common syntax errors like a missed forward slash or angle bracket, but also for identifying problems in coding habits that don't conform to best practices and are most likely due to a simple lack of knowledge.
</p>
</article><!-- end panoramic travel log project -->
</section><!-- end content -->
<footer>
<h2>Thanks for Stopping by!</h2>
<div id="footer-row">
<a id="copyright" href="https://dtc-wsuv.org/bwoodruff16/resume/">
© <script type="text/javascript">document.write(new Date().getFullYear());</script> by Benjamin Woodruff
</a>
<a id="return-to-top" href="#">Return to Top</a>
<a id="resume" href="https://drive.google.com/file/d/13LzKTYmMtf4GRQLwIFynXDWhD2UOBmQQ/view?usp=sharing">PDF Resumé</a>
</div>
</footer><!-- end footer -->
</body><!-- end body -->
</html><!-- end html -->