Responsive Web Design
IT 4213 Mobile Web Development
IT 4403 Advanced Web and Mobile Applications
Jack G. Zheng
Spring 2021
https://www.edocr.com/v/yxdmelxy/jgzheng/responsive-web-design
Overview
This lecture notes summarize basic approaches to
develop and deliver mobile websites, with a particular
focus on responsive design.
• Two (or four including subcategories) basic
approaches
– Separate mobile site
– One web
• Responsive web design
• Adaptive (dynamic serving)
• Hybrid: RESS (Responsive + Server-Side Components)
• Responsive web design principles and key practices
– Fluid-grid
– Fluid image/media
– Media query
2
Mobile Website Delivery Strategies
• Separate mobile version site
– A separate mobile site has its own domain and
address, and it is independent from the main
site.
• One Web
– One Web means making, as far as is
reasonable, the same information and services
available to users irrespective of the device they
are using, but with different presentations (UI)
– Using the same web address
Separate Mobile Site
• A separate mobile site has its own domain and
address, and it is independent from the main site.
• A separate mobile site can best meet mobile user
experience. Build a separate mobile-optimized
design (or mobile site) if you can afford it.
– https://www.nngroup.com/articles/mobile-site-vs-full-site/
• Some examples:
– Wikipedia: https://en.m.wikipedia.org
– Goodwill: https://mgwdonate.ging.org (used a third-party
service, more like an app)
• Some companies had moved away from separate
mobile site, such as
– Costco (m.costco.com)
– Walmart (mobile.walmart.com)
– Ebay (m.ebay.com)
– Newegg: (m.newegg.com)
–
Ikea: m.ikea.com/us (jQuery Mobile)
– Nike: m.nike.com
– Staples: m.staples.com
4
Extended reading: Why Separate Mobile & Desktop Web Pages?
http://www.lukew.com/ff/entry.asp?1390
One Web
• One Web approaches
– Responsive web design (response to screen size)
– Adaptive (dynamic serving based on device detection
and adaptation)
– Hybrid: RESS (Responsive Design + Server-Side
Components) http://www.lukew.com/ff/entry.asp?1392
Key readings:
• Design for multi-screen experiences https://www.thinkwithgoogle.com/articles/building-websites-
multi-screen-consumer.html
• https://www.wired.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/
Quotes from https://www.w3.org/TR/mobile-bp/#OneWeb
• One Web means making, as far as is reasonable, the same information and services
available to users irrespective of the device they are using, but with different
presentations (UI)
•
It does not mean that the content is available in exactly the same representation across
all devices.
• The context of mobile use, device capability variations, bandwidth issues and mobile
network capabilities all affect the representation.
Responsive Web Design
• Ethan Marcotte coined the term responsive web design and
defined it to mean fluid grid/ flexible images/ media queries in a
May 2010 article in A List Apart
– http://alistapart.com/article/responsive-web-design
• Basic principles and practices
1.
Fluid grid - no horizontal scrolling
2. Adaptive/flexible image
3. Media query
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/
Examples
• Responsive examples
– http://kennesaw.edu
– https://cobbcounty.org
– http://mashable.com
– http://mediaqueri.es (more examples here)
• Non-responsive examples
– https://www.weather.gov (not mobile friendly)
– http://yahoo.com (adaptive but not responsive)
– See more: http://cubicle-h.blogspot.com/2018/08/website-mobile-friendliness-testing.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. The
example is from https://mediaqueri.es
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
– result (%) = 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
8
Extended reading: https://alistapart.com/article/fluidgrids and the example
https://alistapart.github.io/code-samples/fluidgrids/examples/grid/final.html
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
9
img
{
display: block;
max-width: 100%;
}
Don’t forget the max-width
property, which limit the image
size to its original size.
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 (