I am tired of getting horrible search results when trying to understand how to conceptualize 3D transforms with CSS. So I’m going to write my own help guide:
http://seqmedia.com/grokking-css-3d-transforms/
Check it out!
I am a div, 200×200!
Category Archives: design
Hide the iPhone address bar (navigation bar) without appearing to move the page
The popular trick most people apparently do to remove that iPhone address bar in mobile Safari is to scroll the window up by 1 pixel:
window.scrollTo(0, 1);
My problem with this is it shifts the canvas up thereby losing 1 pixel. It turns out you can specify a fraction of a pixel and the trick works just fine still:
Note: I added a 100ms delay to it because it made it work better. I tried listening to the window “load” event it just wasn’t as reliable.
The creator’s dilemma
I have been working on this thing for the past few weeks. It’s a nifty idea spawned from a need I had recently, and I figured I could package it as a service—you know, SaaS stuff. You input data and the system magically formats it for you. (No, I’m not talking about the idea I tried launching 2 years ago, but something in the same vain…)
Anyways, so over this holiday break I put in some time and crafted a basic working system to demonstrate my concept. Then I put it in front of a few friends who are in my target demographic. What I heard was this:
- Neat idea!
- I love the way it does the magic for you!
- I can see it used for X, Y, and Z purposes!
That’s really encouraging! Yay! Proof of concept … sort of. I also heard this:
- I wish I could import file formats A, B, and C
- I don’t get the formatting syntax
- I wish it also had features D, E, and F
Here I had spent time crafting a syntax I thought was relatively simple. Think of it like Wiki formatting: you type raw text in and then add some special characters and boom you get neatly-formatted data. But because this SaaS is a kind of visualization tool, people want me to be able to import all sorts of spreadsheet formats and other document types. That was exactly what I was trying to avoid.
Do I listen to my users who say they just want to basically have a version of their Office suite replicated in my service? If I go down that route I’m afraid I’ll end up being very feature incomplete. (Which, incidentally, is what happened with that other startup idea I had. There was no way for me to reach feature parity.) I was hoping that by forcing people to edit in a syntax not too distant from Wiki formatting and CSVs I could skip the problem of me having to create a GUI. I’ve learned my lesson about GUIs: never make a pretty GUI because it will always be feature deficient.
And yet, I know it’s not really the syntax that’s bothering my users. Really, it comes down to the same problem I before: users already did the work and they don’t want to do it again. I can totally see that point. They want to copy or import. They want tools to edit. I also know that is a hell of a lot of work.
Being a creator is hard. I’m trying to encourage simplicity in the face of complexity. But I also need to please the people that will carry my dreams forward. The art of all of this is finding the balance between what I think is a “good enough” experience that will get my users to their end goals, at the same time I need to make things easy enough that the amount of work they do is minimized.
Font Awesome quick icon name searcher
I have constantly been needing to filter the Font Awesome icons list for the icon I’m looking for, and I finally built a quick-n-dirty name searcher:
Adventures in @font-face
TIL how to work with the CSS @font-face rule. The short of it is this syntax inside your CSS file:
@font-face {
font-family: <a-remote-font-name>;
font-weight: <weight>;
font-style: <style>;
src: <source 1> format("<format 1>");
src: <source 2> format("<format 2>");
...
}
For example, trying to get the Magallanes font to work on this site seemed easy at first because I just copied the CSS that MyFonts.com had given me. But the problem is that the font-family attribute was the only thing that was set. As a result by setting the main font to “Magallanes” it wasn’t understanding what to do with the bold and italicized fonts.
The solution was to set:
@font-face {
font-family: "Magallanes";
font-weight: normal;
font-style: normal;
src: <source 1> format("<format 1>");
src: <source 2> format("<format 2>");
...
}
Then the italics one was:
@font-face {
font-family: "Magallanes";
font-weight: normal;
font-style: italic;
src: <source 1> format("<format 1>");
src: <source 2> format("<format 2>");
...
}
Then the bold-italic:
@font-face {
font-family: "Magallanes";
font-weight: bold;
font-style: italic;
src: <source 1> format("<format 1>");
src: <source 2> format("<format 2>");
...
}
And so on.
Another problem of not including the font-weight or font-style was Mobile Safari (iOS/iPhone/iPad) was not using the fonts at all.
Turning off the responsive CSS
There are some websites that work brilliantly with a responsive layout and some that don’t. I’ve been playing with this layout for a few weeks now and the responsive mode just mashes everything up. I’ve decided that for the time being to turn it off until I can get it all in working order rather than have the text walk all over itself—it just looks worse that way.
The thing about responsive design in my opinion is that it is yet another dimension of complexity to understand. It’s probably the case that a few gentle tweaks would suddenly make the whole layout work out, but it requires time I don’t have at the moment.
Nespresso Kazaar – Intesity 12!!!
I don’t usually write about coffee—and in fact I am not. But the website promoting the Nespresso Kazaar is quite the amazing display of CSS + Flash tomfoolery. The flavor is so intense that you will have a taste revelation of what intense dark awesomeness is. The website features floating on-fire coffee beans, volcanic activity, and flying Nespresso pods. Here is a screen shot of the craziness:
Magallanes font!
My new love is the Magallanes font by Daniel Hernández. I just got both the OpenType and webfont versions from MyFonts.com. Most of the headings on this site now use it.
Quick Thought: Browsing Rates of Photos vs. Videos/Music
Photos and videos are certainly crazy popular these days. It seems that everyone is posting, sharing, and commenting on them. And photo-centric startups are all the rage. While probably obvious, what’s interesting about photos is that it’s like reading: the viewer can digest the photos at their own rate. For videos (and music for that matter) the viewer is required to slow down and sync their experience with the playback of the video. In other words: photos don’t take time, videos/music take time.
I guess if you’re building a startup or project and you want the maximum amount of throughput you’d probably want to do the following:
- Focus on photos.
- Make the eye go mostly in a vertical pattern or at least a very short Z pattern (maybe no more than 1/3rd of the screen width).
- Use space to clearly demarcate one item from the next.
- Maybe use subtle colors for all information that isn’t critical to enjoying the experience of the photo, even smaller photo sizes.
- Use information layers (i.e. you have to mouse onto the photo) to reveal more information.
How to make a first experience difficult
I’ve had this one app on my iPhone installed for quite a while but I never really got to using it. Why? Because its account creation process is quite frankly onerous. I still have no idea what it really is supposed to do other than some life streaming stuff, and up front it asks me for a lot of personal information without explaining why.
This evening I sat down to actually count the number of screens that were between me and successfully completing my first actual post. I decided to use a fictitious name and email address. Let’s begin the fun!
1. Intro screen.
OK, not too bad. Good examples. OK, let me in! I’ll press Continue.
2. Choice for newbies.
I guess I’m making a new path. I can’t sign in because I’ve never signed in.
3. Type my name. Where?
Seriously, where? There are no keyboards that have popped up. There is no obvious text box. The camera button looks clickable but I’m being asked to enter my name. I’ll tap on the name.
4. Name prompts.
OK, I’ll enter my fictitious first and last name. I was thinking of Mary Poppins, but nah.
5. Tapping “Choose…”
After entering my name the screen just sat there. So I tapped “Choose…”. I don’t know what a cover is, but I’ll guess it’s my profile photo.
6. I take a picture.
I was at dinner. So a glass of water it is.
7. I don’t have a profile picture yet.
Oh. The “cover” was my background image. OK, so what do I do next? I’ll tap the Next button at the top right. I almost missed that by the way.
8. Warning! (Error message count: 1)
I’ve made my first mistake? Oh, fine, I’ll take a picture.
9. Choose picture-taking method again.
I’ll take a picture, again.
10. Take a picture.
Another water glass.
11. Still waiting for a Next.
Back to where I was. OK, let’s try hitting Next again.
12. Personal info.
So I have to enter a lot of personal info. I see a bunch of optional stuff, so I won’t enter that stuff.
13. Email required.
I probably guessed this error, so I’m not going to count it as an error. I’m in the process of creating an account it seems so email address, sure.
14. Basic info entered.
OK, email and password in there. Let’s tap Next.
15. Basic info entered. (Error message count: 2)
Yikes, I have to say what my gender is? Seriously, why. Marketing purposes?
16. Gender selected.
Fine, I’ll do it. It’s a throwaway account anyways. Poor person at Gmail.
16 1/2. Waiting…
… tick tock …
17. We’re in! Now what?
Yay! We’re all registered. Now what? There are no instructions on screen as to what I should do next. (This might be a bug.) I want to write my first post. Let me start tapping on stuff.
18. Setting a smiley.
I can do this. Neato.
18 1/2. Still confused.
I’ve made a smiley comment, but still no indication what to do next.
18 3/4. Left a comment.
I tapped around and apparently found a way to leave a note.
18 7/8. Still stuck. (App bugs: 1)
Still no indication what to do. I’m thinking I’ve really run into a bug.
19. Killed the app from the main iPhone menu.
I know about the double-tap to bring up the App Switcher and killing the app process trick. So I kill it. Then I relaunch the app.
20. Restarted the app.
Now I get a dialog box. I think I did hit a bug.
21. On the right path!
I think I’m now back on the right path (pun intended) to making my first post. I see all those little icons and they look tappable, so I’ll tap the photo one.
22. Camera app, but who is Diana?
Most of the camera controls look familiar, but who is that Diana in the bottom right. My name is Elmer Fudd.
23. Oh, it’s a filter.
No explanation that it’s photo filters, but I’ve used Instagram enough to know what each of those thumbnails does. Perhaps if Path is targeting the app-savvy users then it’s obvious these are photo filters. I get it.
24. Am I sure?
Yea yea, yes. I’ll tap the checkmark. Which is kinda weird because this is the first time I’ve really hit a symbol button that isn’t outlined like a button.
25. More info?
Wow, I guess I still have to enter more info. I’m going to guess I don’t have to enter something, but I will. There’s a ton of other options below. I did tap around to see what’s going on.
26. VICTORY!!!
Finally! FINALLY! 26 steps to post my first post. At least one bug was found, several error messages popped up, and I was assaulted with a lot of options, not obvious which ones were optional! I know making apps is hard but this workflow just feels so heavy it didn’t fill me with ease of use or fun. I felt like I had to do a careful dance to get out the simplest of things.
Bonus round: I can post as (null)
Oh, remember how I had to enter my name in the beginning? I found the menu to change my name. Apparently if you set it to nothing it turns into “(null)”.
