The document outlines an agenda for a session on HTML, CSS, and UI/UX design. It includes a quick revision of HTML and CSS standards and practices. It introduces HTML5 best practices regarding semantic elements. It defines what UI/UX is and why it is important. It discusses some UI principles to follow, such as keeping designs simple, straightforward, and focused on context while guiding users and providing feedback.

1. Session on
HTML, CSS & UI/UX
Design
By Karthikeyan 10-31-2014

2. • Quick revision on HTML & CSS
• Few Standards & Practices on HTML & CSS
• Introduction to HTML 5
• HTML 5 Best Practices on Semantics Elements
&
• What is UI/UX
• Why UX is important
• Few UI Principles to follow…
Agenda for next 2 hrs
2

3. Lets get started with the quick revision of
HTML & CSS 3

4. • What is HTML?
• HTML is a language for describing webpages
• HTML Stands for Hyper Text Markup Language
• When it is started and how it is growing up?
• HTML 1.0 - 1993
• HTML 2.0 -1995
• HTML 3.2 - 1997
• HTML 4.0 - 1998
• HTML 4.01 - 1999
• XHTML – Combination of XML & HTML ( Very Strict) 2000
• HTML 5 – 2004 – its still growing
HTML ? !
4

5. • USE of HTML & CSS
• Website is a way to present your content to the world, using HTML &
CSS to present that content & make it look neat.
• Your content
• HTML: Structure +
• CSS: Presentation = Website
Use of HTML
5

6. • A paragraph is your content.
• Putting your content into an html tag to make it look
like a paragraph is a structure.
<p>I am a Paragraph </p>
Make the font of your paragraph “blue” and “18px” is presentation which
you will be using CSS
Content - Example
6

7. • Element
• An individual component of HTML is
• Paragraph, Table & Lists
• Tag
• Markers that signal the beginning and end of an element.
• Opening tag and Closing Tag
<p> this is my sample text </p>
Structures of an HTML
7

8. • Container Element
• An element that can contain other elements or content
• A paragraph <p> contains text
• Standalone Element
• An element that cnnot contain anything else
• <hr/>
• <img/>
Structures of an HTML 8

9. • Attribute
• Each elements can have a variety of attributes
• For Ex;- Language, style, identity, source, input
• Value
• Value is the value assigned to a given attribute ( For Ex:-
• For Ex:- <p lang=“fr”> C’est ;a vie </p>
• <img src=“my.picture.jpg”/>
Structures of an HTML 9

10. • CSS = Cascading Style Sheets
• CSS used to style the elements on your page.
• CSS is works in conjunction with HTML, but is not HTML
itself.
Review CSS
10

11. ① Inline Styles
② Internal Style
③ External Style ( Recommended way to use )
3 Types of StyleSheets
11

12. Selector {
Property:value;
}
• A block of css is Rule Block
• The rule starts with a selector.
• And It has sets of properties & Values
CSS Rule
12

13. • Property and value of style you plan to use on HTML
element.
• Value ends with a semicolon ;
• So these declaration can be grouped and surrounded by
curly brackets.
Selector{
Property:value;
Property:value;
}
CSS Syntax
13

14. P{
Property:value;
}
Selects all paragraph elements.
Img{
Property: value;
}
Selects all image elements
Selector Element
14

15. #footer {
Property:value;
}
Selects all elements with an id of “footer”
<p id=“footer”> Copyrights 2014 </p>
The associated HTML
Selector ID
15

16. .warning {
color: red;
}
Selects all elements with a class of “warning”
<p class=“ warning”> run away </p>
The associated HTML
Selector Class
16

17. p em{
color: green;
}
Selects all em elements that are withing a paragraph
<p> This is <em> important. </em></p>
The Associated HTML
Selector Position .End
17

18. Standard Practices 18

19. • Reset CSS Files
• Standard widths and sizes
• Wrappers
Standard Practices
19

20. • Even though HTML is the structure and CSS is the design,
some HTML elements have their own default style values.
• Few Examples:
• Bulleted list <li> </li> have standard bullets style.
• Paragraph <p></p> have default padding
• Links <a></a> are blue and underlined by default
Reset Css
20

21. • Most Elements:
Margin:0;
Padding:0;
Border:0;
Font-size:100%;
Font:inherit;
Vertical Align:baseline;
• Lists
List-style:none;
Reset Css
21

22. Some sizes that are good to know about
• A standard font size is usually 12px
• Screens vary greatly in width! Standardize your design a
couple ways
• Set the body width to a specific width
• Set the content width to 100%, with max-width of around
1200px/1400px and <min-width of around 960px.
Standard widths & Sizes
22

23. • Wrappers are a good way to center content if the screen
width is wider than your content.
.wrapper{
Width:100%;
Max-width:1400px;
Margin: 0 auto;
}
Wrappers .End
23

24. HTML 5 24

25. • Formally HTML5 is the W3c specification for the next
version of html
• Informally people use HTML5 to refer to whole set of
new web standards and abilities
• HTML5, CSS3 & Javascript
HTML5 What is it
25

26. HTML Specifications
• 2004 – started
• 2008- first public working draft
• 2011 – last call
• 2012 working draft
• 2014 – planned for stable recommendation
Finally HTML5 became the W3C Standards on ( October 29 2014
)
HTML Specification
26

27. • Chrome
• Firefox
• IE ( After Ver-8 few features ) 
• Safari
• Opera
Supported Broswers
27

28. What's so cool about it?
Few old elements have been obsolete
• Frame, Frameset, no frames
• Presentational elements and attributes replaced by CSS
e.g.font, big,center)
New in Html5 & CSS3
28

29. • Redefines a few things
• It gives semantic meaning to few old elements and
separates them from presentation ( eg. B, I, strong, em)
New in Html5 & CSS3 29

30. Semantics: Html5 now includes new tags that describe parts of a document.
Not there are dedicated tags for navigations elements, articles, sections, headers
& footers.
New Form Elements: Forms have some major updates. There are several new
versions of the <input> elements, allowing user to pick colors, numbers, e-mail
addresses & dates with easy –to use elements. Made it more user friendly (
even you don’t need to add a JavaScript to validations forms) if you use a
proper input types.
Media Elements: At long last, they have native support for audio & video with
tags similar to the <img>tags.
Canvas tag: It allows the developer to build graphics interactively. This
capability will allow for very intriguing capabilities like custom gaming and
interface elements.
HTML 4 to HTML5
30

31. • Embedded Font support: with this you can include a font with a webpage,
and it will render even if the user doesn’t have the font installed on her
operating system.
• New selectors : Selectors are used to describe a chunk of code to be
modified. CSS3 now supports new selectors that let choose every other
element, as well as specific sub elements ( different types of input tags)
• Columns: Html has never had decent support columns and all kinds of hacks
have been used to overcome this shortcoming. Finally , CSS includes the
ability to break an element into any number of columns easily.
• Visual Enhancements: CSS has a number of interesting new capabilities :
Transparency, shadows, rounded corners animation, gradients &
transformations. These provide a profound new level of control over the
appearance of a page.
CSS and HTML5
31

32. • Local Storage Mechanism: HTML 5 now allows the developer to store data
on the client. There is even a built in database manager that accepts SQL
Commands.
• Geo-location: This interesting features uses a variety of mechanism to
determine where the user is located.
• And lot more.. ….
JAVASCRIPT & HTML5
32

33. <!doctype html>
Minimum information required to ensure that a broser
renders using a standards mode
Old doctypes
<!doctype htmll public “-w3c … 4.01 bla bla blaa
>
HTML5 Doctype
33

34. The use of HTML markup to re-inforce the semantics or
meaning of the information in webpages rather than merely
to define its presentation (look)
Semantics
Give meaning to structure
Semantic HTML
34

35. <div id=“header”></div
<div class=“nav”> </div
<div id=“fopoter”></div>
Semantic
<header></header>
<nav></nav>
<footer></footer>
Not Semantic
35

36. <Section>
Group together thematically related to content
Similar to prior use of the div, but div has no semantic
meaning
New Structural Elements
36

37. <Header>
Container for group of a introductory or navigational aids
Document can have multiple header elements
• E.g One for the page, one for each section
New Structural Elements 37

38. <Footer>
Contains information about its containing element
• E.g who wrote it.. copyright links to related content
Document can have multiple footer elements
• Eg one for the page one for the each section.
New Structural Elements 38

39. <aside>
Tangentially related content
• E.g sidebar, pull quotes
<nav>
Contains major navigational information
Usually a list of links
Often lives in the header
• E.g site navigation
New Structural Elements 39

40. <Article>
Self- contained related content
• E.g blog posts, news stories, comments , reviews, forum posts
New Structural Elements
40

41. Not Semantic 41

42. Semantic 42

43. • Accessibility
• Searchability
• Internationalization
It also helps treat the plague of div-itis
What is the use Semantics Markups and
advantages
43

44. • HTML5SHIV
• HTML5shiv IE enabling script
• <!– if it ie 9!?
• <script src=“html5shjiv.js></script.
• <!9endig)
• Polyfill (n) javascripts shim that replicated the standard api for
older broswers
Hack for old browsers END..
44

45. UI/UX ? 45

46. UX is about satisfaction
UI is about functionality
UX is designing for user to come back to the site
UI is designing for customers to reach their goal when onsite
UX focuses on the structure & layout of content navigation
and how users interact with them.
UI focuses on functionality with nice look and feel
What is UX/UI?
46

47. UX measures the ROI of usability to look for
• More frequent visits to your website/product
• Increased return visits to your site
• User staying longer on your site
• Increased sales
• Decreases user errors
• Decreased customer support costs
• Reduced word of mouth complaints
Why UX
47

48. Few UI Principles need to be followed 48

49. Keep it Simple
Interface elements on demand
49

50. Make it Straight forward..
IN-page editing, drage & drop
50

51. Stay on Context 51

52. Guide User
For First time user! Tell them what to do next
52

53. Always keep informed the users. What's happening!
Always Provide Feedback
53

54. Don’t forget Aesthetics 54

55. Increase Efficiency
By Providing Keyboard Shortcuts
55

56. Good UI is obvious
Great UI is invisible
So always Inspire others work and try to adapt new patterns
& Trends.
56

57. Think for the user, don't make them think!
Completing todays session with my favorite
Quote
57