Using Grid is very simple:
Drag the Grid link below to your bookmark bar
- Load any web-page you want
- Click Grid in your bookmark bar
- Configure the grid any way you wish to assist with layout
The impact of a web-site can stand or fall by the underlying structure of the visual layout. All elements of a design are united by the grid, allowing the experienced designer to bring certain elements to prominence in the viewers mind. Despite this core aspect to design, there are few utilities which allow designers and developers to interact directly with a grid within a web-browser (most methods involve overlaying a static grid image on a page). Grid is designed to fill this gap.
Using Grid is as simple as loading it into any web-page you wish by following the instructions above, and then customising the grid displayed to suit your needs using it's control panel. Grid will automatically calculate the number of columns/rows or the size of the column/row depending on your input. This is particularly useful for calculating CSS units.
You may also wish to make use the grid displayed on a web-page in a desktop design package such as Photoshop. This can be done by using the 'Print / Screenshot' mode. Activate this mode by clicking the 'screen' icon in the top left of the Grid control panel (second icon down) and the contents of the web-page will be blanked out, leaving only the grid. Take a screenshot of this (and delete the white elements), or print it out as you wish. To return to the normal view mode, press the 'esc' button.
Support and future work
Since Grid can be used on any web-site, it's programming must allow for many different environment variations. It is therefore possible that you will find one or two sites which Grid struggles to work with. If you do find any, please report them to me. Likewise, please get in touch if you have any ideas for enhancements which could be made to improve Grid, or even if you simply like using it!
The following browsers are supported in Grid:
- Internet Explorer 7
- Firefox 2+
- Safari 2.0.4+
- Opera 9.2
No IE6 support? Nope. Grid is designed and developed for you as web-developers and designers, not your clients (who of course still required IE6 support), so I see no need to support it in this case (feel free to disagree!). If we at the front of the field don't move on, how can we expect the larger community to do so?
- New: Include the 'print / screenshot' mode. Many thanks to Paul Annett for this suggestion!
- New: Incorporated into the Design framework.
- New: Window resize is now taken account of
- New: State of the control panel is saved (collapsed or not) which is useful if you are checking one site a lot with minor changes
- New: A small loading indicator is shown while Grid is loading
- New: Position of the grid control panel is now fixed in the viewport, so you will always have easy access to it, even on long pages. (Note that Safari 2 is an exception here due to a bug in how it handles position fixed and overflow - works fine in Safari 3).
- Bug fix: The height of the display grid will now either be the height of the browser viewport (if no vertical scrolling), or the height of the content (with scrolling). The same applies to the width. Note that when using percentages for the page container units, this percentage is calculated from the height of the full page, as described above).
Ever feel a little bit overwhelmed with the number of code libraries that are available? Take a look at this post and feel a bit better about the world.
Visual Event for Opera
Victor Grischenko has wrapped Visual Event up in an Opera extension, making it even easier to use Visual Event in Opera now.
Why Visual Event
Mark Haller of LogicSpot does a superb job of introducing the exact reasons for which I created Visual Event!
Bullet time surfing
What could possibly be cooler than surfing? Surfing with bullet time captures - amazing work from Rip Curl. Seriously - watch the video!
Big changes for Flash
This week Adobe has announced an end to mobile Flash development and Flex now appears to be heading out of the door as well.
Getting started with SVG
Interesting post from the IEBlog about how to get started with SVG. With the level of support in browser now, SVG will hopefully go prime time.