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