howto: responsive design debugging     rev 30 sep 2019

Canonical processes for debugging responsive css 
in all sites - WP or no:
    1) Inspect page and tweak in web developer tools.
        caching:
          web - Use Cloudflare development mode.
          browser - Set cache to 0 in your browser.
    2) When happy, edit/upload stylesheet.
    3) Repeat until page is perfect or you are fed up  :)


....................................................... 
1) Inspect page at different sizes with 
    A) Drongo CSS Debug
    B) Firefox/Chromium web developer tools

    ......................... 
	A) Drongo CSS Debug (js and css):
	
	  Displays breakpoints and current window size on the page.
        Browser developer tools will show window size and more very nicely,
        but as far as i know, not your breakpoints except by looking
        in the css inspector.
        So i also use this because:
          * i like seeing the breakpoints in coordination with window size.
          * i can tell my css to display breakpoint even if there are
              no definitions in that media query.

      Summary: 
	    Uses a constant in wp-config.php, code in header.php,
	      a javascript file and a css file.
	    Would be convenient as a plugin but the overhead to
	      make one is a little too high for me right now.
	
	  How to use drongo-css-debug:
	  1 - wp-config.php - define CSS_DEBUG true or false.
	
	  2 - header.php (or in functions enqueue style) - pull in js and css.
	      include js/display-window-size.js
	          calculates current window size and displays it in any element
	            with id "dimensions".
	      include styles/css-debug.css
	          - has :after content in each media query, to display the breakpoint.
	          - has styles for #dimensions and the :after content.
	              (you don't want it to interfere with the page design)
	      So, like this:
	<?php if ( is_user_logged_in() && CSS_DEBUG == TRUE ) { ?>
	  <script src="/wp-content/themes/namgyal-2010/js/display-window-size.js"></script>
	  <link rel="stylesheet" href="/wp-content/themes/namgyal-2010/styles/css-debug.css" />
	<?php } ?>
	
	 
	  3 - header.php - display the values
	        Right after first div (page wrapper):
	<?php
	// css responsive debug: display window dimensions and media query breakpoint.
	if ( is_user_logged_in() && CSS_DEBUG == TRUE ) { ?>
	<div id="css-debug">
	  <span id="dimensions"> </span>
	  <span id="breakpoint"> </span>
	</div>
	<?php } ?>
	
	
	
    ......................... 
	B) Firefox/Chromium developer tools + Cloudflare plugin
	
	  1 - Put Cloudflare in developer mode
	     or
	     clear Cloudflare cache of the css file you are changing.
	
	  2a - Firefox developer tools
	       Right-click on element -> Inspect Element
	       or
	       menu Tools -> Web Developer -> Inspector
	       or
	       shift-ctrl-C
	     Advantage: Its separate Responsive design mode has a lot more functionality.
	                Firefox has a lot of other tools in Web Developer menu.
	
	  2b - Chromium developer tools
	       Right-click on element -> Inspect 
	       or
	       menu Tools -> Developer Tools -> Inspector
	       or
	       shift-ctrl-I
	     Advantage: Responsive design mode is activated automatically.
	                  (Does not have more functionality by default, but can
	                   find more under 3-dot menu on the right.)
	     (myself i only use Chromium for debugging to see how ads are
	      working, as i will not enable ads in my main browser.)
	


....................................................... 
2) After saving/uploading stylesheet (depending working on dev or prod, etc),

      - clear stylesheet file cache in cloudflare if not running in development mode.

      - shift-reload page.
          Depending on your browser, cache may not be cleared always,
            even with shift-reload.
          My solution is setting browser cache to 0 or very minimal.
            ..(This means your normal web browsing will be slower.)

      - look at the site on actual phones too. It's not always the same.


....................................................... 
3) Repeat endlessly.



.......................................................
Notes:

  * Best way to deal with google ads is to select "responsive"
      when making them at google adsense.
      https://support.google.com/adsense/answer/3543893?hl=en
      There is more info there and in separate file if you have 
      more complex responsive needs for google ads.

  * Use Chromium instead of Chrome - less google invasion,
      same functionality. but you can minimise cache through 
      developer tools only.

  * Do not expect everything to look pixel-perfect.
      You are doing Web, not designing a book or a poster.
      Browser engines, screens, OSs, room lighting, more, are all different.
      So you are flexible, flowing -- be water my friend.


_______________________________________________________
begin 21 oct 2018
-- 0 --