html,css & ui/ux design

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

Upload: karthikeyan-dhanasekaran-csm

Post on 23-Jun-2015

264 views

Category:

Technology


1 download

DESCRIPTION

Basics of HTML5, CSS & Why & What is UX/UI

TRANSCRIPT

Page 1: Html,CSS & UI/UX design

Session on HTML, CSS & UI/UX DesignBy Karthikeyan 10-31-2014

Page 2: Html,CSS & UI/UX design

2

Agenda for next 2 hrs

• 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…

Page 3: Html,CSS & UI/UX design

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

Page 4: Html,CSS & UI/UX design

4HTML ? !

• 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

Page 5: Html,CSS & UI/UX design

5Use of HTML

• 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

Page 6: Html,CSS & UI/UX design

6Content - Example

• 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

Page 7: Html,CSS & UI/UX design

7Structures of an HTML

• 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>

Page 8: Html,CSS & UI/UX design

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

Page 9: Html,CSS & UI/UX design

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

Page 10: Html,CSS & UI/UX design

10Review CSS

• 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.

Page 11: Html,CSS & UI/UX design

113 Types of StyleSheets

① Inline Styles

② Internal Style

③ External Style ( Recommended way to use )

Page 12: Html,CSS & UI/UX design

12CSS Rule

Selector {

Property:value;

}

• A block of css is Rule Block• The rule starts with a selector.• And It has sets of properties & Values

Page 13: Html,CSS & UI/UX design

13CSS Syntax

• 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;

}

Page 14: Html,CSS & UI/UX design

14Selector Element

P{

Property:value;

}

Selects all paragraph elements.

Img{

Property: value;

}

Selects all image elements

Page 15: Html,CSS & UI/UX design

15Selector ID

#footer {

Property:value;

}

Selects all elements with an id of “footer”

<p id=“footer”> Copyrights 2014 </p>

The associated HTML

Page 16: Html,CSS & UI/UX design

16Selector Class

.warning {

color: red;

}

Selects all elements with a class of “warning”

<p class=“ warning”> run away </p>

The associated HTML

Page 17: Html,CSS & UI/UX design

17Selector Position .End

p em{

color: green;

}

Selects all em elements that are withing a paragraph

<p> This is <em> important. </em></p>

The Associated HTML

Page 18: Html,CSS & UI/UX design

18Standard Practices

Page 19: Html,CSS & UI/UX design

19Standard Practices

• Reset CSS Files• Standard widths and sizes• Wrappers

Page 20: Html,CSS & UI/UX design

20Reset Css

• 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

Page 21: Html,CSS & UI/UX design

21Reset Css

• Most Elements:

Margin:0;

Padding:0;

Border:0;

Font-size:100%;

Font:inherit;

Vertical Align:baseline;

• Lists

List-style:none;

Page 22: Html,CSS & UI/UX design

22Standard widths & Sizes

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.

Page 23: Html,CSS & UI/UX design

23Wrappers .End

• 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;

}

Page 24: Html,CSS & UI/UX design

24HTML 5

Page 25: Html,CSS & UI/UX design

25HTML5 What is it

• 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

Page 26: Html,CSS & UI/UX design

26HTML Specification

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 )

Page 27: Html,CSS & UI/UX design

27Supported Broswers

• Chrome• Firefox• IE ( After Ver-8 few features ) • Safari• Opera

Page 28: Html,CSS & UI/UX design

28New in Html5 & CSS3

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)

Page 29: Html,CSS & UI/UX design

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

Page 30: Html,CSS & UI/UX design

30HTML 4 to HTML5

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.

Page 31: Html,CSS & UI/UX design

31CSS and HTML5

• 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.

Page 32: Html,CSS & UI/UX design

32JAVASCRIPT & HTML5

• 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.. ….

Page 33: Html,CSS & UI/UX design

33HTML5 Doctype

<!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

>

Page 34: Html,CSS & UI/UX design

34Semantic HTML

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

Page 35: Html,CSS & UI/UX design

35Not Semantic

<div id=“header”></div

<div class=“nav”> </div

<div id=“fopoter”></div>

Semantic<header></header>

<nav></nav>

<footer></footer>

Page 36: Html,CSS & UI/UX design

36New Structural Elements

<Section>

Group together thematically related to content

Similar to prior use of the div, but div has no semantic meaning

Page 37: Html,CSS & UI/UX design

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

Page 38: Html,CSS & UI/UX design

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

Page 39: Html,CSS & UI/UX design

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

Page 40: Html,CSS & UI/UX design

40New Structural Elements

<Article>

Self- contained related content• E.g blog posts, news stories, comments , reviews, forum posts

Page 41: Html,CSS & UI/UX design

41Not Semantic

Page 42: Html,CSS & UI/UX design

42Semantic

Page 43: Html,CSS & UI/UX design

43What is the use Semantics Markups and advantages

• Accessibility• Searchability• Internationalization

It also helps treat the plague of div-itis

Page 44: Html,CSS & UI/UX design

44Hack for old browsers END..

• 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

Page 45: Html,CSS & UI/UX design

45UI/UX ?

Page 46: Html,CSS & UI/UX design

46What is UX/UI?

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

Page 47: Html,CSS & UI/UX design

47Why UX

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

Page 48: Html,CSS & UI/UX design

48Few UI Principles need to be followed

Page 49: Html,CSS & UI/UX design

49Keep it Simple

Interface elements on demand

Page 50: Html,CSS & UI/UX design

50Make it Straight forward..

IN-page editing, drage & drop

Page 51: Html,CSS & UI/UX design

51Stay on Context

Page 52: Html,CSS & UI/UX design

52Guide User

For First time user! Tell them what to do next

Page 53: Html,CSS & UI/UX design

53Always Provide Feedback

Always keep informed the users. What's happening!

Page 54: Html,CSS & UI/UX design

54Don’t forget Aesthetics

Page 55: Html,CSS & UI/UX design

55Increase Efficiency

By Providing Keyboard Shortcuts

Page 56: Html,CSS & UI/UX design

56

Good UI is obvious

Great UI is invisible

So always Inspire others work and try to adapt new patterns & Trends.

Page 57: Html,CSS & UI/UX design

57Completing todays session with my favorite Quote

Think for the user, don't make them think!