Responsive Web Design Presentation

F-Code Club - FPTU HCM
Presenter: Quang Dat Pham - [email protected]

Objectives

• Understand Responsive Web Design
• Breakpoints and @media queries technique
• Flexbox and CSS grids for efficient layouts
• CSS units in Responsive Web Design

COMPATIBLE Almost every business these days needs a mobile version of their website. iPhone, Android devices, iPad, Kindle, and moreover all screen resolutions.

What is Responsive Web Design?

• Respond and adjust accordingly to the prevalence of mobile browsing from devices like laptops, tablets, and smartphones.
• Responsive web design is a concept, which when implemented the right way can improve the UX.

Concepts:

• Responsive Website Design (RWD): Websites that are built with responsive design use media queries to target breakpoints that scale images, wrap text and adjust the layout so that the website can shrink to fit any size of the screen.

• Adaptive Website Design (AWD): Adaptive design typically uses multiple fixed layout sizes—when the system detects the browser size, it selects the layout most appropriate for the screen.

• Fluid Website Design: Websites that are built with fluid design use percentages for widths.

• Fixed Design: Websites that are built using fixed design rely on fixed pixel widths. While a design with fixed dimensions can sometimes be the quickest way to get up and running, it’ll provide a less user-friendly across multiple devices.

Practices

https://github.com/quangdatpham/fcode-responsive-web-design

References

• Nisha Gopinath Menon, Everything you need to know about responsive web design, https://www.cognitiveclouds.com/insights/everything-you-need-to-know-about-responsive-web-design/

• Chris Castiglione, Responsive vs. Adaptive vs. Fluid Design, https://learn.onemonth.com/responsive-vs-adaptive-vs-fluid-design/

• Sandijs Ruluks, 9 basic principles of responsive web design, http://blog.froont.com/9-basic-principles-of-responsive-web-design/

• Getbootstrap, Scaffolding, https://getbootstrap.com/2.3.2/scaffolding.html

• Trista liu, Responsive Web Design Guidelines: What It Is and How to Use It, https://medium.com/@tristaljing/responsive-web-design-guidelines-what-it-is-and-how-to-use-it-8d4234c07635

• Rahul Lalmalani, Common Techniques in Responsive Web Design, https://www.sitepoint.com/common-techniques-in-responsive-web-design/

• Developers Google, Mobile SEO Overview, https://developers.google.com/search/mobile-sites/mobile-seo/

• Developers Google, Responsive Web Design, https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design

• W3Schools, Responsive Web Design - Media Queries, https://www.w3schools.com/css/css_rwd_mediaqueries.asp

• Jo Franchetti, Common Responsive Layouts with CSS Grid (and some without!), https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df

• Apple Developer, iOS Device Display, https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html