Back for more
In the last post we introduced a few new tools, covered a proposed RAD flow, used the DevRocket Photoshop plug-in, setup a GhostLab site and briefly addressed why designers should code.
In part two of this series, we'll cover:
- Creating and using an app icon via the Ben Markowitz method
- Adjusting our design to accommodate the default status bar
- Adding the icon to your homescreen
- Using Fastclick to make things feel quick-fast
- Providing easy access to Framer views
Now, I know what you're thinking, "When are we gonna get to the good stuff?" Well, hang in there! I know these steps may seem like tedious prep work, but let's play make believe for a moment. Imagine you've just spent sixty-five hours crafting the most magnificent app imaginable. It's presentation time and you have to say this to the lead stakeholder...
“Ok, open Safari and go to this address…nope, sorry, make sure you add :8080…ok...oh, yeah, sorry, the browser's address bar pushes down the app, scroll up…don’t worry, it won’t be like that when we build it…”
Wait, did you hear that?
Splat.
That was the sound of your stakeholder’s confidence, in you and the app, hitting to the floor.
Now, imagine handing them the phone and saying:
“Open the app.”
Whoooosh! Delight
Thus, the “tedious work” could mean a world of difference in terms of how your work is received. Don’t worry, we’ll get to the meat and potatoes soon enough, there’s plenty to consume and digest here.
If you’re totally lost, check out part one in this series or mention me on The Twitter.
The Ben Markowitz: Less is More Method
Ben Markowitz is the man and after a lengthy conversation, with the infamous Brad Frost, developed an insanely simple method for adding icons to your homescreen with a single image.
Step 1: Make It
- Pop open Photoshop.
- Create a 512x512 document and make sure it's set to PNG 8-BIT with no transparency.
- Don't worry about rounding the corners, the OS will take care of that.
- Design till your heart's content.
- Save your file as touch-icon.png
Step 2: Add Code
- Add these two lines of code to the head of your HTML document. The first is for Android, the second is for iOS.
<link rel="shortcut icon" href="touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="touch-icon.png">
- For more information, read Ben's post.
Adjusting our design
While still in your HTML document, scroll down to the style tag and make the following changes to the body element:
body { background: #fff; font: 28px/1em "Helvetica"; color: #FFF; margin-top: -40px; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-perspective: 1000px; }
- Remove the background image and set a margin-top: -40px to pull our design up a bit.
- Doing so will pull your design up and hide the status bar that’s in the design. You could also crop your PSD but this is better IMO.
Adding the icon to your homescreen
This is probably the easiest part of this series, so feel free to skip ahead...
- First, make sure your site is running in GhostLab and make note of the URL.
- Grab your device and visit said URL in Safari. For example, I’d visit 10.0.1.2:8080.
- Press the menu button (it looks like a page with an up arrow) and select “Add to Home Screen.”
- Check the name, which should be the same as the title tag in your index.html file, and select “Add.”
- If you’re like me, move the icon to a new screen where it can live by itself; it deserves a space of its own.
- Open your app—Voilà full-screen app realness in effect.
- Note: You must have GhostLab site running and be on the same network to view your app. The above does not install the app locally—that’s crazy talk.
Using Fastclick.js to make things feel quick-fast
Now that you’ve got your app running, you probably noticed a slight lag on press. This is due to the 300ms delay built into the Safari rendering engine. You can read all about it here. Thankfully though, there are some really smart people who wrote some fancy JS to help us with this: meet fastclick.
- By default, Framer doesn’t create a folder for JS files, so create one in your project directory.
- Open your editor and create a new JS file called utils.js—call it whatever you like, this is where we’ll house our apps JS.
- Add utils.js to the bottom of your index.html file.
<script src=“javascript/utils.js">
- Download fastclick.
- Grab the fastclick.js file and copy it over to your newly created JS folder within your project.
- Add it to the bottom of your index.html file.
<script src="javascript/fastclick.js">
- Open utils.js and call up fastclick when the body loads.
window.addEventListener('load', function() { FastClick.attach(document.body); }, false);
- If you’re using jQuery, you’d use:
$(function() { FastClick.attach(document.body); });
- More info on using fastclick can be found here.
Providing easy access to Framer views
Phew, man that’s a lot of stuff to get up and running. We’re in the home stretch though, so stay with me, and we can finally start writing some Framer code. To start, we’re going to make accessing our Views at least 4x’s easier. According to the documentation:
“Framer added an object called PSD that has references to all your views by name. So if your layer group is called iPhone, you can access it's views with PSD.iPhone or PSD["iPhone”]."
The code would look something like this:
PSD[“iPhone”].on("click", function() { PSD[“iPhone”].animate({ properties: {scale: 2.0} }) })
Thanks to Cemre Güngör and his awesome Framer Tips article, we can streamline this with a simple For loop. Thus rather than typing PSD.layerGroupName, if we add this code to our utils.js file, we can simply type layerGroupName...
for (var layerGroupName in PSD) { window[layerGroupName] = PSD[layerGroupName]; window[layerGroupName].originalFrame = PSD[layerGroupName].frame; console.log(layerGroupName) }
The above code says:
- For each layer group in our PSD
- Set the layerGroupName
- Store it’s originalFrame data or hold onto the layer groups x, y, opacity et al for later use.
- Spit out the layer group name via the JS console—this can be removed. Although, I find it to be a helpful reference when writing the animation code.
Before:
PSD[“iPhone”].animate…
After:
iPhone.animate…
Our utils.js file should now look something like this:
// Quick-fast prototype interactions window.addEventListener('load', function() { FastClick.attach(document.body); }, false); // EZ access to views for (var layerGroupName in PSD) { window[layerGroupName] = PSD[layerGroupName]; window[layerGroupName].originalFrame = PSD[layerGroupName].frame; console.log(layerGroupName) }
Wrapping things up, for the time being
Wow man, we’ve covered a LOT. Don't know about you, but I'm pooped! For sanity's sake, let's take a moment to digest and reflect on our progress. To date, we’ve:
- Introduced a few new tools
- Covered a proposed RAD flow
- Used the DevRocket Photoshop plug-in
- Setup a GhostLab site
- Briefly addressed why designers should code
- Created app icons using the Ben Markowitz method
- Used those icons and adjusted the screen to accommodate screen size
- Made the app full screen by adding it to the home screen
- Used Fastclick to make things feel quick-fast
- Provided easy access to Framer views
That’s a sizable list and will only continue to grow as we move down the line. Make note, as this is valuable information when scoping your next RAD project. Coming up, we’ll review the app design, begin animating views, create the tab bar and iterate through its items to access different screens.
A quick note
I previously mentioned explaining the default Framer code in the last post—that’s changed. Instead, let's focus on the code we’ll write and keep things a little more consumable and tasty. Check out the overview video if you’re really curious.
Check out the entire Get RAD series below!
- Get RAD, Part I: DevRocket + Prototyping
- Get RAD, Part III: Animations + Framer
