Lab 3: Responsive Web Design Prepared by Jack G. Zheng for IT 4213, Spring 2019

This exercise will let you practice responsive web design. You should try to develop a solution on your own first. Then you may review instructors sample solutions.

Exercises

Media query: write media query rules for the following scenarios. Then test your statements on an example webpage. Take screenshots of your tests. Include this part in the lab report.

When the width between 400px and 600px on screen

When the screen is in portrait orientation and width is less than 640px

When the screen is narrower than 16:9 aspect ratio and the width is between 480px and 960px

I want to display the same set of CSS styles to people printing the page and people browsing on a screen with width less than 480px http://stackoverflow.com/questions/8994664/combining-css-media-queries

Fluid grids (this part not required for submission). Refer to this example: http://codepen.io/shayhowe/pen/jelsr

Apply basic responsive techniques (media query and fluid grid) to make this example responsive.

You may refer to https://learn.shayhowe.com/advanced-html-css/responsive-web-design/ in which this example is discussed.

Responsive design. Include this part in the lab report and submission. Summarize the techniques you implemented.

Modify the given web page "lab3-3a-fixed.html" to use fluid grid design.

Modify the given web page "lab3-3b-fixed.html" apply responsive web design techniques and make it look good on various resolutions. There may be more than 1 solution. Summarize the techniques you implemented.

Some reference (may not be the best solution):

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/ with http://dabblet.com/gist/1626972

Discuss and evaluate the responsiveness of the following websites. What are the problems when visiting them on mobile devices? Just for yourself, no submission on this part.

https://www.weather.gov

https://cobb.com

Submission

Compile all answers and reports into a single document. All screenshots need to be complete and no editing/cropping. Clearly label each part. Upload required solutions to your website and provide links. Submit it before the due date listed in D2L Brightspace.

Grading

Your grade is determined on:

How much you have satisfied the requirements specified in the instruction, and your creativity.

Professional writing and formatting.

Follow the submission requirements.

Rubric:

Score	Summary	Rating Description
10	Outstanding work; beyond expectation.	Clear and detailed explanation for all parts. Excellent coding to make pages responsive. Professional writing and formatting.
8-9	Good work; meet expectations	Clear and detailed explanation for all parts. Good solutions on coding. Professional writing and formatting.
6-7	Adequate work;	Brief explanation for all parts. Missed some key parts of responsive design in coding. Need to improve writing and formatting.
<6	Lack of effort.	Missing screenshots or explanations. Missing any part. Live webpages are not working. Disorganized writing and formatting.

Lab 3: Responsive Web Design Prepared by Jack G. Zheng for IT 4213, Spring 2019

This exercise will let you practice responsive web design. You should try to develop a solution on your own first. Then you may review instructors sample solutions.

Exercises

Media query: write media query rules for the following scenarios. Then test your statements on an example webpage. Take screenshots of your tests. Include this part in the lab report.

When the width between 400px and 600px on screen

When the screen is in portrait orientation and width is less than 640px

When the screen is narrower than 16:9 aspect ratio and the width is between 480px and 960px

I want to display the same set of CSS styles to people printing the page and people browsing on a screen with width less than 480px http://stackoverflow.com/questions/8994664/combining-css-media-queries

Fluid grids (this part not required for submission). Refer to this example: http://codepen.io/shayhowe/pen/jelsr

Apply basic responsive techniques (media query and fluid grid) to make this example responsive.

You may refer to https://learn.shayhowe.com/advanced-html-css/responsive-web-design/ in which this example is discussed.

Responsive design. Include this part in the lab report and submission. Summarize the techniques you implemented.

Modify the given web page "lab3-3a-fixed.html" to use fluid grid design.

Modify the given web page "lab3-3b-fixed.html" apply responsive web design techniques and make it look good on various resolutions. There may be more than 1 solution. Summarize the techniques you implemented.

Some reference (may not be the best solution):

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/ with http://dabblet.com/gist/1626972

Discuss and evaluate the responsiveness of the following websites. What are the problems when visiting them on mobile devices? Just for yourself, no submission on this part.

https://www.weather.gov

https://cobb.com

Submission

Compile all answers and reports into a single document. All screenshots need to be complete and no editing/cropping. Clearly label each part. Upload required solutions to your website and provide links. Submit it before the due date listed in D2L Brightspace.

Grading

Your grade is determined on:

How much you have satisfied the requirements specified in the instruction, and your creativity.

Professional writing and formatting.

Follow the submission requirements.

Rubric:

Score	Summary	Rating Description
10	Outstanding work; beyond expectation.	Clear and detailed explanation for all parts. Excellent coding to make pages responsive. Professional writing and formatting.
8-9	Good work; meet expectations	Clear and detailed explanation for all parts. Good solutions on coding. Professional writing and formatting.
6-7	Adequate work;	Brief explanation for all parts. Missed some key parts of responsive design in coding. Need to improve writing and formatting.
<6	Lack of effort.	Missing screenshots or explanations. Missing any part. Live webpages are not working. Disorganized writing and formatting.