Responsive web design (rwd)

Page 1 <img data-url='document/responsive-web-design-rwd.html?page=1' data-page='1' class='cut-thumb lazyload' alt='Page 1: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/1.jpg' width='140' height='200' /> Responsive Web Design (RWD)

5 Responsive Websites

Page 2 <img data-url='document/responsive-web-design-rwd.html?page=2' data-page='2' class='cut-thumb lazyload' alt='Page 2: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/2.jpg' width='140' height='200' /> Why RWD?

• Traditional approaches created different webs– Desktop web (www.mysite.com)– Mobile web (m.mysite.com)

• Herein lies the problem…– There is only ONE web– It’s just that we ACCESS it from different devices– ‘Desktop + Mobile’ is an over trivialisation• Diversity exists among Desktop / Mobile devices

Page 3 <img data-url='document/responsive-web-design-rwd.html?page=3' data-page='3' class='cut-thumb lazyload' alt='Page 3: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/3.jpg' width='140' height='200' /> Page 4 <img data-url='document/responsive-web-design-rwd.html?page=4' data-page='4' class='cut-thumb lazyload' alt='Page 4: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/4.jpg' width='140' height='200' /> Page 5 <img data-url='document/responsive-web-design-rwd.html?page=5' data-page='5' class='cut-thumb lazyload' alt='Page 5: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/5.jpg' width='140' height='200' /> Page 6 <img data-url='document/responsive-web-design-rwd.html?page=6' data-page='6' class='cut-thumb lazyload' alt='Page 6: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/6.jpg' width='140' height='200' /> Page 7 <img data-url='document/responsive-web-design-rwd.html?page=7' data-page='7' class='cut-thumb lazyload' alt='Page 7: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/7.jpg' width='140' height='200' /> Page 8 <img data-url='document/responsive-web-design-rwd.html?page=8' data-page='8' class='cut-thumb lazyload' alt='Page 8: Responsive web design (rwd)' loading='lazy' src='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==' data-src='https://reader033.cupdf.com/reader033/viewer/2022061209/548d8d9fb47959964f8b45a0/html5/thumbnails/8.jpg' width='140' height='200' /> The end…