Forms, RWD, Bootstrap

Grid & WCAG

Sean Preston
What you’ll learn today…
1. How to create HTML forms and build responsive websites (i.e.
mobile-friendly).

2. How to use the Bootstrap CSS framework.

3. How to make use of the grid system available within Bootstrap.

4. How to ensure the website we create are accessible.

HTML Forms
Introduction to HTML Forms
• HTML forms allow us to collect data from users visiting our website.

• You will use them regularly throughout your career as a web

developer because we want our users to interact with the
applications we create.

• Whether it’s a login, registration or search tool. You need to be able

to create forms!
A note on server-side / back-end tech
• You are extremely limited to what can be achieved using forms
without any back-end knowledge (PHP, Perl, Python etc).

• In your Advanced Web Development module next year, you will learn
PHP. However, for now we’re just focusing on learning how to create
forms on the front-end.

• Once we know how to make use of back-end systems, we can develop

our applications to make use of the data users submit.
Form Elements
• HTML provides us with a wide range of elements we can use when
creating forms. Here’s a few examples:

• Text fields
• Textarea fields
• Select fields (drop-downs)
• Radio buttons
• Checkboxes
• Submit buttons
• … and many more!
The <form> tag
• Like with tables, HTML forms must be wrapped in <form> … </form>
tags.

• There are two main attributes we can add to the opening form tag
which must be remembered:
• Action – This is the location of the file which will process the data submitted
by the user (i.e. a PHP file)
• Method – This is the type of request the form will make (either POST or GET).
GET vs POST
• By default, if we don’t declare a method attribute on our open <form>
tag the browser will default to processing the form using a GET
request.

• Using GET will add the data submitted by the form to a query string
located in the URL (e.g. index.html?name=bob&age=30)

• Using POST will instead send the data using HTTP headers. Therefore,
the data is passed to the file without modifying the URL.
GET vs POST
• To set a form to submit using GET use the following:

method=“get”

• To set a form to submit using POST use the following:

method=“post”

• In most cases, you will want to use POST.

Uploading files using HTML forms
• If we add a file upload field to a form by must add one additional
attribute to our <form> tag.

enctype=“multipart/form-data”

• This will allow the form to upload vinary data in the form of files like
images, text documents, pdfs etc…
Responsive Web
Design
Your website's
content should
adapt to meet the
user's
requirements.
Responsive vs Adaptive Design
• Responsive designs use
percentages to fit any screen
size.

• Adaptive designs snap at set

viewpoints.
Responsive vs Adaptive Design
Responsive Design
• Adapts to all viewport
sizes.
• Much faster to develop
than adaptive designs
(because you style for all
sizes at the same time).
Adaptive Design
• Usually results in a better
quality of design (as we
focus on specific sizes).
• More control over size-
specific designs.
• Slower to develop.
Media Queries
• The most common way of developing a responsive website is to use
CSS media queries.

• Media queries were released in CSS3 and they allow us to make

changes to the styles used by the website based upon the viewport
size of the device (or window size if on a desktop).

• Prior to CSS media queries, web developers had to create multiple

different CSS documents and load them depending upon the device
being used (it was messy!)
The code.
p{ • If we were running this
color: green; page on a mobile device
}
with a width of 500px,
what colour would the
paragraph text be?
@media screen and (max-width: 700px) {
p{
color: red;
}
}
The code.
p{ • If we were running this
color: green; page on a mobile device
}
with a width of 500px,
what colour would the
paragraph text be?
@media screen and (max-width: 700px) {
p{ • RED! Because 500px is less
color: red; than 700px so the green
} will be overridden with red.
}
CSS Frameworks
What are CSS frameworks?
• CSS (or Front-end frameworks) are a pre-set of components we can
utilise to form the user interface of an application.

• They’re fast and easy to use!

• They’re extremely popular in industry!

• There’s a misconception that CSS frameworks are a “cheat”. They’re

really not! Don’t reinvent the wheel!
Popular CSS Frameworks - Bootstrap
• By far the most popular.

• Developed by a team from Twitter (Hence the original name “Twitter Bootstrap”).

• Great for creating mobile friendly web applications.

• Includes a wide range of CSS and JS components including:

• Navbars
• Modals
• Tabs
• Cards
Popular CSS Frameworks - Foundation
• Can be used for both websites and email templates.

• A more of a focus on the visual aspects of a website. In comparison,

Bootstrap focuses more on functionality.

• https://get.foundation/
Popular CSS Frameworks – Bulma
• Simple grid system.

• A more intuitive syntax (i.e. ‘button’ rather than ‘btn’ classes).

• A focus only on CSS – no JavaScript features.

• https://bulma.io/
Popular CSS Frameworks – Others
• https://purecss.io/
• https://tailwindcss.com/
• https://getuikit.com/
Which should you use?
• Which you use will depend largely upon the design of the website
you’re creating.

• In most cases, unless you primary focus is mobile (or want to play
with something new and shiny!), you’ll want to make use of
Bootstrap.

• I recommend you use Bootstrap in your assessment. You won’t

receive any extra marks for not using a framework, so use one!
Framework Bloating
• These frameworks are large and often there are components you will never
need to use!

• For example, maybe your website integrates Bootstrap but you will never use
it’s tab component…. So, why include it?!

• These frameworks often provide developers with un-compiled versions of

their styles using CSS pre-processors.

• We wont cover pre-processors in this module, however for now just make
note of this caution when using CSS frameworks.
Grid Systems
What are Grid Systems?
• Grid systems allow us to quickly and concisely organise our content
with a core consideration for mobile design.

• In summary … they’re amazing and VERY popular in industry.

Bootstrap Grid System
• Bootstrap’s most valuable feature is it’s grid system. It allows us to
easily position elements on the page in rows and columns. Similar to
how you would in a table.

• The Bootstrap grid system is a 12-column system. This means the

maximum number of columns you can have in one row is 12.
Bootstrap Grid System - Structure
• The image below shows how less than 12 columns can be created by
increasing the value of the column. For example, 2 columns within a
value of 6, still equals 12. But, instead of 12 columns, we have just 2!
Bootstrap Grid System - Syntax
• To utilise the Bootstrap grid system, we begin by creating a row
element…

<div class=“row”>

</div>
Bootstrap Grid System - Syntax
• We then need to create column elements within…

<div class=“row”>
<div class=“col-md-6”>
This is column 1.
</div>
<div class=“col-md-6”>
This is column 2.
</div>
</div>
Web Accessibility
Usability = Happier users
• What users want vs what they get?
• Learnability of basic tasks
• Efficiency in task performance
• Memorability of using the site
• Errors and recovery
• Satisfaction of UI
• Productivity within website
Website Aesthetics
• For users to have a positive UX - websites must play to cognition of
learning sites through experience and patterns.

Consistency & aesthetics = influence users behavior and

understanding on the website
Common belief…
• Web accessibility is about ensuring people with disabilities can access
and use your website efficiently

What do you think “web accessibility” is?

It’s a common misconception!
• Web accessibility is ensuring all users can efficiently use your website,
regardless of:

• Age
• Location
• Culture
• Hardware and software capabilities (e.g. devices, OS)
• Language barriers
• Disability
But, being “accessible” does include
catering for disabled uses. So, what is a
“disability”?
“… a physical or mental impairment that has a ‘substantial’ and ‘long-
term’ negative effect on your ability to do normal daily activities”
                                                                                            
Equality Act (2010)
Disibility and the web
• There are over 10 million disabled people in the UK
• There are over 6.9 million disabled people of working age in the UK
• 19% of the working population
• Not all disabilities affect web usage
• 2 million people are blind or visually impaired
• 1.5 million people in UK have a learning difficulty
Types of disabilities
• Visual Impairment & colour blindness
• Hearing
• Motor - Accident, arthritis, MS, RSI, elderly , etc
• Learning - Dyslexia etc
• Cognitive - Accident, stroke, autism, dementia, Down’s Syndrome, etc

What else?
Search Engines
• Search engines are “users” too!

• Possible, the most frequently visitor to your website

• Google will view your website in the same way a user does to index it.

• Being accessible is a SEO ranking factor!

Dyslexia
Compliance and the law
• A legal requirement
• Equality Act 2010
• CRPD: UN convention on the Rights of People with Disabilities – Article 9 (140
counties)

• Popularity and diverse user groups

• User experience

• Internationalisation (e.g. connection speeds, LED counties)

How can we make sure we comply?
• WCAG 2 and WCAG 2.1
• Web Content Accessibility Guidelines

• Split into four categories:

• Perceivable
• Operable
• Understandable
• Robust

• See: https://www.w3.org/WAI/standards-guidelines/wcag/glance/
WCAG
• Three levels of compliance:
• Level A – Must be met
• Level AA – Should be met
• Level AAA – May be met (not often achieved)

• WCAG has faced criticism. Research has indicated that 16.7% of

website owners find the guidelines ineffective and difficult to
understand.
Activity: Run a Google Developer Tools
Audit (Lighthouse)
• Open Google Developer tools on the websites below.
• Go to the “Audits” tab.
• Run the audit. – What do you find?

• https://www.lingscars.com/
• https://www.bbc.co.uk/news
• https://www.visitsuffolk.com/
Colour & text
• Recommended paragraph text size = 12-14px

• Sans serif fonts are more accessible

• Off-white and off-black text and backgrounds

• Use ALT tags

• Sentences should be no more than 10-15 words in length.

Accessible content
• Easy to understand language
• Language consistency
• Simple sentences
• Text chunking
• Relevant
• WYSIWYG (“wizzy wig”)
• CKEditor
• Edit in place (weebly, wix, etc)
Progressive Disclosure
• A form of “interaction design technique”

• Used to remove clutter from a UI or design

• For example, splitting content into multiple tabs or steps

• Makes content less overwhelming for users

• Likely to increase usage

• “less is more”
Progressive Disclosure Exmple
Visually Impaired Users
• “read more” links
• “skip navigation” links
• Semantic HTML Structure (https://gsnedders.html5.org/outliner/)
• Screen0reader friendly
• Alternative Stylesheets.
 Once you have
completed the activities
in a lesson you should
work on your assignment

Activities