Downloaded 168 times
![Pro tip: Smack IE Into Shape
<!DOCTYPE html>
<html>
<head>
<!-‐-‐[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/
trunk/html5.js" type="text/javascript"></script>
<![endif]-‐-‐>
</head>](https://image.slidesharecdn.com/html5uxlisbon-110511092558-phpapp02/75/Progressive-Prototyping-w-HTML5-CSS3-and-jQuery-21-2048.jpg)
Uploaded byTodd Zaki Warfel
Progressive Prototyping w/HTML5, CSS3 and jQuery
The document discusses using HTML and CSS for prototyping. It provides guidance on setting expectations and only prototyping necessary features. HTML5 semantic tags and structures are covered, along with tips for styling buttons and forms with CSS3 features like gradients, shadows and rounded corners. The document also addresses browser compatibility issues and includes resources for further information.
More Related Content
Similar to Progressive Prototyping w/HTML5, CSS3 and jQuery
Progressive Prototyping w/HTML5, CSS3 and jQuery
- 1. PROTOTYPING with TODD ZAKI WARFEL / UXLISBON /#HTML5
- 2.
- 3.
- 4. Guiding Principles The BestTool is the one you know
- 5. Guiding Principles Prototype OnlyWhat you Need
- 6. HTMl as aprototyping tool Pros and Cons
- 7. About that codething Production vs. Non-production
- 8.
- 9. HTML Doctypes <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 10.
- 11. HTML Tags HTML5 Tags <div> <article> <p> <aside> <dl>, <dt>, <dd> <section> <ol>, <ul>, <li> <header>, <hgroup> <fieldset> <nav> <input> <footer> <datalist> <progress> <time>
- 12. HTML helps youthink about the Organization / Structure DESIGN
- 13. html page structure Atypical HTML page will div id=header use divs with IDs and Classes to create the div id=nav structure. div id=content div id= sidebar div id=footer
- 14. HTML5 page structure HTML5gives semantic meaning to these structures, header which previously required IDs and Classes. section/article aside footer
- 15. Pro tip: Updateyour reset.css article, aside, footer, header, hgroup, nav, section {display:block; margin:0; padding: 0; border:0; font-‐weight:inherit; font-‐style:inherit; font-‐size: 100%; font-‐family:inherit; vertical-‐align:baseline; list-‐ style:none; outline:none}
- 16. Pro tip: Updateyour reset.css article, aside, footer, header, hgroup, nav, section {display:block; margin:0; padding: 0; border:0; font-‐weight:inherit; font-‐style:inherit; font-‐size: 100%; font-‐family:inherit; vertical-‐align:baseline; list-‐ style:none; outline:none}
- 17. html5 Recursiveness HTML5 allowsfor multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
- 18. html5 Recursiveness HTML5 allowsfor multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
- 19. html5 Recursiveness HTML5 allowsfor multiple header sections and articles within a single page. Each section/ nav article can have its own header, footer, aside and section aside nav. header article footer footer
- 20. What about theproblem child? IE needs a little help from our friend JavaScript. Modernizer/HTML5shiv to the rescue. http://modernizr.com http:// html5shiv.googlecode.co m/svn/trunk/html5.js
- 21. Pro tip: SmackIE Into Shape <!DOCTYPE html> <html> <head> <!-‐-‐[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/ trunk/html5.js" type="text/javascript"></script> <![endif]-‐-‐> </head>
- 24.
- 25. Pro tip: HTML5Search Input <form> <input type="search" name="q" placeholder="Search" autofocus> <input type="submit" value="Search"> </form>
- 26. HTML5 Registration Form <form> <input name="Full Name" placeholder="Enter your full name" autofocus required> <input type="email" name="Email" placeholder="Enter your email address" required> <input type="url" name="URL" placeholder="What’s your website address?"> <input type="submit" value="Register"> </form>
- 27. http://bit.ly/HTML5_mobile Email URL
- 28. Gettin’ Sexy withCSS3 It’s the New Photoshop
- 29. .btn-‐fancy {} Fancy Button
- 30. Border Radius border:1px solid #bc6647; border-‐radius: 6px; -‐moz-‐border-‐radius:6px; -‐webkit-‐ border-‐radius:6px; Fancy Button
- 31. Box Shadow -‐moz-‐box-‐shadow: 4px 4px 8px #a2a2a2; -‐webkit-‐box-‐shadow: 4px 4px 8px #a2a2a2; box-‐shadow: 4px 4px 8px #a2a2a2; Fancy Button
- 32. TExt Shadow text-‐shadow: 1px 1px 0 #d2572b;} Fancy Button
- 33. Background Gradient background: #e67646; background:-‐moz-‐ linear-‐gradient(center top, #eb9972, #e67646 55%, #d2572b); background:-‐ webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); Fancy Button
- 34. Anatomy of aCSS3 Button .btn-‐primary {padding: .5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐ gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐ border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐ box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐ weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
- 35. Anatomy of aCSS3 Button .btn-‐primary {padding: .5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐ gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐ border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐ box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐ weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
- 36. Anatomy of aCSS3 Button .btn-‐primary {padding: .5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐ gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐ border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐ box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐ weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
- 37. Anatomy of aCSS3 Button .btn-‐primary {padding: .5em .9em; background: #e67646; background:-‐webkit-‐gradient(linear, 0% 0%, 0% 100%, from(#eb9972), color-‐stop(0.55, #e67646), to(#d2572b)); background:-‐moz-‐linear-‐ gradient(center top, #eb9972, #e67646 55%, #d2572b); -‐moz-‐border-‐radius:6px; -‐webkit-‐ border-‐radius:6px; border-‐radius:6px; border:1px solid #bc6647; -‐moz-‐box-‐shadow:0 0 0; -‐webkit-‐ box-‐shadow:0 0 0; font-‐size: 1.375em; font-‐ weight: 500; color: #fff; text-‐shadow: 1px 1px 0 #d2572b;}
- 38. CSS3 RGBA andOpacity rgba (238,88,0,1.0); #d2572b; opacity:1.0; rgba (238,88,0,0.5); #d2572b; opacity:0.5;
- 40. Hit me withsome jQuery!
- 41. Simple JavaScript Function $('#PostMessage').click(function() { $('tr.new-comment').fadeIn(); return false; });
- 42. Double Time $('#PostMessage').click(function(){ $('#CommentForm').hide(); $('tr.new-comment').fadeIn(); return false; });
- 43. Resources HTML5 Spec http://www.w3.org/TR/html5/ CSS3 Spec http://www.w3.org/Style/CSS/current-‐work.en.html HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.js Modernizer http://modernizr.com/ Dive Into HTML5 http://diveintohtml5.org/ Reframer http://reframerapp.com
- 44. http://bit.ly/protobk Russ Unger Todd Zaki Warfel Guerrilla UX Research Methods Thrifty, Fast, and Effective User Experience Research Techniques on The Twitters @zakiwarfel