3 of 9Image
Screenshots: Simon Bisson/ZDNet UK
Fluid Grids are a powerful HTML5 tool, and can simplify building sites that work across phones, tablets and PCs. You start by using Dreamweaver CS6's grid wizard to choose the number of columns in a grid, as well as the percentage of the page used for columns. Grid elements will align to your columns, and you can choose which ones show at which screen resolution. There's no need to add code — CSS media queries handle browser resolution detection for you.
Once you've created a Fluid Grid layout you can add page elements, using DIVs to wrap and group elements. Using Dreamweaver's Live view you can choose which screen resolution you're working in, and then place DIVs appropriately. Some may be in different places and in different sizes for different views, while some may be hidden. It's best to start with the mobile layout first, before working on desktop and tablet views.