2. WELCOME TO THE NEXT GENERATION OF WEB DESIGN Thomas Lewis Principal Technical Evangelist Microsoft @tommylee | asimplepixel.tumblr.com SESSION CODE: WEB102 (c) 2011 Microsoft. All rights reserved.

3. Agenda ► HTML5, Microsoft & Internet Explorer (10) ► CSS3 – Media Queries & Listeners – Grid Alignment – Flexible-Box Layout (“Flexbox”) – Multi-column Layout – Positioned Floats ► An Approach for Adaptability ► Web Fonts ► But first, some demos…

4. demo

5. What is HTML5?

6. Microsoft Approach with HTML5 beautyoftheweb.co m ietestdrive.com html5labs.com

8. HTML CSS Web Apps SVG Geolocation ECMA Last Update: 13 th June 2011

9. Vendor Prefixes…are they ok? ► -moz- /* Firefox and other browsers using Mozilla's browser engine */ ► -webkit- /* Safari, Chrome and browsers using the Webkit engine */ ► -o- /* Opera */ ► -ms- /* Internet Explorer */ -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;

10. SAY NO TO IE6!

11. Internet Explorer 10

12. ► A Platform Preview ► Limited Browser Chrome ► On a Cadence ► A Host of New Features…

13. New In IE10… ► CSS3 Flexible Box Layout ► CSS3 Grid Alignment ► CSS Multi-Column Layout ► CSS3 Gradients (on all image types) ► EcmaScript 5 Strict Mode ► CSS3 Positioned Floats ► CSS Stylesheet Limit Lifted ► CSSOM Floating Point Value Support ► Improved Hit Testing APIs ► CSS3 Media Query Listeners ► HTML5 Async ► HTML5 Drag and Drop ► HTML5 File API ► HTML5 Sandbox ► HTML5 Web Workers ► Web Performance APIs

14. CSS3

15. CSS3…Why should I care? Facebook & Performance 706 CSS Files Declared Facebook blue color 261x! 548 unique hex colors 6,498 declarations of color Able to reduce response time in half due to CSS refactoring

16. How we viewed the web. ► The Desktop Browser

17. How we view the web today? ► The Desktop Browser ► Mobile Browsers ► Tablet form-factors ► Televisions ► Game Consoles ► More…

18. In CSS 2.1… ► We could define media types: screen and print. ► But not easily respond to the user’s display. ► Lots of grunt work. ► Didn’t spend much time thinking about mobile devices.

19. CSS3 Media Queries ► The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities.

21. Simple Example @media screen and (max-width: 600px) { body { font-size: 80%; }

22. Other Queries @media screen and (min-width:320px) and (max-width:480px) @media not print and (max-width:600px) @media screen (x) and (y), print (a) and (b)

23. Can Be Declared… ► In the Stylesheet ► Import Rule – @import url(mq.css) only screen and (max- width:600px) ► link Element –

24. Supported Media Properties ► min/max-width ► min/max-height ► device-width ► device-height ► orientation ► aspect-ratio ► device-aspect-ratio ► color ► color-index ► monochrome ► resolution

25. Let’s take a look…

26. What about devices? ► viewport meta tag – ► device-width vs. width ► maximum-zoom

27. What about non-supportive browsers? ► css3-mediaqueries-js by Wouter van der Graaf ► Just include the script in your pages. ► Parses the CSS and applies style for positive media tests.

28. What else could I use it for? ► Adjust elements to make them more touch- friendly. ► Adjusting text for more readability. ► Show jump links to eliminate lengthy scrolling. ► Image swapping. ► Customized print styling.

29. The Enthusiast Site http://mediaqueri.es

30. The Spec http://w3.org/TR/css3-mediaqueries/

31. Media Query Listeners use script to react to changes in the media or environment in which your page is running evaluating a media query at runtime using JavaScript subscribing listeners to changes in the media query’s evaluation mql.addListener(sizeChange); { if (mql.matches) { // The window is big enough for content. } else { // The window has gotten too small for content. } }

32. CSS3 Grid Alignment

33. 1 1 2 2 3 3

34. CSS3 Grid Alignment ecsstender http://ecsstender.org/extensions/css3-grid-alignment /

35. CSS3 Flexible Box Layout

36. 1 1 2 2 3 3

37. CSS3 Multi-Column Layout

39. CSS3 Positioned Floats

40. #PositionedFloat { padding: 5px; height: 200px; width: 200px; border-style: solid; border-color: LightGray; left: 422px; top: 106px; background: rgb(30, 191, 255); float: -ms-positioned; position: absolute; flow-wrap: wrap; }

41. An Approach for Adaptability ► Manage Device Families – CSS3 Media Queries ► Manage Real Estate – CSS3 Grid Layout ► Adaptive Components – CSS3 FlexBox – CSS3 Multi-Column – CSS3 Positioned Floats

42. Gridddle

43. CSS3 Fonts

44. Web Fonts ► WOFF – Web Open Font Format – Ensured backward compatibility with continued support for Embedded OpenType (EOT) – Added support for the Web Open Font Format (WOFF), which repackages sfnt-based font files (TrueType, OpenType, and Open Font Format fonts) by compressing each table individually using a ZIP compression format – Added support for installable (no embedding permission bits set) raw TrueType fonts

46. Web Fonts @font-face { font-family: MyFont; src: url(http://mysite/fonts/MyFont.ttf) format("embedded-opentype"); unicode-range: U+0-7F; } p { font-family: MyFont, serif; }

47. Font Services Things to think about: CDN-based (if hosted) Font file Size Hinting Web vs. Desktop License @font-face Declaration at Top

48. CSSLINT.NET

49. The Book – Stunning CSS3 http://stunningcss3.com

50. Thank You! ► Responsive Design - The View of the World Depends on the Glasses I Wear – Not a product, but a concept – Meeting Room 5, today at 5pm ► Deck, demos, links are at: asimplepixel.tumblr.com ► Also, follow @tommylee if you like the HTML5, CSS3, Design, Brutality and Pets (c) 2011 Microsoft. All rights reserved.

51. Enrol in Microsoft Virtual Academy Today Why Enroll, other than it being free? The MVA helps improve your IT skill set and advance your career with a free, easy to access training portal that allows you to learn at your own pace, focusing on Microsoft technologies. What Do I get for enrolment? ► Free training to make you become the Cloud-Hero in my Organization ► Help mastering your Training Path and get the recognition ► Connect with other IT Pros and discuss The Cloud Where do I Enrol? www.microsoftvirtualacademy.com Then tell us what you think. TellTheDean@microsoft.com

52. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. (c) 2011 Microsoft. All rights reserved.