1. Windows Summit 2010
9/17/2018
© 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.

2. Creating Adaptive Layouts with CSS
Windows Summit 2011
9/17/2018
Creating Adaptive Layouts with CSS
Leon Braginski
Senior Program Manager
Microsoft Corporation
Hello everyone. May name is Leon Braginski. I am very excited to start a series of presentations covering Internet Explorer 10. In this presentation we will discuss an overview of Adaptive Layouts in HTML using new CSS3 styles made available in Internet Explorer 10.
Similar to what we have done with the Internet Explorer 9, we will be using the recently released Internet Explorer 10 first Platform Preview Build.
Our objective is to learn what adoptive layout is and how to design web sites with adaptive layout in mind. We will learn new standard CSS3 models you can use to create layouts in purely declarative approach – without a single line of JavaScript code.
When we discuss adaptive layout, we will cover the best way to design your web page from the ground up to use correct techniques and layout models.
© 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.

3. Agenda Adaptive Layout Overview Achieving Adaptive Layout
Windows Summit 2011
9/17/2018
Agenda
Adaptive Layout Overview
Achieving Adaptive Layout
Recommendations
Resources
We will start from Adaptive Layout overview and then go into details about how you can achieve adaptive layout in your web applications. As usually we will also provide a list of resources you can use.
© 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.

4. Adaptive Layout Layout which automatically adapts to
Varying screen sizes
Varying resolution
Varying aspect ratios
Applications to consider:
Games
Magazines
News and Book Readers
Social Media
And much more…
Windows runs on variety of devices, these devices feature different resolution, sizes and orientations. When you design your web site or web application you may not know which device will access your web site. It could be a Smartphone with very small screen, it could be a tablet with a large desktop monitor.
You may also not know what the devices orientation will be. Tablets for example are equally useful in the landscape or portrait orientation. You will want to make sure that your site is rendered correctly the first time, and will need to ensure that your site responds correctly to the changes – for example if someone rotates the tablet from the portrait to the landscape view.
All web applications should be mindful of the layout and ready to handle any layout changes. Today we will discuss new tools you can use for creating adaptive layouts in the declarative fashion – all without a single line of JavaScript code. These tools include new standard CSS3 styles as well as existing techniques, supported in Internet Explorer 10.
768px
1920px
320px
1024px
1366px
Smartphone
Portrait
Landscape
Monitor

5. Adaptive Layout Example of adaptive layout change based on orientation
In the few moments, I will show a demo of a web page which features adaptive layout that will respond properly to orientation and screen size changes. Consider the following mock up application – a game featuring a main board area and auxiliary areas for game control, score, title and statistics.
If you had a chance to review some of the new CSS3 layout specification documents, you will recognize this layout as it was used in the specification.
One objective of the game developer is to ensure that the game board is given the most amount of space regardless of the screen orientation. As screen orientation changes from portrait to landscape the entire game layout is re-arranged. As you can see, Stats and Score areas were moved to ensure that the main game board remains the primary focus of the page.

6. 4 columns Adaptive Layout 2 columns
Example of adaptive layout change based on size
2 columns
This is an another example of the adaptive layout. This sample page consists of a few parts:
The banner area with pictures on top
The thumbnail area on the right side
And the Center of the page features the main content and table of content areas
The main content areas is using multi-column layout commonly found in the news papers and magazines. Let’s see what happens when the size of the page changes. Users may choose to manually re-size the browser window or the page may be initially rendered in the full screen on the devices with very different screen sizes.
As screen size changes [CLICK], the images in the banner automatically stay justified: one picture stays in the exact center, the images on the edges all continue to stay at the edges. [CLICK] a similar effect also takes place for the thumbnail area – all thumbnails stay vertically justified.
The main reading area changes as well to take advantage of the larger size [CLICK]. The wider screen can accommodate more columns therefore 4 columns of text is presented, whereas moving to a narrower page view will only show 2 reading columns.
4 columns

7. Adaptive Layout: Past and Present
Desired Effect
Without CSS Rich Layout Properties and Styles
With CSS Rich Layout Properties and Styles in Internet Explorer 10
Aspect Ratio Dependency
Lots of JavaScript Code
@media (orientation: …)
Grid type positioning
Possible use of tables (but no content and style separation)
Grid
Automatic content reflow from column to column
Table and Lots of JavaScript
Multi-column
Automatic centering and positioning
Possible use of floats and JavaScript
Flexbox
Proportionate Positioning
Lots of JavaScript
Use of advance positioning (such as fractions, etc.) X 
Let’s see what web developers can do to achieve adaptive layouts I just showed. With various degrees of difficulty a lot of these effects can be achieved with current technologies. However in Internet Explorer 10, we have introduced new styles which makes this work much, much easier. These new styles are all a part of the CSS standards.
Our samples were responding to orientation – an aspect ratio change. Without CSS Rich Layout styling, one would need to write JavaScript code to handle screen size changes, calculating aspect ratio and changing layout using JavaScript as appropriate? As we will learn this job becomes trivial (one line of code in-fact) utilizing the CSS Media Query.
Grid type of the layout is somewhat possible to achieve with tables. However tables provide no separation of declaration and content and provide little flexibility. The new CSS3 Grid model introduced in IE10 is inherently flexible and much simpler to use. You have seen that main content area was featuring automatic re-flow from column to column in respond to size changes. Previously this would take lots of JavaScript coding. Today however the new CSS Multi-Column layout model makes this feat nearly trivial.
In the banner and thumbnails area you have seen images automatically justified to take advantage of the entire space. Previously, it would take creative use of floats and JavaScript. The new CSS Flexbox layout make it very easy today. Using new advance positioning techniques, such as fractions, allows various screen elements to be proportionality positioned. Something that was only possible with JavaScript before.
[CLICK] As you can see with new standards based CSS techniques, creating adaptive layouts to make your applications shine on various device families is very simple. Every application should now carefully consider and implement adoptive layout. Now let’s take a look at the actual demos.

8. Windows Summit 2011 orientation and size changes
9/17/2018
Demo
Adaptive Layout
orientation and size changes
Game Application
Rich Layout Application
On slate and on PC
© 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.

9. Adaptive Layout Anatomy
Summary
Layer
Module to use
Layout Selection
Media Queries
Page Layout
CSS3 Grids
Block Layout
CSS3 Flexbox
CSS3 Multi-column
Flexbox (horizontal)
Multi-column
Flexbox (vertical)
Flexbox (vertical)
Designing a web application which is able to adopt to various sizes and resolutions is a multi-step process. First, the web developer would need to consider device families targeted by the application and select appropriate layout. Layout Selection is accomplished by using Media Queries.
The next step is select a page layout. The CSS3 Grid element is the best fit for the page layout. The last step is to use block layout elements in various grid positions.
In my example, I used Media Queries to select landscape or the portrait layout. I used grid for the whole page layout, I also used flexbox and multi-columns elements in various grid positions.
Now let’s see the details of the landscape and portrait layouts.
Grid
Multi-column
Landscape
Portrait

10. Sample: Adaptive Layout Stack
Landscape layout selected with Media Queries
Grid
Flexbox
Multi-column
This is how page looks like in the portrait mode. [CLICK] The entire page is a grid with 3 columns by 3 rows. The first row spans 3 columns to accommodate a banner with pictures and last row spans the first 2 columns to accommodate a footer. Lastly, the 3rd column containing thumbnails spans the 2nd and 3rd row.
[CLICK] First row spanning multiple columns contain horizontal flexbox, the 3rd column spans the 2nd and 3rd row which host the vertical flexbox.
[CLICK] Second row, second column contain multi-column CSS Layout element and therefore provides the main reading area.
[CLICK]This illustration shows the entire page designed from the ground up – Media Query was used to select landscape mode, the grid was used for page layout. Flexbox and multi-column were used for block level layouts
Flexbox

11. Sample: Adaptive Layout Stack
Portrait layout selected with Media Queries
Flexbox
Grid
This is a still the same page, however this time with the help of Media Queries portrait styles were applied. [CLICK] Again the entire page is the grid, however this time it has only one column and 3 rows.
[CLICK] Grid in turn contains two block level elements – a vertical flexbox with 3 images and multi- column showing the main text.
[CLICK] Similar to the landscape mode, the grid is used for the page layout, flexbox and multi-column are used for block layouts.
I have adjusted my layout to only show essential information and hid the table of content and thumbnails areas.
Multi-column

12. Summary: Adaptive CSS3 Layout Technologies
Apply selective styling based on display properties such as resolution and orientation (pick device family)
@media (orientation: landscape) { … }
@media Queries
Container property: display: –ms-grid
Fluid Grid
Page layout for targeted device family
Grid
Container property: display: –ms-box
Vertical or horizontal positioning of child elements
Control of stacking and space distribution
Flexbox
Container property: column-width: 200px
Used to flow text between columns as with newspaper or magazine layouts
Column stacking of any content
Multi-column
Let’s summarize what we have learned about new styles which can be used in creating adaptive layout. The foundation of the adaptive layout is a Media Queries. Media Queries are not new to Internet Explorer 10, it was introduced in Internet Explorer 9. However Media Queries power comes from combining it with 3 new styles introduced in Internet Explorer 10.
Grid is exactly what it sound like - a fluid grid layout. Each child element of the grid can specify exact position in the grid. It is declared as –ms-grid with the vendor specific prefix. Since specification is still in the draft form, we are using vendor specific prefix. Such prefix will be removed once specification is finalized.
Flexbox allows vertical or horizontal positioning of the children elements. The power of flexbox comes from its ability to distribute extra space and precisely control positioning of the child elements. Flex box is declared as –ms-box
Multi-column layout is used to produce layout similar to newspaper and magazines. Text or any other content flows seamlessly from column to column. Multi-column is a stable specification, therefor we don’t use vendor specific prefixes.
Up to this point we leaned Adaptive Layout design and tools. In the next presentation we will go into the deep dive for each style we have discussed thus far.

13. Recommendations Download IE10 PP1
Design web application layouts to adapt to:
Various resolutions
Various form factors
Various orientations
Take advantage of media queries to select device families
Use grid for high level page layout
Consider using flexbox, multi-column or nested grid for fluid block level management
We encourage you to download Internet Explorer 10 Platform Preview and experiment with new styles. Please design your web application to adopt to various resolutions, form factors and orientation.
Take advantage of the media queries to select devices families, use grid for the high-level page layout. Use Flexbox and Multi-Column for fluid block level management.
We invite to watch our next presentation where will cover Media Queries, Grid, Flexbox and multi-column layouts in deeper details.

14. Resources Internet Explorer Test Drive MIX 2011 Presentation:
MIX 2011 Presentation:
IE Engineering Team Blog:
CSS Media Queries
Flexible Box Layout Module
CSS Grid Alignment
CSS Multi-column Layout Module
Here is the list of resources which you may find useful. Amongst them you will find MIX presentation and IE Engineering Team blog on the subject as well as pointers to various specification documents.
Thank you very much, I hope you found this presentation helpful.

15. Windows Summit 2011
9/17/2018
© 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.
© 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.