background preloader

Web

Facebook Twitter

JS

Grid (Allan Jardine) As all designers know, the grid is absolutely fundamental to layout, whether you want to keep to a tight grid, or break it for effect.

Grid (Allan Jardine)

Grid is a highly configurable JavaScript bookmarklet which overlays a layout grid on any web-site you wish. 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.

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. You may also wish to make use the grid displayed on a web-page in a desktop design package such as Photoshop. No IE6 support? Version 1.1. SproutCore. How To Make Your Site Compatible For Cell Phones. Useful HTML-, CSS- and JavaScript Tools and Libraries - Smashing Magazine. Advertisement Front-end development is a tricky beast.

Useful HTML-, CSS- and JavaScript Tools and Libraries - Smashing Magazine

It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do.

Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things. Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. HTML and CSS Tools InitializrThis tool creates a customizable template based on HTML5 Boilerplate.

Layer StylesA nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. Grids. 35 Excellent Wireframing Resources. Oct 05 2010 Wireframing is an important part of the design process, one that shouldn’t be overlooked by even the most experienced designers.

35 Excellent Wireframing Resources

Wireframes can save development time by outlining exactly how a site should look and function, in a manner that can be shown to and approved by your clients. But wireframing can be confusing, especially to new designers. What’s the right way to create a wireframe? Is there even a right way? Wireframing Articles The articles featured here discuss wireframing and prototyping both from a theoretical and a practical point of view. My Five Commandments for Wireframing A podcast and article from Boagworld on good practices for wireframing, including why you should wireframe and the benefits of paper wireframing. Wireframes for the Wicked Here’s a slideshow that talks about the purpose of wireframes and the different types of wireframes. The Future of Wireframes? UX 101: The Wireframe A beginner’s guide to wireframing from Viget Advance. Storyboards vs.

CSS