Responsive Design & In-browser Testing with Codeply

Some of the challenges facing responsive designers in 2014 were testing, and finding tools to design on multiple viewports. Often frontend developers are designing within the confines of an automated workflow, and changes must be constantly pushed to a development environment for simple exploratory testing. Many wireframing tools and mockup tools exist, but their ability to emulate a working client-side enviroment is non-existent or limited.

Recognizing these challenges, I will explain how to use Codeply as a tool for live, in-browser design & testing. This will eliminate development environment delays, and will enable you, or your clients, to immediately see the progress of your responsive design. It's super simple...

1] Fire-up Codeply.

Navigate your browser to:

Codeply editor

2] Choose a Responsive Framework.

Bootstrap is currently the default, or you can click the gear icon to select another framework.

Codeply select a responsive framework

Codeply is currently integrated with Bootstrap, Zurb Foundation, Yahoo's PureCSS, Skeleton, Materialize CSS, Semantic UI and Unsemantic.

3] Are You Using Other Libraries?

If you're like me your also using one or more JS and CSS micro-libaries such as AngularJS, FontAwesome, BackboneJs, etc... Codeply lets you pick what you want to reference from the dropdown list. Here is what's currently included at Codeply:

AngularJs, Angular Material, AngularUI, Animate CSS, Backbone, Bootstrap Datepicker, Bootstrap Select, DropZone, Ember, FastClick, FontAwesome, Full Calendar, Google Maps API, Hammer.js, Handlebars, Ionic, Isotope, Jasny, jQueryUI, Knockout, Masonry, Minicolors, PrototypeJs, Raphael, RequireJs and UnderscoreJs.

4] Start Playing.

A unique feature of Codeply is it's full integration with the CSS classes & components of many responsive frameworks.

There are many good reasons to design-in-the-browser...

You can see the content in context and decide if it’s the right place. Since we’re building a prototype, the client can actually browse through pages, experience interactions, and give feedback based on real user experience, not a hypothetical end-result. Since you are building your application to a fluid grid (and ideally, working mobile-first), you can instantly check and design for different devices: mobile and tablet views.

With Codeply it’s extremely fast to explore different colour, layout and typography variations across a whole product. By writing HTML and CSS with frequent code reviews, the prototype’s code can go directly into production - no duplicate effort is required!

As a developer I often find myself switching between hand-coding markup, and referencing the framework documentation to find the appropropriate classes or code examples. This is a hassle. Codeply eliminates this by making the framework example snippets directly accessible from the Codeply editor.

With Codeply, I select a snippet from the menu, and it's dropped in as markup:

Select code from menu

5] Test, and Repeat.

Codeply works well for exploratory testing, and previewing your responsive layout across multiple viewports. I click 'RUN' to render my HTML/CSS/JS in the preview pane:

Then, I can drag the viewport resizer to see how it will look on different device widths:

Test responsiveness with the viewport preview

Once I SAVE the ply, I can pop it out to the Responsive Viewer (see this option in the lower-right corner of the viewbar). Then I can see a full page viewer that lets me play with typical screen widths.

External responsive viewer

I continue steps 4 and 5 iteratively. Do a little more hand-coding, and click RUN. Sometimes I will also FORK my code to try and test markup changes and other scenarios.

If you do check out Codeply I'd recommend creating a user account so that you can find and save your ply's in your Codeply dashboard. You can also find and fork examples that other Codeply users have created.

What tools do you use that make your responsive design mockups and testing faster? Let me know @TweetFrog