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
Com