Responsive Design And Your Site

The world of responsive design is upon us by default. Many sites out there are already utilizing it without having to adjust their design layouts. Designers are overwhelmed with innovative ways to explain what people want from their site and of course from their designs. First things first, it’s hard to do this flawlessly. Just take a look at your past clients. It’s rare that a client will know what they want, and it’s hard to rearrange and execute it all once they throw one idea to the curb. The best thing that you can do as a disagree is use the apps that are out there to help create functional and editable prototypes.

Have you built something in the past only to see that you or the client just hated it. In most cases the minute you build it changing the design is hard to do.  Apps that allow you to use the drag and drop components, allow you to interact with the design ideas and flow with what you are needing to have on there, and what you think will look nice. Some of these apps even let you take a look at going mobile with the site first, and then allowing you to change it later on.


Divshot. This application is a text editor and a mockup tool for fast and easy to see front end development.  The program lets you build the site visually with front end framework like Bootstrap, Foundation and Ratchet.  You don’ t have to choose visual tools here. Each library is customized for the framework you are working on, and the output code looks like the framework. They also update the program to ensure that the latest versions are on there and ready to go. If you are like most developers you will cry when you think about a visual HTML editor.  But don’t this baby was created to have the same quality standards that you have. That means no tag mire, and clean, slick HTML. It works with source codes and produces prototypes within minutes and allows you to edit it at the same time. It’s full powered front-end development. Think about it! You can add Javascript, flesh out the CSS and more all with the power of Divshot.  You can work with the whole team here, and the system lets you separate the work projects by streamlining it with organizations. You can choose between personal design and what you are doing for your clients. You have the power to see who is creating projects, restrict it from being done and more.  The interface has a bar that contains two control panels, one for folders and one for files. Creating a new file is super easy, and you get to choose from start layouts as well. The pricing is also super cheap. You can do a free trial with three active documents, unlimited reviewers and the option to see who reviews. Then for $15 a month kick it up a notch with unlimited documents, paying collaborators and unlimited reviews. The third option called professional offers sharing with teams, consolidated billing and premium support for only $30 a month.


Easel.  This handy prototype builder is based on WYSIWYG page building. Don’t automatically push it away because it’s visual, that would seriously be a shame. This Bootstrap system makes the creation of complex responsive site design easy. No, it’s not a delusion-it’s true. Seriously, all you have to do is put in HTML classes in there and there is the mockup. Hallelujah! UI and the other tools on Easel are amazingly simple just like signing up is super easy. The standard toolset is split into categories, like typography, table, forms, buttons, navigation, containers, thumbnails and miscellaneous. This prototype application has a really easy open ended workflow. All you have to do is drag the items you want, flop, drop and shuffle. Voila! There you go. It’s easy and gets your prototypes moving in the right direction.

The pricing on Easel is the affordable. Freelancer bundles are $30 a month, small team bundles are $50 a month and so on. It’s free to start, and with a free trial account you get unlimited documents.  It can’t hurt to try it on a free trial basis.

Prototyping with these two apps make the older process seem like the dark ages. When you are designing something these are the forefront of what you should be looking at. Remember, designs and the principles of design should be something that you can functionally manipulate. Prototypes for responsive design are all too often ignored. So give these two app’s a try.  Plus, free trials cannot be beat.  Let us know what you think.