What the Width

Posted on August 01, 2010

As I learn more about CSS media queries and work on more projects that use them, I find myself measuring browser widths all the time. I was using this tool, which is fantastic for measuring elements but makes browser measuring a bit tedious. After some unsuccessful googling I went ahead and developed a little tool to help me with that: What the Width. wTw is a JavaScript bookmarklet that just displays the browser window width and updates it as the window is resized. I built it because I couldn’t find a lightweight solution to do just that in an easy way. While I developed wTw to solve my specific problem, I thought there might be at least one person out there with the same need and that’s why I’m making it available for people to use.

How to use wTw

As with most bookmarklets, simply bookmark using your browser of choice and open it while on the website where you wish to measure the window width. A ruler and meter will display on the top of your browser. To remove this, simply refresh your browser (remove button will come later, sorry).

Far from perfect

As I said earlier, I developed this little tool to help me with a very specific problem and to speed up my work flow. For this first iteration I didn’t worry about coding the most efficient JavaScript or CSS, typography, or testing it across multiple browsers. I already have some ideas on how I can improve user experience and functionality in the future.

Some ideas for future iterations

  • Improve UX

  • Allow users to: change opacity, move the bar vertically, change colors, etc.

  • Optimize JS

  • Optimize CSS

  • Improve typography (please)

If you find wTw useful or have any feedback just leave a comment here.