-
The three components of Responsive Web Design (https://www.webdesignerdepot.com/2014/10/3-fundamentals-of-responsive-design-you-have-to-master/)
-
How to use the browser developer tools to test a responsive design (https://www.atlantic.net/hipaa-compliant-wordpress-hosting/how-to-test-responsive-design-device-mode-chrome-developer-tools/
-
How to create a web page with a fluid design
-
Look at https://www.wix.com/website-template/view/html/2107 as the viewport width is reduced to less than 768 pixels.
-
Note header overlap, image crop and the persistent hamburger menu even on large screens (see https://www.nngroup.com/articles/hamburger-menus/). Discuss what should happen instead.
-
As an aside, try scrolling down, right-click to print. Note that the printout only includes the visible part of the page. If you cancel the print, the scroll wheel on your mouse will no longer scroll through the page. (Google Chrome Version 75.0.3770.142 (Official Build) (64-bit))
-
-
Why Fluid Responsive Design Is Best (https://trellis.co/blog/why-fluid-responsive-design-is-best/)
-
Creating Fluid Layouts & Images with CSS (https://theblog.adobe.com/creating-fluid-layouts-images-with-css/)
-
-
CSS Flexbox (https://www.w3schools.com/css/css3_flexbox.asp)
-
CSS3 media queries (https://www.w3schools.com/css/css3_mediaqueries.asp and https://www.w3schools.com/css/css3_mediaqueries_ex.asp)
-
Using the viewport meta tag to control layout on mobile browsers (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)
-
Create a simple HTML/CSS page that fixes the image crop problem on the Wix page above.
Recent Comments