Skip to content

Commit

Permalink
working on copy
Browse files Browse the repository at this point in the history
  • Loading branch information
dandrewbarlow committed Apr 8, 2021
1 parent 28c320e commit 107daed
Show file tree
Hide file tree
Showing 9 changed files with 137 additions and 14 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-embed-gist": "^1.0.11",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
Expand Down
42 changes: 35 additions & 7 deletions src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');

// CSS Reset

// VARS/////////////////////////////////////////////////////////
// Text
$display-font: 'EB Garamond', serif;
Expand Down Expand Up @@ -35,7 +37,7 @@ header {
text-align: center;
font-family: $display-font;
font-size: $display-font-size;
font-weight: bold;
font-weight: 800;
color: $text-highlight;
}

Expand All @@ -51,7 +53,7 @@ nav {
li {
list-style-type: none;
button {
font-size: $copy-font-size;
font-size: 16pt;
color: $link-color;
background-color: $shadow;
border: none;
Expand All @@ -69,21 +71,47 @@ nav {

section {
font-family: 'Barlow', sans-serif;
margin-left: 20%;
margin-right: 20%;
margin: 1em;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 1em;
// padding: 1em;

h2 {
text-align: center;
font-size: 25pt;
font-weight: bolder;
margin-left: 25%;
// margin-left: 25%;
}
h3 {
font-size: 20pt;
}
h4 {
font-size: 18pt;
}

aside {
text-align: right;
}

img {
width: 100%;
margin: 1em;
}

p {
font-size: 14pt;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
text-align: center;
background-color: $shadow;
// padding: 1em;
// margin: 1em;
}
}

// IMPORTS////////////////////////////////////////////////
// Code for responsive style in seperate document
@import 'responsive';
@import 'responsive';
@import 'reset';
2 changes: 1 addition & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import * as content from './content/content.jsx';
function Header(){
return (
<header>
<h1>The Importance of Universal Design</h1>
<h1><em>The Importance of Universal Design</em></h1>
</header>
)}

Expand Down
67 changes: 67 additions & 0 deletions src/content/content.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
// Andrew Barlow
// Universal Design Spring 2021 Final

// IMPORTS///////////////////////////////////////////////////////////////
import dog from './img/cute-dog.jpg';
import ReactEmbedGist from 'react-embed-gist';

// WEBSITE CONTENT////////////////////////////////////////////////////////

// Content Section: Why Universal Design
Expand Down Expand Up @@ -32,15 +36,78 @@ export function Tenets() {
export function Practices() {
return (
<section>

<h2>Practices of Universal Design</h2>

<h3>Semantic HTML</h3>

<p>
One of the most important ways to make a website universal is also the most straightforward. The HTML5 standard includes accessibility features baked into the default. By following the rules of semantic web design, a designer is already ahead of the curve. By properly tagging content, accessibility tools like screenreaders can display content in a friendly way to impaired users.
</p>

<h4>Images</h4>

<p>
Here's an HTML tag for a simple image:
</p>

<code>
&lt;img src="img/cute-dog.jpg" alt="A very cute puppy"&gt;
</code>

<img src={dog} alt="A very cute puppy"/>

<p>
Here's what it looks like when the source file is unavailable (on purpose in this case).
</p>

<code>
&lt;img src="img/missing-dog.jpg" alt="A very cute puppy"&gt;
</code>
<br/><br/>

<img src="img/missing-dog.jpg" alt="A very cute puppy"/>

<p>
The alt tag's purpose is to provide a visual description of an image for screenreaders to display to the visually impaired. As seen here, it comes with the added benefit of preventing a missing image source from becoming a page-breaking eyesore. The <code>alt</code> tag is <strong><em>not</em></strong> for inserting keywords for attention from search engines. There are better ways of doing so, and putting it inside image tags creates confusion.
</p>

<h4>Semantics and Structure</h4>

<p>
To go into more detail, a much more effective and user-friendly way to pursue search engine optimization (S.E.O.) is through the smart use of semantic web design. The web has changed a lot since the 90's and <code>div</code>'s just don't fit the bill anymore. The HTML standards have come up with descriptive tags that allow a designer to heirarchichally structure their page in a way that makes sense to designers and readers. For example:
</p>


<ReactEmbedGist gist="dandrewbarlow/3567f60acdb3c069e0b0078dd0f2b872"/>

<p>
Here is an example of a simple HTML heirarchy that will work for countless websites. Some of the important features include:
<ul>
<li>Language declaration [line 2] </li>
<li>Extensive use of the <code>meta</code> tag [lines 4-11]</li>
<ul>
<li>
This is where search engine optimization keywords and information goes.
</li>
<li>
This keeps the information visible to "web scrapers" that analyze your content, removing the need to place keywords in odd places that confuse people using assistive technology.
</li>
<li>
This tag also is used to access the <code>viewport</code> property. This tag is used to help a website look right, no matter what device accesses it. There are many more things to do in this regard, but this tag is the starting point.
</li>
</ul>
<li>The actual HTML content is laid out simply and in a heirarchichal structure following the importance of the information. </li>
<ul>
<li>This is what it means to say universal web design is simple. These are considerations a web designer should already be considering when making a page.</li>
<li>Putting the content in these descriptive tabs allow smooth reading and navigation for all users, not just the impaired.</li>
<li>Avoid using <code>div</code>'s for anything but styling. They say nothing about their content, so they should not be used for content.</li>
</ul>
<li>Lastly I would like to guarantee that whatever you're doing, there's a tag for that. I used a simple example, but <a href="https://www.w3schools.com/TAGS/default.ASP">the w3schools website has an excellent reference</a> to the multitude of available tags</li>
<li></li>
</ul>
</p>

</section>
)
}
5 changes: 1 addition & 4 deletions src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,4 @@ body {
// sans-serif;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

1 change: 0 additions & 1 deletion src/logo.svg

This file was deleted.

23 changes: 23 additions & 0 deletions src/reset.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
html {
box-sizing: border-box;
font-size: 16px;
}

*, *:before, *:after {
box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
// font-weight: normal;
}

ol, ul {
list-style: none;
}

img {
max-width: 100%;
height: auto;
}
1 change: 1 addition & 0 deletions src/responsive.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $responsive-copy-font-size: 12pt;
flex-direction: column;
li{
button {

}
}
}
Expand Down
9 changes: 8 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -9271,6 +9271,13 @@ react-dom@^17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"

react-embed-gist@^1.0.11:
version "1.0.11"
resolved "https://registry.yarnpkg.com/react-embed-gist/-/react-embed-gist-1.0.11.tgz#a1fb03996c71efe996b81cf5a6ed14ba30800384"
integrity sha512-rbfgVJrexnjNOtxgf6W5r/zBRJAWdeiL6/Ri/DIWFbWezBiYVqZk2i0WShCsDr4PTkc6kNPdSLjcuvjtpYjvWw==
dependencies:
react "^17.0.1"

react-error-overlay@^6.0.9:
version "6.0.9"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
Expand Down Expand Up @@ -9357,7 +9364,7 @@ [email protected]:
optionalDependencies:
fsevents "^2.1.3"

react@^17.0.2:
react@^17.0.1, react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
Expand Down

0 comments on commit 107daed

Please sign in to comment.