don't be a stereotype: rapid prototype

Ed Charbeneau

Ed Charbeneau

Ed Charbeneau

• Sr. Web Developer for Sypris Solutions

• Code PaLOUsa Co-Chairman• Author: Simple-Talk• ResponsiveMVC.net• Twitter: @EdCharbeneau

Ed Charbeneau

Rapid Prototyping

A group of techniques used to quickly produce a working

model

http://imgs.xkcd.com/comics/the_general_problem.png

Ed Charbeneau

Stereotype

a widely held but fixed and oversimplified image or idea of a particular type of person

or thing.

Ed Charbeneau

It’s all about communication

Without a working model, we can’t communicate our goals and we can’t anticipate how users will interact with the product.

Ed Charbeneau

It’s all about communication

Ed Charbeneau

It’s all about communication

Ed Charbeneau

Who are we communicating with?

We need to be able to communicate on common ground

with our:Designers

DevelopersCustomers

Testers

Ed Charbeneau

Web Developer / Designer

This is not me and I am both a Web Designer and Developer

Source: http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/

Ed Charbeneau

Don’t be a stereotype

Nobody aspires to fit a stereotype, so stop doing it with your tool set

Think outside your toolbox

Ed Charbeneau

You MUST use these, right?

Well, not exactly.

OR

Ed Charbeneau

Build your own prototyping toolbox

Here are some things I like to develop with

Let’s talk about why!

Ed Charbeneau

Tools

Editor

HTML, JS & CSS Editor

IntellisenseExtendablevNext, even

better

Packages

Great resourceOpen Source

Easily manageable

Fast installation

Platforms

Full control of HTML

Promotes reusabilityTemplates

Open source

Ed Charbeneau

Visual Studio

IDE

HTML, JS & CSS Editor

IntellisenseExtendablevNext, even

better

NuGet

Great resourceOpen Source

Easily manageable

Fast installation

ASP.Net MVC

Full control of HTML

Promotes reusability

RazorOpen source

Ed Charbeneau

“Traditional” wireframe tools

• Wireframes• Photoshop• Mockup software

– Basalmic– SketchFlow– PowerPoint

Ed Charbeneau

Responsive Design

tablet desktopmobile

Ed Charbeneau

Static wireframe pitfalls

Responsive designHow will this look a phone

How will this look on my tabletWhat if I rotate the displayWhat will be displayed if I

“snap” the window in Windows 8?

Ed Charbeneau

I write it, and we’ll do it LIVE

It’s time to start wire framing in code and using the browser

***

Ed Charbeneau

Correct Context

Viewing a prototype in a native environment gives you a better perspective.

Source: http://www.zurb.com/article/898/wireframes-are-dead-long-live-wireframes

Ed Charbeneau

Foundation

Rapid prototyping and responsive

design framework

Ed Charbeneau

Bootstrap

Ed Charbeneau

Git

Easy to use source controlUbiquitous• All platforms• Tooling support

GitHub• Large open source community

Ed Charbeneau

Chrome developer tools

Edit code directly from the browser

#titanic{

float:none;}/* Too soon? */

Ed Charbeneau

How it works

<!-- begin demos --><demos>

Ed Charbeneau

Prototyping for MVC

@* Html helpers example *@@* Lorem Ipsum on the fly *@

@Html.Ipsum() @* a random length paragraph *@

@Html.Ipsum().h1() @* an h1 tag filled with ipsum*@

@Html.Ipsum().h1().p().ul() @* Fluent Ipsum*@

www.responsivemvc.net

Ed Charbeneau

InlineIpsum for jQuery

/* Html helpers example *//* Lorem Ipsum on the fly */

@Html.Ipsum.p() /* a random length paragraph */

@Html.Ipsum.h1() /* an h1 tag filled with ipsum*/

@Html.Ipsum.h1().p().ul() /* Fluent Ipsum*/

Github.com/edcharbeneau/InlineIpsum

Ed Charbeneau

Bootstrap demo

<!– css example --><!– a row with two six column wide blocks of content -->

<div class=“row”><div class=“col-md-6”></div><div class=“col-md-6”></div>

</div>

Ed Charbeneau

Foundation demo

<!– css example --><!– a row with two six column wide blocks of content -->

<div class=“row”><div class=“large-6

columns”></div><div class=“large-6

columns”></div></div>

Ed Charbeneau

Iteration and AB testing

Create different versions of the same project$ git branch TestA$ git checkout TestA… some changes$ git commit

$ git branch TestB$ git checkout TestB… some changes$ git commit

Ed Charbeneau

Testing

Branch and merge

Master Merged

Left Navigation

Right Navigation

Deleted

New Master:Using left navigation

Decision:Should we use left orright navigation

Branch

Branch

Ed Charbeneau

Questions?

<!-- end demos --></demos>

Ed Charbeneau

Prototyping

Resources

Reading• simple-talk.com/dotnet

/asp.net/rapid-prototyping,-the-mvc-working-model/• simple-talk.com/author/edward-charbeneau/• alistapart.com/articles/dive-into-responsive-prototyping-with-foun

dation/

Examples• github.com/EdCharbeneau

Software• Responsivemvc.net/resources (This presentation and related

resources)• windows.github.com (GitHub for Windows)• github.com/EdCharbeneau/InlineIpsum (InlineIpsum - jQuery)

Ed Charbeneau