Home > Features > Dev Depot: RWD Wireframe, a free visual editor for layouts • Bookmark   • Newsletters   • Register Search Options

FEATURE

Dev Depot: RWD Wireframe, a free visual editor for layouts

Dev Depot: RWD Wireframe, a free visual editor for layouts

June 5, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  39.66%
Yes, but in a few years
  36.87%
No
  23.46%
Out of 179 votes. Results based on votes submitted by members of XBIZ.net social network.

" 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. "

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.

“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.


LEGAL PERSPECTIVES

The Skinny on the New DMCA Requirement

The requirements under the Digital Millennium Copyright Act (DMCA) have changed, but the sky is not falling. We have, even as a law firm, been hit with an unbelievable amount of spam sent out by law firms... More »

2017 Outlook: Legal Matters Around the Corner

The adult entertainment business’ legal community recently weighed in the top issues that companies and the industry, as a whole, should be concerned about. XBIZ asked industry attorneys to discuss... More »

Fraudulent Brazilian Trademark Registrations Running Rampant

Although you might not think often about protecting your trademark rights in Brazil, you need to — even if you don’t yet have a single Brazilian customer. Scammers are constantly looking for... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.

UPCOMING EVENTS

The European Summit

Mar 04 - Mar 07
Barcelona-Sitges, Spain

The TEA Show

Mar 05 - Mar 06
Hollywood, CA

Phoenix Forum 2017

Mar 23 - Mar 26
Tempe, Arizona

EXXXOTICA Denver

Mar 31 - Apr 02
Denver, CO.
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!