Html,CSS & UI/UX design
Download as PPTX, PDF4 likes1,646 views
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.
Html,CSS & UI/UX design
- 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
- 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