Consider this: you’ve worked in web development for a while and you aren’t a novice developer anymore. You can dive into CSS and HTML, with the best of them, and you even know a little javascript. But now you are being told to “consider the user” in your development process and to “make your sites more accessible”. You find yourself asking, “what does all of this mean and how do I do that?”
Have no fear. This workshop will expand your knowledge of the web development process by providing you with a few essential tools and tricks needed to help you create more user-friendly and accessible websites.
The topics include:
- How to incorporate accessibility and usability from the beginning of development
- How to make your javascript components more accessible
- How to run a simple user testing session that will give you the feedback you need
- How to create a faster workflow for CSS and HTML creation from a design
BEM. What you can borrow from Yandex frontend devVarya Stepanova
Varvara Stepanova presents BEM methodology and tools.
BEM stans for "Block Element Modifier".
First, it is a methodology, a way of thinking when developing web interface applicable for any technology.
Besides, BEM is a range of tools to automate developer's work and to optimase code for production.
Finnally, BEM is a bunch of interface libraries helping developers to make their work faster and better.
Informal video: https://vimeo.com/53219242
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
BEM. What you can borrow from Yandex frontend devVarya Stepanova
Varvara Stepanova presents BEM methodology and tools.
BEM stans for "Block Element Modifier".
First, it is a methodology, a way of thinking when developing web interface applicable for any technology.
Besides, BEM is a range of tools to automate developer's work and to optimase code for production.
Finnally, BEM is a bunch of interface libraries helping developers to make their work faster and better.
Informal video: https://vimeo.com/53219242
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
Presented in DrupalCon Barcelona 2015, September 22nd. The video can be seen in: https://www.youtube.com/watch?v=RcQD0K_MexA
The Web is in permanent evolution, specially the Front end world. Solutions like Responsive Web Design have transformed our day-to-day and forced us to rethink our workflow constantly.
Working with components means to take a step back to integrate and improve this workflow. New tools and methodologies that can help us are appearing every day and it only takes small mindset shifts to take full advantage of them.
Atomic design is an amazing example of these methodologies that are able to assist us with this change. It relies on interlocking components, from small bits like labels (atoms) to large systems like full page templates.
This applies to all the pieces involved in the Front end layer: from the design to the prototype creation or the final code, or also live Styleguides like KSS or CSS methodologies like BEM or SMACSS.
On top of all the above, it will allow us to test our Front end layer, avoiding regressions and preparing it for large-scale projects.
In this session, we will cover:
- What is a component
- How CSS methodologies like BEM or SMACSS can help to create or use components
- Why Design Systems are necessary
- When can we introduce this changes in our process
- Why Stylesguides can make the difference
- What can we do to have a more component-based Drupal project
The OpenStack project was launched by Rackspace and NASA in July 2010. Since then it has gained considerable momentum, with over 200 companies joining the project.
The OpenStack Horizon project provides a highly extensible web-based User Interface to OpenStack services. However, in the time since Horizon was first architected, there have been major advances in the design and best practices for web applications. In particular, the use of more sophisticated and robust client-side javascript frameworks have come to the fore. These frameworks provide a much more responsive user experience and much cleaner separation between the client and server. They also enable configuration driven interfaces, facilitate more modular testing, and can facilitate shorter development cycles, more testable software, and above all, a better user experience.
In this presentation, we share some of our recent work in re-architecting parts of Horizon to take advantage of these new technologies. We will provide a brief introduction of OpenStack and Horizon, describe the recent work we have done, and then delve into architectural details and code examples of our recent work.
Building and Maintaining a Distribution in Drupal 7 with FeaturesNuvole
Drupal 7 allows to easily build and maintain distributions, i.e. repeatable website templates; you can benefit from this in all cases, whether you aim at large-scale deployments or even at maintaining a single website.
We will show how to package core and contributed modules in a distribution by using a Makefile and a profile and keeping them up-to-date during the whole development cycle.
Then you will learn how to use Code-Driven Development to store all settings in a sustainable way: use the Features module to easily describe configuration in code, a proper separation between Features to make your code reusable and extendible, a well-thought design of Features to create easier development patterns, CTools and Exportables to put your configuration in code even when a module does not support it natively.
Last, we will see how the distributions update mechanism allows you to create a new version of your distribution for easy and painless configuration updates of a live site.
This presentation was delivered on 11th May, 2014 in Drupal Camp Pakistan held in DatumSquare IT Services Islamabad. Contents of the presentation contains some basics stuff for designers, themers and coders.
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
This class is intended for people who know some HTML and CSS, and covers the fundamental principles of Drupal theming geared toward people who wish to take a static mockup of a site design and turn it into a Drupal theme. You will also learn about using base themes, grid-based layout and helper modules to streamline and customize your Drupal theme.
Trainer Ryan Price has built entertainment sites, social networks, and eCommerce sites for clients including Popular Science, Field and Stream and Outdoor Life magazines. With over 10 years of experience building sites with PHP and other technologies, Ryan began immersing himself in Drupal around 2006. Ryan often teaches and writes articles along with Mike Anello, and the duo is also known for producing the DrupalEasy Podcast with their host Andrew Riley.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
How to add functionality to CMS Made Simple using Tags, User-Defined Tags, and Modules. Also includes some previews of how the module API will change with version 2.0
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
Presented in DrupalCon Barcelona 2015, September 22nd. The video can be seen in: https://www.youtube.com/watch?v=RcQD0K_MexA
The Web is in permanent evolution, specially the Front end world. Solutions like Responsive Web Design have transformed our day-to-day and forced us to rethink our workflow constantly.
Working with components means to take a step back to integrate and improve this workflow. New tools and methodologies that can help us are appearing every day and it only takes small mindset shifts to take full advantage of them.
Atomic design is an amazing example of these methodologies that are able to assist us with this change. It relies on interlocking components, from small bits like labels (atoms) to large systems like full page templates.
This applies to all the pieces involved in the Front end layer: from the design to the prototype creation or the final code, or also live Styleguides like KSS or CSS methodologies like BEM or SMACSS.
On top of all the above, it will allow us to test our Front end layer, avoiding regressions and preparing it for large-scale projects.
In this session, we will cover:
- What is a component
- How CSS methodologies like BEM or SMACSS can help to create or use components
- Why Design Systems are necessary
- When can we introduce this changes in our process
- Why Stylesguides can make the difference
- What can we do to have a more component-based Drupal project
The OpenStack project was launched by Rackspace and NASA in July 2010. Since then it has gained considerable momentum, with over 200 companies joining the project.
The OpenStack Horizon project provides a highly extensible web-based User Interface to OpenStack services. However, in the time since Horizon was first architected, there have been major advances in the design and best practices for web applications. In particular, the use of more sophisticated and robust client-side javascript frameworks have come to the fore. These frameworks provide a much more responsive user experience and much cleaner separation between the client and server. They also enable configuration driven interfaces, facilitate more modular testing, and can facilitate shorter development cycles, more testable software, and above all, a better user experience.
In this presentation, we share some of our recent work in re-architecting parts of Horizon to take advantage of these new technologies. We will provide a brief introduction of OpenStack and Horizon, describe the recent work we have done, and then delve into architectural details and code examples of our recent work.
Building and Maintaining a Distribution in Drupal 7 with FeaturesNuvole
Drupal 7 allows to easily build and maintain distributions, i.e. repeatable website templates; you can benefit from this in all cases, whether you aim at large-scale deployments or even at maintaining a single website.
We will show how to package core and contributed modules in a distribution by using a Makefile and a profile and keeping them up-to-date during the whole development cycle.
Then you will learn how to use Code-Driven Development to store all settings in a sustainable way: use the Features module to easily describe configuration in code, a proper separation between Features to make your code reusable and extendible, a well-thought design of Features to create easier development patterns, CTools and Exportables to put your configuration in code even when a module does not support it natively.
Last, we will see how the distributions update mechanism allows you to create a new version of your distribution for easy and painless configuration updates of a live site.
This presentation was delivered on 11th May, 2014 in Drupal Camp Pakistan held in DatumSquare IT Services Islamabad. Contents of the presentation contains some basics stuff for designers, themers and coders.
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
This class is intended for people who know some HTML and CSS, and covers the fundamental principles of Drupal theming geared toward people who wish to take a static mockup of a site design and turn it into a Drupal theme. You will also learn about using base themes, grid-based layout and helper modules to streamline and customize your Drupal theme.
Trainer Ryan Price has built entertainment sites, social networks, and eCommerce sites for clients including Popular Science, Field and Stream and Outdoor Life magazines. With over 10 years of experience building sites with PHP and other technologies, Ryan began immersing himself in Drupal around 2006. Ryan often teaches and writes articles along with Mike Anello, and the duo is also known for producing the DrupalEasy Podcast with their host Andrew Riley.
Given at CSS Dev Conf 2014 in New Orleans on October 14, 2014.
This full presentation written with Web Components can be viewed with Chrome 36+ online at http://andrewrota.github.io/web-components-and-modular-css-presentation/presentation/index.html#0.
The source of the presentation is available on GitHub: https://github.com/andrewrota/web-components-and-modular-css-presentation.
How to add functionality to CMS Made Simple using Tags, User-Defined Tags, and Modules. Also includes some previews of how the module API will change with version 2.0
Similar to Workflow Essentials for Web Development (20)
ARENA - Young adults in the workplace (Knight Moves).pdfKnight Moves
Presentations of Bavo Raeymaekers (Project lead youth unemployment at the City of Antwerp), Suzan Martens (Service designer at Knight Moves) and Adriaan De Keersmaeker (Community manager at Talk to C)
during the 'Arena • Young adults in the workplace' conference hosted by Knight Moves.
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEFebless Hernane
CapCut is an easy-to-use video editing app perfect for beginners. To start, download and open CapCut on your phone. Tap "New Project" and select the videos or photos you want to edit. You can trim clips by dragging the edges, add text by tapping "Text," and include music by selecting "Audio." Enhance your video with filters and effects from the "Effects" menu. When you're happy with your video, tap the export button to save and share it. CapCut makes video editing simple and fun for everyone!
Visual Style and Aesthetics: Basics of Visual Design
Visual Design for Enterprise Applications
Range of Visual Styles.
Mobile Interfaces:
Challenges and Opportunities of Mobile Design
Approach to Mobile Design
Patterns
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
14. 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
24. 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
26. 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
27. 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
28. 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
29. Landmark Roles - HTML
<div role="banner">
<p>Put company logo, etc. here.</p>
</div>
<div role="navigation">
<ul>
<li>Put navigation here</li>
</ul>
</div>
<div role="main">
<p>Put main content here.</p>
</div>
<div role="contentinfo">
<p>Put copyright, etc. here.</p>
</div>
29
30. 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>
<li>Put navigation here</li>
</ul>
</nav>
<nav role="navigation" aria-label=”User Menu”>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
30
31. Heading structure
Use the H1, H2,…H6 tags as indicators of section
headings and subheadings within a document.
31
32. Heading structure was
developed not to assist
formatting but to provide
information on the structural
hierarchy of a document.
32
35. 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>
<h3 class="h2">Lorem Ipsum Dolor</h3>
<h4 class="h3">Lorem Ipsum Dolor</h4>
<h5 class="h4">Lorem Ipsum Dolor</h5>
<h6 class="h5">Lorem Ipsum Dolor</h6>
h1,.h1 { font-size:36px}
h2,.h2 { font-size:30px}
35
37. 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
38. 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>
40. 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
41. Lists are used to group
together related pieces of
information so they are clearly
associated with each other and
easy to read.
41
47. ● 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
48. SASS Variables
Control commonly used values in a single location.
Same value NOT repeated dozens if not hundreds of
times across your stylesheets
48
61. Common files Variable SASS file for
colors
Common padding
sizes, text sizes
Components and
elements
Create files that can be shared
across projects
61
64. 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
68. Reasons to
add focus
68
● Opening and
closing elements
(Off canvas menu)
● Adding and
removing elements
to the page
(Alerts and Modals)
69. 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.
70. 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();
...
}
75. 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
79. 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
80. 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>
81. 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">
85. Test before beginning project
Discover Design Develop Deploy Success
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
86. Test your design
Discover Design Develop Deploy Success
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
87. Test after deployment
Discover Design Develop Deploy Success
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
88. 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?
89. 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.
90. 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
93. Tree Test
Ensuring your navigation is user-friendly
93
https://bananacom.optimalworkshop.com/treejack/bananacom-demo-survey
94. First-click Test
Testing if people understand where to click on a design
94
https://bananacom.optimalworkshop.com/chalkmark/bananacom-demo-survey/instructions
98. 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
100. Email
Example 1 | Example 2
Questions
Example question/script
Presentation
Example presentation
Feedback form
Example form
100
Example
Documents
for
In-person
User testing