ProtoPie iOS Chrome browser frame

I’m serving you Chrome Browser realness

The opportunity

Have you ever tried to show off a website design meant to be shown on a mobile browser, but you couldn’t figure out why it felt static? Maybe you designed the website, but you didn’t take into account how the browser takes up screen real estate. Or maybe you just want to add that last flair of realism to your presentation.

User Experience sets and maintains expectations

Here’s the thing: it’s 2021, and we’re hardwired to expect certain micro-interactions. When they don’t occur, we’re less convinced in our personal agency as a user. If we touch something, we expect something to happen. If we scroll, we expect the screen to move in a certain way. Every action has a reaction. So, what can we do about that? Well, we cherish the little animations (micro-animations), the transitions, the squash and stretch—we document those almost-imperceptible bits of feedback and hold them tight. Because, once they’ve disappeared, it becomes painfully obvious that we’re missing something. Browser micro-animations are no exception.

A simple tool to get you started

We often create applications meant to be natively operated, but the reality is–that’s not always in the budget. So where do you start? Well, it’s probably gonna need to be a browser-based web app. Alternatively, you might be building a website, and you need to have a more robust view of how your site looks and feels when it’s constrained to a mobile browser. Well, this li’l tool might be invaluable to your next pitch.

To help you get a more hi-fidelity mockup, you can use this template as a frame around your content, which simulates the initial hide/show/minify animations of the Chrome Browser for iOS. I’ve included both an iPhone 8 and iPhone 11 , and if you need it to be wider, simply stretch the ChromeHeader or ChromeFooter group. I’m Serving you Chrome Browser realness

How to Use it

1) Download the file(s)

2) Launch the file in ProtoPie

3) Change the copy on the “browsertext” layer to whatever your url would be (in theory).

4) Place your content in the Scroll Group named “CONTENT GOES IN HERE” (I know. subtle.)

5) Test it out, and your content should feel like it’s running in the Chrome browser.

6) At this point, you can collapse the groups, and set and forget it.

Notes:

This is not a functioning browser. It’s just smoke and mirrors to help your prototype feel more authentic. As such, the buttons are not functional.

Also, because of the nature of the prototype and overlapping there is a tiny portion of the top of the content section which is not interact-able, but I’m working on a way to make that a none-issue.

In order to get any sort of scrolling, you need to make content which extends past the bounds of the device window, or rather Scroll Group. The Scroll Group element is functions by having content that is within itself that goes beyond it's bounds. Think of it like a window where your content lives.

Download a slice of this ProtoPie

As of right now, there are two versions, but if people need other browsers, I can happily cook up some more.

iPhone 11

Download this .pie

iPhone 8