Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Welcome to IE8 - Integrating Your Site With Internet Explorer 8


Published on

Damian Edwards ( and I delivered a presentation on IE8 at Remix Australia. We took the opportunity to outline the whys and wherefores of standards-based design as well.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Welcome to IE8 - Integrating Your Site With Internet Explorer 8

  2. Welcome to Internet Explorer 8 Damian Edwards Senior Consultant Readify Lachlan Hardy Design Engineer Atlassian
  3. Agenda <ul><li>The driving principles behind Internet Explorer 8 </li></ul><ul><li>What are web standards and why should you care? </li></ul><ul><li>Compatibility </li></ul><ul><li>What about innovation? </li></ul><ul><li>WebSlices & Activities </li></ul><ul><li>What should I do now? </li></ul><ul><li>Questions </li></ul><ul><li>What are we going to talk about? </li></ul>
  4. The driving principles behind IE8 <ul><li>Interoperability </li></ul><ul><ul><li>Write web pages once and have them work cross browser </li></ul></ul><ul><li>Compatibility </li></ul><ul><ul><li>Don’t break web pages that are already out there </li></ul></ul><ul><li>Innovation </li></ul><ul><ul><li>Introduce new features without effecting the first two principles </li></ul></ul>
  5. Web Standards <ul><li>Driving interoperability between browsers </li></ul>
  6. The Three Layers of Web Design <ul><li>The bare content of a web page: text, paragraph structure, images, tabular data </li></ul><ul><li>Defined in W3C standards like HTML 4.01 and XHTML </li></ul><ul><li>Represented by tags with semantic, contextual meaning </li></ul><ul><li>Content tags include: </li></ul><ul><ul><li><p>, <code> </li></ul></ul><ul><ul><li><h1>, <h2>, <h3> </li></ul></ul><ul><ul><li><em>, <strong>, <cite>, <abbr> </li></ul></ul><ul><ul><li><img>, <a>, <hr> </li></ul></ul><ul><ul><li><ul>, <ol>, <dl>, <table> </li></ul></ul><ul><li>Structural tags include: </li></ul><ul><ul><li><div> </li></ul></ul><ul><ul><li><span> </li></ul></ul><ul><li>Markup file should consist of mostly content & structure </li></ul><ul><li>The Content Layer </li></ul>
  7. marking up content demo
  8. Web Standards
  9. The Three Layers of Web Design <ul><li>Typography </li></ul><ul><li>Dimensions and positioning </li></ul><ul><li>Background images and colours </li></ul><ul><li>Borders, outlines and bullets </li></ul><ul><li>Media specific support for visual browsers, aural devices, printers, Braille devices, handheld devices, etc. </li></ul><ul><li>Defined in the W3C standard CSS 2.1 </li></ul><ul><li>The Presentation Layer </li></ul>
  10. Acid2 demo
  11. adding style with CSS demo
  12. Web Standards
  13. The Three Layers of Web Design <ul><li>ECMAscript-262 (JavaScript) </li></ul><ul><li>Manipulation of the HTML document </li></ul><ul><li>Defined in W3C standard DOM 1.0 Level 2 </li></ul><ul><li>Plug-ins </li></ul><ul><li>The Behaviour Layer </li></ul>
  14. adding behaviour with JavaScript demo
  15. does it work? demo
  16. Compatibility <ul><li>Who knows what a DOCTYPE switch is? </li></ul><ul><li>First introduced in IE5 for Mac </li></ul><ul><li>Worked for a while… </li></ul><ul><li>Moving forward… version targeting </li></ul><ul><li>How do we not “break the web” </li></ul>
  17. Compatibility <ul><li>IE8 uses a completely new rendering engine for standards mode, this is used by default for standards mode rendering </li></ul><ul><li>Old rendering engine (IE7) is available in both quirks and standards mode </li></ul><ul><li>IE8 includes improvements to the DOM implementation that may break existing sites, e.g. no more document.all </li></ul><ul><li>Use the X-UA-Compatible http-equiv meta tag to target a rendering/scripting engine mode: IE8, IE7, IE5 (IE7 quirks) </li></ul><ul><li>This will be supported going forward so that in IE9 you can target the IE8 rendering engine (no more quirks mode!) </li></ul><ul><li>Version Targeting </li></ul>
  18. version targeting demo
  19. What about Innovation? <ul><li>How does it fit with web standards? </li></ul><ul><li>Graceful degradation </li></ul><ul><li>Progressive enhancement </li></ul><ul><li>Extend functionality </li></ul><ul><li>Wide adoption brings wide implementation </li></ul><ul><li>Standardisation! </li></ul>
  20. Innovations in IE8 <ul><li>Defines a portion of a page that’s likely to change </li></ul><ul><li>User can subscribe to that portion </li></ul><ul><li>Highlighted in the page and toolbar like an RSS feed </li></ul><ul><li>Added to the favourites bar, highlighted when new content is received </li></ul><ul><li>Two classes from hAtom microformat and an extra container </li></ul><ul><ul><li><div class=&quot; hslice &quot; id=&quot;1&quot; > </li></ul></ul><ul><ul><li><p class=&quot; entry-title &quot;>item - $66.00</p> </li></ul></ul><ul><ul><li><div class=&quot; entry-content &quot;>high bidder:buyer1 </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><ul><li></div> </li></ul></ul><ul><li>WebSlices </li></ul>
  21. Innovations in IE8 <ul><li>Contextual menu options which quickly access a service from any web page </li></ul><ul><li>Easiest way to create a “plug-in” that exposes the services of your web site </li></ul><ul><li>Used for “look up” and “send to” operations </li></ul><ul><li>Described via an XML file </li></ul><ul><li>Installed via JavaScript: <button onclick=&quot;javascript:window.external.addService('GetMap.xml')&quot;> Add Map Activity</button> </li></ul><ul><li>Activities </li></ul>
  22. Innovations in IE8 <ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <openServiceDescription xmlns=&quot;;>   <homepageUrl></homepageUrl>   <display>     <name>Map with Windows Live</name>     <icon></icon>   </display>   <activity category=&quot;map&quot;>     <activityAction context=&quot;selection&quot;>       <preview action= &quot;;>         <parameter name=&quot;b&quot; value=&quot;{selection}&quot;/>         <parameter name=&quot;clean&quot; value=&quot;true&quot;/>         <parameter name=&quot;w&quot; value=&quot;320&quot;/>         <parameter name=&quot;h&quot; value=&quot;240&quot;/>         </preview>       <execute action=&quot;;>         <parameter name=&quot;where1&quot; value=&quot;{selection}&quot; type=&quot;text&quot; />       </execute>     </activityAction>   </activity> </openServiceDescription> </li></ul></ul><ul><li>Sample Activity </li></ul>
  23. WebSlices & Activities demo
  24. Innovations in IE8 <ul><li>Vastly improved JavaScript performance </li></ul><ul><li>Adaptive Zoom </li></ul><ul><li>DOM: Storage, Cross Document Messaging (XDM) </li></ul><ul><li>CSS Selectors API </li></ul><ul><li>ARIA support </li></ul><ul><li>Consolidated Add-on management </li></ul><ul><li>Security improvements </li></ul><ul><li>Loosely-Coupled IE (LCIE) e.g. tabs run out-of-process </li></ul><ul><li>Address bar improvements </li></ul><ul><li>Other improvements </li></ul>
  25. Summary <ul><li>Web standards are important to interoperability </li></ul><ul><li>Web standards apply to the three layers of web design: </li></ul><ul><ul><li>Content </li></ul></ul><ul><ul><li>Presentation </li></ul></ul><ul><ul><li>Behaviour </li></ul></ul><ul><li>IE8 is better adhering to web standards, Acid2 </li></ul><ul><li>Version targeting allows for compatibility </li></ul><ul><li>Innovation is good when done correctly </li></ul><ul><li>WebSlices & Activities </li></ul><ul><li>What have we seen? </li></ul>
  26. What should you do now? <ul><li>Download IE8 Beta 1 for Developers </li></ul><ul><li>Check your websites </li></ul><ul><li>Add version targeting if needed </li></ul><ul><li>Update your browser detection code </li></ul><ul><ul><li>User agent sniffing </li></ul></ul><ul><ul><li>Conditional comments </li></ul></ul><ul><li>Learn to use CSS 2.1 </li></ul><ul><li>WebSlices & Activities </li></ul><ul><li>Be prepared for lacking tooling, put pressure back on the tooling vendors via blogs, etc. </li></ul>
  27. Resources <ul><li>IE Blog: </li></ul><ul><li>W3Schools: </li></ul><ul><li> </li></ul><ul><li>PositionIsEverything: </li></ul><ul><li>A List Apart: </li></ul><ul><li>W3C Validators </li></ul><ul><ul><li>(X)HTML: http:// </li></ul></ul><ul><ul><li>CSS: </li></ul></ul><ul><li>MSDN </li></ul><ul><ul><li>HTML & CSS reference: </li></ul></ul><ul><ul><li>CSS Compatibility & Internet Explorer: </li></ul></ul>
  28. © 2008 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.