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
  40.00%
Yes, but in a few years
  37.14%
No
  22.86%
Out of 140 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.


PROFILES & BIOS

Xgen Products Celebrates 7-Year Anniversary

In August, Xgen Products celebrated its seventh anniversary with a special promotion. The winner of Xgen’s Lucky 7 raffle, Xgen announced in late July, would win a three-day, two-night trip for two... More »

WIA Profile: Kristi Greer

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »

Q&A: Dorr’s Ivan Ho Discusses Launch of Luxury Toy Line

Dorr made its debut with a sophisticated selection of vibrators and an “advanced intimate toy care system” with a UV light for disinfection. Dorr is a manufacturer, design house, engineering... 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 Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.

UPCOMING EVENTS

eroFame

Oct 05 - Oct 07
Hannover, Germany

EXXXOTICA Edison

Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
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!