Responsive Web Design Testing Tools/Tricks

Earlier last week we discussed about selecting grid system and ended up creating rBoiler - Responsive HTML5 Boilerplate and this week I am back with list of hand-picked and extremely useful testing tools for responsive web site developers.

Testing responsive web design is tough job. Changing browser width and testing it across different browsers and devices is pain and adds to development time. Tools/Tricks listed below will definitely aid you in testing your responsive website.

Testing tools

  1. Debugging CSS Media Queries - A trick to see when media queries are fired.
    @media only screen and (min-width: 768px) and (max-width: 979px){

        body{
            /* code */
        }

        /* Using ::before to create phantom element */
        body::before{
            content: "Tablet media query (768 < 979) fired";
            font-weight: bold;
            display: block;
            text-align: center;
            background: rgba(255,255,0, 0.9); /* Semi-transparent yellow */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 99;
        }

    }
  1. Responsive Design Testing - It comes with pref-configured width and loads pages in iFrame. Tool Source Code
  2. Resize my browser - Online browser resizer, auto resize window to preset size (in unsupported browser this fallback to popup)

    Resize My Browser Screenshot

This entry was published on 21st Sep, 2011.