Download the latest ProtoFluid JavaScript file. Save it in your project directory wherever convenient.
Include jQuery and ProtoFluid in your HTML before any other JavaScript:
<head>
<script type='text/javascript' src='jQuery.js'></script>
<script type='text/javascript' src='protoFluid3.02.js'></script>
/* Your code */
<script type='text/javascript' src='yourCode.js'></script>
</head>
You can use the standard browser navigation buttons (back, forward, reload).
The rest of ProtoFluid is controlled by the big buttons at the bottom of the screen.
ProtoFluid does not automatically launch. It executes whenever the hash query ‘protoFluid’ is found.
So, type #protoFluid after your web address and refresh the page.
http://example.com/#protoFluid
ProtoFluid supports a hash query structure if your app already uses the hash.
http://example.com/#?a=0&protoFluid
When ProtoFluid is not enabled your app/website behaves normally. It even removes itself from the document code visible to web developer tools.
ProtoFluid does not simulate mobile devices.
It simply lets you test CSS, media queries and responsive designs in the browser and viewport configuration of your choice.
The gap between desktop and mobile browsers is now tiny, rendering is often near-identical. ProtoFluid provides an acceptable development approximation.
ProtoFluid renders pages at a 1:1 viewport scale.
Device viewports don't often default to 1:1 scale, but you can specify this via the viewport meta tag.
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no' />
The tag is discussed in depth in this Mozilla Firefox article.
ProtoFluid allows easy sharing of a website in a specific viewport configuration.
Be aware that if you are using ProtoFluid locally, others will not be able to view the preview.
Instead, generate the link from a location that is reachable on the Internet.
The class protoFluid is added to the body tag of your document when ProtoFluid is enabled.
This lets you change any styles specific to being contained within a ProtoFluid viewport.
For example, the following CSS hides the launch button and shows the exit button instead.
.exitProtoFluid { display: none; }
.protoFluid .launchProtoFluid { display: none; }
.protoFluid .exitProtoFluid { display: inline; }
To get the most out of responsive design testing with ProtoFluid, please read the CSS Media Query tips.
When enabled, ProtoFluid loads the page twice. Once on initial load and once inside the generated iFrame.
This means your JavaScript executes twice. To circumvent this, use the protoFluidReady() function.
This function returns true when your app is running within a ProtoFluid iFrame and also when ProtoFluid is disabled.
if(protoFluidReady()) {
/* Your code */
}
If you are running from a document ready function or something similar… JavaScript library independent.
$(document).ready(function() {
if(!protoFluidReady()) return false;
/* Your code */
});
A cleaner version of the above document ready function is available if you're using jQuery.
protoFluidReady(function() {
/* Your code */
});
If you have a set of device dimenions you really need to test, you can easily set it up.
With the addProtoFluidFrame() function, you can specify width, height, description and enable/disable orientation switching.
// Clear existing frames (optional)
clearProtoFluidFrames();
// Add a custom frame
addProtoFluidFrame(640, 320, 'My Phone', false);
You can either start from a blank slate and add your own viewports, or append your devices on to the default list.
If you specify multiple frames, you can set the initial frame via setProtoFluidFrame()
clearProtoFluidFrames();
addProtoFluidFrame(480, 320, 'Phone', false);
addProtoFluidFrame(768, 1024, 'Tablet', true);
addProtoFluidFrame(1280, 800, 'Laptop', false);
setProtoFluidFrame(1); // Sets 'Tablet' as the default viewport
A launch button is provided automatically. If you wish to disable this, set the following global variable to false in your JavaScript.
bProtoFluidButton = false;
ProtoFluid picks up anchor elements with the following classes,
<a class='launchProtoFluid' href='#launchProtoFluid'>Demo</a>
<a class='exitProtoFluid' href='#exitProtoFluid'>Exit Demo</a>
<a class='previewProtoFluid' data-width='320' data-height='480' data-desc='iPhone' href='#iPhone'>iPhone</a>
Any anchor added to your page as shown will be processed by ProtoFluid. For example, preview this page on iPhone.
Choose a viewport, then minimise ProtoFluid. The app gets out of your way, letting you focus on your presentation.
Keyboard navigation is coming soon to further streamline this process.
ProtoFluid supports standards compliant browsers. Full details can be found here.
ProtoFluid is intended for inclusion on the same domain as the web app or website that you are testing.
As a result, there are no cross domain issues in its use.
However, navigation away from the original domain within ProtoFluid may run into security measures taken by other sites to prevent their site being loaded in an iFrame.
Examples include the X-Frame-Options HTTP response header and framebusting / framekilling.
You are welcome to use these techniques on your own site. They will not affect ProtoFluid as it operates on the same domain.
ProtoFluid requires JavaScript. If JavaScript is disabled ProtoFluid simply doesn't launch and therefore doesn't interfere with your website's normal behaviour.
Once you are ready to launch your project, simply remove or comment out the ProtoFluid JavaScript.
jQuery is required by ProtoFluid to overcome various browser quirks. As the browser landscape changes, this may be re-evaluated.
You are welcome to use whatever JavaScript library you like for your website and apps.
Since jQuery and ProtoFluid are included before all your other code, including your chosen library after this will overwrite the popular $ variable, so you can use it as normal.
If your JavaScript library is nice enough to leave $ alone if already set (like MooTools) refer to the library's documentation to re-enable its use.
In MooTools case,
$ = document.id;
ProtoFluid does not support user agent sniffing. However, you can use whatever browsers or developer tools you like. Some even let you specify user agent strings.
Full details can be found here.