Class 4 Reading Notes

• Wireframe & Design
• Mozilla HTML Basics
• Semantics

Wireframe & Design

Notes on the high-level process to follow in making a new site...

Always start with diagrams (it can even be on hard copy with pen and paper) before you jump into code-building. Thinking about the layout of your site (and especially how the user will interact with it) is the crucial first step in determining what HTML formatting, CSS styling, and JavaScript interactivity (as well as any other programming tools and features) you will want to incorporate into your code.

It's all about the layout that will facilitate the kind of interaction you want users to have on your page.

In addition to pen + paper, there are great wireframing software tools available online like Invision or Balsamiq. Personally, I'm enjoying the functionality of Miro (the wireframing software partnered with Code Fellows' HeroKu Virtual Lab Space).

The Career Foundry (CF) article on the wireframing process recommends the following six steps:

1. Do your research
   • Google examples of UX design and see how others are doing it (i.e. what are the industry trends and best practices?)
2. Prepare your research for quick reference
   • Make a cheatsheet with your goals and requirements for the site, as well as other interesting features you discovered while searching around.
3. Make sure you have your user flow mapped out
   • The term is "information architecture" baby, and its about making sure your webpage users have an easy and intuitive experience navigating your site. Put yourself in their shoes: think about where a users eyes will go first, and then follow it through the whole process, mapping out each step of where they might want to go. Do unto your users as you'd like done unto you!
4. Draft, don't draw. Sketch, don't illustrate
   • Put pen to paper (or the virtual equivalent)! Don't get lost in the details or aesthetics: don't even think about 'em. Just think about the big layout, information areas, buttons, touch points, etc. that user will need.
5. Add some detail and get testing
   • If the wireframe is the skeleton of the page design, CF's Rosie Allabarton asks us to think of this step as adding the "ligaments and tendons that will connect form and functionality". Here is where you think about "usability conventions" like having a search box on the top right, the wording of simple calls-to-action, or other elements that will build trust with the user and where to place those elements.
6. Start turning your wireframes into protypes
   • High-fidelity time, my friend. This is where the rubber meets the road and we go from wireframing to prototyping.The CF article recommends some "slick tools" for this stage like Proto.io, Adobe XD, and Framer but says the most well-known are Sketch and (the newer) Figma. Ideally you're not just adding in high-fidelity elements but also engaging in some user testing at this point.

Mozilla HTML Basics

HTML stands for HyperText Markup Language, and its how most of the web is formatted/structured.

There are five main aspects to an HTML element. They are:

1. The opening tag
   • this includes the name of the element (such as 'p' in the case of the paragraph element) enclosed in angle brackets. For example, the opening tag of the paragraph element would look like <p>.
2. The closing tag
   • same as the opening tag, but has a forward slash right before the element name. For example, the paragraph element closing tag would be </p>.
3. The content
   • The text in between the tags. It's the substance of what will show up on your page. For example putting the words "Christopher Is Tired" between the paragraph element tags would make those three words appear as their own paragraph on the webpage.
4. The element
   • Comprised of the opening tag, content, and closing tag, all together. Going along with the above example, the element would in the code like <p>Christopher Is Tired</p>.
5. The attribute
   • While not a NECESSARY part of an HTML element, attributes apply extra info to the element that won't directly appear in the webpage but is useful to other functions within the code. It attributes a name (such as `class`) and a value (such as `editor-note`).
   • Attributes should always have:
     1. a space between it and the name of the element (or between it and any prior element in the case of multiple attributes)
     2. attribute name followed by equal sign (=)
     3. attribute value within quotation marks ("valueExample")

That comprises the anatomy of an HTML element. The MDN Web Docs article goes on to discuss nesting elements, empty elements, the anatomy (or basic structure) of an HTML document, images, text markups (including headings, paragraphs, and lists), and the inclusion of links. Speaking of...click this if you want to refer to that MDN Web Docs article!

Semantics

Each piece of a coding document (ideally) possesses meaning. This is the "why" of it all. What effect will a line have on the web product? What is its role or purpose?

Semantic elements perform functions while also expressing the meaning of the functions to those viewing the code. For instance, a coder could us CSS to adjust text to have a particular `font-size` and `margin` to make it look like top line header size content. But HTML has the semantic element of <h1> which both performs that function, while providing meaning ("h1" meaning 1st level sized header content).

The MDN article on Semantics says that they are roughly 100 semantic elements available, and it lists some (which include <header>, <main>, and <summary> to name a few).