Workflow Essentials for Web Development

Workflow Essentials for Web
Development
1

Our Process
Discover Design Develop Deploy Success
4

Our Process – Step
5

7
https://goo.gl/AWj4dp
Follow me on:

8
HTML and CSS workflow
from a design

13
● Frameworks
○ Foundation
Foundation.zurb.com
○ Bootstrap
Boostrap.com
○ Bulma
Bulma.io
● CSS Grid
Structure
Help

14
1. Sit Down with the
Designer
a. Talk through
interactions
2. Develop a prototype
3. Test functionality
4. Think through the
breakpoints
5. Don’t fear — offer
suggestions
Important
Things To Do

Using Good tools for
Development
15

Code Editor
http://brackets.io
17

Code Editor Code formatting
Color coding
Refactoring
Plugins and updates
Multiple formats
Things to look for in a code editor
18

Compiler
http://koala-app.com/
19

Code
Repository
http://github.tamu.edu
http://github.com
21

Github GUI:
Gitkraken
http://gitkraken.com
22

Beginning the structure
HTML structure for better accessibility and
usability
23

Thinking in Terms of Accessibility Can Help
ARIA landmarks and regions
These allow users to jump directly to portions of page, like the
navigation, main body, and banner/header.
Retrieving a list of page links
A list of page links can be useful for pages that have a flat structure with
a lot of links, like a home page.
Navigating through the headings
Most screen readers allow the user to navigate through the various
heading levels of a page.
24

Native HTML semantics should still
be used whenever possible, but ARIA
is useful when certain design
patterns or interactions make it
impossible to do so.
26

Landmark Roles
One of the easiest ARIA
features to implement,
and one that provides
significant immediate
benefits to screen reader
users, is landmark roles.
HTML5 Aria Role
<header> role=”banner”
<nav> role=”navigation”
<main> role=”main”
<footer> role=”contentinfo”
<aside> role=”complementary”
none role=”search”
<form> role=”form”
HTML5 elements and corresponding
ARIA roles
27

Landmark Roles – HTML 5
<header role="banner">
<p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main role="main">
<p>Put main content here.</p>
</main>
<footer role="contentinfo">
<p>Put copyright, etc. here.</p>
</footer>
28

Landmark Roles - HTML
<div role="banner">
<p>Put company logo, etc. here.</p>
</div>
<div role="navigation">
<ul>
</ul>
</div>
<div role="main">
<p>Put main content here.</p>
</div>
<div role="contentinfo">
<p>Put copyright, etc. here.</p>
</div>
29

Multiple Roles
If a role is used more than once on a page, the aria-
label attribute should also be used in order to
distinguish between the two regions.
<nav role="navigation" aria-label=”Main Navigation”>
<ul>
</ul>
</nav>
<nav role="navigation" aria-label=”User Menu”>
<ul>
</ul>
</nav>
30

Heading structure
Use the H1, H2,…H6 tags as indicators of section
headings and subheadings within a document.
31

Heading structure was
developed not to assist
formatting but to provide
information on the structural
hierarchy of a document.
32

Heading Structure -
www.tamu.edu
*Used the Web
Developer plugin on
Chrome
34

Heading Structure - CSS
If you need a heading to look bigger or smaller to
match a specific style, use CSS to override the default
size.
<h2 class="h1">Lorem Ipsum Dolor</h2>
h1,.h1 { font-size:36px}
h2,.h2 { font-size:30px}
35

Forms
Label controls
<label for="f_name">First Name</label>
<input id="f_name" name="f_name" type="text">
Group controls (with fieldset and legend)
<fieldset>
<legend>How many donuts would you like?</legend>
<label for="donut_1">One</label>
<input id="donut_1" name="dn" type="radio" value="1">
<label for="donut_2">One dozen</label>
<input id="donut_2" name="dn" type=”radio” value="12">
</fieldset>
37

Forms continued
38
Instructions
● Ex: All fields marked “required” must be completed.
● Ex: Date of Birth (MM/DD/YYYY)
Validation and user notifications
<label for="email">Email (required): </label>
<input type="email" name="email" id="email" required>

Using Lists - Navigation
Use lists for navigation items to group the elements
and adds to the accessibility of the nav.
● Home
● IT Governance
○ IT Governance
○ Committees
○ Members
○ Calendar
○ Purpose
40

Lists are used to group
together related pieces of
information so they are clearly
associated with each other and
easy to read.
41

CSS Pre-processors
Fully CSS3-compatible
Pre-processors save time
Many useful functions for manipulating colors and
other values
Well-formatted, customizable output
44

http://sass-lang.com/Getting Started
45

http://koala-app.com
(Open Source)
https://incident57.com/codekit/
($29)
46
Compiler

● Add Folder with SCSS
files
● Give CSS files output
location
● Leave compiler open and
your file compiles every
time you save
47
Using a Compiler

SASS Variables
Control commonly used values in a single location.
Same value NOT repeated dozens if not hundreds of
times across your stylesheets
48

49
Variables
Example of Variables - https://codepen.io/gomobile-tamu/pen/emjzv

50
Variables - Location
Example variables - https://codepen.io/gomobile-tamu/pen/emjzv

SASS Nesting
Avoid Writing Selectors Repeatedly
Clean up the mess, keep your code readable and you
can also nest media queries
51

52
Nesting
<div class=“header”>
<h2 class=“subheading”>Subheading</h2>
</div>

53
Nesting - Example
Example of Nesting - https://codepen.io/gomobile-tamu/pen/dGcBx

54
Nesting – Media Query

55
Nesting - Compiled

Functions
Built in helpers.
Default functions that aid in development
56

Imports
Concatenating multiple files into one CSS file
59

Common files Variable SASS file for
colors
Common padding
sizes, text sizes
Components and
elements
Create files that can be shared
across projects
61

Javascript and Best
Practices for Accessibility
63

Making an accessible site doesn’t
mean that you have to decide
whether to use JavaScript or not.
Accessibility is about making content
available to as many people as
possible.
64
Manuel Matuzovic

Opening/closing components
Anchor vs. Button for interactive controls
<a href=”#”>Button</a>
<button>Button</button>
Hiding content
● Visually hidden (positioned offscreen)
● Completely hidden (display: none;)
● Screen reader hidden (aria-hidden=”true”)
ARIA rules (https://www.w3.org/TR/using-aria/)
● Use native HTML instead
● Don’t change native semantics
66

Reasons to
add focus
68
● Opening and
closing elements
(Off canvas menu)
● Adding and
removing elements
to the page
(Alerts and Modals)

Adding focus
to non-
focusable
elements
By default block level elements do
not have focus.
Ex. div, span, p, table
69
<div tabindex="0">
...
</div>
It’s possible to make non-focusable
elements focusable by adding the
tabindex attribute with an integer
value. If the value is set to 0 the
element becomes focusable and
reachable via keyboard.

Adding and
returning
focus
Example
// Variable for storing the last focused element
var lastFocusedElement;
function showModal() {
...
// Store the last focused element
lastFocusedElement = document.activeElement;
var modal =
document.getElementById(modalID);
modal.focus();
...
}
70
function removeModal() {
...
// Return the focus to the last focused
element
lastFocusedElement.focus();
...
}

Don’t forget
:focus CSS
state!
:focus {
box-shadow: 0 0 3px rgba(0,0,0,.75);
}
71

Adding Accessibility attributes
with Javascript
72

Setting and
modifying
attributes with
javascript
document.getElementById(id).
setAttribute("aria-hidden",
"false");
73
Example
$(id).
attr("aria-hidden", "false");

The alert role is used to communicate an
important and usually time-sensitive message
to the user. When this role is added to an
element, the browser will send out an
accessible alert event to assistive technology
products which can then notify the user about
it.
75

Alert
Properties
Alerts combine all of
the techniques of:
● Changing focus
● Modifying/Adding
accessibility
attributes
78

Alert
Properties
<div id=”page_alert” role="alert"
aria-live="assertive" tabindex="-1">
...
</div>
79
Assertive alerts need immediate
attention and interrupts the screen
reader.
<div id=”page_alert” role="alert"
aria-live="polite" tabindex="-1">
...
</div>
Polite alerts need less attention and
wait until the screen reader has
concluded speaking

Banner Alert
Example
The banner:
● receives the focus on
page load
● Includes the link to the
form field(s) with the error
80
<div class="alert alert--error shake is-animating" role=”alert" aria-live="assertive" tabindex="-
1">
<p>There are errors in the following fields:</p>
<ul>
<li>
<a href="#id_identifier">Universal Identification Number (UIN) / Token</a>
</li>
...
</div>

Field Alert Example
The form field:
● Change it’s aria-
invalid=”true”
● Change or add aria-
describedby to alert ID
or any error text that
describes the field
81
<input type="text" name="identifier" value="g" required="" placeholder="Enter your UIN/Token"
id="id_identifier" class="invalid" aria-invalid="true" aria-describedby="id_identifier_errors">

“Two of the most important
characteristics of good design are
discoverability and understanding.
Don Norman, The Design of Everyday Things

Test before beginning project
User
Experience
Testing
● Competitive and Data Analysis
(Google Analytics and Alexa)
● User studies, focus groups & surveys
● Personas
● Card sorting
● Flow diagrams/task analysis
● Contextual interviews
85

Test your design
User
Experience
Testing
● Field Studies - Test with actual people
● Desirability Studies - Test who a person feels about design
● Usability - Review features to match end goal
86

Test after deployment
User
Experience
Testing
● User Testing - Ask people to use the site
● Monitor analytics
● Usability & Accessibility Assessment
● A/B testing
● Help desk or ticketing system
● Survey
● Automated testing
87

Know the goal of
the user test
88
What are you trying to discover from your users?
What is the best way to find out the information?

What to do for
user testing
89
Create a Plan
Develop a purpose document
for your user testing.
Example Test Plan
Write out questions
Think about your user flow and
create questions that will allow
your user to provide honest
feedback.
Think through
methods of testing
Determine which method of
testing will be best for the type
of feedback requested.

What to give
to users
90
Emails
Invite the users to your testing
for both online and in-person
Example 1 | Example 2
Create a purpose document
for the user
Tell the individual exactly what
the test is about and provide
parameters
Example document
Offer something
Pizza, cookies, candy, or $10
gift card

Resource
91
https://www.usability.gov/

Resource
92
https://www.optimalworkshop.com

Tree Test
Ensuring your navigation is user-friendly
93
https://bananacom.optimalworkshop.com/treejack/bananacom-demo-survey

First-click Test
Testing if people understand where to click on a design
94
https://bananacom.optimalworkshop.com/chalkmark/bananacom-demo-survey/instructions

Simple User Feedback Online Test
Using Google forms
95

Using Google Forms
Simple feedback
https://goo.gl/forms/ZZH3
YrAcdAKQJEAM2
96
Quantitative User Test
https://goo.gl/forms/37BU
T1R3W9BW0L8f1

In-person Test Types
98
One-on-one
Allows you to talk to one-one-one
with an individual and walk through
your user tests. Allows for honest
and unbiased answers.
I typically do this with
faculty or staff
Group/Focus Group
Allows you to focus on general
reactions to questions and often you
get multiple view points at once.
Great for testing functionality
problems with your user tests. 5 - 8
students is the perfect size.
I typically do these with
students, with my team, or
owners of a project

https://silverbackapp.com/
https://silverbackapp.com/
99

Email
Example 1 | Example 2
Questions
Example question/script
Presentation
Example presentation
Feedback form
Example form
100
Example
Documents
for
In-person
User testing

Best practices
https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html
Treat participants with respect and make them feel
comfortable.
Testing the site not the users.
Help them understand that they are helping us test the prototype or Web site.
Remain neutral – you are there to listen and watch.
101

Best practices
https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html
Take good notes.
Assign someone to take notes
Measure both performance and
subjective (preference) metrics.
● Performance measures include: success, time, errors, etc.
● Subjective measures include: user's self reported satisfaction and
comfort ratings.
102

Your Turn
103
Think about your website or potential site
Write down a few questions that you need to
understand about your users

Xavier Porter
106
xavier@tamu.edu
Kyle Boatsman
kboatsman@tamu.edu
Thanks!

Workflow Essentials for Web Development

Recomendados

Recomendados

Más contenido relacionado

Similar a Workflow Essentials for Web Development

Similar a Workflow Essentials for Web Development (20)

Último

Último (20)

Workflow Essentials for Web Development