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

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.

Related:  

Copyright © 2024 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

Best Practices for Payment Gateway Security

Securing digital payment transactions is critical for all businesses, but especially those in high-risk industries. Payment gateways are a core component of the digital payment ecosystem, and therefore must follow best practices to keep customer data safe.

Jonathan Corona ·
opinion

Ready for New Visa Acquirer Changes?

Next spring, Visa will roll out the U.S. version of its new Visa Acquirer Monitoring Program (VAMP), which goes into effect April 1, 2025. This follows Visa Europe, which rolled out VAMP back in June. VAMP charts a new path for acquirers to manage fraud and chargeback ratios.

Cathy Beardsley ·
opinion

How to Halt Hackers as Fraud Attacks Rise

For hackers, it’s often a game of trial and error. Bad actors will perform enumeration and account testing, repeating the same test on a system to look for vulnerabilities — and if you are not equipped with the proper tools, your merchant account could be the next target.

Cathy Beardsley ·
profile

VerifyMy Seeks to Provide Frictionless Online Safety, Compliance Solutions

Before founding VerifyMy, Ryan Shaw was simply looking for an age verification solution for his previous business. The ones he found, however, were too expensive, too difficult to integrate with, or failed to take into account the needs of either the businesses implementing them or the end users who would be required to interact with them.

Alejandro Freixes ·
opinion

How Adult Website Operators Can Cash in on the 'Interchange' Class Action

The Payment Card Interchange Fee Settlement resulted from a landmark antitrust lawsuit involving Visa, Mastercard and several major banks. The case centered around the interchange fees charged to merchants for processing credit and debit card transactions. These fees are set by card networks and are paid by merchants to the banks that issue the cards.

Jonathan Corona ·
opinion

It's Time to Rock the Vote and Make Your Voice Heard

When I worked to defeat California’s Proposition 60 in 2016, our opposition campaign was outspent nearly 10 to 1. Nevertheless, our community came together and garnered enough support and awareness to defeat that harmful, misguided piece of proposed legislation — by more than a million votes.

Siouxsie Q ·
opinion

Staying Compliant to Avoid the Takedown Shakedown

Dealing with complaints is an everyday part of doing business — and a crucial one, since not dealing with them properly can haunt your business in multiple ways. Card brand regulations require every merchant doing business online to have in place a complaint process for reporting content that may be illegal or that violates the card brand rules.

Cathy Beardsley ·
profile

WIA Profile: Patricia Ucros

Born in Bogota, Colombia, Ucros graduated from college with a degree in education. She spent three years teaching third grade, which she enjoyed a lot, before heeding her father’s advice and moving to South Florida.

Women In Adult ·
opinion

Creating Payment Redundancies to Maximize Payout Uptime

During the global CrowdStrike outage that took place toward the end of July, a flawed software update brought air travel and electronic commerce to a grinding halt worldwide. This dramatically underscores the importance of having a backup plan in place for critical infrastructure.

Jonathan Corona ·
opinion

The Need for Minimal Friction in Age Verification Technology

In the adult sector, robust age assurance, comprised of age verification and age estimation methods, is critical to ensuring legal compliance with ever-evolving regulations, safeguarding minors from inappropriate content and protecting the privacy of adults wishing to view adult content.

Gavin Worrall ·
Show More