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

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:

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:

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:

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.

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