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 (<style>) block – Setting a context in a linked CSS file • Three parts in any context 1. Media type: type of presentation media, like “screen” 2. Media features: specify the characteristics of media type, like “width” 3. Logical operator: combine multiple rules 11 @media screen and (max-width: 300px) { div {background-color: lightblue;} } <link rel="stylesheet" type="text/css" href="..." media="screen and (max-width: 300px)" /> Media features Media type Media Types and Media Features • Media Queries Level 4 defines four media types • Major media features – width (max-width, min-width): screen/viewport width – aspect-ratio – orientation – resolution • For a full list of types and features, refer to: – https://developer.mozilla.org/en- US/docs/Web/CSS/Media_Queries/Using_media_queries – http://www.w3schools.com/cssref/css3_pr_mediaquery.asp 12 Media Type Description all Used for all media type devices print Used for printers screen Used for computer screens speech Used for devices that “read out” a page Logic in Media Queries • And • Or • Not • See more here – http://css-tricks.com/logic-in-media-queries/ – https://developer.mozilla.org/en- US/docs/Web/Guide/CSS/Media_queries 13 @media (min-width: 600px) and (max-width: 800px) @media (max-width: 600px), (min-width: 800px) @media not screen and (color) Media Query Practical Examples • When the width is 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 14 @media screen and (max-width: 600px) and (min-width: 400px) Use the following web app for quick testing: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media2 @media screen and (max-width: 640px) and (orientation: portrait) @media screen and (max-width: 960px) and (min-width:480px) and (max-aspect-ratio:16/9) Identifying Media Query Breakpoints • Properly set the breakpoints of media queries to allow best viewing and interaction experience based on viewport width. • Some recommend a common set of breakpoints, such as 576, 768, 992, 1200 (Bootstrap). • Some (http://bradfrost.com/blog/post/7-habits-of-highly-effective- media-queries/) do not recommend media query breakpoints around common viewport sizes as determined by different device resolutions. New devices and resolutions are being released all of the time. Trying to keep up with these changes could be an endless process. Recommendations: – Create breakpoints based on content, never on specific devices, products, or brands. – Breakpoints should only be introduced when a website starts to break, look weird, or the experience is being hampered. – Pick minor breakpoints when necessary in additional to major layout changes. 15 Arrange a Set of Media Queries • Media queries are commonly used to set contexts for different sizes of screens, based on the width property • How to arrange media query contexts? There are mainly two approaches: 1. Graceful degradation 2. Mobile first or progressive enhancement 3. Find code examples at: http://it4213.azurewebsites.net/demo/media-query/ 16 Extended reading: Generic First https://www.smashingmagazine.com/2018/12/generic-css-mobile-first/ Graceful Degradation • Define the default styles for large screen first. • Then use a set of rules with max-width (in descending order) for smaller screens by order. 17 /* Default styles first for the largest screen; then media queries for smaller screens */ ... @media screen and (max-width: 1400px) {...} @media screen and (max-width: 1000px) {...} @media screen and (max-width: 600px) {...} @media screen and (max-width: 400px) {...} Normal CSS styles applied Later rules override prior rules, so you don’t need to redefine every CSS style. Only override those needed to be changed. Mobile First (Progressive Enhancement) • Starts from default styles for the smallest screen. – “The absence for @media queries is in fact the first @media query." • Then use a set of rules with min-width (in ascending order) for larger screens. • A code example: – http://zellwk.com/blog/how-to-write-mobile-first-css/ 18 /* Default styles first for the smallest screen; then media queries for larger screens*/ ... @media screen and (min-width: 400px) {...} @media screen and (min-width: 600px) {...} @media screen and (min-width: 1000px) {...} @media screen and (min-width: 1400px) {...} Later rules override prior rules Default CSS styles first for the smallest screen; then media queries Use ascending min-width property to “grow” the width Mobile First • Mobile First is a philosophy created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. – Design for the smallest mobile device first; then progressively enhance the experience as more screen real estate becomes available. – Allows websites to reach more people – Force designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?) – Let designers innovate and take advantage of new technologies (geolocation, touch events and more) – http://www.lukew.com/presos/preso.asp?26 • Extended readings – mobile-first responsive web design http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ – A Hands-On Guide to Mobile-First Responsive Design https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/ 19 Mobile First vs. Degradation 20 #container { width: 100%; margin: auto; border: 1px solid red; background-color: yellow; } @media screen and (min-width:480px) { #container { width: 80%; background-color: blue; color:yellow; } } @media (min-width:800px) { #container { background-color: green; } } @media (min-width:1200px) { #container { background-color: purple; } } #container { width: 80%; margin: auto; border: 1px solid red; background-color: purple; color:yellow; } @media (max-width:1200px) { #container { background-color: green; } } @media (max-width:800px) { #container { background-color: blue; } } @media (max-width:480px) { #container { width: 100%; background-color: yellow; color:black; } } http://it4213.azurewebsites.net/demo/medi a-query/media-query-3-degradation.html http://it4213.azurewebsites.net/demo/media -query/media-query-4-mobilefirst.html Default CSS starts with smallest screen width<480px Default CSS starts with biggest screen width>1200px Media Query on Mobile Devices • To make media query correctly recognize the width condition on mobile devices/browsers, viewport needs to be correctly set using the viewport meta tag. Otherwise, the viewport will be set at 980px by default and media query rules for smaller screens may not be triggered. – https://www.w3schools.com/css/css_rwd_viewport.asp • See example – http://it4213.azurewebsites.net/demo/media- query/media-query-1-nometa.html – http://it4213.azurewebsites.net/demo/media- query/media-query-2-withmeta.html 21 <meta name="viewport" content="width=device-width, initial-scale=1"> Media Query – A Complete Example • A complete example of using media query is described by Ethan in his original article – http://alistapart.com/article/responsive-web-design • Check out the design results (from the example above) in some basic steps. Each is becoming more responsive. 1. Fluid design at the beginning: https://alistapart.github.io/code-samples/responsive-web- design/ex/ex-site-flexible.html 2. Add a breakpoint: https://alistapart.github.io/code- samples/responsive-web-design/ex/ex-site-linearize.html 3. Set for smaller screens: https://alistapart.github.io/code- samples/responsive-web-design/ex/ex-site-mini.html 4. Set for larger screens: https://alistapart.github.io/code- samples/responsive-web-design/ex/ex-site-larger.html 5. Final design: https://alistapart.github.io/code- samples/responsive-web-design/ex/ex-site-FINAL.html 22 Media Query Uses and Applications • Set different display styles – Change page layout – Change appearance/style of elements like text, tables, and forms. • Set different content – Show/hide different part of the page – Use (or hide) different image background – Use different image with different quality 23 RWD/Mobile General Principles • Two key differences of mobile web use are the small screen and touch oriented operations. • Design for Small Screens: the grand general principle of small screens is to keep the page short – Most mobile websites are viewed in portrait mode with narrow width. Stretching a normal multi column webpage will make the page extra long. https://www.viget.com/articles/do- responsive-sites-have-to-be-so-tall-on-mobile/ – Long stretching pages are more likely to get user lost and difficult to navigate • Design for touch friendly UI – Touch UI poses some challenges but also offers opportunities to design better interaction methods and enable additional functionalities than traditional UI. 24 These two principles and some best practices will be cover in module 4. RWD Patterns and Best Practices • RWD can be applied to many UI elements and content types, like: – Page layout – Navigation (menu) – Content: text, table, list – Form and controls – Specific content type like data, catalog, article, dashboard, etc. – Media like image, video, gallery, etc. – Decorative elements like icon, background, etc. • General patterns and best practices collection – http://bradfrost.github.io/this-is-responsive/patterns.html – https://responsivedesign.is/patterns/ – http://ui-patterns.com/patterns • Dedicated sites for examples – http://mediaqueri.es – http://www.awwwards.com/websites/responsive-design/ – http://responsivedesign.is/examples – https://designmodo.com/responsive-design-examples/ – https://www.awwwards.com/50-examples-of-responsive-web-design.html 25 More specific patterns and best practices for selected content types will be covered in later modules 5 to 9. RWD Tools • Responsive design test – https://material.io/resizer/ – http://www.responsinator.com – https://www.browsersync.io – http://mobiletest.me – https://designmodo.com/responsiv e-test/ • Emulator – https://developers.google.com/we b/tools/chrome-devtools/device- mode/ – https://developer.mozilla.org/en- US/docs/Tools/Responsive_Desig n_Mode – http://www.mobilexweb.com/emula tors – http://lab.maltewassermann.com/vi ewport-resizer/ • Screen size detection – http://mydevice.io – http://detectmobilebrowsers.com – Screen resolution: http://www.screenresolution.org or http://www.whatismyscreenresolut ion.com • Viewport tools (device or visual viewport) – https://viewportsizer.com and https://viewportsizer.com/devices/ – http://whatismyviewport.com – https://www.mydevice.io – http://lab.maltewassermann.com/ viewport-resizer/ • Feature check – http://mobilehtml5.org – http://caniuse.com RWD UI Frameworks • Despite the debate of using frameworks, RWD UI frameworks has been growing in popularity – http://www.smashingmagazine.com/2014/02/19/responsive- design-frameworks-just-because-you-can-should-you/ • Major frameworks – Bootstrap: http://getbootstrap.com – Zurb Foundation: http://foundation.zurb.com – Skeleton: http://getskeleton.com – Sencha Touch: http://www.sencha.com/products/touch/ • More comparison – http://responsive.vermilion.com/compare.php – http://www.sitepoint.com/5-most-popular-frontend- frameworks-compared – http://mobile-frameworks-comparison-chart.com 27 This subject will be covered in details in module 10 Adaptive (Dynamic Serving) • Adaptive design aims to deliver website UI (content, style, function, etc.) and user experience that adapts to the capabilities of the device/browser. – Also called dynamic serving as in https://www.thinkwithgoogle.com/marketing-resources/experience- design/building-websites-multi-screen-consumer/ – Adaptation can be done either at the server side or at the client side - https://www.wired.com/2013/05/the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/ • Of the Alexa 100 sites, 80% use adaptive web design in their delivery. – https://mobiforge.com/news-comment/adaptive-web-design-dominates-in-the-webs-top-brands • Some examples (notice the webpage does not respond to real-time size change well): – http://google.com – https://www.yahoo.com – http://dealnews.com – https://gillette.com – https://github.com/vmware • Responsive design can somewhat be considered as a kind of adaptive design. It adapts UI based on screen size (width mainly). But adaptive design considers more features than just screen size. – http://bradfrost.com/blog/post/the-many-faces-of-adaptive-design/ – More comparison: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design 28 Feature/Device Detection • Adaptive design heavily uses feature detection and other sound progressive enhancement techniques. • These features may include – Screen size and capabilities (orientation, touch, etc.) – Device/OS type – Browser type/version – Hardware features – https://developer.ibm.com/articles/responsive-design-future/ • In the separate mobile site approach, device detection is also often used to redirect users to mobile or desktop version site. • Feature detection techniques – Parsing User-Agent strings: https://deviceatlas.com/blog/user-agent- parsing-how-it-works-and-how-it-can-be-used – Using JavaScript testing: Modernizr https://modernizr.com • More resources: https://deviceatlas.com/knowledge-base 29 RESS • RESS: Responsive Design + Server-Side Components • The two approaches are not mutually exclusive. Many sites combine techniques to achieve the best results. • Some techniques – A single set of page templates define an entire Web site for all devices (responsive) but key components within that site have device-class specific implementations that are rendered server side (server-side components). http://www.lukew.com/ff/entry.asp?1392 – Conditional loading (adaptive): http://christianheilmann.com/2012/12/19/conditional-loading- of-resources-with-mediaqueries/ • Comparison of the three: – http://www.lukew.com/ff/entry.asp?1509 30 Key Readings and Learning • Approaches summary: https://www.thinkwithgoogle.com/marketing- strategies/app-and-mobile/building-websites-multi-screen-consumer/ • Responsive web design – http://alistapart.com/article/responsive-web-design: the original article focused on concepts. – Media queries reference: https://developer.mozilla.org/en- US/docs/Web/CSS/Media_Queries/Using_media_queries • Mobile first: – The idea: https://bradfrost.com/blog/post/mobile-first-responsive-web-design/ – Mobile first CSS: https://zellwk.com/blog/how-to-write-mobile-first-css/ - watch the video included at the bottom of the page which explains it with plain CSS https://www.youtube.com/watch?v=LCveWtlvSbM • Adaptive web design: https://www.wired.com/2013/05/the-two-flavors-of-a-one- web-approach-responsive-vs-adaptive/ • RESS: The original article raising the idea https://www.lukew.com/ff/entry.asp?1392 and comparison: https://www.lukew.com/ff/entry.asp?1509 31 Good Resources • RWD Influencers – https://ethanmarcotte.com – http://www.lukew.com – http://bradfrost.com • Tutorials and courses – https://web.dev/responsive-web-design-basics/ – Google course on Udacity https://www.udacity.com/course/responsive-web-design- fundamentals--ud893 – http://www.quirksmode.org/mobile/ – https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design – https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries – O’Reilly tutorial http://www.youtube.com/playlist?list=PLtNErhYMkHnGh691QvRtMp9jMVzpMenL5 – More: • https://designwoop.com/responsive-web-design-tutorial • http://www.hongkiat.com/blog/responsive-web-tutorials/ • Media resources – https://alistapart.com/topic/responsive-design – https://www.smashingmagazine.com/category/responsive-web-design – https://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/ – http://www.hongkiat.com/blog/tag/rwd/ 32