There are many ways to build a website today, including from the ground up with a framework such as Cute Grids, or by using one of the many available online coding tools. Enter RWD Wireframe (www.lifeishao.com/rwdwire/), a visual editor for responsive web page layouts, which according to its publisher, was created so that designers could more easily create responsive websites.
RWD Wireframe presents a simple way to construct a four column responsive layout with the ability for users to specify the breakpoints for each viewport, to better reach the specific platforms that they are targeting.
RWD Wireframe presents a simple way to construct a four column responsive layout with the ability for users to specify the breakpoints for each viewport, to better reach the specific platforms that they are targeting.
“Viewports are the different dimensions to your web page. They simulate the devices you want to design for,” explains a company rep, adding that viewports are editable by clicking on “Edit Viewports” in the main menu, which launches a dialog box where users can edit the dimensions of the devices they want to simulate, and add new viewports, too.
The standard settings are for mobile portrait at 480px wide; for mobile landscape at 767px; a default at 979px and large displays at 1200px plus, although many developers may prefer to adjust these to 480, 768, 960 and 1200 pixels wide respectively, for better integration across devices and coding frameworks.
Once the viewport breakpoints are established, it’s time to focus on the elements.
Elements are regions within viewports, which can be resized by moving their edges, and dragged to whatever position you want. Double clicking on any element will allow you to edit its content and attributes, for quick prototyping.
“To add a new element, simply click ‘New Element’ and draw on the screen from the upper left to the lower right [and you will] be immediately prompted to input the element information,” the rep notes. “For more complex designs, you might need to order the element in layers or disable elements in certain views.”
A “plus sign” icon on the RWD Wireframe sidebar menu launches a dialogue box containing a fairly sophisticated editor, and enables users to drag and drop the elements into the desired order using CSS z-index, or to disable an element completely.
“After you are done designing a view, you can click on the viewport bar to resize the viewport, and design the elements on that view,” the rep offered, adding that every time the view is changed, the element settings you have made for that view are automatically saved, but a click of the ‘back’ button will return the elements to their previous positions.
An “Export to HTML/CSS” button pops a panel providing a code skeleton along with the necessary CSS media queries.
Once the design of your layout is completed, login to save it — this will also allow you to view all of your saved projects later, which can be found listed under “User Info.”
Finally, saved layouts are given a unique URL that lets other users view it, so that you can easily share your design ideas with colleagues and focus groups.
Free to use, the Open Source service is fairly self explanatory, so that new users can quickly up to speed with RWD Wireframe — and its simple but unique visual interface.
We look at many coding solutions here at XBIZ World, but this one stands apart from many competitors on a variety of counts. Try it and see if it can find a home in your toolbox.
