https://jgzheng.github.io/IT3203


https://www.edocr.com/v/yxdmelxy/jgzheng/responsive-web-design

Responsive Web Design
Jack G. Zheng
Spring 2025
IT 3203 https://jgzheng.github.io/IT3203
https://www.edocr.com/v/yxdmelxy/jgzheng/responsive-web-design
Overview
 Responsive web design principles and key
practices
 Fluid-grid
 Fluid image/media
 Media query
 CSS techniques
 Use tools to test website responsiveness
2

http://alistapart.com/article/responsive-web-design


https://www.webfx.com/blog/web-design/infographics-learn-responsive-web-design/

Responsive Web Design
 Key question
 How can web pages look and
behave nicely in all different
screen (viewport) sizes?
 Ethan Marcotte coined the
term responsive web design
and defined it to mean fluid
grid/ flexible images/ media
queries in a May 2010 article
 http://alistapart.com/article/respo
nsive-web-design
Responsive Web Design (RWD) is a Web design approach aimed at
crafting sites to provide an optimal viewing experience, easy reading
and navigation with a minimum of resizing, panning, and scrolling,
across a wide range of screen sizes and devices.
Some interesting infographics about RWD
https://www.webfx.com/blog/web-
design/infographics-learn-responsive-web-
design/

http://kennesaw.edu/


https://cobbcounty.org/


https://yahoo.com/


https://www.weather.gov/


https://www.cefconnect.com/


https://berkshirehathaway.com/


https://google.com/


https://jgzheng.github.io/IT3203/website-examples.html


http://www.responsinator.com/

Examples
 Most of today’s mainstream websites are responsive. Examples:

http://kennesaw.edu

https://cobbcounty.org

https://yahoo.com
 Non-responsive website examples

https://www.weather.gov

https://www.cefconnect.com

https://berkshirehathaway.com

https://google.com (adaptive but not responsive)
 See more: https://jgzheng.github.io/IT3203/website-examples.html
Adjust the browser width and see the
changes or use a tool like responsinator.com
or browser developer tools.
See the webpage layout and content
changes as the page width changes.
Basic Principles and Practices
1. Fluid grid (layout) - no horizontal scrolling
2. Adaptive/flexible image
3. Media query
5

https://alistapart.com/article/fluidgrids


https://alistapart.github.io/code-samples/fluidgrids/examples/grid/final.html

1. Fluid Layout
 Fluid layout, is the practice of
building the layout of a website
capable of dynamically
resizing to any width.
 using relative length units,
most commonly percentages
or em units.
 Set the width using %
 Set margin and padding using %
 Formula
 width (%) = target / context (parent size)
 This may not look optimal in some cases especially for margins and
paddings. Use it together with media queries.
 Other practices
 Set max-width and min-width attribute
6
Extended reading: https://alistapart.com/article/fluidgrids and the example
https://alistapart.github.io/code-samples/fluidgrids/examples/grid/final.html

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2


https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image


https://www.w3schools.com/css/css_rwd_images.asp


http://responsiveimages.org/

2. Adaptive Image
 Apply similar fluid practices to images using percentages
 Code example:
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2
 The image can be scaled up to be larger than its original size, which makes
the image blurry. A better solution, in many cases, will be to use the max-
width property.
 See this example:
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image (and compare
to the prior example)
 Reference: https://www.w3schools.com/css/css_rwd_images.asp
 Take it to another level with media queries http://responsiveimages.org
7
img
{
display: block;
max-width: 100%;
}
Don’t forget the max-width
property, which limit the image
size to its original size.

https://www.w3.org/TR/css3-mediaqueries/


http://caniuse.com/#feat=css-mediaqueries

3. Media Query
 Media query is a CSS3 module allowing content rendering to
adapt to conditions such as screen resolution.
 A W3C recommended standard (June 2012)
 https://www.w3.org/TR/css3-mediaqueries/
 A cornerstone technology of responsive web design
 All major browsers support it
 http://caniuse.com/#feat=css-mediaqueries
Media Query Basics
 Media queries are based on rules (conditions or contexts) in which a
set of CSS should be applied.
 Code example
 Setting a context in CSS (