Category Archives: UI/UX

Hide the iPhone address bar (navigation bar) without appearing to move the page

Posted on by

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.

Upgraded to Retina-level graphics

Posted on by

After staring at my “low-res” graphics all afternoon I decided to fix that. The home splash image and the logo tag at the top of this site are now twice the resolution to be more compatible with Retina-type displays. The difference is quite amazing: mainly due to the text being crisp.

Adventures in @font-face

Posted on by

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.

Quick Thought: Browsing Rates of Photos vs. Videos/Music

Posted on by

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.

 

Gist: Comparing Sass (SCSS) vs LESS

Posted on by

From 2011 but probably still pretty valid: https://gist.github.com/674726

Note: I’m using Sass and SCSS interchangeably here. The Gist was comparing SCSS vs. LESS.

Quick summary:

  • Very similar. Both awesome.
  • LESS does variable scoping, Sass doesn’t
  • Sass allows selector inheritance
  • Sass’ arithmetic is more flexible
  • LESS has a kind of namespacing
  • Defining variables:
    • Sass: $name: value;
    • LESS: @name: value;
  • Sass mixins are more explicit than LESS (or LESS’ mixins are more succinct):
    • Sass:
      @mixin foo { … }
      { @include foo; }
    • LESS:
      .some-class { … }
      { .some-class; }