Prototyping with HTML5: Short guide

HTML 5 is the latest version of the hyper-text markup language used to build websites, it''s optimized for the creation of mobile websites and applications. Responsive websites are easily built using HTML5, offering full functionality across all types of devices. Without the need for horizontal scrolling, mobile internet users can browse websites more efficiently. While it offers many of the same features as previous versions, there are several new features that open up world of opportunities. However, some webmasters are skeptical of making the switch to HTML5, fearing it''s not worth their time or effort. HTML5 also offers offline caching, meaning visitors can load certain elements on a webpage without an active internet connection – assuming they''ve visited the site in the past. If a visitor''s internet connection happens to go down, he or she can still load core elements of the site.

PROTOTYPING with TODD ZAKI WARFEL / UXLONDON /#HTML5 http://bit.ly/UXLondon Grab the files Set Expectations Guiding Principles The Best Tool is the one you know Guiding Principles Prototype Only What you Need Guiding Principles Pros and Cons HTMl as a prototyping tool Production vs. Non-production About that code thing html vs. html5 HTML Doctypes !"#$%&'()*+, *(/012%*345567%55#&#*89&:1*;<;55)=3 *3+,,>?55@@@<@7<ABC5&D5E+, ;;5#&#5E+, ;;<F,F3G !"#$%&'()*+, *(/012%*345567%55#&#*89&:1*;<H*I,BJK,55)=3 *3+,,>?55@@@<@7<ABC5&D5E+, ;5#&#5E+, ;4L,BJK,<F,F3G !"#$%&'()*+, *(/012%*345567%55#&#*9&:1*M<H;*&BNOLJ,JAON.55)=3 ***3+,,>?55@@@<@7<ABC5&D5+, M5.AALP<F,F3G !"#$%&'()*+, *(/012%*345567%55#&#*89&:1*;<H*QBN-PLP,55)=3 *3+,,>?55@@@<@7<ABC5&D5E+, ;5#&#5E+, ;4RBN-PLP,<F,F3G !"#$%&'()*+, *(/012%*345567%55#&#*9&:1*M<H;*I,BJK,55)=3 ***3+,,>?55@@@<@7<ABC5&D5+, M5L,BJK,<F,F3G !"#$%&'()*+, *(/012%*345567%55#&#*9&:1*M<H;*&BNOLJ,JAON.55)=3 ***3+,,>?55@@@<@7<ABC5&D5+, M5.AALP<F,F3G HTML5 Doctypes !"#$%&'()*9&:1G [...]... style:none;  outline:none} html5 Recursiveness HTML5 allows for multiple sections and articles within a single page Each section/ article can have its own header, footer, aside and nav header nav section header article footer footer aside html5 Recursiveness HTML5 allows for multiple sections and articles within a single page Each section/ article can have its own header, footer, aside and nav header... ,   HTML helps you think about the Organization / Structure DESIGN html page structure A typical HTML page will use divs with IDs and Classes to create the structure div  id=header div  id=nav div  id=content div  id=footer div  id=   sidebar HTML5 page structure HTML5 gives semantic meaning to these structures, which previously... single page Each section/ article can have its own header, footer, aside and nav header nav section header article footer footer aside html5 Recursiveness HTML5 allows for multiple sections and articles within a single page Each section/ article can have its own header, footer, aside and nav header nav section header article footer footer aside What about the problem child? IE needs a little help from...  address"   required>         http://bit.ly/html5_mobile Email URL Gettin’ Sexy with CSS3 It’s the New Photoshop .btn-­‐fancy  {} Fancy Button Border Radius border-­‐radius:6px;  -­‐moz-­‐border-­‐radius: 6px;  -­‐webkit-­‐border-­‐radius:6px; Fancy Button Box Shadow -­‐moz-­‐box-­‐shadow: