{"id":55,"date":"2013-02-21T13:37:10","date_gmt":"2013-02-21T13:37:10","guid":{"rendered":"http:\/\/sniffingsharpies.com\/?p=55"},"modified":"2015-07-15T13:25:54","modified_gmt":"2015-07-15T13:25:54","slug":"get-protostrap-a-prototyping-framework-for-designers","status":"publish","type":"post","link":"https:\/\/blog.lessamess.ch\/?p=55","title":{"rendered":"Get Protostrap – a Prototyping Framework for Designers"},"content":{"rendered":"

As of today a brandnew release of Protostrap<\/a> is available. Protostrap is a prototyping framework for designers that want to get clickable and testable Prototypes up and running fast. This post is about the whys and basic hows of Protostrap.<\/p>\n

<\/p>\n

User testing is an essential part of the User Experience (UX) design workflow. As Designers we want users to test prototypes as early as possible – ideally before visual design and development take place.<\/p>\n

To run effective tests we need to be able to easily build a clickable prototype. There are quite a few prototyping solutions around, some more interactive than others, but all with one very basic flaw: they’re all fail at giving the user the impression of using, well, a website. Most of their interactive potential is confined to being able to link between screens. User testing though wants to find out if the site or application behaves as the user expects. And that’s the tricky part. In other words: it’s not the looks, it’s the behavior.<\/p>\n

So the only real option is having prototypes with HTML, CSS and Javascript. And here is where the trouble begins: There are no HTML based frameworks that allow designers to work in a sustainable way making it easy to reuse code and that come with a solid foundation of out of the box functionalities.<\/p>\n

The Need for Speed<\/h2>\n

Protostrap was born out of the need for a prototyping solution that goes beyond the typical boilerplate HTML frameworks.
\nAfter careful evaluation I chose to base Protostrap on Bootstrap (hence also the name). In my opinion it offered the most advanced base to build a prototyping tool upon. It does not look particularly pretty but that’s not the point of prototyping.<\/p>\n

The aim was to have something that makes it easy (as in “not time consuming”) to have reusable page elements for recurring things like navigations or footers and headers. This templateing ability is one of the key features that make a solution like balsamiq great because it helps you to manage changes in recurring elements painlessly.<\/p>\n

The nitty-gritty<\/h2>\n

Protostrap uses a few simple PHP-commands to achieve this. This sounds like a major turn off for designers – Having to actually code. The good news is: since Protostrap is only meant for prototyping you will not have to put up with the complicated stuff php has to offer. Just a handful of commands will get the job done, learn these and you’ll be fine.
\nSo far the used PHP-commands are:<\/p>\n

\/\/ this includes the header\ninclude('.\/header.php');\n\/\/ this is an array that defines which navbar element is active\n$navbarClasses = array('active','','');\n\/\/ this prints a variable into the template\necho $username;\n\/\/ this if-statement checks if there is a logged in user\nif($loggedIn){ \n   \/\/ display user info\n} else {\n  \/\/ display login form\n}<\/pre>\n
If you can wrap your brain around these you’re set to go.<\/p>\n
The muscles<\/h2>\n
Protostrap’s real strength though lies in its out-of-the-box features. Here’s the list of the most prominent ones:<\/p>\n
A fake authentication layer<\/strong>
\nSometimes you have to prototype for sites that have users that can log in and stay logged in. Protostrap offers this possibility out of the box by listening to formfields named “login”. This sets the variable $loggedIn and also gives you a John Doe user. These properties are persistent, this means that any following page called in the prototype thinks it has a logged in user.
\nThis allows you to prototype a more tangible user experience for usecases like E-Shop checkouts or sites that display certain info only to registered users.<\/p>\n
A “Page missing” Handler<\/strong>
\nPrototypes are often incomplete – you just can’t provide every page on the site but will focus on the core experience. However you’ll probably have a full set navigation items some of which will lead to nowhere. Whenever you test a prototype with users you want to be prepared for the “End of Prototype” situation in an elegant way and not with a confusing 404 Page that makes the Testee think your prototype is broken. Protostrap handles requests for missing pages by displaying the users the contents of missing.php.<\/p>\n
iOS Tabbar and other goodies for mobile<\/strong>
\nIn order to allow HTML based prototyping of iOS Apps (to some extent at least) Protostrap has a ready to use iOS tabbar complete with badges.
\nProtostrap Sites can be added to the homescreen as a native mobile-webapp out of the box and will display a an “Add to Homescreen” hint. Protostrap also comes with an enabled standalone app mode for iOS, correctly handling all the links not to open in Safari.<\/p>\n
Carousel with touch support<\/strong>
\nTouch is just too important to ignore these days. Unfortunately bootstraps carousel comes without touch support – Protostrap uses a fork of the original carousel with touch enabled.<\/p>\n
Entypo Pictogram Suite<\/strong>
\nProtostrap uses the Entypo Pictogram Suite to have scalable vector based icons. Its use is identical to using Bootstrap icons, you just have more, and scalable icons that also can take any color you define in css.<\/p>\n
\"Some<\/p>\n
Flexible Typeahead<\/strong>
\nProtostraps Typeahead is slightly more evolved than Bootstraps version. It allows you to display a fake amount of results and it has an “onselect” event-handler allows you to pass the selected item to a function, for example to load a page getting the value of the selected item.<\/p>\n
\"typeahead_2\"<\/a><\/strong><\/p>\n
In the Pipeline
\n<\/strong>There are a few more things in the pipeline:<\/p>\n