Web Canvas


I have mentioned Methodologie’s ‘Sizer‘ last year and it was received with a lot of interest. @Royalbacon just informed me that it has been entirely revamped and is now a Firefox Plug-in.

The ideal “canvas” size for web design is a moving target. To keep better track of that target, Methodologie created the Web Canvas. It helps UI designers design websites with the largest possible area without leaving behind the majority of Internet users. Super-handy tool! Bookmarked (yet again!)

9 Comments leave a comment below

  1. Very interesting.

    We wrote a little page of HTML, which we have found to be helpful in establishing a canvas size with our clients.

    The code is a slightly hackish, as, heretofore, it’s really only been for internal purposes, but have a look if you wish:


    With proper attribution, feel free to copy the code and update the HTML to include your client’s heading and navigation.

  2. This is great. Thank you.

  3. The only problem I see with this app is that it is unusable for centered layouts. Would be a nice option to have.
    But it is still a good add-on.

  4. Thanks for the post, @swissmiss, and thanks @pop for the feedback. Being able to do this for a centered site is definitely a concern of ours, and is in the works for sure.

  5. cheers! let swissmiss know when you are done with it ;)

  6. Ha! I most certainly will. WARNING — Shameless plug: In the mean time, you could also subscribe to our RSS feed/newsletter/twitter feed at http://methodologie.com/whats-new

  7. I like the one with a grid beneath: http://www.matuvu.nu/2009/02/screendimensions/

    Put some layers of grid design on top of it in a PSD, and you get a perfect template to start any webdesign with.

  8. I´m using the firefox plugin Web developer toolbar which makes the mentioned plugin obsolete. With WDT you could resize the browser window to desired widths and heights.

  9. I still use this with good success good add-on i might add!