1. Why is it important for a website to be responsive?
Search and deductive reasoning

2. About this Lesson
This lesson is designed to teach the Common Core State Standard: Reading—Informational Text
CCSS.ELA-Literacy.RI.3.1 Ask and answer questions to demonstrate understanding of a text, referring explicitly to the text as the basis for the answers.
CCSS.ELA-Literacy.RI.3.3 Describe the relationship between a series of historical events, scientific ideas or concepts, or steps in technical procedures in a text, using language that pertains to time, sequence, and cause/effect.
CCSS.ELA-Literacy.RI.3.5 Use text features and search tools (e.g., key words, sidebars, hyperlinks) to locate information relevant to a given topic efficiently.
Nell Bang-Jensen is a teacher and theater artist living in Philadelphia, PA. Her passion for arts education has led her to a variety of roles including developing curriculum for Philadelphia Young Playwrights and teaching at numerous theaters and schools around the city.
She works with playwrights from ages four to ninety on developing new work and is especially interested in alternative literacies and theater for social change.
A graduate of Swarthmore College, she currently works in the Artistic Department of the Wilma Theater and, in addition to teaching, is a freelance actor and dramaturg. In 2011, Nell was named a Thomas J. Watson Fellow and spent her fellowship year traveling to seven countries studying how people get their names.

3. Bing in the Classroom program Resources
For Teachers 
Experience Bing in the Classroom*
Bing Bell Ringer:
Microsoft Educator Community: Access over 1.5 million educators globally, professional development courses and thousands of inspiring lesson plans, live lessons and virtual trips.
Bing has Answers. Bing puts educational answers in your hands
*US only
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Responsive Web Design
Why is it important for a website to be responsive?

5. Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?

6. 5 minutes Responsive Web Design
Why is it important for a website to be responsive?
5 minutes

7. 9/12/ :47 AM
Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. 9/12/ :47 AM
Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?
(Possible queries: “define: responsive”, “what does it mean to be responsive?”).
From
Responsive is: adjective 1. responding—especially readily and sympathetically to appeals, efforts, influences, etc.: a responsive government.
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. 9/12/ :47 AM
Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?
(Possible queries: “what does it mean for a website to be responsive?”, “what is a responsive website?”).
From
Responsive Web design is an approach whereby a designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through.  That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. 9/12/ :47 AM
Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?
(Possible queries: “how to make websites responsive”, “how do people make their websites responsive?”, “what is a responsive web site?”).
From
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries in the following ways:
The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. 9/12/ :47 AM
Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?
(Possible queries: “why make a website responsive?”, “what happens when websites are not responsive?”).
From
If a reader is browsing your site from a mobile phone, they generally don’t have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger, and not have as many columns, you’ll give your mobile reader a much better experience.
Students should understand that a responsive website adapts to what device it is being viewed on. A website that is not responsive would have the same format on every device.
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. 9/12/ :47 AM
Responsive Web Design
Why is it important for a website to be responsive? 1
Web Search/Thinking
What does the word “responsive” mean? What does it mean for a person to be responsive? 2
Web Search
What does it mean for a website to be responsive? 3
What are three techniques people use to make their websites responsive? 4
What happens when websites are not responsive? 5
What problems might arise when looking at a website that is not responsive?
(Possible queries: “why make a website responsive?”, “problems with websites that aren’t responsive”).
Answers will vary.
From option-for-your-mobile-seo-strategy#:
Let’s take the following example. Someone searches for a product on their smartphone during a lunch break at work. They find a site that has the product they’re looking for, and decide to continue researching this product on the same site when they get home. Except, when they get home, they will use their desktop instead of their smartphone. If the site in this example is responsive, this person will have a positive user-experience when transitioning from mobile to desktop because they will view the same site on their desktop as they did on their smartphone. On the other hand, if the site is a dedicated mobile site, this person will become frustrated with the fact that they have to locate the desktop version of the site, and find the product all over again.
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.