508-965-6642 ekowalski@rwu.edu
  • Final
  • An official assignment
< web dev 306/>
  • HOME
  • WEB INFO
    • Syllabus
    • Contact
    • Things to Avoid
    • An official assignment
  • FINAL
  • Divi UI kit / Layouts
    • Jump To
Select Page

Al’s list #2

by Erik Kowalski | Sep 10, 2019 | Memo | 0 comments

Al’s list #2

  • 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.

Related

Leave a Reply Cancel reply

Recent Posts

  • Al’s list: Last Call
  • Do it for the Divi
  • Underscores Demo theme + Bootstrap
  • Github
  • Code

Recent Comments

    Archives

    • December 2019
    • November 2019
    • October 2019
    • September 2019
    • November 2018
    • October 2018
    • August 2018

    Categories

    • Memo
    • resources

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
    • Al’s list: Last Call
    • Do it for the Divi
    • Underscores Demo theme + Bootstrap
    • Github
    • Code
    • Al’s list #2
    • Assignment One
    • Facebook
    • Twitter
    • Google
    • Instagram
    • RSS

    Designed by Elegant Themes | Powered by WordPress